用壁貼、壁紙輕鬆變換風格,打造時尚
鄉村風、海洋風居家,感受初夏熱情洋溢
拆除工程居家防水幫手!專業防水規劃、壁癌處理
卓越施工品質,價格實在,工程實績豐富!
J2H流行雜誌J2h論壇程式設計討論   
交友配對個人設定加入會員會員說明重新登入


[JQuery] 選擇器 (selector)

房東:小蛙
發表時間:2016-01-13
[檢舉]


許多 jQuery selector 的概念其實是從 CSS selector 過來的,以下有幾個範例:



取得第一個找到的 li 標籤元素

$("li:first"); //jQuery

li:first {} //CSS



取得其 class 屬性值為class1 的 input元素

$("input[class='class1']"); //jQuery

input[name='newsletter'] {} //CSS



取得id為container之元素其內部的所有超連結

$(‘#container a’); //jQuery

#container a {} //CSS



取得div父元素其下所有的p子元素

$("div > p"); //jQuery

div > p {} //CSS





基本選擇器



jQuery 有三個最重要的選擇器,如下:



$(“element”):選出所有該 element 的節點

例如:$(“p”) :選出所有

的節點



$(“#divId”):選出所有
的節點



$(“.divClass”):選出所有
的節點



階層選擇器



階層屬性有以下四種:

物件中的某一種物件(空白):$(‘#div1 p’).addClass(‘d1′);

物件中的所有物件(*):$(‘#div1 *’).addClass("d1);

之後符合條件的第一個(+):$(‘#div1 + p’).addClass(‘d1′);

之後符合的所有(~):$(‘#div1 ~ p’).addClass(‘d1′);

可進來這裡觀看階層選擇器範例:http://jsfiddle.net/divaka/fuHFD/1/



子元素選擇器



$("ul li:nth-child(2)"); //第 2 個節點

$("ul li:nth-child(odd)"); //所有奇數子節點

$("ul li:nth-child(3n + 1)"); //1, 4, 7 … 個節點

$("div span:first-child") //所有的div元素的第一個子節點

$("div span:last-child") //所有的div元素的最後一個節點

$("div button:only-child") //所有只有一個 button 子節點的 div​​​​​​​​​​​​​​​​​​



屬性過濾選擇器



$("div[id]"); //選擇所有含有id屬性的div元素

$("input[name='Jack']"); //選擇所有的name屬性等於’Jack’的input元素

$("input[name!='Jack']"); //選擇所有的name屬性不等於’Jack’的input元素

$("input[name^='J']"); //選擇所有的name屬性以’J'開頭的input元素

$("input[name$='K']"); //選擇所有的name屬性以’k'結尾的input元素

$("input[name*='ck']"); //選擇所有的name屬性包含’ck’的input元素

$("input[id][name$='man']"); //可以使用多個屬性進行聯合選擇,該選擇器是得到所有的含有id屬性並且那麼屬性以man結尾的元素​​​​​​​​​​​​​​​​​​​​​​​​​​



jQuery 自訂選擇器(Custom Selectors)



:even:找出結果集中其偶數的 elements (2,4,6,8…)

: odd: 找出結果集為奇數(單數)的 elements (1,3,5,7…)

:eq(N), :nth(N):找出選擇結果集 index 為 N 的 elements

:gt(N):找出結果集中索引大於 N 的 elements

:lt(N):找出結果集中索引小於 N 的 elements

:first:找出結果集中的第一個 element (相當於 eq(0) 或者 nth(0))

:last:選擇結果集中的最後一個 element

:parent:在結果集中選擇 elements,它必須具有子 elements(包括文本節點)(跟 :empty 相反)

:contains(‘test’):選擇結果集中包含有指定文本的 elements

:has(selector):找出結果集中至少出現一次某 selector 的元素

:not(selector):反選取指定的 selector



可視 (visibility) 選擇器



:visible 選擇所有可見(visible)的 elements

display 屬性的值等於 visible、block、inline

visibility 屬性的值等於 visible

:hidden 選擇所有隱藏(visible)的 elements

display 屬性的值等於 none

visibility 屬性的值等於 hidden



表單選擇器(Form Selectors)



:input 選擇所有表單 elements(input, select, textarea, button)

:text 選擇所有 (type="text").

:password 選擇所有 (type="password").

:radio 選擇所有 (type="radio").

:checkbox 選擇所有 (type="checkbox").

:submit 選擇所有 (type="submit").

:image 選擇所有 (type="image").

:reset 選擇所有 (type="reset").

:button 選擇所有按鈕 (type="button").

:file 選擇所有 .

:hidden 選擇所有隱藏的表單元素



表單狀態選擇器 (Form Selectors Filter)



$("input:enabled"); //選擇所有的可操作的表單元素

$("input:disabled"); //選擇所有的不可操作的表單元素

$("input:checked"); //選擇所有的被checked的表單元素

$("input#test:checked"); //選擇所有的被checked的 input id=test 表單元素

$("select option:selected"); //選擇所有的select 的子元素中被selected的元素​​​​​​​​​



選擇器效能 (Performance) 議題



在特殊的環境中 (Ex. 大型系統,手機 App 等)情況,效能會變成一個很重要的議題,所以平常寫 jQuery Selector 把握幾個重點,就可以大幅加速網頁的運作效率,如下:



【減少不必要的選擇器】

例如對於 #id2 #id1 或 tag#id1 還不如直接寫 #id1 就好。因為文件中的 id 是唯一的,前面的父元素 #id2 沒有任何必要性。



【多用 ID 選擇 (#id) 器來取代其他選擇器】

因為 id 選擇器可以直接呼叫 Javascript 的 getElementById() 直接定位找出該 HTML 元素,效率最高。



【盡量少用 Class 選擇器】

class 選擇器必須解析整份文件,效能很差。但可以配合 tag, id 等組合的選擇器,將範圍縮小後,便能更有效率的使用 class 選擇器



【使用 parent>child 取代 parent child】

前者是父子關係。而後者是所有後代的關係,會遞迴處理子節點和子節點所有的子節點,和其後的所有子節點。



【將選取出來的元素快取到記憶體中】

如果元素會重複使用到,而且選取出來的結果不會產生變化時,盡量將已經選取出來的元素儲存到變數中,避免每次使用時都必須再選取一次、再重新解析一次文件。

ps. 最常用的應該是:$this = $(this);



【盡量使用 Javascript 原生選取方法】

如果你只需要選取 #id1,不需要進行複雜的 jQuery selector 選取模式,盡量使用 JS 原生方法,例如 getElementById() 和 getElementByTagName() 取代 jQuery ,例如想要取用 id=element1 這個 div,可以使用以下語法:





  1. var elem= document.getElementById("element1");  

  2. $(elem).css("color","blue");  







選擇器技巧



另外補充幾個選擇器技巧:





  1. //確認有選取到元素  

  2. if ($("#someDiv").length) {  

  3. //hooray!!! it exists...   

  4. }​  

  5. //檢查頁面當中是否有隱藏元素  

  6. if($(element).is(":visible") == "true") {  

  7. //The element is Visible  

  8. }​  

  9. //取得最鄰近的父元素  

  10. $("#searchBox").closest("div");​  



參考資料:http://design2u.me/blog/943/jquery-notes-g-selector-the-selector





  • J2H贊助網站            在此刊登廣告

    廣利不動產-板橋在地生根最實在--新板特區指名度最高、值得您信賴的好房仲
    完整房訊,房屋、店面熱門精選物件,廣利不動產 優質仲介,房屋租賃、買賣資訊透明,交易真安心!
    廣利不動產-新板特區指名度最高、值得您信賴的好房仲
    您的托付,廣利用心為您服務



  •  共 0 人回應

    回應主題
    ※注意 
    1. 抱歉,您的網頁未支援Cookie,此網頁將無法正常執行請檢查您電腦瀏覽器關於cookie的設定。設定方法說明
    2. 必須由首頁登入 J2H 流行雜誌