1    基本过滤器

样例：

   $('li:first').css('background', '#ccc'); //第一个li元素

   $('li:last').css('background', '#ccc');  //最后一个li元素    $('#box li:last').css('background', '#ccc');    //ul的id为box内的最后一个li元素    $('ul:first li:last').css('background', '#ccc');  //第一个ul内的最后一个li元素    $('li:not(.red)').css('background', '#ccc');    //li的class不为red的所有li元素    $('li:even').css('background', '#ccc');  //索引为偶素的li元素    $('li:odd').css('background', '#ccc');    //索引为奇数的li元素    $('li:eq(2)').css('background', '#ccc');  //li索引为2即第三个li元素    $('li:eq(-2)').css('background', '#ccc');  //倒数第二个li元素    $('li:gt(3)').css('background', '#ccc');   //索引大于3的所有li元素    $('li:lt(2)').css('background', '#ccc');    //索引小于2的所有li元素    $('div :header').css('background', '#ccc');  //页面所有h1~h6元素    $('input').get(0).focus();            //初始化激活input元素为焦点    $(':focus').css('background', 'red');  //被焦点的元素对应的专用方法：

   $('li').first().css('background', '#ccc');

   $('li').last().css('background', '#ccc');    $('li').not('.red').css('background', '#ccc');    $('li').eq(2).css('background', '#ccc');

   备注：索引值是从0开始的，从上向下顺序递增的；若索引值为复数，索引值是从-1开始的，从下向上递减的。

2    内容过滤器

样例：    

   $('div:contains("文本1")').css('background', '#ccc');    //选择含有”文本1“内容的div元素

   $('div:empty').css('background', '#ccc').css('height','20px');   //选择空div元素    $('ul:has(.red)').css('background', '#ccc');  //选择子元素含有class为red的所有ul元素    $('div:parent').css('background', '#ccc');     //选择非空div元素

方法：

   $('ul').has('.red').css('background', '#ccc');  

操作节点方法：

   $('li').parent().css('background', '#ccc');    //获取当前元素的父元素

   $('li').parents().css('background', '#ccc');  //获取当前元素的父元素及祖先元素    $('li').parentsUntil('body').css('background', '#ccc');  //选择当前元素父元素遇到div父元素停止

3    可见性过滤器

   注意：hidden过滤器一般包含的内容为：（1）css样式为display:none（2）input表单类型为type="hidden"（3）元素属性visibility:hidden

样例：

   alert($('div:hidden').size());

   $('div:hidden').css('background', '#ccc').show(1000);    alert($('div:visible').size());

4    子元素过滤器

   备注：索引值是从1开始计算的。

样例：  

   $('li:first-child').css('background', '#ccc'); //每个父元素第一个li元素

   $('li:last-child').css('background', '#ccc');  //每个父元素最后一个li元素    $('li:only-child').css('background', '#ccc');  //每个父元素只有一个li元素    $('li:nth-child(even)').css('background', '#ccc');  //每个父元素奇数li元素    $('li:nth-child(odd)').css('background', '#ccc');  //每个父元素偶数li元素    $('li:nth-child(2)').css('background', '#ccc');   //每个父元素第二个li元素    $('li:nth-child(2n)').css('background', '#ccc');  //每个父元素第2、4、6、8...个li元素

5    其他方法

样例：

   alert($('.red').is('li')); //检测元素li的class值是否为red    

   alert($('.red').is($('li')));  //jQuery对象集合，检测li元素的class值是否为red    alert($('.red').is($('li').get(2)));  //DOM对象，检测第三个li元素的class值是否为red    alert($('.red').is($('li').eq(2)));  //jQuery对象，单个，检测第三个li元素的class值是否为red    alert($('.red').is(function () {        return $(this).attr('title') == '列表3';    }));       注意：必须使用$(this)来表示要判断的元素，否则，不管function里面是否返回true或false都和调用的元素无关了。

  alert($('li').eq(2).hasClass('red'));  //和is功能类似，但只能传递class

   $('li').slice(0,2).css('color', 'red');  //前两个变成红色

   $('li').slice(2).css('color', '#ccc');  //从第三个开始到最后都选定    $('li').slice(0, -2).css('color', '#ccc');  //从倒数第三个位置开始，向前选定所有    $('li').slice(2, -2).css('color', '#ccc');  //除前两个和末尾两个之外所有都选定

   alert($('#box').find('li').end().get(0));  //可能是并行节点，也可能是父节点

   alert($('#box').find('li').parent().get(0));  //父节点

   $('li').filter('.red, :first-child, :last-child').css('background', '#ccc');    $('li').filter(function () {        return $(this).attr('class') == 'red' && $(this).attr('title') == '列表3';    }).css('background', '#ccc');

     本文转自stock0991 51CTO博客，原文链接：http://blog.51cto.com/qing0991/1358549，如需转载请自行联系原作者