一、基本过滤选择器 |
选择器 | 参数 |
---|---|
:first | 选取第一个元素 .。$(‘li:first’); 获取匹配的第一个li元素 |
:last | 选取最后一个元素 $(“div:last”).css(“color”,“red”); |
:not | 除去指定的选择器外的元素 $(“div:not”).css(“color”,“red”); |
:even | 选取索引号是偶数的元素 $(“div:even”).css(“color”,“red”); |
:odd | 选取索引号是奇数的元素 $(‘div:odd’).css(“color”,“red”); |
:eq(index) | 选取第index个元素 $(‘div:eq(5)’).css(“color”,“red”); |
:gt(index) | 选取索引号大于index的元素 $(‘div:gt(8)’).css(“color”,“red”); |
: lt(index ) | 选取索引号小于index的元素 $ (‘div:lt(3)’).css(“color”,“red”); |
二、属性过滤选择器 |
选择器 | 参数 |
---|---|
[attribute] | 选取拥有此属性的元素 $ (‘div:[attribute]’).css(‘background-color’,‘red’); |
[attribute=value] | 选取属性值为value的元素 $ (‘div:[attribute=value]’) |
[attribute!=value] | 选取属性值不为value的元素 $(‘div:[attribute!=value]’) |
[attribute^=value] | 选取属性值以value开始的元素 $ (‘div:[attribute^=value]’) |
[attribute$=value] | 选取属性值以value结尾的元素 $ (‘div:[attribute$=value]’) |
[attribute*=value] | 选取属性值包含value的元素 $(‘div:[attribute*=value]’) |
三、内容过滤选择器 |
选择器 | 参数 |
---|---|
:contains | 选取包含文本的text的元素$(“div:contains(‘John’)”).css(“color”,“red”); |
:has(selector) | 选取含有选择器所匹配的元素 |
:empty | 选取不包含子元素的元素 |
:parent | 选取包含子元素的元素 |
四、子元素过滤选择器 |
选择器 | 参数 |
---|---|
:nth-child(index) | 选取每个父节点下第index个元素、偶数元素或奇数元素。div :nth-child(index)选取div父节点下第index个元素、偶数元素或奇数元素。div:nth-child(index)选取第index个元素 |
:first-child | 选取每个父元素下的第一个子元素.。 $(“ul li:first-child”)在每个 ul 中查找第一个 li |
:last-child | 选取每个父元素下的最后一个子元素 |
:only-child | 选取只有一个子元素的元素 |
:first-child | ‘:first’ 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素 |
:first-of-type | 选择所有相同的元素名称的第一个兄弟元素。在文档树中,相同的父元素并且在其他相同的元素名称之前。 |
:nth-of-type() | 其所有兄弟span元素中的第几个元素。 |
:nth-last-child | 计数从最后一个元素开始到第一个查找选取 |
:enabled | 选取所有可用的元素 |
disabled | 选取所有不可用的元素 |
:checked | 选取所有被选中的元素(一般为(HTML中)RadioButton、CheckBox标记); |
:selected | 选取被选中的选项元素(select下拉列表标记中的option=select) |
五、可见性过滤选择器(两个) |
选择器 | 参数 |
---|---|
:hidden | 匹配所有不可见元素,或者type为hidden的元素 |
:visibal | 匹配所有的可见元素 |