基本选择器
名称 | 语法构成 | 描述 | 返回值 | 示例 |
---|---|---|---|---|
标签选择器 | element | 匹配指定的标签元素 | 元素集合 | $(“h2”)选取所有h2元素 |
类选择器 | .class | 匹配指定的class元素 | 元素集合 | $(".title)选取以class为title的元素 |
id选择器 | #id | 匹配指定的id元素 | 元素集合 | $("#title)选取以id为title的元素 |
并集选择器 | selector1,selector2,…selectorN | 将每个选择器匹配的元素合并后一起使用 | 元素集合 | $(div,p,.title)选取以div,p和class为title的元素 |
全局选择器 | * | 匹配所有元素 | 元素集合 | $("*")选取所有元素 |
层次选择器
名称 | 语法构成 | 描述 | 返回值 | 示例 |
---|---|---|---|---|
后代选择器 | root offspring | 选取root元素里的所有offspring(后代)元素) | 元素集合 | $("#menu span")选取#menu下所有的元素 |
子选择器 | parent > child | 选取parent元素下的child(子)元素 | 元素集合 | $("#menu > span")选取#menu下的子元素 |
相邻元素选择器 | prev + next | 选取紧邻prev元素之后的next元素 | 元素集合 | $(“h2 + dl”)选取紧邻h2元素之后的同辈元素
|
同辈元素选择器 | prev~sibling | 选取prev元素之后的所有sibling(同辈)元素 | 元素集合 | $(“h2 + dl”)选取h2元素之后所有的同辈元素
|
属性选择器
语法 | 描述 | 返回值 | 示例 |
---|---|---|---|
[attribute] | 选取包含指定属性的元素 | 元素集合 | $("[href]")选取含有href属性的元素 |
[attribute = value] | 选取等于指定属性是某个特定值的元素 | 元素集合 | $("[href = ‘#’]")选取href属性值为‘#’的元素 |
[attribute != value] | 选取等于指定属性是某个特定值的元素 | 元素集合 | $("[href != ‘#’]")选取href属性值不为‘#’的元素 |
[attribute ^= value] | 选取等于指定属性是某个特定值开始的元素 | 元素集合 | $("[href ^= ‘en’]")选取href属性值以en开头的元素 |
[attribute $= value] | 选取等于指定属性是某个特定值结尾的元素 | 元素集合 | $("[href $= ‘.jpg’]")选取href属性值以.jpg结尾的元素 |
[attribute *= value] | 选取等于指定属性值包含某些值的元素 | 元素集合 | $("[href *= ‘.txt’]")选取href属性值中含有txt的元素 |
基本过滤选择器
语法 | 描述 | 返回值 | 示例 |
---|---|---|---|
:first | 选取第一个元素 | 单个元素 | $(“li:first”)选取所有li元素中的第一个li元素 |
:last | 选取最后一个元素 | 单个元素 | $(“li:last”)选取所有li元素中的最后一个li元素 |
:not(selector) | 选取去除所有与给定选择器匹配的元素 | 集合元素 | $("li:not(.three)"选取class不是three的元素 |
:even | 选取索引是偶数的所有元素(index从0开始) | 集合元素 | $(“li:even”)选取索引是偶数的所有li元素 |
:odd | 选取索引是奇数的所有元素(index从0开始) | 集合元素 | $(“li:odd”)选取索引是奇数的所有li元素 |
:eq(index) | 选取索引等于index的元素(index从0开始) | 单个元素 | $(“li:eq(1)”)选取索引等于1的li元素 |
:gt(index) | 选取索引大于index的元素(index从0开始) | 集合元素 | $(“li:gt(1)”)选取索引大于1的li元素 (不包括1) |
:lt(index) | 选取索引小于index的元素(index从0开始) | 集合元素 | $(“li:lt(1)”)选取索引小于1的li元素(不包括1) |
:header | 选取所有标题元素(如h1-h6) | 集合元素 | $(“li:header”)选取网页中的所有标题元素 |
:focus | 选取当前获取焦点的元素 | 集合元素 | $(“li:focus”)选取当前获取焦点的元素 |
:animated | 选择所有动画元素 | 集合元素 | $(“li:animated”)选取当前所有动画元素 |
可见性过滤选择器
选择器 | 描述 | 返回值 | 示例 |
---|---|---|---|
:visible | 选取所有可见的元素 | 集合元素 | $(":visible")选取所有可见的元素 |
:hidden | 选取所有隐藏的元素 | 集合元素 | $(":hidden")选取所有隐藏的元素 |