jQuery选择器

jQuery基本选择器

名称 用法 描述
ID选择器 $("#id") 获取指定ID的元素
类选择器 $(".class") 获取同一类class元素
标签选择器 $("div") 获取同一类标签的所有元素
并集选择器 $("div,p,li") 使用逗号分隔,只要符合条件之一就可
交集选择器 $("div.redClass") 获取class为redClass的div元素
  • 总结:跟css的选择器的用法一模一样

jQuery层级选择器

名称 用法 描述
子代选择器 $("ul>li") 使用>号,获得儿子层级的元素,注意,并不会获取孙子层级的元素
后代选择器 $("ul li") 使用空格,代表后代的元素,获取ul下的所有元素,包括孙子等
  • 总结:跟css的选择器的用法一模一样

jQuery过滤选择器

  • 这类选择器都带有冒号:
名称 用法 描述
:eq(index) $("li:eq(2)") 获取到li元素中索引号为2的元素,索引号index从0开始
:odd $("li:odd") 获取到li元素中索引号为奇数的元素
:even $("li:even") 获取到li元素中索引号为偶数的元素

jQuery筛选选择器

  • 筛选选择器的功能与过滤选择器有点类似,但是用法不一样,筛选选择器主要是方法。
名称 用法 描述
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() 找上一个兄弟

你可能感兴趣的:(jQuery选择器)