<div>boys</div> <div>girls</div> <div>boys and girls</div> <script type="text/javascript"> $(function(){ $("div:contains('boys')").css("color","red"); }); </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>这是隐藏的div标签</div> <div>这是显示的div标签</div> <script type="text/javascript"> $(function(){ $("div:hidden").css("color","red"); console.log($("div:hidden")); //结果：获取到隐藏的div }); </script>
结果：
29. :visible : 匹配所有的可见元素
<div>这是隐藏的div标签</div> <div>这是显示的div标签</div> <script type="text/javascript"> $(function(){ $("div:visible").css("color","red"); console.log($("div:visible")); //结果：获取到显示的div }); </script>
结果：
30. [attribute] : 匹配包含给定属性的元素
<div>这是有类名的div标签</div> <div>这是没类名的div标签</div> <script type="text/javascript"> $(function(){ $("div[class]").css("color","red"); }); </script>
结果：
这是有类名的div标签
这是没类名的div标签
31. [attribute=value] : 匹配给定的属性是某个特定值的元素
<div>这是第一个div标签</div> <div>这是第二个div标签</div> <script type="text/javascript"> $(function(){ $("div[class='myDiv']").css("color","red"); }); </script>
结果：
这是第一个div标签
这是第二个div标签
32. [attribute!=value] : 匹配所有不含有指定的属性，或者属性不等于特定值的元素
<div>这是第一个div标签</div> <div>这是第二个div标签</div> <script type="text/javascript"> $(function(){ $("div[class!='myDiv']").css("color","red"); }); </script>
结果：
这是第一个div标签
这是第二个div标签
33. [attribute^=value] : 匹配给定的属性是以某些值开始的元素
<div>这是第一个div标签</div> <div>这是第二个div标签</div> <div>这是第三个div标签</div> <script type="text/javascript"> $(function(){ $("div[class^='my']").css("color","red"); }); </script>
结果：
这是第一个div标签
这是第二个div标签
这是第三个div标签
34. [attribute$=value] : 匹配给定的属性是以某些值结尾的元素
<div>这是第一个div标签</div> <div>这是第二个div标签</div> <div>这是第三个div标签</div> <script type="text/javascript"> $(function(){ $("div[class$='Div']").css("color","red"); }); </script>
结果：
这是第一个div标签
这是第二个div标签
这是第三个div标签
35. [attribute*=value] : 匹配给定的属性是以包含某些值的元素