基本过滤器：
<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> <h1>我是标题</h1> <div> <h2>副标题</h2> </div> <input type="text" /> </body>
$(function(){ $('li:first').css('color','red'); $('ul:first li:last').css('color','blue'); $('li:not(.red)').css('color','red'); $('li:even').css('color','red'); $('li:odd').css('color','blue'); $('li:eq(2)').css('color','red'); $('li:eq(-2)').css('color','blue'); $('li:gt(2)').css('color','red'); $('li:gt(-2)').css('color','red'); $('li:lt(2)').css('color','red'); $('li:lt(-2)').css('color','blue'); $('div :header').css('color','red'); //组合 $('input').get(0).focus(); $(':focus').css('background','red'); });
几个jQuery替代方法：
$('li').first().css('color','red');
$('li').last().css('color','red');
$('li').not('.red').css('color','red');
$('li').eq(2).css('color','red');
内容过滤器：
<body> <div>百度的地址：www.baidu.com</div> <div>淘宝的地址：www.taobao.com</div> <div></div> <ul> <li>列表1</li> <li class="red">列表2</li> <li>列表3</li> <li>列表4</li> <li>列表5</li> <li>列表6</li> </ul> </body>
$(function(){ $('div:contains(www.baidu.com)').css('color','red'); $('div:empty').css('background','red').css('height','20px'); $('ul:has(.red)').css('color','red'); $('div:parent').css('color','blue'); //jQuery方法 $('ul').has('.red').css('color','red'); //jQuery提供了一个名称和parent相似的方法，但功能并不是选取含有子元素的的元素，二十获取当前元素的父元素，返回的元素集合 $('li').parent().css('color','blue');//当前元素的父节点 $('li').parents().css('color','red');//祖先节点 $('li').parentsUntil('body').css('color','red');//祖先节点，遇到body为止 });
可见性过滤器：
<body> <div style="display: none;">百度的地址：www.baidu.com</div> <div>淘宝的地址：www.taobao.com</div> <div>fasdfs</div> </body>
$(function(){ //将隐藏的元素颜色设为红色，并在一秒内慢慢显示出来 $('div:hidden').css('color','red').show(1000); $('div:visible').css('color','blue'); });
子元素过滤器：
<body> <ul> <li>列表1</li> <li class="red">列表2</li> <li><span>列表3</span></li> <li>列表4</li> <li>列表5</li> <li>列表6</li> </ul> <ul> <li>列表1</li> <li class="red">列表2</li> <li>列表3</li> <li>列表4</li> <li>列表5</li> <li>列表6</li> </ul> <ul> <li>aaa</li> </ul> </body>
$(function(){ $('li:first-child').css('color','red');//两个ul的第一个li都是红色 $('li:last-child').css('color','blue'); $('li:only-child').css('color','red'); $('li:nth-child(even)').css('color','blue'); $('li:nth-child(odd)').css('color','blue'); $('li:nth-child(1)').css('color','blue'); $('li:nth-child(3n)').css('color','blue');//3,6,9 ...显示 $('li:nth-child(3n+1)').css('color','red');//1,4,7,10 ...显示 });
jQuery提供的其他方法：
<body> <div>我的名字是：<strong>党兴明</strong>，谢谢</div> <ul id="box"> <li>列表1</li> <li class="red" title="列表2">列表2</li> <li><span>列表3</span></li> <li class="red">列表4</li> <li>列表5</li> <li>列表6</li> </ul> <ul> <li>列表1</li> <li class="red">列表2</li> <li>列表3</li> <li>列表4</li> <li>列表5</li> <li>列表6</li> </ul> <ul> <li>aaa</li> </ul> </body>
$(function(){ alert($('.red').is('li'));//true alert($('.red').is($('li')));//true alert($('.red').is(function(){ return $(this).attr('title') == '列表2';//必须使用this来表示要判断的元素 })); alert($('li').eq(1).hasClass('red')); //看第二个li有没有red这个class属性 $('li').slice(2,4).css('color','red'); //选择3,4 $('li').slice(2).css('color','red');//从2向下 $('li').slice(2,-2).css('color','red');//前后两个不被选定 alert($('#box').find('li').end().get(0));//找到前一个状态，不一定是父 alert($('#box').find('li').parent().get(0)); $('#box').next().end().css('color','red'); alert($('div:first').children().size()); //1 alert($('div:first').contents().size()); //3所有节点，包括文本节点 $('li').filter('.red, :first, :last').css('color','blue');//.red和首尾都选中 $('li').filter(function(){ return $(this).attr('class') == 'red' && $(this).attr('title') == '列表2'; }).css('color','red'); });