Re: [js] jQuery的$選擇器?

[TonyQ (沉默是金。)]

※ 引述《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
推 kaijajan:tonyq的解釋清楚多了 XD
推 tomin:若列出是那3個,2個會更清楚
推 kiki1503:看完Tony大的從js到jQuery系列真是收穫不少
→ kiki1503:實在是太受用了...非常感謝各位的回覆..我弄懂了
→ TonyQ:@tomin  基本上我比較喜歡點到為止 . XD 而且我算講很細的了
→ TonyQ:想說如果說回應後還有問題再回答就好了...囧rz
推 tomin:我自己是舉例那裡卡比較久  因為沒結構化縮排  要找、數
→ tomin:倒不是細不細的問題  而是要讓人看得懂  只是建議而已
原來你說的是縮排的問題 XD   那這樣修改一下應該會好一些.
※ 編輯: TonyQ           來自: 220.133.218.161      (04/14 20:55)
推 tomin:好多了  不過我本來的確是希望能列出來　因為好不容易找出來
→ tomin:想要"對答案"
→ TonyQ:兩個就是黃色的 , 三個就是黃色加藍色. XD
※ 編輯: TonyQ           來自: 220.133.218.161      (04/14 21:51)
推 joy:$("table.test tr") 應該與$(".test tr") ? 相同吧 @@?
→ joy:T大解釋就像在看書一樣@@
→ TonyQ:joy 在這個case 一樣 , 但是實際上意義不太一樣.
→ TonyQ:tabe.test 是說 有test這個class的table
→ TonyQ:*table.test
→ TonyQ:.test 是說有test 這個class 的元素(不限定table)
推 papapa21:有看有推!
推 joy:可以耍賴一下嗎@@? 因為tr只有在table..所以等價 XD
→ joy:不過T大講的table.test的確比較適合^^..
→ grence:table下還可以有 thead, tbody.
→ TonyQ:我有說在這特定情形下等價啊 XD