jQuery中的属性过滤选择器（四、五）：[attribute] 、[attribute=value]、[attribute!=value] 、[attribute^=value] 等

<!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: #792F7C;
}

.subDivCls {
	width: 60px;
	height: 60px;
	color: white;
	border: solid 1px white;
	font-size: 12px;
	margin: 5px;
	float: right;
	background-color: #01A6A2;
}

.spanCls {
	color: white;
	border: solid 1px white;
	margin: 5px;
	float: left;
	height: 50px;
	background-color: #ED4A9F;
}

div span {
	border: solid 1px white;
	font-size: 12px;
	margin: 5;
	background-color: #ED4A9F;
}

.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() {
		/*
		选取有id属性的div元素，这里的属性就要用中括号表示了
		*/
		// <input type="button" id="btn1" value="选取所有含有id属性的div元素">	
		$("#btn1").click(function() {
			$("div[id]").addClass("cBlack"); // 含有id属性的div
		});
		
		// <input type="button" id="btn2" value="选取title属性值等于mzy的div元素">
		$("#btn2").click(function() {
			$("div[title='mzy']").addClass("cBlack"); // id属性为mzy的的div
		});
		
		// <input type="button" id="btn3" value="选取不含有title属性或title属性值不等于mzy的div元素">
		$("#btn3").click(function() {
			/* 
			注意这里的不等于并不是真正意义上的title不为mzy，
			也包含了不存在title属性的div：
			这个是指所有不包含title属性的div，以及title属性不为mzy的div。
			*/
			$("div[title!='mzy']").addClass("cBlack"); 
		});
		
		// <input type="button" id="btn4" value="选取title属性值是以m开头的div元素">
		$("#btn4").click(function() {
			/* 
			属性选择器中，^代表开头。
			*/
			$("div[title^='m']").addClass("cBlack"); 
		});		
		
		// <input type="button" id="btn5" value="选取title属性值是以zy结尾的div元素">
		$("#btn5").click(function() {
			/* 
			属性选择器中，$代表结尾。
			*/
			$("div[title$='zy']").addClass("cBlack"); 
		});	
		/*
		在我误写，给一个btn注册了两个click
		事件之后，发现不会报错，但是也不会产生效果；
		注意不要给一个btn注册两个click事件。
		*/
		// <input type="button" id="btn6" value="选取title属性值包含有z的div元素">
		$("#btn6").click(function() {
			/* 
			属性选择器中，*代表任意位置包含。
			*/
			$("div[title*='z']").addClass("cBlack"); 
		});	
		
		/*
		关于对单个元素标签，做多次属性选择的时候
		我们通常将属性并列起来，例如：
		div[][][]...，这样就可以对单个元素标签
		进行多条件选择了！
		*/
		// <input type="button" id="btn7" value="选取含有id属性并且title属性值包含有z的div元素">
		$("#btn7").click(function() {
			// 加空格也是可以的，但是害怕了最好不要乱加
			// 因为有层次选择器中子代元素的前例。
			// $("div[id][title *= z]").addClass("cBlack");
			$("div[id][title*=z]").addClass("cBlack");
		});
	});
</script>
</head>

<body>
	<div id="div1" class="divCls" title="test">
		id 为div1 的div，title为test<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 <span id="span2">span2</span>
		</div>
	</div>
	<div id="div3" class="divCls" title="mzy">
		id 为div3 的div，title为mzy，包含隐藏输入框 <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;" title="test">title为test</div>
		<div class="subDivCls"></div>
	</div>
	<p style="clear: both;"></p>
	<br>
	<hr>
	<input type="button" id="btn1" value="选取所有含有id属性的div元素">
	<input type="button" id="btn2" value="选取title属性值等于mzy的div元素">
	<input type="button" id="btn3" value="选取不含有title属性或title属性值不等于mzy的div元素">
	<input type="button" id="btn4" value="选取title属性值是以m开头的div元素">
	<input type="button" id="btn5" value="选取title属性值是以zy结尾的div元素">
	<input type="button" id="btn6" value="选取title属性值包含有z的div元素">
	<input type="button" id="btn7" value="选取含有id属性并且title属性值包含有z的div元素">
</body>
</html>
jQuery中的属性过滤选择器（四、五）：[attribute] 、[attribute=value]、[attribute!=value] 、[attribute^=value] 等

猜你喜欢
