<!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: #4CA902;
}
.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: #B7103B;
}
div span{
border: solid 1px white;
font-size: 12px;
margin:5;
background-color: #B7103B;
}
.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=":first选取id为div4的第一个子div">
$("#btn1").click(function() {
/*
注意:前后不能加空格，因为其实我们知道空格是代表后代的意思；
之所以>前后可以加空格，是因为其实>子元素的意思，而子元素也是从后代中取的，
所以这里加空格不影响，并且后代的空格可以加任意个，只是平时我们为了好看只
加了一个空格而已。
这里选择id为div4的第一个子div，可以用后代选择器，也可以用子元素选择器；
但是我觉得子元素选择器更准确，所以使用子元素选择器。
但是这里两种都能达到同样的效果。
*/
// $("#div4 div:first").addClass("cBlack");
$("#div4 > div:first").addClass("cBlack");
});
// <input type="button" id="btn2" value=":last选取id为div4的最后一个子div">
$("#btn2").click(function() {
$("#div4 > div:last").addClass("cBlack");
});
// <input type="button" id="btn3" value=":not()选取id为div2的所有非div元素">
$("#btn3").click(function() {
// 注意之前说的规则！冒号左边的空格必须有，代表后代；
// 冒号右边不能有空格！！冒号一般情况下都不能加空格，
// 除非和后代选择器，子元素选择器配合使用才加空格！
// 千万注意这里的冒号右边不能加空格，不然就凉凉。
$("#div2 :not(div)").addClass("cBlack");
});
// <input type="button" id="btn4" value=":even选取索引号(从0开始)为偶数的div元素">
$("#btn4").click(function() {
// 对所有的div，不再是某一个div了
$("div:even").addClass("cBlack");
});
// <input type="button" id="btn5" value=":odd选取索引号(从0开始)为奇数的div元素">
$("#btn5").click(function() {
$("div:odd").addClass("cBlack");
});
// <input type="button" id="btn6" value=":eq()选取索引号(从0开始)等于2的div元素">
$("#btn6").click(function() {
// 千万注意，这里的索引号是从0开始的！！！
$("div:eq(2)").addClass("cBlack");
});
// <input type="button" id="btn7" value=":gt选取索引号(从0开始)大于2的div元素">
$("#btn7").click(function() {
$("div:gt(2)").addClass("cBlack"); // gt：great than
// 以上是大于的时候，大于等于就使用加逗号分隔开的形式。
// $("div:gt(2), div:eq(2)").addClass("cBlack"); // gt：great than
});
// <input type="button" id="btn8" value=":lt选取索引号(从0开始)小于2的div元素">
$("#btn8").click(function() {
$("div:lt(2)").addClass("cBlack"); // lt：little than
// 以上是小于的时候，小于等于就使用逗号加分隔开的形式。
// $("div:lt(2), div:eq(2)").addClass("cBlack"); // lt：little than
});
// <input type="button" id="btn9" value=":header选取标题元素">
/* 所谓header选择器，其实就是对h1~hx我记不得了，所有的标题标签的选择 */
$("#btn9").click(function() {
// 设置字体为白色，背景为黑色，并且弹出内容来表示选中。
/*
在jQuery中使用方法连缀很方便，因为其回调的属性，可以支持我们
在语句后一直连缀方法，最后都是返回执行的$("*:header")中的内容
click().change().addClass(). ... 可以一直连缀下去。
这样的话，一个语句就可以完成我们的全部操作。
<
js中都是onclick，onchange；jQuery中都是click，change之类的
发现从过程到了对象 ...
>
$("*:header").css("color", "white").addClass("cBlack");
alert($("*:header").text());
*/
$(":header").css("color", "white").addClass("cBlack");
alert($(":header").text());
/*
以上两种方式加*或者什么都不写把冒号左边空出来。
两种方式都可以。因为之前讲过，*代表整个文档树（所有html内容）
在具体使用中可以在冒号左边再使用expr来定位位置：
具体的某个div中h标签等。
*/
});
// <input type="button" id="btn10" value=":animated选取正在执行动画的div元素">
$("#btn10").click(function() {
// 所有正在执行动画的div，所以不能再冒号左边加空格
$("div:animated").addClass("cBlack");
});
});
// --------动画设置--------begin
$(document).ready(function() {
// 设置执行动画
doAnimate($("#div5")[0]);
});
function doAnimate(obj){
$(obj).animate({"opacity": "toggle"}, "slow", function(){
doAnimate(this);
});
}
// --------动画设置--------end
</script>
</head>
<body>
<h3>基本过滤选择器</h3><br><br>
<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="itcast">
id 为div3 的div，title为itcast，包含隐藏输入框
<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="itcast">title为itcast</div>
<div class="subDivCls" style="float:left;">class为subDivCls的div</div>
<div class="subDivCls"></div>
</div>
<div id="div5" class="divCls" >id为div5的正在执行动画的div</div>
<p style="clear:both;"></p>
<br>
<hr>
<input type="button" id="btn1" value=":first选取id为div4的第一个子div">
<input type="button" id="btn2" value=":last选取id为div4的最后一个子div">
<input type="button" id="btn3" value=":not()选取id为div2的所有非div元素">
<input type="button" id="btn4" value=":even选取索引号(从0开始)为偶数的div元素">
<input type="button" id="btn5" value=":odd选取索引号(从0开始)为奇数的div元素">
<input type="button" id="btn6" value=":eq()选取索引号(从0开始)等于2的div元素">
<input type="button" id="btn7" value=":gt选取索引号(从0开始)大于2的div元素">
<input type="button" id="btn8" value=":lt选取索引号(从0开始)小于2的div元素">
<input type="button" id="btn9" value=":header选取标题元素">
<input type="button" id="btn10" value=":animated选取正在执行动画的div元素">
</body>
</html>
