上一節的遺留問題，關於this的相關問題，先來解決一下。
this的相關問題
this指代的是什么
這個應該是比較好理解的，this就是指代當前操作的DOM對象。
在jQuery中，this可以用於單個對象，也可以用於多個對象。
$('btn').click(function(){
alert(this.innerHTML); // 單個對象，this指代當前id為btn的DOM對象
});
$('div').each(function(index){
alert(this.innerHTML); // 多個對象，this指代當前循環中索引為index的DOM對象
});
jQuery中的this和$(this)有什么區別
jQuery中的this和$(this)有什么區別
$("div").each(function(index){
alert($(this)); // [object Object] jQuery對象
alert(this); // [object HTMLDivElement] DOM對象
});
可以觀察到，this指代的是DOM對象，$(this)指代的是包裝當前DOM對象的jQuery對象。
jQuery選擇器
上一節也分析到，jQuery的最大貢獻之一就是方便的獲取DOM元素，並對DOM元素進行操作。
先看幾個簡單的例子：
$('div'); // 選擇所有標簽為div的DOM元素
$('#info'); // 選擇id為info的DOM元素
$('div>p'); // 選擇所有div標簽下的子集標簽為p的DOM元素
$('input[placeholder*="info"]'); // 獲取所有input標簽中，屬性placeholder值中包含info字段的DOM元素
$('p:odd'); // 獲取所有標簽為p的元素壓入棧中，選擇其中索引值為奇數的DOM元素
可以看到，有多種選擇方式讓你獲取你所需要的對象，這些先作為一個引子，讓我們對jQuery的選擇器有一個大致上的印象。現在以開發者的角度來思考：如何選擇需要的DOM元素。
1. 首先能想到的是，獲取指定id的元素，對其進行操作。
$('#info'); // 獲取id為info的元素
2. 既然可以獲取指定id的元素，那么理所應當的，也可以獲取指定class的元素。
$('.info'); // 獲取class為info的元素
3. 有時會遇到一系列具有相同className的元素，而這些元素之間沒有辦法互相區分彼此。
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<div class='info'>0</div>
<div class='info'>1</div>
<div class='info'>2</div>
<div class='info'>3</div>
<div class='info'>4</div>
</body>
</html>
這時，如果我想獲取這一系列元素中的第一個：
$('.info:first').val(); // 獲取class為info的一系列元素中的第一個元素的值，即0
我想獲取這一系列元素中的最后一個：
$('.info:last').val(); // 獲取class為info的一系列元素中的最后一個元素的值，即4
那獲取任意一個元素呢？
$('.info:eq(2)').val(); // 獲取class為info的一系列元素中索引為2的元素的值，即2（索引從0開始）
看來選擇單個元素還是很方便的，那要是選擇符合某些條件的復數個元素呢？比如選擇這一組元素的后三個元素：
$('.info:gt(1)'); // 獲取class為info的一系列元素中索引大於1的對象，即2,3,4
$('.info:lt(2)'); // 獲取class為info的一系列元素中索引小於2的對象，即0,1
選擇系列元素中索引為奇數的元素（好像很少這么做，但jQuery也為我們提供了選擇器）
$('.info:odd'); // 獲取class為info的一系列元素中索引為奇數（1,3）的對象，即1,3
$('.info:even'); // 獲取class為info的一系列元素中索引為偶數（0,2,4）的對象，即0、2、4
4. 比如現在有一系列鏈接元素，但是它們並沒有唯一id標識，也沒有className區分，各個元素之間僅有href是不一致的，該如何選擇需要的元素呢？
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<div>
<a>0</a>
<a href='/info'>1</a>
<a href='/infomation'>2</a>
<a href='/test'>3</a>
</div>
</body>
</html>
比如我想選擇帶有href屬性的a標簽元素：
$('a[href]'); // 選擇帶有href屬性的a標簽，即1,2,3
選擇href屬性值為info的a標簽元素：
$('a[href="info"]'); // 選擇href屬性為info的a標簽，即1
選擇href屬相值已info開頭的a標簽元素：
$('a[href^="info"]'); // 選擇帶有href屬性值已info開頭的a標簽，即1,2
選擇href屬性值已tion結尾的a標簽元素：
$('a[href$="tion"]'); // 選擇帶有href屬性值已tion結尾的a標簽，即2
選擇href屬性值中有fo字段的a標簽元素：
$('a[href*="fo"]'); // 選擇帶有href屬性值中包含fo的a標簽，即1,2
當然，也可以進行反選，選擇href屬性值中不包含info的a標簽元素：
$('a[href!="info"]'); // 選擇帶有href屬性值中不包含info的a標簽，即3
5. 還有會遇到一些情況，要求我們根據DOM元素的內容來選擇合適的元素。
$('div:contains("info")'); // 選擇div標簽中內容包含info字段的元素
6. 現在我們已經通過指定id、class或是指定索引值、屬性值來確定元素，讓我們換個角度，有沒有可能從元素之間的關系來確定元素呢？
先統一名稱：
同級元素：即當前元素處於同一層級。
<div> <p>0</p> // 當前兩個標簽為p的元素處於同一層級，屬於同級元素 <p>1</p> </div>
父級元素：即當前元素的直屬上層元素。
祖先元素：即當前元素的所有上層元素。
子級元素：即當前元素的直屬子層元素。
后代元素：即當前元素的所有子層元素。
<div id='ancestor'> <div id='father'> // 標簽為p的元素的父級元素是id為father的元素，祖先元素為id為father和ancestor的元素 <p><span>0</span></p> // id為father的元素的子級元素是標簽為p的元素，后代元素為標簽p與span的元素 <p>1</p> </div> </div>
統一好關系名稱之后，再探討元素之間的關系就不會感覺混亂。
現在有如下代碼：
<form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="firstletter" />
<input name="secondletter" />
</fieldset> <input name="none" /> </form>
選擇標簽為form的所有子級input元素：
$('form>input'); // 選擇標簽為from的元素下的所有標簽為input的子級元素，即name=“name”，name=“none”的元素
選擇標簽為form的所有的后代input元素：
$('form input'); // 選擇標簽為from的元素下的所有標簽為input的后代元素，即name=“name”，name=“none”，name=“firstletter”，name=“secondletter”的元素
也可以選擇符合條件的同級元素（同級元素中的第一個）：
$('label+input'); // 選擇標簽為label的同級元素中，標簽為input的元素中的第一個，即name=“name”，name=“firstletter”的元素
也可以選擇所有符合條件的同級元素：
$('label~input'); // 選擇標簽為label的同級元素中，所有標簽為input的元素，即name=“name”，name=“firstletter”，name=“secondletter”，name=“none”的元素
選擇后代元素中包含選定元素的元素：
<div> <p><span>Hello</span></p> </div> <div>Hello again!</div>
$('div:has(span)') // 選擇所有后代元素中包含span元素的div元素
以上便是暫時能夠想到的獲取DOM對象的方法，通過閱讀jQuery手冊，發現jQuery也很好的將這些考慮了進去。在下一節中，可以針對jQuery中的選擇器進行總結。