在原有选择器匹配的元素中进一步进行过滤的选择器
?* 基本
?* 内容
?* 可见性
?* 属性
需求
1. 选择第一个div
??2. 选择最后一个class为box的元素
??3. 选择所有class属性不为box的div
??4. 选择第二个和第三个li元素
??5. 选择内容为BBBBB的li
??6. 选择隐藏的li
??7. 选择有title属性的li元素
??8. 选择所有属性title为hello的li元素
<div id="div1" class="box">class为box的div1</div><div id="div2" class="box">class为box的div2</div><div id="div3">div3</div><span class="box">class为box的span</span><br/><ul> ?<li>AAAAA</li> ?<li title="hello">BBBBB</li> ?<li class="box">CCCCC</li> ?<li title="hello">DDDDDD</li> ?<li title="two">BBBBB</li> ?<li style="display:none">我本来是隐藏的</li></ul>
实现
$("div:first").css("background","blue") ???// 2. 选择最后一个class为box的元素 ???$("div:last").css("background","blue") ???// 3. 选择所有class属性不为box的div ???$("div:not(.box)").css("background","blue") ???????// 4. 选择第二个和第三个li元素 ???$("li:gt(0):lt(2)").css("background","blue") 不是一起的,是从左到右的,选完一个得到的值从新划基准去选择 ???// 5. 选择内容为BBBBB的li ???$("li:contains(‘BBBBB‘)").css("background","blue") ???// 6. 选择隐藏的li ???console.log($("li:hidden").length,$("li:hidden")[0]) ???// 7. 选择有title属性的li元素 ???$("li[title]").css("background","blue") ???// 8. 选择所有属性title为hello的li元素 ???$("li[title=‘hello‘]").css("background","blue")
jQuery之过滤选择器
原文地址:https://www.cnblogs.com/caicaihong/p/9371118.html