Ext DomQuery選擇符的用法

2021-05-24 06:59:29 字數 3477 閱讀 7534

第一部分:元素選擇符selector

// 這個查詢會返回有兩個元素的陣列因為查詢選中對整個文件的所有span標籤。

ext.query

("span");

// 這個查詢會返回有乙個元素的陣列因為查詢顧及到了foo這個id。

ext.query

("span"

, "foo");

// 這個查詢會返回包含我們foo div乙個元素的陣列!

ext.query

("#foo");

*這個查詢會返回有乙個元素的陣列,

包含與之前例子一樣的div但是我們使用了class name來獲取*/

ext.query

(".foo");

要獲取子標籤,我們只須在兩個選擇符之間插入乙個空格:

// 這會返回有乙個元素的陣列,內容為div標籤下的p標籤 ext.query

("div p"

) ; // 這會返回有兩個元素的陣列,內容為div標籤下的span標籤 ext.query

("div span"

) ;第二部分:屬性選擇符attributes selectors

// 我們檢查出任何存在有class屬性的元素。

// 這個查詢會返回5個元素的陣列。

ext.query

("*[class]");

// 這會得到class等於「bar」的所有元素

ext.query

("*[class=bar]");

// 這會得到class不等於「bar」的所有元素

ext.query

("*[class!=bar]");

// 這會得到class從「b」字頭開始的所有元素

ext.query

("*[class^=b]");

//這會得到class由「r」結尾的所有元素

ext.query

("*[class$=r]");

//這會得到在class中抽出「a」字元的所有元素

ext.query

("*[class*=a]");

第三部分: css值元素選擇符

// 獲取所以紅色的元素

ext.query

("*"

); // [div#bar.foo]

// 獲取所有粉紅顏色的並且是有紅色子元素的元素

ext.query

("* *"

); // [span.bar]

// 獲取所有不是紅色文字的元素

ext.query

("*"

); // [html, head, script firebug.js, link, body#ext-gen2.ext-gecko, script ext-base.js, script ext-core.js, span.bar, a www.extjs.com, div#foo.bar, p, span.bar, a test.html#]

// 獲取所有顏色屬性是從「yel」開始的元素

ext.query

("*"

); // [a www.extjs.com]

// 獲取所有顏色屬性是以「ow」結束的元素

ext.query

("*"

); // [a www.extjs.com]

// 獲取所有顏色屬性包含「ow」字元的元素

ext.query

("*"

); // [a www.extjs.com, span.bar]

偽類選擇符pseudo classes selectors

/*

span元素為其父元素的第乙個子元素

*/ext.query

("span:first-child"

); // [span.bar]

/*a元素為其父元素的最後乙個子元素

*/ext.query

("a:last-child"

)// [a www.extjs.com, a test.html#]

/*span元素為其父元素的第2個子元素(由1開始的個數)

*/ext.query

("span:nth-child(2)"

)// [span.bar]

/*tr元素為其父元素的奇數個數的子元素

*/ext.query

("tr:nth-child(odd)"

)// [tr, tr]

/*li元素為其父元素的奇數個數的子元素

*/ext.query

("li:nth-child(even)"

)// [li, li]

/*返回a元素,a元素為其父元素的唯一子元素

*/ext.query

("a:only-child"

)// [a test.html#]

/*返回所有選中的(checked)的input元素

*/ext.query

("input:checked"

)// [input#chked on]

/*返回第乙個的tr元素

*/ext.query

("tr:first"

)// [tr]

/*返回最後乙個的input元素

*/ext.query

("input:last"

)// [input#notchked on]

/*返回第二個的td元素

*/ext.query

("td:nth(2)"

)// [td]

/*返回每乙個包含「within」字串的div

*/ext.query

("div:contains(within)"

)// [div#bar.foo, div#foo.bar]

/*返回沒有包含form子元素以外的那些div

*/ext.query

("div:not(form)")[

div#bar.foo

, div#foo.bar

, div]

/*返回包含有a元素的那些div集合

*/ext.query

("div:has(a)"

)// [div#bar.foo, div#foo.bar, div]

/* 返回接著會繼續有td的那些td集合。

尤其乙個地方是,如果使用了colspan屬性的td便會忽略

*/ext.query

("td:next(td)"

)// [td, td]

/*返回居前於input元素的那些label元素集合

*/ext.query

("label:prev(input)"

)//[label, label]

jQuery選擇符 XPath選擇符

說明 jquery支援一組基本的xpath選擇符 可以和css選擇符一起使用 jquery無論對什麼文件都可以使用xpath和 css選擇符。1.屬性選擇符 2 特點 允許以類似正規表示式的語法來標識字串的開始 和結尾 也可以使用 表示字串的任意位置。1 a href mailto 表示取得以mai...

CSS選擇符 屬性選擇符

使用屬性選擇器可以篩選出設定了特定屬性的標籤。例如選取所有設定了title屬性的 img title 這種選擇符的第一部分是標籤名 img 隨後是屬性名,放在方括號裡 title css不限制屬性選擇符只能使用標籤名,也可以使用類。例如 photo title 用於選取類為photo,而且設定了ti...

CSS選擇符 型別選擇符

h1用於選取特定html標籤的選擇符,叫型別選擇符或元素選擇符。這種選擇符的作用特別大。能把樣式應用到網頁中的每個目標標籤上。使用這種選擇符,只需少量工作就能大幅修改網頁的外觀。假如想讓網頁中每個段落都使用相同的字型 顏色和字型大小,只需編寫乙個選擇符為p 表示標籤 的樣式即可。html 最基本的佐...