內容偽類選擇器，就是根據元素中的文字內容或所包含的子元素特征來選擇元素，其文字內容可以模糊或絕對匹配進行元素定位。
在jQuery中，我們可以使用:contains()選擇器來選擇包含指定文本內容的元素。
語法：
$("E:contains(text)")
說明：
E表示元素名，text表示所包含的文本內容。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
/*去除所有元素默認外邊距以及內邊距*/
*{padding:0;margin:0;}
</style>
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("p:contains(jQuery)").css("background-color", "red");
})
</script>
</head>
<body>
<div>jQuery入門教程</div>
<p>write less do more</p>
<p>從JavaScript到jQuery</p>
<div>歡迎來到 學習網</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
$("p:contains(jQuery)")表示選擇包含“jQuery”這一個文本內容的p元素。
在jQuery中，我們可以使用:has(selector)選擇器來選擇“符合條件（selector）”的元素。
語法：
$(":has(selector)")
說明：
selector表示一個 jQuery選擇器表達式。所謂的jQuery選擇器表達式，說白了就是我們在前幾章所學到的選擇器。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
/*去除所有元素默認外邊距以及內邊距*/
*{padding:0;margin:0;}
</style>
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("div:has(span)").css("background-color", "red");
})
</script>
</head>
<body>
<div>
<p>這是一個段落</p>
</div>
<div>
<p>這是一個段落</p>
<span>這是一個span</span>
</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
$("div:has(span)")表示選擇內部含有span元素的div元素。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
/*去除所有元素默認padding以及margin*/
*{padding:0;margin:0;}
/*去除列表項符號*/
ul{list-style-type:none;}
</style>
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("div:has(#red,#yellow)").css("background-color", "red");
})
</script>
</head>
<body>
<div><span id="red">紅色red</span></div>
<div><span>橙色orange</span></div>
<div><span id="yellow">黃色yellow</span></div>
<div><span>綠色green</span></div>
<div><span>藍色blue</span></div>
<div><span>紫色purple</span></div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
$("div:has(#red,#yellow)")表示選擇內部含有id為red和id為yellow子元素的div元素。:has(selector)中的selector是一個群組選擇器。
在jQuery中，我們可以使用:empty選擇器選擇所有“沒有子元素”或者“沒有文本”的空元素。
注意，只要內部有子元素或者文本內容，使用:empty都不會被選中。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
table,tr,td
{
border:1px solid silver;
}
td
{
width:60px;
height:60px;
line-height:60px;
text-align:center;
}
</style>
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("td:empty").css("background-color", "red");
})
</script>
</head>
<body>
<table>
<tr>
<td>2</td>
<td>4</td>
<td>8</td>
</tr>
<tr>
<td>16</td>
<td>32</td>
<td>64</td>
</tr>
<tr>
<td>128</td>
<td>256</td>
<td></td>
</tr>
</table>
</body>
</html>
在浏覽器預覽效果如下：
分析：
$("td:empty")表示選擇內部沒有文本內容頁沒有子元素的td元素。
在jQuery中，我們可以使用:parent選擇器選擇“含有子元素”或者“含有文本”的元素。:parent選擇器跟:empty選擇器是相反的。
注意，只要元素中有子元素或者文本內容，使用:parent都會被選中。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
table,tr,td
{
border:1px solid silver;
}
td
{
width:60px;
height:60px;
line-height:60px;
text-align:center;
}
</style>
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("td:parent").css("background-color", "red");
})
</script>
</head>
<body>
<table>
<tr>
<td>2</td>
<td>4</td>
<td>8</td>
</tr>
<tr>
<td>16</td>
<td>32</td>
<td>64</td>
</tr>
<tr>
<td>128</td>
<td>256</td>
<td></td>
</tr>
</table>
</body>
</html>
在浏覽器預覽效果如下：
分析：
$("td:parent")表示選擇內部有文本內容頁沒有子元素的td元素。