Jquery css+xPath

來源:互聯網
上載者:User

jQuery的選取器是CSS 1-3,XPath的結合物。jQuery提取這二種查詢語言最好的部分,融合後創造出了最終的jQuery運算式查詢語言。如果你瞭解CSS(絕大部分WEB開發人員都用到的),那麼你學起來就很容易了。

同時使用CSS和XPath

看幾個例子:

隱藏所有包含有連結的段落:

$("p[a]").hide();

顯示頁面的第一個段落:

$("p:eq(0)").show();

隱藏所有當前可見的層元素:

$("div:visible").hide();

擷取所有無序列表的清單項目:

$("ul/li")

/* valid too: $("ul > li") */

取得name值為bar的輸入欄位的值:

$("input[@name=bar]").val();

所有處於選中狀態的單選r按鈕:

$("input[@type=radio][@checked]")

如果你對查詢語言的工作原理還有疑問,可以訂閱這裡的郵件清單。

CSS查詢器

jQuery完全支援CSS1.3。

關於CSS的一些資料查看下面的串連:

  • CSS 1
  • CSS 2
  • CSS 3

下面列出來的是支援的CSS查詢器的列表式文法:

  • * 任何元素
  • E 類型為E的元素
  • E:root 類型為E,並且是文檔的根項目
  • E:nth-child(n) 是其父元素的第n個類型為E的子項目
  • E:first-child 是其父元素的第1個類型為E的子項目
  • E:last-child   是其父元素的最後一個類型為E的子項目
  • E:only-child   且是其父元素的唯一一個類型為E的子項目
  • E:empty 沒有子項目(包括text節點)的類型為E的元素
  • E:enabled
  • E:disabled 類型為E,允許或被禁止的使用者介面元素
  • E:checked 類型為E,處於選中狀態的使用者介面元素(例如選項按鈕或複選框)
  • E.warning 類型為E,且class屬性值為warning
  • E#myid 類型為E,ID為 "myid"。(至多匹配一個元素)
  • E:not(s) 類型為E,不匹配選取器s
  • E F 在類型E後面的類型為F的元素
  • E > F 為E元素子項目的F元素
  • E + F an F element immediately preceded by an E element
  • E ~ F an F element preceded by an E element

不同之處

所有的屬性選取器都被寫成和XPath極其相似(因為所有的屬性都以@符號開始)。

  • E[@foo] 擁有foo屬性的E元素
  • E[@foo=bar] foo屬性的值為bar的E元素
  • E[@foo^=bar] foo屬性的值以字串"bar"開始的E元素
  • E[@foo$=bar] foo屬性的值以字串"bar"結尾的E元素
  • E[@foo*=bar] foo屬性的值包含有字串"bar"結尾的E元素  

不支援的部分

  • E:link
  • E:visited an E element being the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited)
  • E:active
  • E:hover
  • E:focus an E element during certain user actions
  • E:target an E element being the target of the referring URI
  • E::first-line the first formatted line of an E element
  • E::first-letter the first formatted letter of an E element
  • E::selection the portion of an E element that is currently selected/highlighted by the user
  • E::before generated content before an E element
  • E::after generated content after an E element

jQuery不支援下列的選取器,因為這些沒什麼用處。

  • E:nth-last-child(n) an E element, the n-th child of its parent, counting from the last one
  • E:nth-of-type(n) an E element, the n-th sibling of its type
  • E:nth-last-of-type(n) an E element, the n-th sibling of its type, counting from the last one
  • E:first-of-type an E element, first sibling of its type
  • E:last-of-type an E element, last sibling of its type
  • E:only-of-type an E element, only sibling of its type
  • E:lang(fr) an element of type E in language "fr"

XPath 查詢器

XPath是jQuery內建支援的一種運算式語言。jQuery支援基本的XPath運算式。

定位路徑

  • 絕對路徑
    $("/html/body//p")
    $("/*/body//p")
    $("//p/../div")
  • 相對路徑
    $("a",this) 
    $("p/a",this)
支援的Axis選取器
  • Descendant Element has a descendant element
 $("//div//p") 
  • Child Element has a child element
 $("//div/p") 
  • Preceding Sibling Element has an element before it, on the same axes
 $("//div ~ form") 
  • Parent Selects the parent element of the element
 $("//div/../p") 支援的謂詞
  • [@*] 擁有一個屬性
    $("//div[@*]")
  • [@foo] 擁有foo屬性
    $("//input[@checked]")
  • [@foo='test'] 屬性foo值為'test'
    $("//a[@ref='nofollow']")
  • [Nodelist] Element contains a node list, for example: 
    $("//div[p]")
    $("//div[p/a]")

支援的謂詞,但與XPath和CSS又不同的

  • [last()] or [position()=last()]改為:last
    $("p:last")
  • [0] or [position()=0] 改為 :eq(0) or :first
    $("p:first")
    $("p:eq(0)")
  • [position() < 5] 改為:lt(5)
    $("p:lt(5)")
  • [position() > 2] 改為:gt(2)
    $("p:gt(2)")

定製的選取器

jQuery包含一些在CSS和XPath都不用到的運算式,但我們覺得它們使用起來非常方便,所以包含進來了。

下列的列表式文法基於不同的CSS選取器,但又有非常相似的名字。

  • :even 從匹配的元素集中取序數為偶數的元素
  • :odd 從匹配的元素集中取序數為奇數的元素
  • :eq(0) and :nth(0) 從匹配的元素集中取第0個元素
  • :gt(4) 從匹配的元素集中取序數大於N的元素
  • :lt(4) 從匹配的元素集中取序數小於N的元素
  • :first 相當於 :eq(0)
  • :last 最後一個匹配的元素
  • :parent 選擇包含子項目(包含text節點)的所有元素
  • :contains('test') 選擇所有含有指定文本的元素
  • :visible 選擇所有可見的元素(display值為block 或者visible 、visibility 值為visible的元素,不包括hide域)
  • :hidden 選擇所有隱藏的元素(非Hide域,且display值為block 或者visible 、visibility 值為visible的元素)

例:

 $("p:first").css("fontWeight","bold"); $("div:hidden").show(); $("div:contains('test')").hide(); 

表單選取器
這是為表單提供的一些選取器:

  • :input 選擇表單元素(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").

同樣也可以使用:hidden,詳細說明上面已經介紹過。

$('#myForm :input')

如果你需要指定表單:

$('input:radio', myForm)

這將選擇myForm表單中所有選項按鈕。選擇radio通常是用[@type=radio],但是這樣用理精簡些。

更多的選取器

jQuery選取器可以用一些第三方組件進行擴充:

  • More Selectors Plugin
  • Mike Alsup on Custom Selectors
  • Patch to allow selection by CSS property (full plugin to be released simultaneously with 1.1)

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.