jQuery 操作 DOM 的邏輯是先找到想操作的 DOM 元素，然後進行相應操作。實際中我們一般是先通過 jQuery 選擇器構造包含想要操作的 DOM 元素的 jQuery 對象，再通過 jQuery 對象方法對一個或一組 DOM 對象進行操作。全程使用鏈式操作完成方便清晰。
爲了準確地選擇要操作的 DOM 元素，jQuery 提供了類似 CSS 的豐富的選擇器，且這些選擇器可以按照一定規則組合以得到最大的靈活性。通過向 jQuery 函數傳遞選擇器字符串來選擇特定的 DOM 元素即 $(select)。
jQuery 常用選擇器
#id 選擇特定 id 的元素tag 選擇特定標籤的元素
.class 選擇特定 class 的元素
* 選擇所有元素
select1, select2, selectn 選擇多個選擇器匹配的元素
ancestor descendant 選擇 ancestor 匹配的元素的後代中匹配 descendant 的元素
parent > child 選擇 select1 匹配的元素的孩子中匹配 select2 的元素
prev + next 匹配緊接在 prev 之後的 next 兄弟元素
prev ~ siblings 匹配在 prev 之後的所有 siblings 兄弟元素
:first 獲取匹配的第一個元素
:not(selector) 選擇不匹配 selector 的元素
:even 匹配編號爲偶數的元素
:odd 匹配編號爲奇數的元素
:eq(index) 匹配特定編號的元素
:gt(index) 匹配編號大於特定值的元素
:lt(index) 匹配編號小於特定值的元素
:contains(text) 匹配包含給定文本的元素
:hidden 匹配不可見或 type 爲 hidden 的元素
:visible 匹配可見的元素
[attr] 匹配包含給定屬性的元素
[attr = value] 匹配給定屬性是某個特定值的元素
[attr != value] 匹配給定屬性不存在或不等於特定值的元素
[attr ^= value] 匹配給定屬性是以某些值開始的元素
[attr $= value] 匹配給定屬性是以某些值結束的元素
[attr *= value] 匹配給定屬性包含某些值的元素
要了解全部 jQuery 選擇器請查看 jQuery API http://jquery.cuishifeng.cn/id.html
jQuery 常用篩選函數
除了通過選擇器構造包含指定 DOM 元素的 jQuery 對象之外，jQuery 對象自身也提供了許多篩選函數來幫助我們近一步找到想要的元素。
eq(index) 選擇集合中的第 index 個元素
first() 選擇集合中第一個元素
last() 選擇集合中最後一個元素
hasClass(class) 選擇含有特定 class 的元素
filter(select) 選擇與 select 匹配的元素
is(select) 判斷是否與 select 匹配，只要有一個元素匹配就返回 true
has(select) 選擇包含與 select 匹配的後代的元素
map(cb) 對 DOM 集合進行 map 操作以構造一個新數組
not(select) 選擇不與 select 匹配的元素
children() 選擇集合中所有元素的子元素
parent() 選擇元素集合中所有元素的父元素
next() 選擇元素的下一個兄弟元素
find(select) 在匹配的元素上再次應用選擇器進行選擇
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="../lib/jquery-1.11.2/jquery.js"></script>
</head>
<body>
<div id="p1">
<p id="p2">
<a>
<span id="s1">hello7</span>
<span id="s2">hell2</span>
<span id="s3">hell3</span>
</a>
</p>
</div>
<script>
// p 裏面不能套 p
$(function() {
console.log($('*:has(span)'));
console.log($("span:contains(7) ~ *"));
console.log($("span:contains(7) + *"));
console.log($("span:first"));
console.log($("span:nth-child(2)")); // 從 1 開始計數
console.log($("[id ^= s]"));
console.log($('span:even')); // 從 0 開始計數
console.log($('span:gt(0)')); // 從 0 開始計數
console.log($(':visible'));
console.log($(':root')); // 文檔的根元素爲 html 元素
console.log($('span').eq(2));
console.log($('#p1').find('p'));
console.log($('#s1').parent().children());
console.log($('span').filter(':contains(7)'));
});
</script>
</body>
</html>
