一、种类
1、普通选择器:通过css选择器选择元素,也就是根据各种条件选择元素。
2、过滤选择器:在选择器选择后,再根据需求再次过滤出需要的元素。-====================================
选择器分类:基本选择器、层次选择器、属性选择器
过滤器分类: 基本过滤选择器、可见性过滤选择器、内容过滤器、属性过滤器(即前面的属性选择器)、子元素过滤器、表单过滤器、表单对象过滤器
二、
1、基本选择器
1)标签选择器: $("标签名"), 例:$("div") 选择所有的div标签
2)类选择器: $(".class") .例:$(".a") 选择所有class为a的标签
3)并集选择器: $(".class,#id,标签名"),可以加入多个选择器,只要符合其中一种就被选择,每个选择器之间用“ ,”隔开,例:$("#a,.b,div") 同时选择id为a 和class为b和所有的div元素 。
4)全局选择器:$("*"),选择所有元素
2、层次选择器(通过DOM元素之间的层次关系来选取元素)
1)后代选择器:$("祖先元素 后代元素") ,例:$("#a div") 选择id为a下的所有div元素,注意是后代元素,不仅仅是子元素包括孙子辈,曾孙子辈等等都是后代。
2)子选择器:$("父级元素>子元素"), 例:$("#a>div") 选择id为a的元素下的所有div子元素。
3)相邻元素选择器:$("元素+兄弟元素"),例:$("#a+.b") 选择id为a的元素紧邻的class为b的兄弟元素,注意只选择一个元素
4)同辈元素选择器:$("元素~兄弟元素"),例 : $("#a~.b") 选择id为a的元素后的所有class为b的兄弟元素,注意这里选择的是所有兄弟元素。
3.属性选择器(通过标签的属性来选择元素)
1)属性选择器:$("[属性]"),例:$("[href]") 选择包含href属性的所有元素,注意,属性必须是行内属性,行外添加属性不识别。
2)属性值选择器:$("[属性=属性值]"),例:$("[href=’sss']"),选择href值为sss的元素
3)属性不等值选择器:$("[属性!=属性值]"),例:$("[href!='#']"),选择href属性值不等于 # 的所有元素
4)属性起始值选择器:$("[属性^=属性值]"),例:$("[href^=‘http’]"),选择所有href属性值以http开头的元素。
5)属性结束值选择器:$("[属性$=属性值]"),例:$("[href$=‘ss’]"),选择所有href属性值以 ss结尾的元素。
6)属性所有值选择器:$("[属性*=属性值]"),例:$("[href$='ss']"),选择所有href属性值包含 ss 值的元素。
注意:有特殊符号的值比如方法 b() 比如地址 “href='https://www.baidu.com/” 需要加单引号例:
$("[onclick='bb()]'") 或 $("[href='https://www.baidu.com/']") 当然不加单引号也可以使用的值加入单引号的写法也不出错,所以不熟练的情况下可以所有的属性值都加单引号。
三、过滤器
过滤器用法 选择器:过滤器 例 $("li:first") 选择li标签,然后过滤选择第一个元素,最终结果是选择第一个li标签
1、基本过滤器
1):first 选取第一个元素,例:$("li:first")
2):last 选取最后一个元素,
3):not(选择器) 选取除去所有与给定选择器匹配的元素,例:$("li:not(aa)"),选择所有class不为 aa的li元素。
4):even 选取索引是偶数的元素,索引从0开始
5):odd 选取索引是奇数的元素,索引从0开始
6):eq(index) 选取索引等于index的元素,索引从0开始
7):gt(index) 选取索引大于index的元素,索引从0开始
8):lt(index) 选取索引小于index的元素,索引从0开始
9):header 选取所有的标题元素 h1~h6
10):focus 选取当前获取焦点的元素
11):animated,选取当前所有动画元素,只能选择使用jQuery方法 元素.animate() 设置的动画元素.
2、可见性过滤器
1):visibe 选取所有可见的元素
2):hidden 选取所有隐藏的元素
jQuery选择器特殊符号转义
id="a#b" 或 class="b[0]" 如果选择器选择元素时有类似于这两种有特殊符号的值那么需要在特殊符号前加入“\\” ,"#a\\#b" 和 “b\\[0\\]”
jQuery选择器中的空格
选择器的写法规范很严谨,空格多一个或少一个都会影响选择器的效果
var $t_a = $(".test :hidden"); //带空格的jQuery选择器,取class为“test”的元素内部的隐藏元素
var $t_b = $(".test:hidden"); //不带空格的jQuery选择器 ,选取隐藏的class为“test”的元素