TShopping

 找回密碼
 註冊
搜索
查看: 630|回復: 3

[教學] jQuery 選取元素 (Selectors)

[複製鏈接]
發表於 2012-7-27 16:04:02 | 顯示全部樓層 |閱讀模式
 
Push to Facebook Push to Plurk Push to Twitter 
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"));
複製代碼


 

臉書網友討論
發表於 2013-11-14 00:43:30 | 顯示全部樓層
暈死也不多加點分  

版主招募中

發表於 2013-11-14 00:43:30 | 顯示全部樓層
一樓的位置好啊..  


您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



Archiver|手機版|小黑屋|免責聲明|TShopping

GMT+8, 2016-12-9 03:58 , Processed in 0.055051 second(s), 18 queries .

本論壇言論純屬發表者個人意見,與 TShopping綜合論壇 立場無關 如有意見侵犯了您的權益 請寫信聯絡我們。

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表