jQuery 基礎概念與選取器解析

介紹基本的 jQuery 概念
以及選取器效能評比

Transcript

1. JQuery by Kingsley Zheng
2. 序 • 什麼是 JQuery • Sizzle 選取器 • JQuery 常用指令 • 事件 • callback • $(this) v.s. this • 重點整理
3. 什麼是 JQuery - write less, do more -
4. Write less , do more Javascript JQuery
5. JQuery 優點 1. 開源 2. 豐富的插件支持、文檔資料 3. 選擇器 (sizzle) 4. 出色的DOM操作的封裝 5. 可靠的事件處理機制 6. 完善的Ajax 7. 不污染頂級變量， jQuery只建立一個名為jQuery ( $ )的對象 8. 鍊式操作方式
6. JQuery 目前最新版本 1.11.1 / 2.1.1
7. 引用 http://jquery.com/download/ <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
8. 初探 JQuery 「快速選取元素」並且「做一些事情」 $(‘’div’’).addClass(‘’special’’) • $ 只建立一個名為jQuery ( $ )的對象 • 批次處理 • $('div') = jQuery('div') $(‘’div’’).addClass(‘’special’’)
9. 取得 HTML 物件(DOM)的方法 Javascript : document.getElementById(‘’id’’) document.getElementsByClassName(‘’class’’) JQuery : $(‘’#id’’) $(‘’.class’’)
10. 包裝 v.s. 未包裝 JQuery 包裝後的物件，只能使用JQuery的方法操作
11. css1 ~ 3 、 Xpath Sizzle Selector
12. • HTML標籤 $(‘’div’’) $(‘’p‘’) • CSS類別名稱 $(‘’.logo‘’) $(‘’.header‘’) • #ID名稱 $(‘’#container‘’) $(‘’#footer‘’) • 選取器1,選取器2,選取器N $(‘’#logo,#header,span,h1‘’) 簡單選取器
13. 層級選取器 兩個（或以上）元素組合的選取方式，也是 CSS 選取方式的一種： • $(‘’div li‘’) 兩個元素中間空一格，li 為 div 的子元素 (不管中間相隔幾層都沒關係) • $(‘’ul > li‘’) li 必須為 ul 的子元素，中間不能有其他層 • $(‘’h1 + div‘’) 兩個元素在同一層，必須相鄰 • $(‘’h1 ~ div‘’) 兩個元素在同一層，不必相鄰
14. 子元素選取器 • :first-child： 選取指定元素，而且它是它父元素的第一個子元素 ex : $(‘’li:first-child‘’) 會選取第一個 li。 • :last-child： 選取指定元素，而且它是它父元素的最後一個子元素 ex : $(‘’li:last-child‘’) 會選取最後一個 li。 • :only-child： 選取指定元素，而且它必須是父元素唯一的一個子元素 • :nth-child(數字)： 選取指定元素，而它是父元素的第 n 個子元素，n 就是那個數字。 ex : $(‘’li:nth-child(5)‘’)
15. 定位篩選選取器 • :first / :last：符合的第一個元素 / 符合的最後一個元素 • :not：過濾掉所有符合指定選擇器的元素 $(‘’td:not(‘.a’)‘’) • :even / :odd：索引值為偶數的元素 / 索引值為奇數的元素 • :eq：索引值與指定的值相等的元素， $(‘’td:eq(2)‘’) 會選取 td 的第 2 個 • :gt：索引值大於指定值的元素， $(‘’td:gt(0)‘’) 會選取 td 的第 2 行與之後的行。 • :lt：索引值小於指定值的元素。 • :header：選取如 h1, h2, h3... 標題元素。 • :animated：選取所有正在執行動畫效果的元素。
16. :first-child VS :first ? $(’body table:first’) $(’body table:first-child’) 得到所有 table 中的第一個 table 得到一個空的 jquery 對象，table 不是 body 的第一個子元素
17. 內容篩選選取器 根據元素內的文字內容，或是子元素來做篩選的選取方式。 • :contains：會選出含有 "title" 這幾個字的 h2 元素。 ex : $(‘h2:contains('title')‘’) • :has：會選出內容中包含 span 元素的 p。 ex : $(‘’p:has(span)'’) • :empty： 選取指定元素，而且它必須沒有任何子元素 也沒有內容文字，即文字節點(text node) 也不能有。 ex : $(‘’div:empty'’) • :parent： ex : $(‘’li:parent‘’) 和 :empty 剛好相反，只會選出內容不是空的 <li>。
18. 顯示性選取器 根據元素是顯示或隱藏來選取。 • :hidden：選出 display : none / 隱藏 或 type="hidden" 的所有指定元素 ex : $(‘’li:hidden‘’) • :visible：選出看得見的所有指定元素 ex : $(‘’li:visible‘’) • 這兩個屬性不會被當作隱藏，在 html 中仍屬於可視範圍 opacity : 0 visibility : hidden hidden (KK [ˋhɪdn] )
19. 屬性選取器 • [屬性名稱=class-ame]：例如 $(‘‘p[class=ClassName]’’) 屬性值必須和指定的值完全相等 • [屬性名稱!=class-ame]：不含有指定屬性名稱，或是屬性值不等於指定值的元素。 • [屬性名稱]:not[class=other]：若要選取含有指定的屬性名稱，但值不相等時，可以使用。 • [屬性名稱^=the]：例如 $(‘‘p[class^=the]’’) "開頭" 必須是 the。 • [屬性名稱$=the]：例如 $(‘‘p[class$=the]’’) "結尾" 必須是 the。 • [屬性名稱*=the]：例如 $(‘‘p[class*=the]’’) 屬性值必須 "包含" 指定的值。 • [屬性選取器1][屬性選取器2][屬性選取器N]：組合選取器，可以在需要同時滿足多個條件時使用。
20. 表單選取器 這些是 jQuery 自訂虛擬類別選擇器，可以用來選取各種表單 ui 元素。 :password :checkbox :reset :file :submit :text :image :input :radio :hidden :button :selected 使用 input[type="XXX"] 來替代 先用純CSS選取器選完，再用 .filter(":button")
21. 表單狀態選取器 根據表單元素的屬性，是否勾選或啟用來做選取。 :enabled：選取不是 disabled ( 失效 ) 的元素。 :disabled：選取不是 enabled ( 啟用 ) 的元素 :checked：選取已經被點選擇的元素，例如 radio 和 checkbox。 :selected：選取已經被選擇的元素，例如 select 中的一個或多個選項。
22. JQuery 選取器速度
23. JQuery 選取器速度 • 速度： Id > tag > class > attribute = 偽類 特別是 IE9 以下的版本，針對 Selector 的速度真的很慢 • 範圍：從越小的範圍來 select 會比較快
24. 選取器速度比較 • 最快的選擇器：id選擇器和元素標籤選擇器 $(‘‘#id‘‘) $(‘‘form‘‘) $(‘‘input‘‘) • 較慢的選取器 : class選擇器 $(‘‘.className‘‘) 改成 $(‘‘tag.className‘‘) • 最慢的選擇器：偽類選擇器和屬性選擇器 $(‘‘:hidden’’) $(‘‘[attribute=value]‘‘) 但是，一些瀏覽器的新版本，增加了 querySelector() querySelectorAll() 方法，因此會使這類選擇器的性能有大幅提高。
25. .find()方法會調用瀏覽器的原生方法 ex : getElementById，getElementByName 這條語句的意思是，給定一個DOM對象，然後從中選擇一個子元素 • $(‘‘.child’’,$(’’#parent’’)) 同上一點，但是多處理了一次JQuery物件 這會使用$.sibling()和 javascript 的 nextSibling()方法，一個個遍歷節點 這條語句是先選.child，然後再一個個過濾出父元素#parent 同上一點，但是這一條式子可以於選擇多級子元素 牛刀小試 父元素選取子元素 • $parent.find(‘‘.child’’) • $(‘‘.child’’,$parent) • $(‘‘.child’’,$(’’#parent’’)) • $parent.children(‘‘.child’’) • $(’’#parent > .child’’) • $(’’#parent .child’’) $parent.find('child') $('#parent').find('.child')
26. jsperf http://jsperf.com/jq-select-speed-compare/3
27. jsperf http://jsperf.com/jq-select-speed-compare/3
28. 緩存 is better for (i = 0 ; i < 10000; i ++ ) { var a= $( ' .logo ); a.append(i); } var a= $( ' .logo ); for (i = 0 ; i < 10000 ; i ++ ) { a.append(i); } 盡量減少 $ 對 dom 的查找
29. 幾個選擇器技巧： • length • is("visible") • .closeset()
30. Method Chaining 鍊式操作
31. Method Chaining $(‘‘div’‘).hide().css(‘‘color‘‘,‘‘blue‘‘).slideDown(); $(‘‘div’‘).hide(); $(‘‘div‘‘).css(‘‘color‘‘,‘‘blue‘‘); $(‘‘div’‘).slideDown(); 許多 JQuery 指令在執行完之後都會return this;
32. Method Chaining 優點 糟糕的寫法： $(‘‘#top’’).find(‘‘p.classA’’); $(‘‘#top’’).find(‘‘p.classB’’); $(‘‘div).find(‘‘h3’’).eq(2).html(‘‘hello); 採用鏈式寫法時，jQuery自動緩存每一步的結果，因此比非鏈式寫法要快。 更好的寫法是： var $ele= $(‘‘#top’’); $ele.find(‘‘p.classA’’); $ele.find(‘‘p.classB’’);
33. 牛刀小試 // [ ul ] // [ li , li ,li ] // [ li.hi , li.hi ,li.hi ] // [ ul ] // [ a , a , a ] // [ a , a , a ] // [ ul ]
34. 事件
35. 先來看個錯誤範例 因為 #container 還沒載入完全，所以 $(‘#id’) 為[ ]，無法對 DOM 做任何的操作
36. ready v.s. load $(document).ready(function() { … }) 當 document 物件下所有 DOM都可以正確取得時 $(window).load(function() { … }) 與 JavaScript 裡的 window.onload 事件一模一樣 整個視窗裡所有資源都已經全部下載後才會執行， ex : 該頁面有 100 張圖片就會等 100 圖片都下載完才會執行 其中也包括所有 iframe 子頁面的內容必須完整載入
37. 以 Document Ready 正確寫法
38. 回調函數(callback) 許多 jQuery 函數涉及動畫。這些函數也許會將 speed 或 duration 作為可選參數。 典型語法 : callback 參數是一個在 hide 操作完成後被執行的函數。
39. 還是不懂 callback ? 函數a有一個參數，這個參數就是一個函數b 當函數a執行完以後執行函數b。那麼這個過程就叫回調。 函數a ( 送她到車站並且她到家 ) 執行完成後 => 執行函數b( 發訊息給你 ) 白話： 跟心儀的對象約會結束後你送她到車站坐車回家，離別時 你肯定會說：「到家了給我發條信息，我很擔心你。」
40. $(this) vs this
41. $(this) 被jQuery處理的當前元素對象
42. $(this) v.s. this this ~~~ Magic ~~~ $(this) 當前元素被jQuery處理的對象 不成立，噴錯
43. 參考資料 選取器效能 http://a272480.s103.gzonet.com/?action=show&id=101 http://class2u.com/group/jquery/forum/topics/jquery-selector-optimization Javascript / JQuery 優良寫法 http://design2u.me/blog/606/javascript-10-js-jquery-performance-tuning https://github.com/airbnb/javascript jQuery 效能優化 http://fanli7.net/a/JAVAbiancheng/JSPjishu/20140227/473613.html
44. Thank you !!
45. Q & A