内容介绍

1.Jquery的选择器
2.Jquery的方法
     操作标签的文本和value属性值
     操作标签的样式
     操作标签的属性
     对某些标签插入指定标签的方法

jquery(jq)

概述

jquery：是javascript的一套框架
作用：大大简化javascript的代码量 倡导写更少的代码，做更多的事情
框架：对原有javascript的功能代码进行封装，对外提供更加简单的语法方式实现同样的功能，大大提高开发的效率

了解：jquery框架封装javascript的原理

jquery的使用

条件：需要引入jquery框架文件 jquery框架文件就是对javascript功能代码的二次封装 简称js库

js库的版本：
1.x：兼容IE6/7/8，使用最为广泛的 企业应用
2.x：不兼容IE6/7/8，很少有人使用
3.x：不兼容IE6/7/8，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的
开发版本：命名为jQuery-x.x.x.js   好处：代码格式好 便于看源码 但是体积大
生产版本：命名为jQuery-x.x.x.min.js  好处：体积小 代码格式不好

快速入门

1 导入js库（jquery-3.3.1.min.js）
2 编写页面加载事件测试是否引入成功

js和jq的页面加载事件区别面试题

js页面加载事件：只执行一次,如果有多个是按照页面从上到下的加载顺序后面的覆盖前面的
jq页面加载事件：有多少个页面加载方法，就执行多少个，执行顺序是按照页面的从上到下的顺序
Ps: jquery3.0以上是随机执行

js的dom对象和jq的对象进行互转(了解)

js的dom对象有自己的方法和属性   jquery对象也有自己的方法和属性
特点：jquery对象不能使用js的dom对象方法和属性  js的dom对象也不能使用jquery的方法和属性
解决： 只要jquery对象转成js的dom对象 就可以使用js的方法和属性
           只要js的dom对象转成jquery对象 就可以使用jq的方法和属性
jquery转换成js的dom对象：       $("元素标签")[0]
js的dom对象转换成jquery对象：$(js的dom对象)

jQuery操作标签的文本和value值方法(掌握）

val() html() text()

val([value]):    获得/设置元素value属性相应的值  
html([value]): 获得/设置元素的标签体内容  
text([value]):  获得/设置元素的文本内容

jq的选择器必掌握

目的：使用选择器的目的最终都是为了获取标签

1 基本选择器

ID选择器        $("#id名称")   需要html标签上有id属性
类选择器        $(".class名称") 需要html标签上有class属性
元素选择器     $("标签元素名称")

2 层级选择器

元素1 元素2      匹配元素1下面的所有元素2(包含子子孙孙)
元素1>元素2     匹配元素1下面的所有元素2（只包含子元素）

3 基本过滤选择器

元素:first         根据过滤获取第一个元素
元素:last          根据过滤获取最后一个元素
元素:even        根据过滤获取偶数索引的元素
元素:odd         根据过滤获取奇数索引的元素
元素:not(元素) 根据过滤获取不包含指定元素的所有元素
元素:eq(索引)   根据过滤获取索引相等的元素
元素:gt(索引)    根据过滤获取大于索引的元素
元素:lt(索引)      根据过滤获取小于索引的元素
:header            根据过滤获取标题 （hn标签） 

4 属性选择器

$("元素[属性名]")            根据标签元素的属性名来匹配
$("元素[属性名=值]")      根据标签元素的属性名的值来匹配
$("元素[属性名=值][...]")  包含多个属性条件的选择器 

5 表单属性选择器

元素:enabled        获取所有可用的标签元素
元素:disabled       获取所有不可用的标签元素
元素:checked        获取默认被选中的input标签元素
元素:selected        获取默认被选中的select标签元素

jquery操作标签样式掌握

css(name,[value])         获取/设置指定的CSS样式
addClass(value)           给指定的标签添加样式
removeClass(value)     删除指定的样式  
toggleClass(value)       切换样式，如果没有样式，则添加，如果有样式，则删除

jQuery对标签属性进行操作掌握

attr()方法或prop()方法
ps：建议1.6以前可以用attr来操作属性 1.6以后可以用prop来操作属性

jquery指定插入标签的方法掌握

append(element)             添加成最后一个子元素，两者之间是父子关系
prepend(element)            添加成第一个子元素，两者之间是父子关系
before(element)               添加到当前元素的前面，两者之间是兄弟关系
after(element)                  添加到当前元素的后面，两者之间是兄弟关系
remove()                          删除元素
empty()                            清空元素的所有子元素

jquery的方法整理

1：jquery操作标签的文本和value值方法
html([值]):  <div><a href=#>文本</a></div>
text([值]):   <div>文本</div>
val([值]):     <input type="text" name="username" value="abcd/1234"/> value值：abcd/1234

2：jquery操作标签的样式方法
css(属性名,属性值)     获取/设置指定的CSS样式 
addClass(value)        给指定的标签添加样式
removeClass(value)  删除指定的样式	 
toggleClass(value)    切换样式，如果没有样式，则添加，如果有样式，则删除

3：jquery操作标签属性的方法
attr("属性名","属性值")方法或prop("属性名","属性值")方法
ps：建议1.6以前可以用attr来操作属性 1.6以后可以用prop来操作属性

4：jquery操作标签添加指定标签
append(element)      添加成最后一个子元素，两者之间是父子关系
prepend(element)     添加成第一个子元素，两者之间是父子关系
before(element)        添加到当前元素的前面，两者之间是兄弟关系
after(element)           添加到当前元素的后面，两者之间是兄弟关系
remove()                    删除元素
empty()                      清空元素的所有子元素

案例

案例1：隔行换色
案例2：复选框的全选全不选操作
案例3：QQ表情发表案例