2015年4月7日 星期二

微妙的關係

jQuery 的選擇條件裡,存在著 child-selector 與 descendant-selector 的階層關係。

$("A > B") 表示著「父子關係」
在整個網頁的 DOM 裡找到所有的 B,再看 B的父親是不是 A,如果是,則保留;不是,則刪除,最後留下的就是我們所要的 B。

$("A    B") 表示著「子孫關係」
在整個網頁的 DOM 裡找到所有的 B,再用遞迴的方式去看看他的祖先是否有 A 存在,有的話就保留,沒有就剔除,最後留下的就是我們所要的 B。

由此可以看出,在「子孫關係」中,我們為了要能夠判斷祖先是否存在我們所指定的項目,所以需要透過遞迴的方式不斷地往上去尋找。而找尋的時間,就會隨著 DOM 階層的複雜而增加。

針對效能的考量,當已經知道可以透過「父子關係」就能找出想要的資料時,就該使用「父子關係」,而避免使用「子孫關係」。

參考:
01:Child Selector
02:Descendant Selector
03:網站開發新路線:jQuery核心詳解與實踐應用