作者TonyQ (沉默是金。)
看板Ajax
標題Re: [js] jQuery的$選擇器?
時間Wed Apr 14 12:01:23 2010
※ 引述《kiki1503 (琦琦壹伍零參)》之銘言：
: 目前正在學習jQuery..看到一大堆的範例
: 好像選擇器部分都用來用去
: 請問一下
: 以下三種有什麼不一樣
底下前兩種是採用css selector 的寫法 ,
你可以先翻翻有關 css selector相關的書籍 .
: $("table tr")
這是 table 底下[所有]的tr項目 , 而且子階層也會列入搜尋.
比方說
<table class='test'>
<tr>
<Td>
<table>
<tr><td></td></tr>
</table>
</td>
</tr>
<tr>
<td></td>
</tr>
</table>
這樣搜尋的條件會取到三個元素 . 連子table的tr也會列進
: $("table > tr")
這是只搜尋 table 底下第一層有的 tr
但是承前例 , 這個 case 一樣會取到三個 ,
因為子table的tr 一樣符合是 table底下的第一層 tr .
因為tr一定要在table底下 ,
所以這條件跟第一個條件在這個特定情形下是等價的
但是如果承前例 ,把這兩個條件改成
$("table.test tr") 跟 $("table.test >tr") 就不一樣了
前者是會到三個 , 後者會取到 兩個.
相關延伸資料:
#18cqIepY (Ajax)
: $("table").children("tr")
這是filter , 從 table 的第一層子層中去過濾出為tr標籤的元素,
這個描述等價 $("table > tr") .
有關filter 延伸閱讀:
#18dmyXuJ (Ajax)
: 看起來都一樣
: 可是範例就不一定用哪個
: 我都搞混了..
萬變不離其宗 , 你先弄懂css selector的規則 ,
就可以搞懂selector的基礎了 ,
原則上filter 對初學者而言 , 是輔助性質而非必要性質的東西 ,
且容易搞混 , 可以考慮先略過有關 filter 的函式.
--
▄▅▆▇███▇▆▅▄▃ ╰┼╯─╮ ╮
◥███████████◣ ╰┼╯＝│=│
◥██████───────◣ ＊． ╯ ╯ ╯ の 物 語 ．＊
◥███████──────◣ ～ ◢◣ ◢◣
◥██████───────◤ ◥◤＊ 空白的世界．翼
＊◥◤
◥██▁▂▃▄▅▆▇███▆▅▄▃▂▂
～telnet://tony1223.twbbs.org
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 116.59.134.147
1F：推 kaijajan:tonyq的解釋清楚多了 XD 04/14 12:02
2F：推 tomin:若列出是那3個,2個會更清楚 04/14 12:43
3F：推 kiki1503:看完Tony大的從js到jQuery系列真是收穫不少 04/14 12:52
4F：→ kiki1503:實在是太受用了...非常感謝各位的回覆..我弄懂了 04/14 12:54
5F：→ TonyQ:@tomin 基本上我比較喜歡點到為止 . XD 而且我算講很細的了 04/14 14:45
6F：→ TonyQ:想說如果說回應後還有問題再回答就好了...囧rz 04/14 14:46
7F：推 tomin:我自己是舉例那裡卡比較久 因為沒結構化縮排 要找、數 04/14 20:42
8F：→ tomin:倒不是細不細的問題 而是要讓人看得懂 只是建議而已 04/14 20:45
原來你說的是縮排的問題 XD 那這樣修改一下應該會好一些.
※ 編輯: TonyQ 來自: 220.133.218.161 (04/14 20:55)
9F：推 tomin:好多了 不過我本來的確是希望能列出來 因為好不容易找出來 04/14 21:20
10F：→ tomin:想要"對答案" 04/14 21:20
11F：→ TonyQ:兩個就是黃色的 , 三個就是黃色加藍色. XD 04/14 21:51
※ 編輯: TonyQ 來自: 220.133.218.161 (04/14 21:51)
12F：推 joy:$("table.test tr") 應該與$(".test tr") ? 相同吧 @@? 04/15 01:28
13F：→ joy:T大解釋就像在看書一樣@@ 04/15 01:30
14F：→ TonyQ:joy 在這個case 一樣 , 但是實際上意義不太一樣. 04/15 08:34
15F：→ TonyQ:tabe.test 是說 有test這個class的table 04/15 08:34
16F：→ TonyQ:*table.test 04/15 08:34
17F：→ TonyQ:.test 是說有test 這個class 的元素(不限定table) 04/15 08:35
18F：推 papapa21:有看有推! 04/15 23:28
19F：推 joy:可以耍賴一下嗎@@? 因為tr只有在table..所以等價 XD 04/16 00:14
20F：→ joy:不過T大講的table.test的確比較適合^^.. 04/16 00:15
21F：→ grence:table下還可以有 thead, tbody. 04/16 01:42
22F：→ TonyQ:我有說在這特定情形下等價啊 XD 04/16 08:59