jquery 選取器解析
TRANSCRIPT
jQuery
by Kingsley Zheng
序
● 什麼是 JQuery
● Sizzle 選取器
● JQuery 常用指令
● Event
● callback
● $(this) v.s. this
● 重點整理
什麼是 JQuery
- write less, do more -
Write less , do more
Javascript
JQuery
JQuery 優點
1. 開源
2. 豐富的插件支持、文檔資料
3. 選擇器 (sizzle)
4. 出色的DOM操作的封裝
5. 可靠的事件處理機制
6. 完善的Ajax
7. 不污染頂級變量， jQuery只建立一個名為jQuery ( $ )的對象
8. 鍊式操作方式
引用
<script src="./js/jquery-1.11.1.min.js"></script>
初探 JQuery
「快速選取元素」並且「做一些事情」
$(‘’div’’).addClass(‘’special’’)
● $只建立一個名為jQuery ( $ )的對象
● 批次處理
● $('div') = jQuery('div')
取得 HTML 物件(DOM)的方法
Javascript :
document.getElementById(‘’id’’)
document.getElementsByClassName(‘’class’’)
JQuery :
$(‘’#id’’)
$(‘’.class’’)
包裝 v.s. 未包裝
JQuery 包裝後的物件，只能使用JQuery的方法操作
* Chrome Develper Tool
css1 ~ 3 、 Xpath
Sizzle Selector
JQuery 選取器速度 https://jsperf.com/id-vs-class-vs-tag-selectors/2
● 速度： Id > tag > class > attribute =偽類
特別是 IE9 以下的版本，針對 Selector 的速度真的很慢
● 範圍：從越小的範圍來 select 會比較快
● HTML標籤
$(‘’div’’) $(‘’p‘’)
● CSS類別名稱
$(‘’.logo‘’) $(‘’.header‘’)
● #ID名稱
$(‘’#container‘’) $(‘’#footer‘’)
● 選取器1,選取器2,選取器N
$(‘’#logo,#header,span,h1‘’)
簡單選取器
層級選取器
兩個（或以上）元素組合的選取方式，也是 CSS 選取方式的一種：
● $(‘’div li‘’) 兩個元素中間空一格，li 為 div 的子元素 (不管中間相隔幾層都沒關係)
● $(‘’ul > li‘’) li 必須為 ul 的子元素，中間不能有其他層
● $(‘’h1 + div‘’) 兩個元素在同一層，必須相鄰
● $(‘’h1 ~ div‘’) 兩個元素在同一層，不必相鄰
子元素選取器
● :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)‘’)
定位篩選選取器
● :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：選取所有正在執行動畫效果的元素。
:first-child VS :first ?
$(’body table:first’)
$(’body table:first-child’)
得到所有 table 中的第一個 table
得到一個空的 jquery 對象，table 不是 body 的第一個子元素
內容篩選選取器
根據元素內的文字內容，或是子元素來做篩選的選取方式。
● :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>。
顯示性選取器
根據元素是顯示或隱藏來選取。
● :hidden：選出 display : none / 隱藏
或 type="hidden" 的所有指定元素
ex : $(‘’li:hidden‘’)
● :visible：選出看得見的所有指定元素
ex : $(‘’li:visible‘’)
● 這兩個屬性不會被當作隱藏，在 html 中仍屬於可視範圍
opacity : 0
visibility : hidden
hidden (KK [ˋhɪdn] )
屬性選取器
● [屬性名稱=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]：組合選取器，可以在需要同時滿足多個條件時使用。
表單選取器
這些是 jQuery 自訂虛擬類別選擇器，可以用來選取各種表單 ui 元素。
:password
:checkbox
:reset
:file
:submit
:text
:image
:input
:radio
:hidden
:button
:selected
使用 input[type="XXX"]來替代，少用偽類
先用純CSS選取器選完，再用 .filter(":button")
表單狀態選取器
根據表單元素的屬性，是否勾選或啟用來做選取。
:enabled：選取不是 disabled ( 失效 ) 的元素。
:disabled：選取不是 enabled ( 啟用 ) 的元素
:checked：選取已經被點選擇的元素，例如 radio 和 checkbox。
:selected：選取已經被選擇的元素，例如 select 中的一個或多個選項。
jQuery 選取器速度
jQuery 選取器速度 https://jsperf.com/id-vs-class-vs-tag-selectors/2
● 速度： Id > tag > class > attribute =偽類
特別是 IE9 以下的版本，針對 Selector 的速度真的很慢
● 範圍：從越小的範圍來 select 會比較快
選取器速度比較
● 最快的選擇器：id選擇器和元素標籤選擇器
$(‘‘#id‘‘) $(‘‘form‘‘) $(‘‘input‘‘)
● 較慢的選取器 : class選擇器
$(‘‘.className‘‘) 改成 $(‘‘tag.className‘‘)
● 最慢的選擇器：偽類選擇器和屬性選擇器
$(‘‘:hidden’’) $(‘‘[attribute=value]‘‘)
但是，一些瀏覽器的新版本，增加了
querySelector()
querySelectorAll()
方法，因此會使這類選擇器的性能有大幅提高。
.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')速度
緩存 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 的查找
幾個選擇器技巧：
● length
● is("visible")
● .closeset()
Method Chaining
鍊式操作
Method Chaining
$(‘‘div’‘).hide().css(‘‘color‘‘,‘‘blue‘‘).slideDown();
$(‘‘div’‘).hide();
$(‘‘div‘‘).css(‘‘color‘‘,‘‘blue‘‘);
$(‘‘div’‘).slideDown();
80% jQuery 指令在執行完之後都會return this;
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’’);
牛刀小試
// [ ul ]
// [ li , li ,li ]// [ li.hi , li.hi ,li.hi ]// [ ul ]// [ a , a , a ]
// [ a , a , a ]// [ ul ]
事件
先來看個錯誤範例
因為 #container 還沒載入完全，所以 $(‘#id’) 為[ ]，無法對 DOM 做任何的操作
ready v.s. load
$(document).ready(function() { … })
當 document 物件下所有 DOM都可以正確取得時
$(window).load(function() { … })
與 JavaScript 裡的 window.onload 事件一模一樣
整個視窗裡所有資源都已經全部下載後才會執行，
ex :
該頁面有 100 張圖片就會等 100 圖片都下載完才會執行
其中也包括所有 iframe 子頁面的內容必須完整載入
以 Document Ready 正確寫法
回調函數(callback)
許多 jQuery 函數涉及動畫。這些函數也許會將 speed 或 duration 作為可選參數。
典型語法 :
callback 參數是一個在 hide 操作完成後被執行的函數。
還是不懂 callback ?
函數a有一個參數，這個參數就是一個函數b
當函數a執行完以後執行函數b。那麼這個過程就叫回調。
函數a ( 送她到車站並且她到家 ) 執行完成後 => 執行函數b( 發訊息給你 )
白話：
跟心儀的對象約會結束後你送她到車站坐車回家，離別時
你肯定會說：「到家了給我發條信息，我很擔心你。」
$(this) vs this
$(this)
被 jQuery 處理的當前元素對象
$(this) v.s. this
this
this = document.getElementById('textbox')
$(this)
$(this) = $('#textbox')
不成立，噴錯
參考資料
選取器效能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
Thank you !!