<!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 {
180px;
height: 180px;
color: white;
border: solid 1px white;
margin-left: 10px;
float: left;
background-color: #792F7C;
}
.subDivCls {
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>