web前端讲解，jQuery之jQuery过滤器（二）内容过滤器

详情请访问：www.cdgeek.com

 

二：内容过滤器

内容过滤器的过滤规则，主要是包含的子元素或文本内容上

 

<!-----------------示例文档结构------------------------->

<div>www.ttcoolx.com</div>

<div><h3>我是标题</h3></div>

<div>asdfadfad</div>

<ul id="firstul">

    <li>列表1</li>

    <li class="two">列表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>

<input type="text"/>

1.  :contains过滤器

$('div:contains("www.ttcoolx.com")').css('background','#cc');     //将包含www.ttcoolx.com的文本的div 背景色设置为  #cc    通过过选择出所属的div,题外话说一下，有了单引号，里面只能用双引号，或者有了双引号，里面只能用单引号。

 

2.  :empty过滤器，选择空元素

$('div:empty').css('background','#cc').css('height','10px');    //选择为空的div标签，里面不包含任何标签或者文本

 

3. :has过滤器，把子元素中含有class为red的父元素设置背景色

$('ul:has(".red")').css('background','#ccc')；    //第一个ul 将被设置背景色#ccc

----------》jQuery提供一个方法$('u').has('.red').css('background','#ccc')；

 

4. :parent过滤器，选取含有子元素或文本的元素

$('div:parent').css('background','#ccc')； // 与emptiy相反

 

这边要注意了：jQuery提供的parent方法与上面的parent过滤器功能并不是一样的

$('li').parent();      // 选取li的父元素集合

$('li').parents();     // 选取li的父元素及祖先元素

$('li').parentsUntil("div").css('background','#ccc'); // 遇到父元素为div的就停止，div本身也不会有效果

 

下面附上一张内容过滤器的表格：：：：：