1、回顾CSS选择器
基本选择器:标签选择器、ID选择器、类名选择器、多类名选择器、通配符选择器
复杂选择器:子代选择器、后代选择器、交集选择器、并集选择器
伪类选择器:a:link a :hover a:active a:visited
2、什么是jQuery选择器?
1、jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
2、jQuery选择器是jQuery为我们提供的一组方法,让我们更加方便的获取到页面中的元素。注意:jQuery选择器返回的是jQuery对象。
3、jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。
4、jQuery 中所有选择器都以美元符号开头:$()。
3、划分
① 基本选择器
名称 |
用法 |
描述 |
ID选择器 |
$(“#id”); |
获取指定ID的元素 |
类名选择器 |
$(“.class”); |
获取同一类class的元素 |
标签选择器 |
$(“div”); |
获取同一类标签的所有元素 |
并集选择器 |
$(“div,p,li”); |
使用逗号分隔,只要符合条件之一就可。获取所有的div、p、li元素 |
交集选择器(标签指定式选择器) |
$(“div.redClass”); |
注意选择器1和选择器2之间没有空格,class为redClass的div元素,注意区分后代选择器。 |
② 层级选择器
名称 |
用法 |
描述 |
子代选择器 |
$(“ul>li”); |
使用>号,获取儿子层级的元素,注意,并不会获取孙子层级的元素 |
后代选择器 |
$(“ul li”); |
使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等 |
③ 过滤选择器
|
用法 |
描述 |
:eq(index) |
$(“li:eq(2)”).css(“color”, ”red”); |
获取到的li元素中,选择索引号为2的元素,索引号index从0开始。 |
:odd |
$(“li:odd”).css(“color”, ”red”); |
获取到的li元素中,选择索引号为奇数的元素 |
:even |
$(“li:even”).css(“color”, ”red”); |
获取到的li元素中,选择索引号为偶数的元素 |
④ 筛选选择器(方法)
|
用法 |
说明 |
children(selector) |
$(“ul”).children(“li”) |
相当于$(“ul>li”),子类选择器 |
find(selector) |
$(“ul”).find(“li”); |
相当于$(“ul li”),后代选择器 |
siblings(selector)
|
$(“#first”).siblings(“li”); |
查找兄弟节点,不包括自己本身。 |
parent() |
$(“#first”).parent(); |
查找父亲 |
eq(index) |
$(“li”).eq(2); |
相当于$(“li:eq(2)”),index从0开始 |
next() |
$(“li”).next() |
找下一个兄弟 |
prev() |
$(“li”).prev() |
找上一次兄弟 |
Index() |
$(“li”).index() |
1、获取当前的位置(索引) 2、返回指定元素相对于其他同级元素指定元素的index位置 |
Not() |
$(“li”).not(“.li2”) |
返回指定元素之外的元素 |