窗簾、壁紙、地毯、塑膠地板、設計
最多的壁紙素材可以挑選及整體搭的設計配、免費到府丈量
來電客最高的施工品質來完成客戶所託
達到您最滿意的服務品質與信賴,做到最好的施工品質與最佳的保固服務

首頁  •  j2h 論壇 • 程式設計討論     • 

[JQuery] jQuery Selector

房東:阿凱
發表時間:2012-01-15


jQuery的Selector種類繁多,神奇又好用,但在某些情境下還是可能找不到100%符合需求的。像是:contains()可以用來比對"文字內容包含某個字串",但如果我們要的是"文字內容完全等於某個字串"或是"文字內容完全等於某個字串,但不用分大小寫",要怎麼辦?


先假設情境是要找出所有文字內容恰等於"Darkthread"的<a>,例如: <a href="..." mce_href="...">Darkthread</a>,如果用$("a:contains('Darkthread')")則連<a href="..." mce_href="...">Fake Darkthread</a>也會被算進來。


一個簡單且直覺的方法是利用filter函數:

$("a").filter(function() { return $(this).text() == "Darkthread" });


但有更巧妙的做法--Selector不合用? 那就自己寫一個! jQuery在架構上已預留可自行擴充Selector的空間,要擴充很簡單。說到這裡,大家對jQuery的景仰是否已如濤濤江水?


假設我們對:contains()的"包含"特性不滿意,我們打算生出另一個:exact('...')的Selector,限定文字內容要完全相符才算數,只需要一行Code:

$.extend($.expr[":"], { exact: "(a.textContent||a.innerText||jQuery(a).text()||'') == m[3];"  });


接著就可以用$("a:exact('Darkthread')")來找出文字完全吻合Darkthread的<a>了。


回頭來看一下要自訂Selector的設定語法

$.extend($.expr[":"], { filterName: filterEvalExpression });


其中filterName是要自訂的Selector Filter名稱,filterEvalExpression的字串內容則是一個邏輯運算式,用以傳回true或false,而在運算式中,我們有幾個預設變數可用:



  • a 比對的DOM元素物件

  • i 元素在查詢結果的排序位置

  • m 拆解Selector而成的字串陣列,當Filter是:exact('aaa')時,可利用m[3]取得aaa,作為比對之用。


有興趣深入研究的人可以參考jquery.js裡的Filter寫法,應該很快就能照著研發出自己想要的Selector。


至於不分大小寫的比對,相信難不倒大家吧:

$.extend($.expr[":"], { exactCI: "(a.textContent||a.innerText||jQuery(a).text()||'').toLowerCase() == m[3].toLowerCase();"  });


