天天看點

jquery選擇器 設定Enabled屬性為FALSE

今天在做項目時需要講伺服器控件DropdownList的Enable屬性設定為false,便這樣 寫$("#dropdownlist1").attr("enabled","false"),結果發現根本無法設定Enable屬性,上網查閱了一下資 料,發現應該這樣寫$("#dropdownlist1").attr("disabled","false")。

    下面是在網站粘來的,和大家分享

    jQuery 具有一個相當強大的選擇器引擎,提供了完整的選擇器文法,允許我們選擇幾乎所有的元素組合。jQuery 的選擇器文法主要是基于 CSS3 和 XPath 的,對 CSS3 和 XPath 了解越多,使用 jQuery 時就越顯得心應手。有關 CSS 和 XPath,請參閱以下連結:

* CSS 1

* CSS 2

* CSS 3

* xPath

值得注意的是, CSS3 并沒有得到現今所有浏覽器的支援,是以我們很少使用它。然而,我們仍然可以在 jQuery 中使用 CSS3 選擇元素,因為 jQuery 具備自己的自定義選擇器引擎,并且實作了對 CSS3 的支援。

想了解 jQuery 選擇器更多資訊,可以通路 jQuery 的官方文檔有關 Selector 的部分。下面,在原官方文檔的基礎上作一些簡單的翻譯和說明。

1. CSS 選擇器(CSS Selectors)

jQuery 完整地支援 CSS 1-3,并且可以在(選擇器)表達式裡加入自定義的 CSS-like (和xPath)。

1.1 jQuery 支援的 CSS 選擇器文法

* * 任何 element

* E 類型為 E 的所有element(其實 E 可以是任何 element)

* E:nth-child(n) 一個類型為 E 的 element,它是其父 element 的第 n 個子 element

* E:first-child 一個類型為 E 的 element,它是其父 element 的第一個子 element (相當于E:nth-child(0))

* E:last-child 一個類型為 E 的 element,它是其父 element 的最後一個子 element

* E:only-child 一個類型為 E 的 element,它是其父 element 的唯一子 element

* E:empty 一個類型為 E 的使用者界面(UI) element,它沒有子 element(包括 文本 element)

* E:enabled 一個類型為 E 的使用者界面(UI) element,它被設定為禁止(disabled)

* E:disabled 一個類型為 E 的使用者界面(UI) element,它被設定為允許(enabled)

* E:checked 一個類型為 E 的使用者界面(UI) element,它處于選中(checked)狀态(适用于單選按鈕和複選框)

* E:selected 一個類型為 E 的使用者界面(UI) element,它處于被選擇(selected)狀态(在選擇範圍内,有一個或多個可供選擇的 element )。注意:selected 屬性并不在 CSS 的規範内,但jQuery 提供内部支援

* E.myclass 一個類型為 E 的 element,它的 class 類是“myclass”

* E#myid 一個類型為 E 的 element,它的 id 是“myid”

* E:not(s) 一個類型為 E 的 element,并且結果集中的 element 不比對(不包含)選擇器 s(用作過濾)

* E F 一個類型為 F 的 element,它是類型為E 的 element 的子孫 element(注意是子孫 element)

* E > F 一個類型為 F 的 element,它是類型為E 的 element 的子 element(注意是子 element)

* E + F 一個類型為 F 的 element,它是緊跟在類型為E 的 element 後面的一個兄弟 element(注意 F 是 E 的兄弟節點,并且是緊跟随其後的一個)

* E ~ F 一個類型為 F 的 element,它是類型為E 的 element 後面的一個兄弟 element(注意 F 是 E 的兄弟節點,并且位置在E 的後面)

* E,F,G 一個類型為 E 的 element,一個類型為 F 的 element,一個類型為 G 的 element(用于選擇多個 element) 

1.2 jQuery 支援,但(跟 CSS 規範)有所不同的選擇器文法

不同之處是必須在屬性名前加上符号“@”

o E[@foo] 一個類型為 E 的 element,它具有屬性“foo”

o E[@foo=bar] 一個類型為 E 的 element,它具有屬性“foo = bar”

o E[@foo^=bar] 一個類型為 E 的 element,它具有屬性“foo“,并且其屬性值是以”bar“開頭的

o E[@foo$=bar] 一個類型為 E 的 element,它具有屬性“foo“,并且其屬性值是以”bar“結尾的

o E[@foo*=bar] 一個類型為 E 的 element,它具有屬性“foo“,并且其屬性值包含”bar“

o E[@foo=bar][@baz=bop] 一個類型為 E 的 element,它具有屬性“foo = bar”和屬性”baz = bop“

注:以上的“bar”和“bop”均為字元串。

1.3 jQuery 不支援的選擇器文法(略)

因為沒什麼實際的作用,是以這裡也不作贅述,想了解詳情的可以參閱官方幫助文檔。

1.4 Contex 和 Anchoring

