jQuery 選取元素 (Selectors)

woff

jQuery 最基本的中心思想就是以「選取 DOM 元素為開始」，接著就是對它們作一些事。 jQuery 在選取元素方面採用 CSS 選擇器的語法 (CSS1、CSS2、CSS3)，此外透過 plugin 你也可以使用 XPath 語法，我們直接看幾道範例你就會明白怎麼在 jQuery 中用 CSS Selectors 選取元素：
語法 (Syntax)$(selectors);
tag selectorjQuery 中

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

複製代碼

JS DOM 中

1. document.getElementsByTagName("a");

複製代碼

CSS 中

1. a {}

複製代碼

id selectorjQuery 中

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

複製代碼

JS DOM 中

1. document.getElementById("container");

複製代碼

CSS 中

1. #container {}

複製代碼

class selectorjQuery 中

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

複製代碼

JS DOM 中

1. document.getElementsByClassName("content");

複製代碼

// FF3、或自己實作這個函式CSS 中

1. .content {}

複製代碼

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

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

複製代碼

CSS 中

1. #container a {}
   

複製代碼

jQuery 中

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

複製代碼

CSS 中

1. div > p {}
   

複製代碼

jQuery 中

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

複製代碼

CSS 中

1. tr:first {}
   

複製代碼

jQuery 中

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

複製代碼

CSS 中

1. input[name='newsletter'] {}

複製代碼

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

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

複製代碼

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

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

複製代碼

WHY？因為 style is not defined。(jQuery 物件沒 style 這屬性，因為它不是 DOM 物件嘛！)
jQuery 物件只能使用 jQuery 的方法；而 DOM 物件只能使用 DOM 物件的方法。
如果你想操作實際的 DOM 元素怎麼辦？ jQuery 提供下面的方法來處理這問題：

1. /* 轉換為真實 DOM 元素集合 */ var container = $("#container").get(); /*

複製代碼

  取得 $(".containers") 元素集合裡的第X個 DOM 元素  get後面接的是索引值，索引值由0開始*/

1. var containers = $(".containers").get(0);

複製代碼

或，您也可以這樣

1. var container = $("#container")[0];
   

複製代碼

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

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

複製代碼

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

1. jQuery(elements);

複製代碼

或

1. $(elements);

複製代碼

如：

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

複製代碼

nicoleamy

暈死也不多加點分  

昊广壁仓

一樓的位置好啊..