第2章 jQuery选择器
选择器是jQuery的根基。
jQuery选择器是什么
1.CSS选择器
CSS：Cascading Style Sheets，层叠样式表。它使得网页的结构和表现样式完全分离。
CSS选择器：找到需要应用某个样式的特定的HTML元素的表现规则。
CSS选择器有：
-
几乎所有主流浏览器都支持的选择器：
标签选择器、ID选择器、类选择器、群组选择器、后代选择器、通配选择符。 -
主流浏览器并非完全支持所有的CSS选择器：
伪类选择器、子选择器（E > F）、临近选择器（E + F）、属性选择器（E[attr]）。
CSS应用到网页中有3种方式：行间样式、内部样式表、外部样式表。
2.jQuery选择器
jQuery中的选择器完全继承了CSS的风格。
使用jQuery选择器时无需担心浏览器是否支持这一选择器。
举例
- JavaScript代码和HTML代码混杂在一起的糟糕做法。（结构和样式不分离）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery选择器</title>
</head>
<body>
<p onclick="demo();">点击我.</p>
<script>
function demo() {
alert('JavaScript demo.');
}
</script>
</body>
</html>
2. 建议将网页内容和行为分离：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery选择器</title>
</head>
<body>
<!-- <p onclick="demo();">点击我.</p>
<script>
function demo() {
alert('JavaScript demo.');
}
</script> -->
<p class="demo">jQuery Demo</p>
<script src="../jquery-3.3.1.js"></script>
<script>
$(".demo").click(function(){ //给class为demo的元素添加行为
alert("jQuery demo!");
});
</script>
</body>
</html>
jQuery选择器的优势
- 简洁的写法
- 支持CSS1到CSS3选择器（无需考虑兼容性问题）
- 完善的处理机制
举例：
使用getElementById()和getElementsByTagName()、getElementsByClassName()等函数时，若id、标签、类名不存在会报错：
<div>test</div>
<script>
document.getElementById("tt").style.color = "red";
</script>
需加一个if判断：
<div>test</div>
<script>
if(document.getElementById("tt")){
document.getElementById("tt").style.color = "red";
}
</script>
jQuery无需判断：
扫描二维码关注公众号，回复：
5345632 查看本文章
<div>test</div>
<script>
$('#tt').css("color","red"); //这里无需判断$('#tt')是否存在
</script>
$("#tt")获取的永远是对象，要判断网页上是否有次元素，两种方式：
- 根据获取到元素的长度来判断
if($("#tt").length > 0) {
//do something
}
- 转化成DOM对象来判断
if($("#tt")[0]) {
//do something
}
jQuery选择器
传统用JavaScript给元素添加行为事件的做法
例子1：给网页中的所有<p>添加onclick事件。
比如有以下HTML，要给每个p元素添加点击事件。
<p>测试1</p>
<p>测试2</p>
- 获取所有的
<p>元素。 - 对
<p>元素进行循环（因为获取的是数组对象）。 - 给每个
<p>元素添加行为事件。
JavaScript代码：
<script>
var items = document.getElementsByTagName("p"); //获取网页中所有的p元素
for(var i = 0; i < items.length; i++) { //由于获取的是数组对象，因此需要把它循环出来
items[i].onclick = function () { //给每个对象添加onclick事件
//doing something //这里面的代码如果用到i，需要在这个内部函数外面套一个立即执行函数，闭包经典问题。
}
}
</script>
例子2：使一个特定的表格隔行变色。
HTML：
<table id="tb">
<tbody>
<tr>
<td>第一行</td>
<td>第一行</td>
</tr>
<tr>
<td>第二行</td>
<td>第二行</td>
</tr>
<tr>
<td>第三行</td>
<td>第三行</td>
</tr>
<tr>
<td>第四行</td>
<td>第四行</td>
</tr>
<tr>
<td>第五行</td>
<td>第五行</td>
</tr>
<tr>
<td>第六行</td>
<td>第六行</td>
</tr>
</tbody>
</table>
步骤：
- 根据表格id获取表格。
- 在表格内获取
<tbody>元素。 - 在
<tbody>元素下获取<tr>元素。 - 循环输出获取的
<tr>元素。 - 对
<tr>元素的索引值除以2并取模，然后根据奇偶设置不同的背景色。
JavaScript代码：
var item = document.getElementById("tb"); //获取id为tb的元素（table）
var tbody = item.getElementsByTagName("tbody")[0]; //获取表格的第1个tbody元素
var trs = tbody.getElementsByTagName("tr"); //获取tbody元素下的所有tr元素
for(var i = 0; i < trs.length; i++) { //循环tr元素
if(i%2 == 0) { //取模（取余数。）
trs[i].style.backgroundColor = "#888"; //改变符合条件的tr元素的背景色
}
}
例子3：对多选框进行操作，输出选中的多选框的个数。
HTML：
<input type="checkbox" value="1" name="check" checked/>
<input type="checkbox" value="2" name="check"/>
<input type="checkbox" value="3" name="check" checked/>
<input type="button" value="你选中的个数" id="btn"/>
步骤：
- 新建一个空数组。
- 获取所有name为"check"的多选框。
- 循环判断多选框是否被选中，如果被选中则添加到数组里。
- 获取输出按钮，然后为按钮添加onclick事件，输出数组的长度即可。
JavaScript代码：
var btn = document.getElementById("btn"); //获取id为btn的元素（button）
btn.onclick = function () { //给元素添加onclick事件
var arrays = new Array(); //创建一个数组对象
var items = document.getElementsByName("check");
//获取name为check的一组元素（checkbox）
for(i = 0; i < items.length; i++){ //循环这组数据
if(items[i].checked){ //判断是否选中
arrays.push(items[i].value); //把符合条件的数据添加到数组中
//push()是JavaScript数组中的方法
}
}
alert(`选中的个数为：${arrays.length}`);
}
使用jQuery获取这些元素
jQuery选择器分为：
- 基本选择器
- 层次选择器
- 过渡选择器
- 表单选择器
实例
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="one" id="one">
id为one,class为one的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
id为two,class为one,title为test的div.
<div class="mini" title="other">
class为mini,title为other
</div>
<div class="mini" title="test">
class为mini,title为test
</div>
</div>
<div class="one">
<div class="mini">
class为mini
</div>
<div class="mini">
class为mini
</div>
<div class="mini">
class为mini
</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">
class为mini
</div>
<div class="mini">
class为mini
</div>
<div class="mini">
class为mini
</div>
<div class="mini" title="test">
class为mini,title为test
</div>
</div>
<div style="display: none;" class="none">
style的display为"none"的div
</div>
<div class="hide">
class为"hide"
</div>
<div>
包含input的type为"hidden"的div
<input type="hidden" size="8"/>
</div>
<span id="mover">正在执行动画的span元素.</span>
</body>
</html>
CSS：
div,
span,
p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
- 基本选择器
#id （例：
$("#test")）
.class （例：$(".test")）
element （例：$("p")）
*（例：$("*")）
selector1, selector2,······,selectorN （例：$("div,span, p.myClass")）
实例代码：
$("#one").css("background","#bbffaa"); //#id
$(".mini").css("background","#bbffaa"); //.class
$("div").css("background","#bbffaa"); //element
$("*").css("background","#bbffaa"); //*
$("span, #two").css("background","#bbffaa"); //selector1, selector2,······,selectorN
2. 层次选择器
- $(“ancestor descendant”)
例： $(“div span”) 选取div里的所有span元素。
- $(“parent > child”)
例： $(“div > span”) 选取div元素下元素名是span的子元素（只有一级父子结构）。
- $(“prev + next”)
例： $(".one + div") 选取class为one的下一个div同辈元素。
- $(“prev~siblings”)
例： $("#two~div") 选取id为two的元素后面的所有div同辈元素。
示例
jQuery代码：
$("body div").css("background","#bbffaa"); //$("ancestor descendant")
$("body > div").css("background","#bbffaa"); //$("parent > child")
$(".one + div").css("background","#bbffaa"); //$("prev + next")
$("#two ~ div").css("background","#bbffaa"); //$("prev~siblings")
等价关系
$(“prev + next”)选择器与next()方法的等价关系
$(".one + div") === $(".one").next(“div”)
$(“prev~siblings”)选择器与nextAll()方法的等价关系
$("#prev~div") === $("#prev").nextAll(“div”)
siblings()方法与前后位置无关，只要是同辈节点就都能匹配。
$("#two ~ div").css("background","#bbffaa"); //$("prev~siblings")选取#two之后的所有同辈div元素
$("#two")
.nextAll("div").css("background","#bbffaa"); //nextAll();同上
$("#two")
.siblings("div").css("background","#bbffaa"); //siblings();选取#two所有同辈div元素，无论前后位置
3.过渡选择器
- 基本过滤选择器
- :first （选取第1个元素）
- :last （选取最后一个元素）
- :not(selector) （去除所有与给定选择器匹配的元素）
- :even （选取索引是偶数的所有元素，索引从0开始）
- :odd （选取索引是奇数的所有元素，索引从0开始）
- :eq(index) （选取索引等于index的元素，index从0开始）
- :gt(index)（选取索引大于index的元素，index从0开始）
- :lt(index) （选取索引小于index的元素，index从0开始）
- :header （选取所有的标题元素，例如h1，h2，h3等等）
- :animated （选取当前正在执行动画的所有元素）
- :focus （选取当前获取焦点的元素）
示例jQuery代码
$("div:first").css("background","#bbffaa");
$("div:last").css("background","#bbffaa");
$("div:not(.one)").css("background","#bbffaa");
$("div:even").css("background","#bbffaa");
$("div:odd").css("background","#bbffaa");
$("div:eq(3)").css("background","#bbffaa");
$("div:gt(3)").css("background","#bbffaa");
$("div:lt(3)").css("background","#bbffaa");
$(":header").css("background","#bbffaa");
$(":animated").css("background","#bbffaa");
$(":focus").css("background","#bbffaa");
前面HTML和CSS加了一点内容：
HTML：
<h1>代码演示</h1>
CSS：
span {
animation: 3s linear 1s slidein infinite alternate;
}
@keyframes slidein {
from {
height: 0;
}
to {
height: 140px;
}
}
加了以下代码是有效果的，但是使用jQuery选择器:focus却没有效果，很奇怪哦。:animated也没有效果。
button:focus {
background: #f40;
}
官方API把:focus归类到表单选择器里，在基本筛选（过滤）里面并没有。
废弃的API并没有:focus，可以放心食用。
最后发现
其实，是一开始就执行代码，所以页面刷新的时候它检查有没有获取焦点的元素，有就换背景，因为时间太快，咱们来不及让按钮和input获取焦点，所以就没有显示。所以我加了下面这段代码，就可以看到效果了。
哈哈，不是书本的问题，我自己的问题。果然是圣经。
setTimeout(function(){
$(":focus").css("background","#bbffaa");
},2000);
至于:animated的可能是动画要用jQuery添加动画的方法才能识别，用CSS3动画它并不识别，所以要修改代码，把前面span运动的CSS3代码注释掉。添加以下js代码：
function aniDiv(){
$("#mover").animate({height:0},"slow");
$("#mover").animate({height:140},"slow",aniDiv);
}
aniDiv();
var btn = document.getElementById("btn");
btn.onclick = function() {
$(":animated").css("background","#bbffaa");
console.log($(":animated"));
}
- 内容过滤选择器
- :contains(text) （选取含有文本内容为”text“的元素）
- :empty （选择不包含子元素或者文本的空元素）
- :has(selector) （选取含有选择器所匹配的元素的元素）
- :parent （选取含有子元素或者文本的元素）
示例代码
$("div:contains(di)").css("background","#bbffaa");
$("div:empty").css("background","#bbffaa");
$("div:has('.mini')").css("background","#bbffaa");
$("div:parent").css("background","#bbffaa");
注意：
:has是选择含有.class的元素的div元素。这个div本身可以没有mini这个class，但是它的子元素一定至少有一含有mini这个class。
- 可见性过滤选择器
- :hidden （选取所有不可见的元素）
- :visible （选取所有可见的元素）
示例代码
$("div:visible").css("background","#FF6500");
$("div:hidden").show(3000);
- 属性过滤选择器
- [attribute] （选取拥有此属性的元素）
- [attribute=value]
- [attribute!=value]
- [attribute^=value] （以value开头）
- [attribute$=value] （以value结尾）
- [attribute*=value] （含有value）
- [attribute|=value] （value等于或为前缀(以-连接)）
- [attribute~=value] （选取属性用空格分隔的值中包含一个给定值的元素）
- [attribute1][attribute2][attributeN] （满足多个条件）
太简单，不做演示。
- 子元素过滤选择器
- :nth-child(index/even/odd/equation)
- :nth-child(2)
- :nth-child(3n) 索引值是3的倍数
- :nth-child(3n+1)
- :first-child
- :last-child
- :only-child 父元素下只有一个子元素。
- 表单对象属性过滤选择器
- :enabled 可用的元素
- :disabled 不可用的元素
- checked 选中的元素（单选框，复选框）
- selected 选中的元素（下拉列表）
示例
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表单测试</title>
</head>
<body>
<form action="#" id="form1">
可用元素：<input name="add" value="可用的文本框"/><br/>
不可用元素：<input name="email" disabled value="不可用文本框"/> <br/>
可用元素：<input name="che" value="可用文本框"/> <br/>
不可用元素：<input name="name" disabled value="不可用文本框"/> <br/>
<br/>
多选框：<br/>
<input type="checkbox" name="newsletter" checked value="test1" />test1
<input type="checkbox" name="newsletter" value="test2" />test2
<input type="checkbox" name="newsletter" value="test3" />test3
<input type="checkbox" name="newsletter" checked value="test4" />test4
<input type="checkbox" name="newsletter" value="test5" />test5
<div></div>
<br/><br/>
下拉列表1：<br/>
<select name="test" multiple style="height: 100px;">
<option>浙江</option>
<option selected>湖南</option>
<option>北京</option>
<option selected>天津</option>
<option>广州</option>
<option>湖北</option>
</select>
<br/><br/>
下拉列表2：<br/>
<select name="test2">
<option>浙江</option>
<option>湖南</option>
<option selected>北京</option>
<option>天津</option>
<option>广州</option>
<option>湖北</option>
</select>
<div></div>
</form>
</body>
</html>
jQuery代码：
$("#form1 input:enabled").val("这里变化了！");
$("#form1 input:disabled").val("这里变化了！");
$("[name='newsletter']").change(function(){
$("div:last-child").html(`有${$("input:checked").length}个选中`);
});
$("select").change(function(){
$("div:last-child").html(`你选中的是：${$("select :selected").text()}`);
});
4.表单选择器
- :input 选取所有的
<input>、<textarea>、<select>和<button>元素。 - :text 选取所有的单行文本框
- :password
- :radio
- :checkbox
- :submit
- :image
- :reset
- :button
- :file
- :hidden
示例
HTML：
<form id="form1" action="#">
<input type="button" value="Button"/><br/>
<input type="checkbox" name="c"/>1
<input type="checkbox" name="c"/>2
<input type="checkbox" name="c"/>3<br/>
<input type="file" /><br/>
<input type="hidden" />
<div style="display:none">test</div><br/>
<input type="image" /><br/>
<input type="password" /><br/>
<input type="radio" name="a"/>1
<input type="radio" name="a"/>2<br/>
<input type="reset" /><br/>
<input type="submit" value="提交"/><br/>
<input type="text" /><br/>
<select>
<option>Option</option>
</select><br/>
<textarea rows="5" cols="20"></textarea><br/>
<button>Button</button><br/>
</form>
jQuery代码（这段代码采用网上的）：
$(document).ready(function(){
var $alltext = $("#form1 :text");
var $allpassword= $("#form1 :password");
var $allradio= $("#form1 :radio");
var $allcheckbox= $("#form1 :checkbox");
var $allsubmit= $("#form1 :submit");
var $allimage= $("#form1 :image");
var $allreset= $("#form1 :reset");
var $allbutton= $("#form1 :button"); // <input type=button /> 和 <button ></button>都可以匹配
var $allfile= $("#form1 :file");
var $allhidden= $("#form1 :hidden"); // <input type="hidden" />和<div style="display:none">test</div>都可以匹配.
var $allselect = $("#form1 select");
var $alltextarea = $("#form1 textarea");
var $AllInputs = $("#form1 :input");
var $inputs = $("#form1 input");
$("div").append(" 有" + $alltext.length + " 个（ :text 元素）<br/>")
.append(" 有" + $allpassword.length + " 个（ :password 元素）<br/>")
.append(" 有" + $allradio.length + " 个（ :radio 元素）<br/>")
.append(" 有" + $allcheckbox.length + " 个（ :checkbox 元素）<br/>")
.append(" 有" + $allsubmit.length + " 个（ :submit 元素）<br/>")
.append(" 有" + $allimage.length + " 个（ :image 元素）<br/>")
.append(" 有" + $allreset.length + " 个（ :reset 元素）<br/>")
.append(" 有" + $allbutton.length + " 个（ :button 元素）<br/>")
.append(" 有" + $allfile.length + " 个（ :file 元素）<br/>")
.append(" 有" + $allhidden.length + " 个（ :hidden 元素）<br/>")
.append(" 有" + $allselect.length + " 个（ select 元素）<br/>")
.append(" 有" + $alltextarea.length + " 个（ textarea 元素）<br/>")
.append(" 表单有 " + $inputs.length + " 个（input）元素。<br/>")
.append(" 总共有 " + $AllInputs.length + " 个(:input)元素。<br/>")
.css("color", "red")
$("form").submit(function () { return false; }); // return false;不能提交.
});
应用jQuery改写示例
前面三个例子用jQuery重写：
例子1：
$(function(){ // dom元素加载完毕
$("p").click(function(){//获取页面中的所有p元素 , 给每一个p元素添加onclick事件.
//doing something...
alert("suc!");
})
})
例子2：
$(function(){// dom元素加载完毕
$('#tb tbody tr:even').css("backgroundColor","#888");
//获取id为tb的元素,然后寻找他下面的tbody标签，再寻找tbody下索引值是偶数的tr元素,
//改变它的背景色.
})
例子3：
$(function(){// dom元素加载完毕
$('#btn').click(function(){ //获取id为btn的元素,给它添加onclick事件
var items = $("input[name='check']:checked");
//获取name为check的一组元素,然后选取它们中选中(checked)的。
alert( "选中的个数为："+items.length )
})
})
选择器中的一些注意事项
- 选择器中含有"."、"#"、"("、")"、"[“或”]"等特殊字符。使用转义字符转义。
$("#id#b");——>$("#id\\#b");
$("#id[1]");——>$("#id\\[1\\]");
- 属性选择器的@符合问题
以前版本的问题，把@去掉就好，我没学过以前版本，自动忽略。
$(" div[@title='test']");——>$(" div[title='test']");
- 选择器中含有空格，会产生不同结果。
案例研究——某网站品牌列表的效果
HTML：
<div class="SubCategoryBox">
<ul>
<li >
<a href="#">佳能</a>
<i>(30440) </i>
</li>
<li >
<a href="#">索尼</a>
<i>(27220) </i>
</li>
<li >
<a href="#">三星</a>
<i>(20808) </i>
</li>
<li >
<a href="#">尼康</a>
<i>(17821) </i>
</li>
<li >
<a href="#">松下</a>
<i>(12289) </i>
</li>
<li >
<a href="#">卡西欧</a>
<i>(8242) </i>
</li>
<li >
<a href="#">富士</a>
<i>(14894) </i>
</li>
<li >
<a href="#">柯达</a>
<i>(9520) </i>
</li>
<li >
<a href="#">宾得</a>
<i>(2195) </i>
</li>
<li >
<a href="#">理光</a>
<i>(4114) </i>
</li>
<li >
<a href="#">奥林巴斯</a>
<i>(12205) </i>
</li>
<li >
<a href="#">明基</a>
<i>(1466) </i>
</li>
<li >
<a href="#">爱国者</a>
<i>(3091) </i>
</li>
<li >
<a href="#">其它品牌相机</a>
<i>(7275) </i>
</li>
</ul>
<div class="showmore">
<a href="more.html">
<span>显示全部品牌</span>
</a>
</div>
</div>
CSS：
*{
margin:0;
padding:0;
list-style: none;
text-decoration: none;
}
body {
font-size:12px;
text-align:center;
}
a {
color:#04D;
}
a:hover {
color:#F50;
text-decoration:underline;
}
.SubCategoryBox {
width:600px;
margin:0 auto;
text-align:center;
margin-top:40px;
}
.SubCategoryBox ul li {
display:block;
float:left;
width:200px;
line-height:20px;
}
.showmore {
clear:both;
text-align:center;
padding-top:10px;
}
.showmore a {
display:block;
width:120px;
margin:0 auto;
line-height:24px;
border:1px solid #AAA;
}
.showmore a span {
padding-left:15px;
background:url(./img/down.gif) no-repeat 0 0;
}
.promoted a {
color:#F50;
}
jQuery代码：
<script src="../jquery-3.3.1.js"></script>
<script>
$(function(){ // 等待DOM加载完毕.
var $category = $('ul li:gt(5):not(:last)'); // 获得索引值大于5的品牌集合对象(除最后一条)
$category.hide(); // 隐藏上面获取到的jQuery对象。
var $toggleBtn = $('div.showmore > a'); // 获取“显示全部品牌”按钮
$toggleBtn.click(function(){
if($category.is(":visible")){
$category.hide(); // 隐藏$category
$(this).find('span')
.css("background","url(./img/down.gif) no-repeat 0 0")
.text("显示全部品牌"); //改变背景图片和文本
$('ul li').removeClass("promoted"); // 去掉高亮样式
}else{
$category.show(); // 显示$category
$(this).find('span')
.css("background","url(./img/up.gif) no-repeat 0 0")
.text("精简显示品牌"); //改变背景图片和文本
$('ul li').filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')")
.addClass("promoted"); //添加高亮样式
}
return false; //超链接不跳转
})
})
</script>
使用toggle()方法改善代码：
$(function(){ // 等待DOM加载完毕.
var $category = $('ul li:gt(5):not(:last)'); // 获得索引值大于5的品牌集合对象(除最后一条)
$category.hide(); // 隐藏上面获取到的jQuery对象。
var $toggleBtn = $('div.showmore > a'); // 获取“显示全部品牌”按钮
$toggleBtn.toggle(function(){ //toggle()方法用来交替一组动作
$category.show(); // 显示$category
$(this).find('span')
.css("background","url(./img/up.gif) no-repeat 0 0")
.text("精简显示品牌"); //改变背景图片和文本
$('ul li').filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')")
.addClass("promoted"); //添加高亮样式
console.log(111);
return false; //超链接不跳转
}, function(){
$category.hide(); // 隐藏$category
$(this).find('span')
.css("background","url(./img/down.gif) no-repeat 0 0")
.text("显示全部品牌"); //改变背景图片和文本
$('ul li').removeClass("promoted"); // 去掉高亮样式
console.log(222);
return false; //超链接不跳转
});
});
这个很奇怪，我用jquery3.3.1版本的那个按钮会自动跑不见，用网上别人的jquery文件就没问题。我附上jquery文件吧。
好的，没办法嵌入文件，需要可以自行查找。
附上我的邮箱：[email protected]
其他选择器
- MoreSelectors for jQuery
插件下载地址：http://plugins.jquery.com/project/moreSelectors
书上给的地址打不开，我找了一下，发现一个下载地址：
https://plugins.jquery.com/
好的，上面也没有这个插件。 - Basic Xpath
插件下载地址：http://plugins.jquery.com/project/xpath
其他使用CSS选择器的方法
- document.getElementsBySelector()
发布地址：http://simonwillison.net/2003/Mar/25/getElementsBySelector/ - cssQuery()
官方网站：http://dean.edwards.name/my/cssQuery/ - querySelectorAll()
W3C Selectors API：http://www.w3.org/TR/selectors-api/