第一部分:元素選擇符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 最基本的佐...