jQuery 選取元素 (Selectors)
jQuery 最基本的中心思想就是以「選取 DOM 元素為開始」，接著就是對它們作一些事。 jQuery 在選取元素方面採用 CSS 選擇器的語法 (CSS1、CSS2、CSS3)，此外透過 plugin 你也可以使用 XPath 語法，我們直接看幾道範例你就會明白怎麼在 jQuery 中用 CSS Selectors 選取元素：語法 (Syntax)$(selectors);
tag selectorjQuery 中 $("a"); // 取得頁面中所有的<a>標籤元素
JS DOM 中 document.getElementsByTagName("a");
CSS 中 a {}
id selectorjQuery 中 $("#container"); // 取得id為container的元素
JS DOM 中 document.getElementById("container");
CSS 中 #container {}
class selectorjQuery 中 $(".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的input元素
CSS 中 input {}
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");
我們再來看看，可以正確執行的 Code 應該是這樣的： $("#container").get(0).style.display = "none";
DOM 物件 → jQuery 物件反過來，如果你想將 DOM 轉為 jQuery 物件，只要將 DOM 傳入「$()」: jQuery(elements);
或$(elements);
如： $(document.getElementById("id"));
暈死也不多加點分 一樓的位置好啊..
頁:
[1]