JQuery选择器【一】
层次选择器
<body>
<div id="divOne">
<span id="spanOne">
<span id="spanTwo"></span>
</span>
</div>
<div id="divTwo">
<span id="spanThree"></span>
</div>
<div id="divThree">
</div>
<span id="spanFore"></span>
<span id="spanFive"></span>
</body>
注意：下面的代码中的console.log()只能在火狐浏览器中运行，请大家借助火狐浏览器的Firebug查看运行的结果，造成不便之处请原谅！
$("ancestor descendant")：选取ancestor元素里的所有descendant(后代)元素
//$("div span")选取<div>里的所有的<span>元素
//结果：[span#spanOne, span#spanTwo, span#spanThree]
console.log($("div span"));
$("parent>child")：选取parent元素下的child(子)元素
//$("div > span")选取<div>元素下元素名是<span>的子元素
//结果：[span#spanOne, span#spanThree]
console.log($("div>span"));
$("prev+next")：选取紧接在prev元素后的next元素
//$("div+span")选取<div>元素的下一个<span>兄弟元素
//结果：[span#spanFore]
console.log($("div+span"));
$("prev~siblings")：选取prev元素之后的所有siblings元素
//$("div~span")选取<div>元素后面的所有<span>兄弟元素
//结果：[span#spanFore, span#spanFive]
console.log($("div~span"));
基本过滤选择器
<body>
<h1></h1>
<h2></h2>
<div id="divOne">
<span id="spanOne"></span>
<span id="spanTwo"></span>
</div>
<div id="divTwo">
<span id="spanThree"></span>
</div>
<div id="divThree">
</div>
<span id="spanFore"></span>
<span id="spanFive"></span>
</body>
:first 选取第一个元素
//$("div:first")选取所有<div>元素中第一个<div>元素
//[div#divOne]
console.log($("div:first"));
:last 选取最后一个元素
//$("div:last")选取所有<div>元素中最后一个<div>元素
//[div#divThree]
console.log($("div:last"));
:not(selector) 去除所有与给定选择器匹配的元素
//$("div:not(#divTwo)")选取id不是divTwo的div元素
//[div#divOne, div#divThree]
console.log($("div:not(#divTwo)"));
:even 选取索引是偶数的所有元素，索引从0开始
//选取索引是偶数的所有元素，索引从0开始
//[span#spanOne, span#spanThree, span#spanFive]
console.log($("span:even"));
:odd 选取索引是奇数的所有元素，索引从0开始
//选取索引是奇数的所有元素，索引从0开始
//[span#spanTwo, span#spanFore]
console.log($("span:odd"));
:eq(index) 选取索引等于index的元素(index从0开始)
//选取索引等于index的元素(index从0开始)
//[span#spanThree]
console.log($("span:eq(2)"));
:gt(index) 选取索引大于index的元素(index从0开始)
//选取索引大于index的元素(index从0开始)
//[span#spanFore, span#spanFive]
console.log($("span:gt(2)"));
:lt(index) 选取索引小于index的元素(index从0开始)
//选取索引小于index的元素(index从0开始)
//[span#spanOne, span#spanTwo]
console.log($("span:lt(2)"));
:header 选取所有标题元素，例如：h1,h2,h3等等
//选取所有标题元素，例如：h1,h2,h3等等
//[h1, h2]
console.log($(":header"));
内容过滤选择器
<body>
<div id="divOne">
<span id="spanOne">son</span>
<span id="spanTwo"></span>
</div>
<div id="divTwo">
<span id="spanThree"></span>
</div>
<div id="divThree">
son
</div>
<span id="spanFore"></span>
<span id="spanFive">son</span>
</body>
:contains(text) 选取含有文本内容为text的元素
//选取含有文本内容为text的元素
//$("div:contains('son')")选取含有文本"son"的<div>元素
//[div#divOne, div#divThree]
console.log($("div:contains('son')"));
:empty 选取不包含子元素或者文本的空元素
//选取不包含子元素或者文本的空元素
//$("span:empty")选取不包含子元素(包括文本元素)的<span>空元素
//[span#spanTwo, span#spanThree, span#spanFore]
console.log($("span:empty"));
:has(selector) 选取含有选择器所匹配的元素的元素
//选取含有选择器所匹配的元素的元素
//$("div:has(span)")选取含有<span>元素的<div>元素
//[div#divOne, div#divTwo]
console.log($("div:has(span)"));
:parent 选取含有子元素或者文本的元素
//选取含有子元素或者文本的元素
//$("span:parent")选取拥有子元素(包括文本元素)的<span>元素
//[span#spanOne, span#spanFive]
console.log($("span:parent"));
