jQuery过滤选择器

2021-11-14 21:03:40 阅读：175 来源： 互联网

标签：jQuery box 元素 li 过滤 css background 选择器 red

过滤选择器

在原有选择器匹配的元素中进一步进行过滤的选择器下面根据实例来学习：

<body> 
<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>
</body>

1. 选择第一个div

$('div:first').css('background', 'red')

结果：

2. 选择最后一个class为box的元素 $('.box:last').css('background', 'red')

3. 选择所有class属性不为box的div

$('div:not(.box)').css('background', 'red')  //没有class属性也可以

4. 选择第二个和第三个li元素 :gt(0)表示index大于0的元素，:lt(2)表示index小于2的元素

$('li:gt(0):lt(2)').css('background', 'red') // 多个过滤选择器不是同时执行, 而是依次

结果：

看下图，多个过滤选择器不是同时执行, 而是依次。所以上述代码中先确定了是在li标签中找，:gt(0)说明找index大于0的li标签，所以符合条件的元素都在红框2中，此时又要执行:lt(2),一定要注意，此时的2是指的红框2中元素下标为2的，所以最终找到的为蓝框中的元素。

5. 选择内容为BBBBB的li

$('li:contains("BBBBB")').css('background', 'red')

6. 选择已经隐藏的li

 console.log($('li:hidden').length, $('li:hidden')[0])

结果：

7. 选择有title属性的li元素

 $('li[title]').css('background', 'red')

8. 选择所有属性title为hello的li元素

$('li[title="hello"]').css('background', 'red')

9. 选择下标为偶数的li元素

 $("li:even").css('background', 'red')

10. 选择下标为奇数的li元素

 $("li:odd").css('background', 'red')

标签：jQuery,box,元素,li,过滤,css,background,选择器,red
来源： https://www.cnblogs.com/anjingdian/p/15553272.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

jQuery过滤选择器