一.内容过滤
1.内容过滤选择器介绍
- :empty 当前元素是否为空（是否有标签体）
- :contains(text) 标签体是否含有指定的文本
- :has(...) 当前元素是否含有指定的子元素
- :parent 当前元素是否是父元素
2.代码实例
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 ?<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 ?<title>04-内容过滤选择器.html</title> 6 ?<!-- ??引入jQuery --> ?7 ?<script src="../js/jquery-1.8.3.js" type="text/javascript"></script> 8 ?<script src="./script/assist.js" type="text/javascript"></script> 9 ?<link rel="stylesheet" type="text/css" href="./css/style.css" /> ?10 ??<script type="text/javascript">11 ??????$(function(){12 // ?????????<input type="button" value="选取含有文本“di”的div元素." id="btn1"/>13 ??????????$("#btn1").on("click",function(){14 ??????????????$("div:contains(‘di‘)").css("background-color","red");15 ??????????});16 // ?????????<input type="button" value="选取不包含子元素(或者文本元素)的div空元素." id="btn2"/>17 ??????????$("#btn2").on("click",function(){18 ??????????????$("div:empty").css("background-color","red");19 ??????????});20 // ?????????<input type="button" value="选取含有class为mini元素 的div元素." id="btn3"/>21 ??????????$("#btn3").on("click",function(){22 ??????????????$("div:has(‘.mini‘)").css("background-color","red");23 ??????????});24 // ?????????<input type="button" value="选取含有子元素(或者文本元素)的div元素." id="btn4"/>25 ??????????$("#btn4").on("click",function(){26 ??????????????$("div:parent").css("background-color","red");27 ??????????});28 ??????});29 ??</script>30 </head>31 <body>32 ??<h3>内容过滤选择器.</h3>33 ??<button id="reset">手动重置页面元素</button>34 ??<input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />35 36 ??<input type="button" value="选取含有文本“di”的div元素." id="btn1"/>37 ??<input type="button" value="选取不包含子元素(或者文本元素)的div空元素." id="btn2"/>38 ??<input type="button" value="选取含有class为mini元素 的div元素." id="btn3"/>39 ??<input type="button" value="选取含有子元素(或者文本元素)的div元素." id="btn4"/>40 41 42 <br /><br />43 44 ???<!-- 测试的元素 -->45 ??<div class="one" id="one" >46 ?id为one,class为one的div47 ??????<div class="mini">class为mini</div>48 ??</div>49 50 ????<div class="one" ?id="two" title="test" >51 ?????id为two,class为one,title为test的div.52 ??????<div class="mini" ?title="other">class为mini,title为other</div>53 ??????<div class="mini" ?title="test">class为mini,title为test</div>54 ??</div>55 56 ??<div class="one">57 ??????<div class="mini">class为mini</div>58 ??????<div class="mini">class为mini</div>59 ??????<div class="mini">class为mini</div>60 ??????<div class="mini"></div>61 ??</div>62 63 ??64 65 ??<div class="one">66 ??????<div class="mini">class为mini</div>67 ??????<div class="mini">class为mini</div>68 ??????<div class="mini">class为mini</div>69 ??????<div class="mini" ?title="tesst">class为mini,title为tesst</div>70 ??</div>71 72 73 ??<div style="display:none;" ?class="none">style的display为"none"的div</div>74 ??75 ??<div class="hide">class为"hide"的div</div>76 ?77 ??<div>78 ??包含input的type为"hidden"的div<input type="hidden" size="8"/>79 ??</div>80 81 ??82 ??<span id="mover">正在执行动画的span元素.</span>83 84 </body>85 </html>二、可见性过滤
1.可见性过滤器介绍
- :hidden 隐藏的 特指<xxx style="display:none;"/>,获得<input type="hidden"/>
- :visible 可见的
2.代码实例
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 ?<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 ?<title>05-可见性过滤选择器.html</title> 6 ?<!-- ??引入jQuery --> ?7 ?<script src="../js/jquery-1.8.3.js" type="text/javascript"></script> 8 ?<script src="./script/assist.js" type="text/javascript"></script> 9 ?<link rel="stylesheet" type="text/css" href="./css/style.css" /> ??10 ??<script type="text/javascript">11 ??????$(function(){12 // ?????????<input type="button" value=" 选取所有可见的div元素" ?id="b1"/>13 ??????????$("#b1").click(function () {14 ??????????????alert("123");15 ??????????????$("div:visible").css("background","red");16 ??????????});17 // ?????????????<input type="button" value=" 选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来" ?id="b2"/>18 ??????????$("#b2").click(function () {19 ??????????????$(":hidden").css("background","red");20 ??????????});21 // ?????????????<input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" ?id="b3"/>22 ??????????$("#b3").click(function () {23 ??????????????$("input:hidden").each(function(index){24 ??????????????????alert($(this).val());25 ??????????????});26 ??????????});27 // ?????????????<input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" ?id="b4"/>28 ??????????$("#b4").click(function () {29 ??????????????$.each($("input:hidden"),function(index,domEle){30 ??????????????????alert(index + "@" + $(domEle).val());31 ??????????????});32 ??????????});33 ??????});34 ??</script>35 </head>36 <body>37 ??<h3>可见性过滤选择器.</h3>38 ??<button id="reset">手动重置页面元素</button>39 ??<input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label>40 ??<br/><br/>41 ??<input type="button" value=" 选取所有可见的div元素" ?id="b1"/>42 ??<input type="button" value=" 选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来" ?id="b2"/>43 ??<input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" ?id="b3"/>44 ??<input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" ?id="b4"/>45 ??<br /><br />46 ??47 ??<!--文本隐藏域-->48 ?<input type="hidden" value="hidden_1">49 ?<input type="hidden" value="hidden_2">50 ?<input type="hidden" value="hidden_3">51 ?<input type="hidden" value="hidden_4">52 ??53 ??<div class="one" id="one" >54 ?id为one,class为one的div55 ??????<div class="mini">class为mini</div>56 ??</div>57 58 ????<div class="one" ?id="two" title="test" >59 ?????id为two,class为one,title为test的div.60 ??????<div class="mini" ?title="other">class为mini,title为other</div>61 ??????<div class="mini" ?title="test">class为mini,title为test</div>62 ??</div>63 64 ??<div class="one">65 ??????<div class="mini">class为mini</div>66 ??????<div class="mini">class为mini</div>67 ??????<div class="mini">class为mini</div>68 ??????<div class="mini" ?title="tesst">class为mini,title为tesst</div>69 ??</div>70 71 72 ??<div style="display:none;" ?class="none">style的display为"none"的div</div>73 ??74 ??<div class="hide">class为"hide"的div</div>75 ??76 ??<span id="mover">正在执行动画的span元素.</span>77 </body>78 </html>jQuery--内容过滤和可见性过滤
原文地址：https://www.cnblogs.com/jxxblogs/p/9595383.html