jQuery选择器之内容过滤选择器
上一节
下一节
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>11.8jQuery选择器之内容过滤选择器</title>
<script src="../js/jquery-3.1.1.min.js"></script>
<script>
$(function(){
//:parent选取含有子元素或者文本不为空的元素
$('p:parent').css('border','solid 2px red');
//:empty选取不含有子元素或者文本为空的元素
$('p:empty').css('border','solid 2px green').html('现在不为空了');
//:has(selector)选取含有选择器匹配的元素
$('p:has(i)').css('color','blue');
$('p:has(strong)').css('color','pink');
//:contains(text)选取含有文本为text的元素
$('p:contains(CSS3)').css('color','#C33');
$('p:contains(JavaScript)').css('color','orange');
});
</script>
</head>
<body>
<h2>前端课程</h2>
<p><strong>HTML5</strong></p>
<p>CSS3</p>
<p><span>JavaScript</span></p>
<p><i>jQuery</i></p>
<P></P>
</body>
</html>
