1):contains(text):匹配包含给定文本的元素
eg:$("#btn").click(function(){
//点击按钮后,将含有two的div背景变为绿色
$("div:contains(two)").css("background","green");
});
<body>
<input type="button" value="将含有two的div背景变为绿色" id="btn">
<div id="one">id=one</div>
<div id="two">id=two</div>----------变绿
<div id="three">id=three</div>
</body>
2):empty:匹配所有不包含子元素或者文本的空元素
eg:$("#btn").click(function(){
//点击按钮后,将不含有子元素或文本的空元素背景变为绿色
$("div:empty").css("background","green");
});
<body>
<input type="button" value="将不含有子元素或文本的空元素背景变为绿色" id="btn">
<div id="one"></div>-----------------变绿
<div id="two"><span></span></div>
<div id="three">id=three</div>
<div></div>
</body>
3):has(selector):匹配含有选择器所匹配的元素的元素
eg:$("#btn").click(function(){
//点击按钮后,将含有span的div背景变为绿色
$("div:has(span)").css("background","green");
});
<body>
<input type="button" value="将含有span的div背景变为绿色" id="btn">
<div id="one">id=one
<span></span>
</div>---------------------------变绿
<div id="two">id=two</div>
<div id="three">id=three</div>
</body>
4):parent:匹配所有的子元素或文本的元素
eg:$("#btn").click(function(){
//点击按钮后,将含有子元素(或者文本内容)的div背景变为绿色
$("div:parent").css("background","green");
});
<body>
<input type="button" value="将含有子元素(或者文本内容)的div背景变为绿色" id="btn">
<div id="one"></div>
<div id="two">id=two<span></span></div>-----------变绿
<div id="three">id=three</div>--------------------变绿
</body>