web前端学习day_04:jQuery框架

jQuery框架

• 作用:给页面添加动态效果(和js一样),目的是为了提高原生JavaScript代码的开发效率
• jQuery就是一个通过js语言所以写的框架
• 由于jQuery框架就是js语言所写,引入框架和引入普通的js文件一样
• js对象的方法和jq对象的方法不能混着调用,各自调用各自独有的方法和属性

1. js对象和jq对象互相转换

• js转jq: var jq = $(js);
• jq转js: var js = jq[0]; jq本质上就是一个数组里面装的是js对象

2. jq中的选择器

1. 基础选择器 写法和css一样

• 标签名选择器 $(“div”)
• id选择器 $("#id")
• class选择器 $(".class")
• 分组选择器 $(“div,#id,.class”)
• 任意元素选择器 $("*")

2. 层级选择器

• $(“div span”) 匹配div里面所有的span(子孙后代选择器)
• $(“div>span”) 匹配div里面的span子元素(子元素选择器)
• $(“div+span”) 匹配div的弟弟span
• $(“div~span”) 匹配div的弟弟们span
• 层级相关的方法:
  1. $("#abc").prev(“span”) 匹配id为abc元素的哥哥元素
  2. $("#abc").prevAll(“div”) 匹配id为abc元素的哥哥们元素
  3. $("#abc").next(“div”) 匹配id为abc元素的弟弟元素
  4. $("#abc").nextAll(“div”) 匹配id为abc元素的弟弟们元素
  5. $("#abc").siblings(“div”) 匹配id为abc元素的兄弟元素
  6. $("#abc").parent() 匹配id为abc元素的父元素
  7. $("#abc").children(“div”) 匹配id为abc元素的子元素们

3. 过滤选择器

• $(“div:first”) 匹配第一个div
• $(“div:last”) 匹配最后一个div
• $(“div:eq(n)”) 匹配下标为n的div n从0开始
• $(“div:lt(n)”) 匹配下标小于n的div
• $(“div:gt(n)”) 匹配下标大于n的div
• $(“div:even”) 匹配下标为偶数的div
• $(“div:odd”) 匹配下标为奇数的div
• $(“div:not(.abc)”) 匹配class值不等于abc的div

4. 内容选择器

• div:has§
• div:empty
• div:parent
• div:contains(‘xxx’)

5. 可见选择器

• div:visible
• div:hidden
• .show()
• .hide()
• .toggle()

6. 属性选择器

• div[id]
• div[xxx=‘xxx’]
• div[xxx!=‘xxx’]

7. 子元素选择器

• div:first-child
• div:last-child
• div:nth-child(n) n从1开始

8. 表单选择器

• :input
• :password
• :radio
• :checkbox
• :checked
• :selected

3. 修改页面元素相关

1. 创建及添加元素

• 创建: var d = $(“
  abc
  ”);
• 添加到某个元素里面的最后面: 元素对象.append(新元素);
• 添加到某个元素里面的最前面: 元素对象.prepend(新元素);
• 插入到某个元素的前面: 元素对象.before(新元素);
• 插入到某个元素的后面: 元素对象.after(新元素);

2. 删除元素

• 元素对象.remove();

3. 获取和修改元素的文本内容

• 元素对象.text(“xxx”) 修改 等效 innerText=“xxx”;
• 元素对象.text() 获取 等效 innerText

4. 获取和修改元素的html内容

• 元素对象.html(“

  xxx

  ”) 等效 innerHTML=“

  xxx

  ”;
• 元素对象.html() 获取 等效 innerHTML

5. 获取或修改元素的css样式

• 元素对象.css(“样式名”,“值”) 修改
• 元素对象.css(“样式名”) 获取
• 样式批量赋值: 元素对象.css({“color”:“red”,“background-color”:“blue”})

6. 获取或修改元素的属性 attribute属性

• 元素对象.attr(“class”,“xxx”); 修改
• 元素对象.attr(“class”) 获取

4. 页面失去焦点事件

• 当页面从浏览状态进入到其它页面的时候属于失去焦点事件
• onblur = function(){}

5. 页面获取焦点事件

• 每次从浏览其它页面回到此页面的时候会触发获取焦点事件
• onfocus = function(){}

6. hover事件

• 是将鼠标移入和移出事件合并到了一起

7. 事件模拟

• 可以通过代码模拟事件触发
• 元素对象.trigger(“事件名称”)

8.动画相关

• 元素对象.hide(时间,方法) 隐藏
• 元素对象.show(时间,方法) 显示
• 元素对象.fadeOut(时间,方法) 淡出
• 元素对象.fadeIn(时间,方法) 淡入
• 元素对象.slideUp(时间,方法) 上滑
• 元素对象.slideDown(时间,方法) 下滑
• 元素对象.animate(样式代码,时间) 自定义