jQuery选择器下

最新推荐文章于 2024-07-02 08:55:42 发布

aipmunj7655

最新推荐文章于 2024-07-02 08:55:42 发布

阅读量40

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Itwonderful/p/5678728.html

版权

<body>
<ul>
  <li>列表1</li>
  <li class="red">列表2</li>
  <li>列表3</li>
  <li>列表4</li>
  <li>列表5</li>
  <li>列表6</li>
</ul>

<ul>
  <li>列表1</li>
  <li>列表2</li>
  <li>列表3</li>
  <li>列表4</li>
  <li>列表5</li>
  <li>列表6</li>
</ul>

<div>
<div>我们都是孩子</div>
</div>
<div style="display:none">我们都是好人</div>
<div style="display:none">1</div>
</body>
</html>
<script>
$(function (){
    //过滤选择器
    $('li:first').css('background','#ccc');//选取列表的第一个
    $('li:last').css('background','#ccc');//选取列表的最后一个
    $('ul:first li:last').css('background','#ccc');//第一个列表的最后一个
    $('li:not(.red)').css('background','red');//选取class不是red的所有列表
    $('li:even').css('background','#ccc');//选取索引为偶数的列表
    $('li:odd').css('background','#ccc');//选取索引为奇数的列表
    //$('li:eq(2)').css('background','#ccc');//选取索引为n的列表(从0开始)
    $('li:eq(-2)').css('background','#ccc');//选取索引为-n的列表(从-1开始)
    $('li:gt(2)').css('background','#ccc');//选取索引大于2的列表
    $('li:lt(2)').css('background','#ccc');//选取索引小于2的列表
    
    $('div:contains("孩子")').css('background','#ccc');//选取含有孩子的父级div节点
    $('div:empty').css('background','red').css('height','20px');//选取不包含子元素或空文本的元素
    $('div:parent').css('background','red');
    $('li').parent().css('background','#ccc');//选取元素的父级元素
    $('li').parents().css('background','#ccc');//选取元素的父级及祖级元素
    $('li').parentsUntil('body').css('background','#ccc');//选取元素的父级和祖级元素直到遇到某个节点停止
    $('div:hidden').show(1000);//选取被隐藏的元素并于1s后显示出来
    })
</script>