【2009-01-31更新】jQuery 1.3中無法直接以字串表示過濾邏輯,需寫成$.extend($.expr[":"], { exact: function(a, i, m) { return (a.textContent || a.innerText || jQuery(a).text() || '') == m[3]; } }); 詳細說明





  • 贊助網站       

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

  • 1 樓住戶:小白
    發表時間:2012-01-31

    通俗的講, Selector選擇器就是"一個表示特殊語意的字符串". 只要把選擇器字符串傳入上面的方法中就能夠選擇不同的Dom對象並且以jQuery包裝集的形式返回.

    但是如何將jQuery選擇器分類讓我犯難. 因爲書上的分類和jQuery官方的分類截然不同. 最後我決定以實用爲主, 暫時不去瞭解CSS3選擇器標準, 而按照jQuery官方的分類進行講解.

    jQuery的選擇器支持CSS3選擇器標準. 下面是W3C最新的CSS3選擇器標準:

    標準中的選擇器都可以在jQuery中使用.

    jQuery選擇器按照功能主要分爲"選擇"和"過濾". 並且是配合使用的. 可以同時使用組合成一個選擇器字符串. 主要的區別是"過濾"作用的選擇器是指定條件從前面匹配的內容中篩選, "過濾"選擇器也可以單獨使用, 表示從全部"*"中篩選. 比如:

    $(":[title]")

    等同於:

    $("*:[title]")

    而"選擇"功能的選擇器則不會有默認的範圍, 因爲作用是"選擇"而不是"過濾".

    下面的選擇器分類中, 帶有"過濾器"的分類表示是"過濾"選擇器, 否則就是"選擇"功能的選擇器.

    jQuery選擇器分爲如下幾類:

    [說明]
    1.點擊"名稱"會跳轉到此方法的jQuery官方說明文檔.
    2.可以在下節中的jQuery選擇器實驗室測試各種選擇器

    1. 基礎選擇器 Basics

    名稱

    說明

    舉例

    #id

    根據元素Id選擇

    $("divId") 選擇ID爲divId的元素

    element

    根據元素的名稱選擇,

    $("a") 選擇所有元素

    .class

    根據元素的css類選擇

    $(".bgRed") 選擇所用CSS類爲bgRed的元素

    選擇所有元素

    $("*")選擇頁面所有元素

    selector1,
    selector2,
    selectorN

    可以將幾個選擇器用","分隔開然後再拼成一個選擇器字符串.會同時選中這幾個選擇器匹配的內容.

    $("#divId, a, .bgRed")

    [學習建議]: 大家暫時記住基礎選擇器即可, 可以直接跳到下一節"jQuery選擇器實驗室"進行動手練習, 以後再回來慢慢學習全部的選擇器, 或者用到的時候再回來查詢.

    2.層次選擇器 Hierarchy

    名稱

    說明

    舉例

    ancestor descendant

    使用"form input"的形式選中form中的所有input元素.即ancestor(祖先)爲from, descendant(子孫)爲input.

    $(".bgRed div") 選擇CSS類爲bgRed的元素中的所有
    元素.

    parent > child

    選擇parent的直接子節點child. child必須包含在parent中並且父類是parent元素.

    $(".myList>li") 選擇CSS類爲myList元素中的直接子節點
  • 對象.

    prev + next

    prev和next是兩個同級別的元素. 選中在prev元素後面的next元素.

    $("#hibiscus+img")選在id爲hibiscus元素後面的img對象.

    prev ~ siblings

    選擇prev後面的根據siblings過濾的元素
    注:siblings是過濾器

    $("#someDiv~[title]")選擇id爲someDiv的對象後面所有帶有title屬性的元素

    3.基本過濾器 Basic Filters

    名稱

    說明

    舉例

    :first

    匹配找到的第一個元素

    查找表格的第一行:$("tr:first")

    :last

    匹配找到的最後一個元素

    查找表格的最後一行:$("tr:last")

    :not(selector)

    去除所有與給定選擇器匹配的元素

    查找所有未選中的 input 元素: $("input:not(:checked)")

    :even

    匹配所有索引值爲偶數的元素,從 0 開始計數

    查找表格的1、3、5...行:$("tr:even")

    :odd

    匹配所有索引值爲奇數的元素,從 0 開始計數

    查找表格的2、4、6行:$("tr:odd")

    :eq(index)

    匹配一個給定索引值的元素
    注:index從 0 開始計數

    查找第二行:$("tr:eq(1)")

    :gt(index)

    匹配所有大於給定索引值的元素
    注:index從 0 開始計數

    查找第二第三行,即索引值是1和2,也就是比0大:$("tr:gt(0)")

    :lt(index)

    選擇結果集中索引小於 N 的 elements
    注:index從 0 開始計數

    查找第一第二行,即索引值是0和1,也就是比2小:$("tr:lt(2)")

    :header

    選擇所有h1,h2,h3一類的header標籤.

    給頁面內所有標題加上背景色: $(":header").css("background", "#EEE");

    :animated

    匹配所有正在執行動畫效果的元素

    只有對不在執行動畫效果的元素執行一個動畫特效: $("#run").click(function(){
    $("div:not(:animated)").animate({ left: "+=20" }, 1000);
    });

    4. 內容過濾器 Content Filters

    名稱

    說明

    舉例

    :contains(text)

    匹配包含給定文本的元素

    查找所有包含 "John" 的 div 元素:$("div:contains('John')")

    :empty

    匹配所有不包含子元素或者文本的空元素

    查找所有不包含子元素或者文本的空元素:$("td:empty")

    :has(selector)

    匹配含有選擇器所匹配的元素的元素

    給所有包含 p 元素的 div 元素添加一個 text 類: $("div:has(p)").addClass("test");

    :parent

    匹配含有子元素或者文本的元素

    查找所有含有子元素或者文本的 td 元素:$("td:parent")

    5.可見性過濾器 Visibility Filters

    名稱

    說明

    舉例

    :hidden

    匹配所有的不可見元素

    注:在1.3.2版本中, hidden匹配自身或者父類在文檔中不佔用空間的元素.如果使用CSS visibility屬性讓其不顯示但是佔位,則不輸入hidden.

    查找所有不可見的 tr 元素:$("tr:hidden")

    :visible

    匹配所有的可見元素

    查找所有可見的 tr 元素:$("tr:visible")

    6.屬性過濾器 Attribute Filters

    名稱

    說明

    舉例

    [attribute]

    匹配包含給定屬性的元素

    查找所有含有 id 屬性的 div 元素:
    $("div[id]")

    [attribute=value]

    匹配給定的屬性是某個特定值的元素

    查找所有 name 屬性是 newsletter 的 input 元素:
    $("input[name='newsletter']").attr("checked", true);

    [attribute!=value]

    匹配給定的屬性是不包含某個特定值的元素

    查找所有 name 屬性不是 newsletter 的 input 元素:
    $("input[name!='newsletter']").attr("checked", true);

    [attribute^=value]

    匹配給定的屬性是以某些值開始的元素

    $("input[name^='news']")

    [attribute$=value]

    匹配給定的屬性是以某些值結尾的元素

    查找所有 name 以 'letter' 結尾的 input 元素:
    $("input[name$='letter']")

    [attribute*=value]

    匹配給定的屬性是以包含某些值的元素

    查找所有 name 包含 'man' 的 input 元素:
    $("input[name*='man']")

    [attributeFilter1][attributeFilter2][attributeFilterN]

    複合屬性選擇器,需要同時滿足多個條件時使用。

    找到所有含有 id 屬性,並且它的 name 屬性是以 man 結尾的:
    $("input[id][name$='man']")

    7.子元素過濾器 Child Filters

    名稱

    說明

    舉例

    :nth-child(index/even/odd/equation)

    匹配其父元素下的第N個子或奇偶元素

    ':eq(index)' 只匹配一個元素,而這個將爲每一個父元素匹配子元素。:nth-child從1開始的,而:eq()是從0算起的!

    可以使用:
    nth-child(even)
    :nth-child(odd)
    :nth-child(3n)
    :nth-child(2)
    :nth-child(3n+1)
    :nth-child(3n+2)

    在每個 ul 查找第 2 個li:
    $("ul li:nth-child(2)")

    :first-child

    匹配第一個子元素

    ':first' 只匹配一個元素,而此選擇符將爲每個父元素匹配一個子元素

    在每個 ul 中查找第一個 li:
    $("ul li:first-child")

    :last-child

    匹配最後一個子元素

    ':last'只匹配一個元素,而此選擇符將爲每個父元素匹配一個子元素

    在每個 ul 中查找最後一個 li:
    $("ul li:last-child")

    :only-child

    如果某個元素是父元素中唯一的子元素,那將會被匹配

    如果父元素中含有其他元素,那將不會被匹配。

    在 ul 中查找是唯一子元素的 li:
    $("ul li:only-child")

    8.表單選擇器 Forms

    名稱

    說明

    解釋

    :input

    匹配所有 input, textarea, select 和 button 元素

    查找所有的input元素:
    $(":input")

    :text

    匹配所有的文本框

    查找所有文本框:
    $(":text")

    :password

    匹配所有密碼框

    查找所有密碼框:
    $(":password")

    :radio

    匹配所有單選按鈕

    查找所有單選按鈕

    :checkbox

    匹配所有複選框

    查找所有複選框:
    $(":checkbox")

    :submit

    匹配所有提交按鈕

    查找所有提交按鈕:
    $(":submit")

    :image

    匹配所有圖像域

    匹配所有圖像域:
    $(":image")

    :reset

    匹配所有重置按鈕

    查找所有重置按鈕:
    $(":reset")

    :button

    匹配所有按鈕

    查找所有按鈕:
    $(":button")

    :file

    匹配所有文件域

    查找所有文件域:
    $(":file")

    9.表單過濾器 Form Filters

    名稱

    說明

    解釋

    :enabled

    匹配所有可用元素

    查找所有可用的input元素:
    $("input:enabled")

    :disabled

    匹配所有不可用元素

    查找所有不可用的input元素:
    $("input:disabled")

    :checked

    匹配所有選中的被選中元素(複選框、單選框等,不包括select中的option)

    查找所有選中的複選框元素:
    $("input:checked")

    :selected

    匹配所有選中的option元素

    查找所有選中的選項元素:
    $("select option:selected")


    http://tc.itkee.com/developer/detail-fa8.html



  •  共 1 人回應  選擇頁數 【第1 頁】 

    姓名:
    佈告內容:
    其他選項: