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

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

2016418154458800.png (596×109)

二、内容过滤选择器——:empty

选择器:

E:empty //其中E为DOM元素,:empty是指DOM元素中不包含任何子元素或文本 
描述:

选取不含任何子元素或文本的空元素

返回值:

集合元素

实例:


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

功能:

改变不含子元素(包括不含文本元素)的div的背景色,换句话说,就是改变不包含任何东西的div的背景色

效果:

2016418154531426.png (312×235)

虽然我们前面的html中所有元素中不包含子元素,但有一些包含了文本元素,只有一个div和一个p元素具没有子元素也没有文本内容。加上我们这个例子中,我们只对不包含子元素和文本内容的div进行了改变背景色的设置,所以我们的效果中只有div加上了“#f36”的背景色,同样我们来看看HTML的变化吧:

2016418154551068.png (510×106)

三、内容过滤选择器——:has(selector)

选择器:

E:has(selector)  //其中E为有效果DOM元素标签,:has(selector)含有一个选择器,selector用于筛选的选择器

描述:

选取含有选择器所匹配的元素的元素

返回值:

集合元素

实例:


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

功能:
改变含有子元素P的div元素的背景色
效果:

2016418154627627.png (310×246)

在我们这个实例中,只有一个div中包含了子元素P,所以包含了符合这个要求的div元素其背景色被设置为“#f36”,改变后的HTML:

2016418154652750.png (424×138)

四、内容过滤选择器——:parent

选择器:

E:parent  //E为有效的DOM元素标签,:parent含有子元素或文本内容。

描述:

选取含有子元素或者文本的元素标签

返回值:

集合元素

实例:


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

功能:
改变含有子元素或文本内容的div的背景色。换句话说只在div包含了任何一个子元素或者任何内容,其背景色都将会改变。