[jQuery]Selector的基本語法

tim · 文章由 **tim** » 2008年 12月 8日, 15:07

jQuery 中, Selector (選擇器)是最基本的語法, 以下為整理清單:

1. #id
2. Element
3. .class
4. *

分別說明如下:
1. #id 是唯一的, 利用 id 來選擇, 這個是最獨立的而指作法, 例如:

$("#mydiv") 是選取 id="mydiv" 的 element

2. 使用 html tag 的選取, 是全面性的, 而且會有多組, 例如:

$("div") 是選取所有 div 的 html tag element

3. 選取使用 .class 的 class 的 element, 例如:

$(".myclass") 是選取使用 .myclass 的 element

4. 所有物件 * , 例如:

$("*")

再來是多層次的選擇器:

1. tag.class
2. parent>child
3. ancestor descendant
4. prev+next
5. prev~siblings

說明整理如下:

1. tag.class 的語法, 例如:

$("p.myclass") 是選取 html tag 為 p 的, 並 class 為 .myclass 的 element

2. parent > child 子層(子物件), 例如:

$("#div1 > *") 是選取 id="div1" 內的所有子層 element

3. 後代 (descendant), 其實和 2. 很像, 也是指子層, 不過是用空白( )隔開, 例如:

$("#div1 div") 是選取 id="div1" 內的所有 html tag 為 div 的 element

4. next, 符合的下一個語法(特別注意, 是下一個, 不是子層哦), 利用加號(+), 例如:

$("#div1+div") 是選取 id="div1" 的下一個 html tag 為 div 的 element

5. siblings, 即同階層(或指同科), 而且是指該 element 之後的同階層, 例如:

$("#div1~div") 是選取 id="div1" 之後的所有同階層的 html tag 為 div 的 element

再來是多重選取的部分, 在 $() 內放置多重要選取的內容, 並利用逗號(,)隔開, 例如:

$("#div1, #div2, .class1")

這些是 selector 的使用方式, 給大家參考.