<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内容伪类选择器</title>
<script type="text/javascript" src="../../jquery.min.js"></script>
<style type="text/css">
body{
background-color: #e6fbff;
color: #000;
font-size: 20px;
padding: 0 30px;
}
li{
list-style: none;
}
a{
color: red;
text-decoration: none;
}
.red{
color: red;
}
.pink{
background-color: #20ce7d;
padding: 3px;
color: #fff;
}
.box{
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="box">
<p>内容伪类选择器，就是根据元素中的文字内容或所包含的子元素特征来选择元素，其文字内容可以模糊或绝对匹配进行元素定位。</p>
<h2>jQuery内容伪类选择器</h2>
<p class="red">:contains(text) ------ 选择包含给定文本内容的元素</p>
<p class="red">:has(selector) ------ 选择含有选择器所匹配元素的元素</p>
<p class="red">:empty ------ 选择所有不包含子元素或者不包含文本的元素</p>
<p class="red">:parent ------ 选择含有子元素或者文本的元素（跟:empty相反）</p>
<h2>一、:contains()</h2>
<p>在jQuery中，我们可以使用:contains()选择器来选择包含指定文本内容的元素。</p>
<p class="red">语法：$("E:contains(text)")</p>
<p>说明：E表示元素名，text表示所包含的文本内容。</p>
<p class="red"> $("p:contains(jQuery)").css("background-color", "red");</p>
<p>$("p:contains(jQuery)")表示选择包含“jQuery”这一个文本内容的p元素。</p>
<h2>二、:has(selector)</h2>
<p>在jQuery中，我们可以使用:has(selector)选择器来选择“符合条件（selector）”的元素。</p>
<p class="red">语法：$(":has(selector)")</p>
<p>说明：selector表示一个 jQuery选择器表达式。所谓的jQuery选择器表达式，说白了就是我们在前几章所学到的选择器。</p>
<p class="red">$("div:has(span)").css("background-color", "red");</p>
<p>$("div:has(span)")表示选择内部含有span元素的div元素。</p>
<p class="red"> $("div:has(#red,#yellow)").css("background-color", "red");</p>
<p>$("div:has(#red,#yellow)")表示选择内部含有id为red和id为yellow子元素的div元素。:has(selector)中的selector是一个群组选择器。</p>
<h2>三、:empty</h2>
<p>在jQuery中，我们可以使用:empty选择器选择所有“没有子元素”或者“没有文本”的空元素。</p>
<p>注意，只要内部有子元素或者文本内容，使用:empty都不会被选中。</p>
<h2>四、:parent</h2>
<p>在jQuery中，我们可以使用:parent选择器选择“含有子元素”或者“含有文本”的元素。:parent选择器跟:empty选择器是相反的。</p>
<p>注意，只要元素中有子元素或者文本内容，使用:parent都会被选中。</p>
</div>
</body>
</html>
网友评论