});
</script>
结果：
boys
girls
boys and girls
25. :empty : 匹配所有不包含子元素或者文本的空元素
<p>这是有内容的p标签</p>
<p></p>
<p>这是有内容的p标签</p>
<p></p>
<script type="text/javascript">
$(function(){
$("p:empty").css({"width":30,"height":30,"background":"red"});
});
</script>
结果：
这是有内容的p标签
这是有内容的p标签
26. :has(selector) : 匹配含有选择器所匹配的元素的元素
<div>这是包含p元素的div标签
<p>这是div标签中的p标签</p>
</div>
<div>这是没有p元素的div标签</div>
<script type="text/javascript">
$(function(){
$("div:has(p)").css("color","red");
});
</script>
结果：
这是包含p元素的div标签
这是div标签中的p标签
这是没有p元素的div标签
27. :parent : 匹配含有子元素或者文本的元素
<div>
<p>这是div标签中的p标签</p>
</div>
<div>这是有内容的div标签</div>
<div></div>
<script type="text/javascript">
$(function(){
$("div:parent").css("color","red");
});
</script>
结果：
这是div标签中的p标签
这是有内容的div标签
28. :hidden : 匹配所有不可见元素，或者type为hidden的元素
<div style="display: none;">这是隐藏的div标签</div>
<div>这是显示的div标签</div>
<script type="text/javascript">
$(function(){
$("div:hidden").css("color","red");
console.log($("div:hidden")); //结果：获取到隐藏的div
});
</script>
结果：
29. :visible : 匹配所有的可见元素
<div style="display: none;">这是隐藏的div标签</div>
<div>这是显示的div标签</div>
<script type="text/javascript">
$(function(){
$("div:visible").css("color","red");
console.log($("div:visible")); //结果：获取到显示的div
});
</script>
结果：
30. [attribute] : 匹配包含给定属性的元素
<div class="myDiv">这是有类名的div标签</div>
