jQuery 選取元素 (Selectors)

jQuery 最基本的中心思想就是以「選取 DOM 元素為開始」，接著就是對它們作一些事。

jQuery 在選取元素方面採用 CSS 選擇器的語法 (CSS1、CSS2、CSS3)，此外透過 plugin 你也可以使用 XPath 語法，我們直接看幾道範例你就會明白怎麼在 jQuery 中用 CSS Selectors 選取元素。

語法 (Syntax)

$(selectors);

tag selector

在 jQuery 中

$('a'); // 取得頁面中所有的 <a> 標籤元素

在 JavaScript DOM 中

document.getElementsByTagName('a');

在 CSS 中

a {
}

id selector

在 jQuery 中

$('#el'); // 取得 id 為 el 的元素

在 JavaScript DOM 中

document.getElementById('el');

在 CSS 中

#el {
}

class selector

在 jQuery 中

$('.item'); // 取得 class name 為 item 的所有元素

在 JavaScript DOM 中

document.getElementsByClassName('item');

在 CSS 中

.item {
}

同樣道理，CSS 中有的你都能依樣畫葫蘆

在 jQuery 中

$('#container a'); // 取得 id 為 container 之元素其內部的所有連結 <a>

在 CSS 中

#container a {
}

在 jQuery 中

$('div > p'); // 取得 div 父元素其下所有直接 (不包括子元素的子元素) 的 p 子元素

在 CSS 中

div > p {
}

在 jQuery 中

$('tr:first'); // 取得第一個找到的 tr 標籤元素

在 CSS 中

tr:first {
}

在 jQuery 中

$('input[name="email"]'); // 取得其 name 屬性值為 email 的 input 元素

在 CSS 中

input[name="email"] {
}

jQuery Selectors 取回的元素的型態 (type) 是什麼？

jQuery 物件 ($) 會將匹配到的元素以 陣列 (array) 型態返回一個 jQuery 物件，也就是說你可以像下面這樣取得被匹配到元素的個數：

// 我們想知道選取到幾個 <a>?
$('a').length; // 直接用 JavaScript array 的 length 屬性取得
$('a').size(); // 或用 jQuery object 的 size 方法

jQuery 物件 --> 實際 HTML DOM 元素

正如上述，取得的元素是一個 jQuery 物件，因此如果我們作下面這樣操作是會產生錯誤的：

// 把 $('#container') 當作 JavaScript DOM 物件操作？
$('#container').style.display = 'none';
// 錯誤 style is not defined

Why? 因為 style is not defined。jQuery 物件沒 style 這屬性，因為它不是 DOM 物件嘛！

如果你想操作實際的 DOM 元素怎麼辦？ jQuery 提供下面的方法來處理這問題：

// 用 get() 方法將 jQuery object 轉換為 JavaScript DOM 元素集合
var container = $('#container').get();

// 取得 $('.containers') 元素集合裡的第 X 個 DOM 元素
// get 後面接的是索引值，索引值由 0 開始
var containers = $('.containers').get(1);
// 或者你也可以這樣寫
var container = $('#container')[1];

我們再回頭來看看，可以正確執行的 code 應該是這樣的：

$('#container').get(0).style.display = 'none';

JavaScript DOM 物件 --> jQuery 物件

反過來，如果你想將 DOM 轉為 jQuery 物件，只要將 DOM 傳入 $():

$(domElements);

例如：

var $jqueryObject = $(document.getElementById('id'));