jQuery 選取元素 (Selectors)

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

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

語法 (Syntax)

$(selectors);

tag selector

jQuery 中

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

JS DOM 中

document.getElementsByTagName("a");

CSS 中

a {}

id selector

jQuery 中

$("#container"); // 取得id為container的元素

JS DOM 中

document.getElementById("container");

CSS 中

#container {}

class selector

jQuery 中

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

JS DOM 中

document.getElementsByClassName("content");
// FF3、或自己實作這個函式

CSS 中

.content {}

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

jQuery 中

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

CSS 中

#container a {}

jQuery 中

$("div > p"); // 取得div父元素其下所有的p子元素

CSS 中

div > p {}

jQuery 中

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

CSS 中

tr:first {}

jQuery 中

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

CSS 中

input[name='newsletter'] {}

jQuery Selectors 取回的元素之型態？

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

// 選取到幾個<a>？
$('a').length;
$('a').size();

jQuery 物件 → 實際 HTML DOM 元素

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

$("#container").style.display = "none";

WHY？因為 style is not defined。(jQuery 物件沒 style 這屬性，因為它不是 DOM 物件嘛！)

jQuery 物件只能使用 jQuery 的方法；而 DOM 物件只能使用 DOM 物件的方法。

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

/* 轉換為真實 DOM 元素集合 */
var container = $("#container").get();
/*
  取得 $(".containers") 元素集合裡的第X個 DOM 元素
  get後面接的是索引值，索引值由0開始
*/
var containers = $(".containers").get(0);
或，您也可以這樣
var container = $("#container")[0];

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

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

DOM 物件 → jQuery 物件

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

jQuery(elements);
或
$(elements);

如：

$(document.getElementById("id"));