jQuery 选择器是对HTML元素组或单个元素进行操作，基于元素的id、类、类型、属性属性值等"查找"或选择HTML元素。它基于已经存在的CSS选择器，除此之外，它还有一些自定义的选择器。
当使用jQuery，我们都转换为jQuery使用，尽量不使用DOM
$("div").html(""); 添加html
$("div").text(""); 添加文本
$("div").width(100); 设置div的行内样式width
$("div").height(100); 设置div的行内样式width
$("div").css("color","red"); 设置div的行内样式
$("div").on("click",clickHandler); 给所有div添加点击事件侦听
$("div").off("click",clickHandler); 给所有div删除点击事件侦听
jQuery对象是一个列表，可以包含很多，也可以包含一个元素， 所有的DOM方法，jQuery对象都不能使用
一.
1.元素选择器
$("p")
2.#id 选择器
$("#id名")
3.class 选择器
$(".class名")
4.将DOM元素转换为jQuery对象
$(DOM元素)
5.将jQuery元素转换成DOM对象
var arr=Array.from($("button"));
console.log(arr);
6.将jQuery列表中指定下标的元素筛选形成新的jQuery对
$("div").eq(3).css("color","red");
$("div:eq(3)").css("color","red");
二.
* 通配符选择器
div,span 群组选择器
div span 后代选择器
div>span 子代选择器
div+span 紧邻的下一个兄弟选择器
div~span div下面的所有兄弟选择器
console.log( $("li,div"));//群组选择器
console.log($("ul div"));//后代选择器
console.log($("li>div"));//子代选择器
- 选择div标签中class是divs的所有元素
console.log($("div.divs"))
2.选择div标签后代中class是divs的元素
console.log($("div .divs"));
console.log($("div").find(".divs"));等同于$("div .divs")
3.所有div的子代有多少个元素
console.log($("div>*").length);
console.log($("div").children("span"));等同于$("div>span");
4.查找id是li0的下一个兄弟元素，这个兄弟元素可以是任意元素
$("#li0+").css("color","red");
$("#li0+*").css("color","red");
5.查找id是li0的下一个兄弟元素必须是li的，如果不是li元素就不能被选中
$("#li0+li").css("color","red");
$("#li0").next("li") 等同于$("#li0+li")
$("#li0").next() 等同于$("#li0+")
6.查找id是li0的后面所有兄弟元素
$("#li0~").css("color","red");
$("#li0~*").css("color","red");
7.查找id是li0的后面所有li标签的兄弟元素
$("#li0~li").css("color","red");
$("#li0~span").css("color","red");
$("#li0").nextAll("li") 等同于$("#li0~li")
8.从id是li0的元素开始向下选择兄弟元素到span元素之前为止
$("#li0").nextUntil("span").css("color","red");
9.获取id是li0的上一个兄弟元素是li元素的
$("#li0").prev("li").css("color","red");
10.获取id是li0的向上所有兄弟元素是li元素的
$("#li0").prevAll("li").css("color","red");
11.从id是li0的元素开始向上选择兄弟元素到span元素之前为止
$("#li0").prevUntil("span").css("color","red");
12.根据id是li0的元素所有的上下的兄弟元素中是span
$("#li0").siblings("span").css("color","red");
三.属性选择器
1.选择有type属性的元素
$("[type]")
2.选择有type和name属性的元素
$("[type][name]").next("label").css("color","red");
3.选择某个属性是某个值的元素
$("[abc=3]").css("color","red");
4.选择属性是hobby(hobby是自定义名字)并且值是以a字母开始的元素
$("[hobby^=a]").css("color","red");
5.选择属性是hobby并且值是以e字母结束的元素
$("[hobby$=e]").css("color","red");
6.选择属性是hobby但是值不等于ade的所有元素，如果属性没有也会被选中
$("div[hobby!=ade]").css("color","red");
7.选择属性是toggle，并且这个属性的值是book起头，后面紧跟-的值
$("[toggle|=book]").css("color","red");
8.选择属性是class，属性值的字符串中含有div3字符的，可以不是一个独立的单词
$("[class*=div3]").css("color","red");
原生js中变量和函数名都必须使用驼峰式命名,因为js是区分大小写html和css是不区分大小写,所以在html和css中,自定义的名称无法使用驼峰式命名,使用-连接两个单词php中变量名区分大小写，所以使用驼峰式命名，函数名不区分大小写，单词直接使用_连接。
四.过滤器
过滤器 基于选择器的基础上，进行精细的过滤
1.将所有li放在一个列表中，查找它的第一个元素
$("li:first").css("color","red");
$("li").first().css("color","red");与上面相同
2.将li是父元素的第一个子元素是li的选中
$("li:first-child").css("color","red");
$("li:nth-child(1)").css("color","red");
3.li是不是它父元素中li类型列表的第一个子元素
$("li:first-of-type").css("color","red");
$("li:nth-of-type(1)").css("color","red");
4.与上面相同，但是指最后一个
$("li:last").css("color","red");
$("li").last().css("color","red");
$("li:last-child").css("color","red");
$("li:last-of-type").css("color","red");
5.将所有的li放在一个列表中，并且获取偶数项，这个even的偶数是从0开始
$("li:even").css("color","red");
6.将li父元素中li类型元素的列表中是偶数项的选中，这个even的偶数也是从1开始
$("li:nth-of-type(even)").css("color","red");
7.将所有的li放在一个列表中，并且获取奇数项，这个odd的奇数是从0开始
$("li:odd").css("color","red");
8.将li父元素中li类型元素的列表中是奇数项的选中，这个odd的奇数也是从0开始
$("li:nth-of-type(odd)").css("color","red");
9.大于div列表的第三项的其他元素
$("div:gt(3)").css("color","red");
10.小于div列表的第三项的其他元素
$("div:lt(3)").css("color","red");
11.slice，和数组slice一样
$("div").slice(2,4).css("color","red");
12.div列表中不是class为divs的元素
$("div:not(.divs)").css("color","red");
13.div列表中没有class属性的元素
$("div:not([class])").css("color","red");
$("div").not(".divs")
14.所有h1-h6的元素
$(":header");
15.所有正在播放的动画元素
$(":animated");
16.当前汇聚焦距属性
$(":focus");
17.选择没有子元素或者子节点的div
console.log( $("div:empty"));
18.选择有子元素的或者子节点的class是divs的元素
console.log($(".divs:parent"));
19.div的后代元素中包含3子节点的元素,只能是内容不能是元素
console.log($("div:contains(3)"));
20.查找包含选择器元素的容器
console.log($(":has(.divs)"))
console.log($(":has(#div0)"))
console.log($("div").has("#div0"))
21.查找当前.divs元素的父容器
console.log($(".divs").parent());
22.查找当前.divs元素的父元素到html之前的所有父容器
console.log($(".divs").parentsUntil("html"));
23.隐藏的
console.log($(":hidden"));
所有不可见的元素,还包括display:none，像visibility: hidden和height:0都不属于隐藏的
24.所有可以显示的元素
console.log($(":visible"));
25.该元素是父元素唯一子元素，独生子女
console.log( $("div:only-child"));
26.该元素在它的父容器中的同种类型仅此一个
console.log($("div:only-of-type"));
五.两个特殊方法
is(),hasClass();
他们都是返回一个布尔值，后面不能继续连缀
1.判断div列表中是否由.divs选择器的元素，有就返回true,没有就返回false
console.log($("div").is(".divs"));
console.log($("div").is("#div0"));
2.判断div列表中是否有class是divs的选择器，有就返回true 反之返false
console.log($("div").hasClass("divs"));
