内容过滤器的过滤规则主要是包含的子元素或文本内容上。
(1):contains(text)选取含有"xixi.com"文本的元素jQuery语法：$(':contains("xixi.com")')元素集合
过滤选择器简称：过滤器。它其实也是一种选择器，而这种选择器类似与CSS3里的伪类，可以让不支持CSS3的低版本浏览器也能支持。和常规选择器一样，jQuery为了更方便开发者使用，提供了很多独有的过滤器。
一．基本过滤器
过滤器主要通过特定的过滤规则来筛选所需的DOM元素，和CSS中的伪类的语法类似：使用冒号(:)开头。
<body> <ul> <li>列表1</li> <li>列表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>
(1):first选取第一个元素jQuery语法：$('li:first')单个元素
给选取的第一个元素<li>列表1</li>变为灰色
jQuery写法：
$(function () { $('li:first').css('background','#ccc'); });
(2):last选取最后一个元素jQuery语法：$('li:last')单个元素
给选取的最后一个元素<li>列表6</li>变为灰色
jQuery写法：
$(function () { $('li:last').css('background','#ccc'); });
给选取的第一个ul的最后最后一个元素<li>列表6</li>变为灰色
jQuery写法：
$(function () { $('ul:first li:last').css('background','#ccc'); });
~~~~~
<body> <ul> <li>列表1</li> <li>列表2</li> <li class="red">列表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> </body>
(3):not(selector)选取class不是red的li元素jQuery语法：$('li:not(.red)')集合元素
把除了<li class="red">列表3</li>以外的其它列表变为灰色
jQuery写法：
$(function () { $('li:not(.red)').css('background','#ccc'); });
(4):even选择索引(0开始)是偶数的所有元素jQuery语法：$('li.even')集合元素
把除了第0行开始的偶数行变为灰色
jQuery写法：
$(function () { $('li:even').css('background','#ccc'); });
(5):odd选择索引(0开始)是奇数的所有元素jQuery语法：$('li:odd')集合元素
jQuery写法：
$(function () { $('li:odd').css('background','#ccc'); });
(6):eq(index)选择索引(0开始)等于index的元素jQuery语法：$('li:eq(2)')单个元素
把的第仨个元素<li class="red">列表3</li>变为灰色
jQuery写法：
$(function () { $('li:eq(2)').css('background', '#ccc'); });
把倒数第二个元素<li>列表5</li>变为灰色
jQuery写法：
$(function () { $('li:eq(-2)').css('background', '#ccc'); });
(7):gt(index)选择索引(0开始)大于index的元素jQuery语法：$('li:gt(3)')集合元素
把从第四个元素开始的元素变为灰色
jQuery写法：
$(function () { $('li:gt(3)').css('background', '#ccc'); });
(8):lt(index)选择索引(0开始)小于index的元素jQuery语法：$('li.lt(2)')集合元素
把索引index小于2的元素变为灰色
jQuery写法：
$(function () { $('li:lt(2)').css('background','#ccc'); });
~~~~~~~~
<body> <h3>我是标题</h3> </body>
(9):header选择标题元素，h1~h6jQuery语法：$(':header')集合元素
把<h3>我是标题</h3>元素变为灰色
jQuery写法：
$(function () { $(':header').css('background','#ccc'); });
(10):animated选择正在执行动画的元素jQuery语法：$(':animated')集合元素
(11):focus选择当前被焦点的元素jQuery语法：$(':focus')集合元素
<body> <h3>我是标题</h3> </body>
把当前被焦点的元素变为红色
jQuery写法：
$(function () { $('input').get(0).focus(); //先初始化激活一个元素焦点 $(':focus').css('background', 'red'); //被焦点的元素 });
注意：:focus过滤器，必须是网页初始状态的已经被激活焦点的元素才能实现元素获取。而不是鼠标点击或者Tab键盘敲击激活的。
jQuery为最常用的过滤器提供了专用的方法，已达到提到性能和效率的作用：
//元素 li 的第一个元素 $(function () { $('li').first().css('background', '#ccc'); }); //元素 li 的最后一个元素 $(function () { $('li').last().css('background', '#ccc'); }); //元素 li 不含 class 为 red 的元素 $(function () { $('li').not('.red').css('background', '#ccc'); }); //元素 li 的第三个元素，负数从后开始 $(function () { $('li').eq(2).css('background', '#ccc'); });
注意：:first、:last 和 first()、last()这两组过滤器和方法在出现相同元素的时候，first会实现第一个父元素的第一个子元素，last会实现最后一个父元素的最后一个子元素。所以，如果需要明确是哪个父元素，需要指明：
二．内容过滤器
内容过滤器的过滤规则主要是包含的子元素或文本内容上。
(1):contains(text)选取含有"xixi.com"文本的元素jQuery语法：$(':contains("xixi.com")')元素集合
<body> <div>我们的新域名为：xixi.com</div> <div>我们的旧域名为：wang.com</div> </body>
选择元素文本节点含有xixi.com文本的元素变为灰色
jQuery写法：
$(function () { $('div:contains("xixi.com")').css('background', '#ccc'); });
(2):empty选取不包含子元素或空文本的元素jQuery语法：$(':empty')元素集合
<body> <div>我们的新域名为：xixi.com</div> <div>我们的旧域名为：wang.com</div> <div></div> <div></div> </body>
选择空元素<div></div>变为空
jQuery写法：
$(function () { $('div:empty').css('background', '#ccc').css('height','20px'); });
(3):has(selector)选取含有 class 是 red 的元素jQuery语法：$(':has(.red)')元素集合
<body> <ul> <li>列表1</li> <li>列表2</li> <li class="red">列表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> </body>
选择子元素含有class是red的元素父元素ul块里的变为灰色
jQuery写法：
$(function () { $('ul:has(.red)').css('background', '#ccc'); });
(4):parent选取含有子元素或文本的元素jQuery语法：$(':parent')元素集合
<body> <div>1</div> <div>2</div> <ul> <li>列表1</li> <li>列表2</li> <li class="red">列表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> </body>
选择div下的有子元素的变为灰色
jQuery写法：
$(function () { $('div:parent').css('background','#ccc'); });
jQuery提供了一个has()方法来提高:has过滤器的性能：
选择子元素含有class是red的元素父元素ul块里的变为灰色
jQuery写法：
$(function () { $('ul').has('.red').css('background', '#ccc'); });
jQuery提供了一个名称和:parent相似的方法，但这个方法并不是选取含有子元素或文本的元素，而是获取当前元素的父元素，返回的是元素集合。
<body> <ul> <li>列表1</li> <li>列表2</li> <li class="red">列表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> </body>
选择li元素的父元素ul变为灰色
jQuery写法:
$(function () { //alert($('li').parent().size()); //返回了2个元素 //alert($('li').parent().get(0)); //[object HTMLUListElement] $('li').parent().css('background','#ccc'); //选择当前元素的父元素 });
选择当前元素的父元素及祖先元素
jQuery写法:
$(function () { $('li').parents().css('background','#ccc'); });
选择当前元素li遇到body父元素停止
jQuery写法:
$(function () { $('li').parentsUntil('body').css('background','#ccc'); });
三．可见性过滤器
可见性过滤器根据元素的可见性和不可见性来选择相应的元素。
(1):hidden选取所有不可见元素jQuery语法：$(':hidden')集合元素
<div style="display:none;">我们的新域名为：xixi.com</div> <div>我们的旧域名为：wang.com</div> <div></div> <div></div>
jQuery写法：
$(function () { alert($('div:hidden').size()); //1个 $('div:hidden').css('background','#ccc').show(1000); //设置为灰色一秒钟后慢慢显示出来 });
(2):visible选取所有可见元素jQuery 语法：$(':visible')集合元素
<div style="display:none;">我们的新域名为：xixi.com</div> <div>我们的旧域名为：wang.com</div> <div></div> <div></div>
jQuery写法：
$(function () { alert($('div:visible').size()); //3个 });
注意：:hidden过滤器一般是包含的内容为：CSS样式为display:none、input表单类型为type="hidden"和 visibility:hidden的元素。
四．子元素过滤器
子元素过滤器的过滤规则是通过父元素和子元素的关系来获取相应的元素。
(1):first-child获取每个父元素的第一个子元素jQuery写法：$('li:first-child')集合元素
<body> <ul> <li>列表1</li> <li>列表2</li> <li class="red">列表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> </body>
获取每个父元素的第一个子元素<li>列表1</li>变为灰色
jQuery写法：
$(function () { $('li:first-child').css('background', '#ccc'); });
(2):last-child获取每个父元素的最后一个子元素jQuery写法：$('li:last-child')集合元素
获取每个父元素的第最后一个子元素<li>列表6</li>变为灰色
jQuery写法：
$(function () { $('li:last-child').css('background', '#ccc'); });
(3):only-child获取只有一个子元素的元素jQuery写法：$('li:only-child')集合元素
<body> <ul> <li>列表1</li> <li>列表2</li> <li class="red">列表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> <ul> <li>列表1</li> </ul> </body>
获取只有一个子li的元素的元素
jQuery写法：
$(function () { $('li:only-child').css('background','#ccc'); });
(4):nth-child(odd/even/eq(index))获取每个自定义子元素的元素(索引值从1开始计算)jQuery写法：$('li:nth-child(even)')集合元素
<body> <ul> <li>列表1</li> <li>列表2</li> <li class="red">列表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> </body>
获取(索引值从1开始计算)每个偶数子元素的li元素变为灰色
jQuery写法：
$(function () { $('li:nth-child(even)').css('background','#ccc'); });
获取(索引值从1开始计算)每个基数子元素的li元素变为灰色
jQuery写法：
$(function () { $('li:nth-child(odd)').css('background','#ccc'); });
获取(索引值从1开始计算)每隔俩倍元素的li元素变为灰色
$(function () { $('li:nth-child(2n)').css('background', '#ccc'); });
五．其他方法
jQuery在选择器和过滤器上，还提供了一些常用的方法，方便我们开发时灵活使用。
(1)is(s/o/e/f)传递选择器、DOM、jquery对象或是函数来匹配元素结合jQuery写法：$('li').is('.red')集合元素
<body> <ul> <li>列表1</li> <li>列表2</li> <li class="red">列表3</li> <li>列表4</li> <li>列表5</li> <li>列表6</li> </ul> </body>
判断<li class="red">列表3</li>class为是否为red
$(function () { alert($('.red').is('li')); //true，选择器，检测class为是否为red });
判断第二个DOM对象<li class="red">是否为red
$(function () { alert($('.red').is($('li').get(2))); //true });
精确写法：
$(function () { alert($('.red').is($('li').eq(2))); });
可以自定义各种判断
<ul id="box"> <li>列表1</li> <li>列表2</li> <li class="red" title="列表3">列表3</li> <li class="red">列表4</li> <li>列表5</li> <li>列表6</li> <li>列表7</li> <li>列表8</li> <li>列表9</li> </ul>
获取title="列表3的判断
jQuery写法：
$(function () { alert($('.red').is(function () { return $(this).attr('title')=='列表3'; })); }); //注意，必须使用$(this)来表示要判断的元素，否则，不管function里面是否返回true或false都和调用的元素无关了
(2)hasClass(class)其实就是is("." + class)jQuery写法：$('li').eq(2).hasClass('red')集合元素
查看第二个li是否是red
$(function () { alert($('li').eq(2).hasClass('red')); });
(3)slice(start, end)选择从start到end位置的元素，如果是负数，则从后开始jQuery写法：$('li').slice(0,2)集合元素
把第六个和第七个li变为灰色
$(function () { $('li').slice(5,7).css('background','#ccc'); });
注意：这个参数有多种传法和JavaScript的slice方法是一样的比如：slice(2)，从第三个开始到最后选定；slice(2,4)，第三和第四被选定；slice(0,-2)，从倒数第三个位置，向前选定所有；slice(2,-2)，前两个和末尾两个未选定。
(4)filter(s/o/e/f)jQuery写法：$('li').filter('.red')
<ul id="box"> <li>列表1</li> <li>列表2</li> <li class="red" title="列表3">列表3</li> <li class="red">列表4</li> <li>列表5</li> <li>列表6</li> <li>列表7</li> <li>列表8</li> <li>列表9</li> </ul> <ul> <li>列表1</li> <li>列表2</li> <li>列表3</li> <li class="red" title="列表3">列表4</li> <li>列表5</li> <li>列表6</li> <li>列表7</li> <li>列表8</li> <li>列表9</li> </ul>
找到所有li当中有red的和首位
$(function () { $('li').filter('.red, :first-child, :last-child').css('background','#ccc'); });
找到所有li当中有red的并且是列表3的变为灰色
$(function () { $('li').filter(function () { return $(this).attr('class') == 'red' && $(this).attr('title') == '列表3'; }).css('background', '#ccc'); });
(5)end()获取当前元素前一次状态jQuery写法：$('div').find('p').end()集合元素
返回当前元素前一个元素
$(function () { alert($('#box').find('li').end().get(0)); //[object HTMLUListElement] });
~~~~~
<ul id="box"> <li>列表1</li> <li>列表2</li> <li class="red" title="列表3">列表3</li> <li class="red">列表4</li> <li>列表5</li> <li>列表6</li> </ul> <ul> <li>列表1</li> <li>列表2</li> <li>列表3</li> <li class="red" title="列表3">列表4</li> <li>列表5</li> <li>列表6</li> </ul>
找到ul前一个状态<ul id="box">..</ul>里面的变为灰色
$(function () { $('#box').next('ul').end().css('background', '#ccc'); });
(6)contents()获取某元素下面所有元素节点，包括文本节点，如果是iframe，则可以查找文本内容jQuery写法：$('div').contents()集合元素
<div> 我们的新域名为： <strong>123</strong> xixi.com </div>
获取div下面的元素节点<strong>123</strong>
$(function () { alert($('div:first').children().size()); //1 });
浙公网安备 33010602011771号