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