jQuery中的内容、可见性过滤选择器（四、四）：:contains()、:empty、:has()、:parent、:hidden、:visible

<!DOCTYPE html>
<html>
<head>
<title>内容、可见性过滤选择器</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
    <style type="text/css">
    	body{
    		font-family: "Microsoft YaHei"
    	}
    	.divCls {
    		width:180px;
    		height:180px;
    		color: white;
    		border: solid 1px white;
    		margin-left: 10px;
    		float: left;
    		background-color: #0092E7;
    	}
    	.subDivCls {
    		width:60px;
    		height:60px;
    		color:white;
    		border: solid 1px white;
    		font-size: 12px;
    		margin: 5px;
    		float: right;
    		background-color: #FF4500;
    	}
    	.spanCls{
    		color:white;
    		border: solid 1px white;
    		margin: 5px;
    		float: left;
    		height: 50px;
    		background-color: #DCA112;
    	}
    	div span{
    		border: solid 1px white;
    		font-size: 12px;
    		margin:5;
    		background-color: #DCA112;
    	}
    	.cGreen{background-color: #4CA902}
    	.cPink{background-color: #ED4A9F}
    	.cBlue{background-color: #0092E7}
    	.cCyan{background-color: #01A6A2}
    	.cYellow{background-color: #DCA112}
    	.cRed{background-color: #B7103B}
    	.cPurple{background-color: #792F7C}
    	.cBlack{background-color: #110F10}
    	.cOrange{background-color: #FF4500}
    	.cGray{background-color: #A9A9A9}
    	.hide{display: none;}
    </style>
    <script type="text/javascript">
    	$(document).ready(function() {
    		// <input type="button" id="btn1" value=":contains()选取元素内容包含mzy的div元素">
    		$("#btn1").click(function() {
				// 注意是contains，并不是contain！
    			$("div:contains('mzy')").addClass("cBlack");
			});

			// <input type="button" id="btn2" value=":empty选取不包含子元素或文本的div元素">
    		$("#btn2").click(function() {
    			$("div:empty").addClass("cBlack");
			});

    	    // <input type="button" id="btn3" value=":has()选取含有span元素的div元素">
    	    $("#btn3").click(function() {
    			$("div:has('span')").addClass("cBlack");
			});

    	    // <input type="button" id="btn4" value=":parent选取含有子元素或文本的div元素">
    	    $("#btn4").click(function() {
    			$("div:parent").addClass("cBlack");
			});

    	    // <input type="button" id="btn5" value=":hidden弹出隐藏input元素的值">
    	    $("#btn5").click(function() {
    	    	alert($("input:hidden").val());
			});

    	    // <input type="button" id="btn6" value=":visible选取所有的可见input元素">
    	    $("#btn6").click(function() {
    	    	$("input:visible").addClass("cBlack");
			});
		});
    </script>
    </head>

    <body>
      <div id="div1" class="divCls">id 为div1 的div<br><br>
      	<div class="subDivCls">class为subDivCls的div</div>
     	</div>
      <div id="div2" class="divCls">id 为div2 的div
      	<br><br>
      	<span id="span1">div2里面的span,id为span1</span>
      	<br><br>
      	<div class="subDivCls" style="float:left;">class为subDivCls的div</div>
      	<div class="subDivCls">subDivCls<br>
      		<span id="span2">span2</span>
      	</div>
      </div>
      <div id="div3" class="divCls" title="mzy">
      id 为div3 的div，title为mzy，包含隐藏输入框，输入框的值为hello
  		<input type="hidden" value="hello">
      </div>
      <span class="spanCls">div3的兄弟元素span</span>
      <div id="div4" class="divCls">id 为div4 的div<br>
  	    <div class="subDivCls" style="float:left;">subDivCls<br>
      		<span id="span2">span4</span></div>
  	    <div class="subDivCls" title="mzy">title为mzy</div>
  	    <div class="subDivCls" style="float:left;">class为subDivCls的div</div>
  	    <div class="subDivCls"></div>
      </div>
      <p style="clear:both;"></p>
      <br>
      <hr>
      <input type="button" id="btn1" value=":contains()选取元素内容包含mzy的div元素">
      <input type="button" id="btn2" value=":empty选取不包含子元素或文本的div元素">
      <input type="button" id="btn3" value=":has()选取含有span元素的div元素">
      <input type="button" id="btn4" value=":parent选取含有子元素或文本的div元素">
      <input type="button" id="btn5" value=":hidden弹出隐藏input元素的值">
      <input type="button" id="btn6" value=":visible选取所有的可见input元素">
    </body>
  </html>