可以設定 contex 來 anchor(定位) 選擇器,這也是 jQuery 跟 CSS 規範的一個不同之處。使用者可以使用文法: $(expr, context) 來設定 context root。預設的 context root 是整個文檔。

2. XPath 選擇器(XPath Selectors)

XPath 也是 jQuer 支援的選擇器文法之一。jQuery 支援基本的 XPath 文法。下面以一些例子作說明。

2.1 定位路徑(Location Paths)

o 絕對路徑,相對于整個 HTML 文檔

$(”/html/body//p”) $(”body//p”) $(”p/../div”)

o 相對路徑,相對于設定的 context node “this”

$(”p/*”, this) $(”/p//a”, this)

2.2 支援 Axis 選擇器

o “//” : 子孫 elements (div 所有類型為 p 的子孫 elements)

$(”/div//p”) $(”//div//p”)

o “/” : 子 elements (div 所有類型為 p 的子 elements)

$(”//div/p”)

o “~” : 兄弟 elements (div 所有類型為 form 的兄弟 elements)

$(”//div ~ form”)

o ““..”: 父 elements (div 的父 element 下的類型為 p 的子 elements)

$(”//div/../p”)

2.3 支援謂詞文法(Predicates)

o [@foo] 具有屬性“foo”

$(”//input[@foo]”)

o [@foo=’test’] 具有屬性“foo = ‘test’”

$(”//a[@foo = ‘tsxt’]”)

o [Nodelist] 其子孫 elements 比對 Nodelist(用于過濾)

$(”//div[p]”) $(”//div[p/a]”)

2.4 jQuery 支援,但(跟 XPath 規範)有所不同的謂詞文法(Predicates)

o [last()] or [position()=last()] becomes :last(選擇結果集中的最後一個 element)

$(”p:last”)

o [0] or [position()=0] becomes :eq(0) or :first(選擇結果集中的第個 element)

$(”p:first”) $(”p:eq(0)”)

o [position() < 5] becomes :lt(5)(選擇結果集中索引大于5的 elements)

$(”p:lt(5)”)

o [position() > 2] becomes :gt(2)(選擇結果集中索引小于2的 elements)

$(”p:gt(2)”)

注:“becomes” 前面的是 XPath 的 predicates 文法,後面是等價的 jQuery 文法。

3. jQuery 自定義的選擇器(Custom Selectors)

jQuery 具有一些自定義的選擇器文法,這些文法雖然并不在 CSS 和XPath 規範之内,但它們相當的便捷,所在 jQuery 将它們囊括進來。

3.1 自定義選擇器(Custom Selectors)

o :even 結果集中其索引為偶數(雙數)的 elements

o :odd 結果集中其索引為奇數(單數)的 elements

o :eq(N) and :nth(N) 選擇結果集中索引為 N 的 elements

o :gt(N) 選擇結果集中索引大于 N 的 elements

o :lt(N) 選擇結果集中索引小于 N 的 elements

o :first 選擇結果集中的第一個 element (相當于 eq(0) 或者 nth(0))

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

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

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

o :visible 選擇所有可見(visible)的 elements( display 屬性的值等于 visible、block、inline,或者 visibility 屬性的值等于 visible,不包括 hidden 類型的 elements(關于 hidden 類型,如<input type=”hidden” …>))

o :hidden 選擇所有隐藏(visible)的 elements( display 屬性的值等于 none,或者 visibility 屬性的值等于 hidden,不包括 hidden 類型的 elements(關于 hidden 類型,如<input type=”hidden” …>))

例子:

$(”p:first”).css(”fontWeight”,”bold”); $(”div:hidden”).show(); $(”/div:contains(’test’)”, this).hide();

3.2 表單選擇器(Form Selectors)

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

o :text 選擇所有文本域 (type=”text”).

o :password 選擇所有密碼域 (type=”password”).

o :radio 選擇所有單選按鈕 (type=”radio”).

o :checkbox 選擇所有複選框 (type=”checkbox”).

o :submit 選擇所有送出按鈕 (type=”submit”).

o :image 選擇所有圖像域 (type=”image”).

o :reset 選擇所有重置按鈕 (type=”reset”).

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

o :file 選擇所有 <input type=”file”>.

:hidden 也是可用的,在上面的3.1 節有介紹。

建議在使用表單選擇時提供一個 context root,例子:

$(’#myForm :input’)

$(’input:radio’, myForm)

上面最後的一行語句将會選擇所有的“myForm”表單裡的所有單選按鈕,相當于[@type=radio](即 $(”[@type = radio],myForm”)),但用表單選擇器會稍微快點,尤其對于大型的表單。

3.3 更多選擇器

jQuery 選擇器可以通過第三方的插件來擴充:

o More Selectors Plugin

o Mike Alsup on Custom Selectors

o Patch to allow selection by CSS property (full plugin to be released simultaneously with 1.1)

本文轉自左正部落格園部落格,原文連結:http://www.cnblogs.com/soundcode/archive/2012/03/27/2418959.html,如需轉載請自行聯系原作者

繼續閱讀