Upload
kingsley-zheng
View
309
Download
0
Embed Size (px)
Citation preview
JQuery 優點
1. 開源
2. 豐富的插件支持、文檔資料
3. 選擇器 (sizzle)
4. 出色的DOM操作的封裝
5. 可靠的事件處理機制
6. 完善的Ajax
7. 不污染頂級變量, jQuery只建立一個名為jQuery ( $ )的對象
8. 鍊式操作方式
初探 JQuery
「快速選取元素」並且「做一些事情」
$(‘’div’’).addClass(‘’special’’)
● $只建立一個名為jQuery ( $ )的對象
● 批次處理
● $('div') = jQuery('div')
取得 HTML 物件(DOM)的方法
Javascript :
document.getElementById(‘’id’’)
document.getElementsByClassName(‘’class’’)
JQuery :
$(‘’#id’’)
$(‘’.class’’)
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 選取器速度 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 的查找
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 ]
ready v.s. load
$(document).ready(function() { … })
當 document 物件下所有 DOM都可以正確取得時
$(window).load(function() { … })
與 JavaScript 裡的 window.onload 事件一模一樣
整個視窗裡所有資源都已經全部下載後才會執行,
ex :
該頁面有 100 張圖片就會等 100 圖片都下載完才會執行
其中也包括所有 iframe 子頁面的內容必須完整載入
回調函數(callback)
許多 jQuery 函數涉及動畫。這些函數也許會將 speed 或 duration 作為可選參數。
典型語法 :
callback 參數是一個在 hide 操作完成後被執行的函數。
還是不懂 callback ?
函數a有一個參數,這個參數就是一個函數b
當函數a執行完以後執行函數b。那麼這個過程就叫回調。
函數a ( 送她到車站並且她到家 ) 執行完成後 => 執行函數b( 發訊息給你 )
白話:
跟心儀的對象約會結束後你送她到車站坐車回家,離別時
你肯定會說:「到家了給我發條信息,我很擔心你。」
$(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