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