jQuery的内容过滤选择器学习教程

2020-05-29 07:16:15易采站长站整理

内容过滤器的过滤规则主要是包含的子元素或文本内容上。
2016418155237786.png (647×339)


$('div:contains("xxx")').css('background', '#ccc'); //选择元素文本节点含有xxx 文本的元素

$('div:empty').css('background', '#ccc'); //选择空元素

$('ul:has(.red)').css('background', '#ccc'); //选择子元素含有class 是red 的元素

$(':parent').css('background', '#ccc'); //选择非空元素

jQuery 提供了一个has()方法来提高:has 过滤器的性能:


$('ul').has('.red').css('background', '#ccc'); //选择子元素含有class 是red 的元素

jQuery 提供了一个名称和:parent 相似的方法,但这个方法并不是选取含有子元素或文本的元素,而是获取当前元素的父元素,返回的是元素集合。


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

$('li').parents().css('background', '#ccc'); //选择当前元素的父元素及祖先元素

$('li').parentsUntil('div').css('background', '#ccc'); //选择当前元素遇到div 父元素停止

jQuery内容过滤选择器的过滤规则主要运用在DOM元素所包含的子元素或其文本内容上,主要包括以下四种过滤方法:

为了更好的学习,先写几个DOM元素的HTML结构:


<div>John Resign</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J.Ohn</div>
<div></div>
<p></p>
<div><p>Has p</p></div>

一、内容过滤选择器——:contains(text)
选择器:

E:contains(text)  //E是指DOM元素,:contains(text)包含的文本,text是指定查找的字符串
描述:

选取含有文本内容为“text”的元素

返回值:

集合元素

实例:


<script type="text/javascript">
$(document).ready(function(){
$('div:contains(John)').css('background','#f36');
});
</script>

功能:

改变含有文本为“John”的div元素的背景色

效果:

2016418154435377.png (313×244)

回到前面的HTML结构中我们可以看出其中有两个div元素中包含了”John”文本,因为我们这里主要是改变了包含文本“John”的div的背景色,因此大家在效果中可以看出我们其中第一个和第三个div的背景色变成了”#f36″,为了更能体会从中的变化,大家可以通过Firefox中的Firebug工具看出HTML的变化: