一、基本选择器
基本选择器是jQuery中用的最多的一种选择器,也是最简单的
1. 标签选择器
eg:$("p"):选择当前页面中所有的P元素
注意:不要在页面中添加过多的id,对浏览器的搜索引擎不友好,可用class代替
2. 类选择器
eg:$(".test")选择当前页面中所有class属性值为test的元素
3. id选择器
eg: $("#test1"):选取当前页面中id为test1的元素
4. 通配符选择器
eg:$("*"):匹配当前页面中所有的元素
5. 并集选择器
eg:$("p,.test"):选择的是当前页面中所有的p元素和当前页面中所有class属性值为test的元素
二、层次选择器
用于元素之间有层次关系,后代同辈等
- 后代选择器
eg: $(".textRight p"):选取class为textRight后代的所有p元素,包括子辈,孙子后代
注意:.textRight 和 p之间有一个空格 - 子选择器
eg: $(".textRight>p"):选取的是class为textRight直接下一代元素,只包括子辈元素 - 相邻元素选择器
eg: $(“h1+p”):选取相邻h1元素之后的同辈元素p - 同辈元素选择器
eg: $(“h1~p”):选取h1元素之后的所有同辈元素p
三、属性选择器
属性选择器通过HTML元素的属性来选择元素
格式:标签名[属性名]
- $(“a[class]”):选取a标签下有class属性的元素
- $(“a[class=‘hot’]”):选取a标签class属性值等于hot的元素
- $(“a[class!=‘hot’]”):选取a标签class属性值不等于hot的元素
- $(“a[href^=‘www’]”):选取a标签href属性值以www开头的元素
- =‘html’]"):选取a标签href属性值以html结尾的元素
四、过滤选择器
通过特定的过滤规则来筛选出所需的元素
分为:基本过滤选择器、可见性过滤选择器、内容过滤选择器、子元素过滤选择器、表单对象过滤选择器
- 基本过滤选择器
① :eq(index)
选取索引等于index的元素(index从0开始)
eg:li:eq(1):获取的是第二个li元素
② :gt(index)
选取索引大于index的元素(index从0开始)
eg: li:gt(index):选取大于index的元素,不包括index
③ :lt(index)
选取索引小于index的元素(index从0开始)
eg:li:lt(index):选取小于index的元素,不包括index
④ :header
获取所有的h标签
⑤ :even
获取偶数行
eg:li:even
⑥ :odd
获取奇数行
⑦ :first
获取第一个元素
eg:li:first:获取第一个li元素
⑧ :last
eg:li:last:获取最后一个Li元素
⑨ :focus
选取当前获取焦点的元素
eg:(":animated" )选取当前所有动画元素 - 可见性过滤选择器
通过元素显示状态来选取元素
① :visible:选择所有可见P元素
eg:(“p:hidden”)选择所有被隐藏的P元素 - 内容过滤选择器
内容过滤选择器的过滤规则主要体现在它所包含的子元
素和文本内容上
① :contains(text):选取的是包含指定text的元素
② :empty:选取空元素
③ :parent:选取包含文本元素或者子元素的元素(不为空)等同于:not(:empty) - 子元素过滤选择器
根据子元素顺序来获取,作用在子元素上
① :nth-child(序号):根据序号来选择,序号是从1开始,序号可以为odd,even,也可以为表达式,例如:nth-child(3*n+1)
② :first-child():选取的是某个元素下面的第一个子元素
③ :last-child():选取的是某个元素下面的最后一个子元素
④ :only-child():选取的是某个元素下面只有一个子元素,选中该子元素 - 表单对象过滤选择器
① :input
eg:(":text") 选取所有 type=“text” 的 元素
③ :password
eg:(":radio") 选取所有 type=“radio” 的 元素
⑤ :checkbox
eg:(":submit") 选取所有 type=“submit” 的 元素
⑦ :reset
eg:(":button") 选取所有 type=“button” 的 元素
⑨ :image
eg:(":file") 选取所有 type=“file” 的 元素
注意:
- p .p1获取的是p标签下面所有class值为p1的元素(p和.p1之间有空格)
- p.p1获取的是class值为p1的p标签