Submit Search
Upload
jQuery 選取器解析
•
Download as PPTX, PDF
•
5 likes
•
1,658 views
Kingsley Zheng
Follow
jQuery 固然方便 但不可隨便濫用選取器 每一個選取器都攸關你的效能 基本功打的穩 在大專案就不再為選取器煩惱
Read less
Read more
Report
Share
Report
Share
1 of 47
Download now
Recommended
JQuery 学习
JQuery 学习
cssrain
jQuery实践经验与技巧
jQuery实践经验与技巧
fangdeng
用Jquery实现拖拽层
用Jquery实现拖拽层
yiditushe
Yui3入门
Yui3入门
cly84920
J query
J query
waitcat
JQuery Plugin
JQuery Plugin
Jason Wang
Script with engine
Script with engine
Webrebuild
KISSY for starter
KISSY for starter
yiming he
Recommended
JQuery 学习
JQuery 学习
cssrain
jQuery实践经验与技巧
jQuery实践经验与技巧
fangdeng
用Jquery实现拖拽层
用Jquery实现拖拽层
yiditushe
Yui3入门
Yui3入门
cly84920
J query
J query
waitcat
JQuery Plugin
JQuery Plugin
Jason Wang
Script with engine
Script with engine
Webrebuild
KISSY for starter
KISSY for starter
yiming he
[2009.12.06]javascript dom selectors
[2009.12.06]javascript dom selectors
fangdeng
Php & Mysql
Php & Mysql
chuyenyin
冲浪 Object-c
冲浪 Object-c
jeff kit
前端开发之Js
前端开发之Js
fangdeng
第十期 阿甘Javascript开发思想(入门篇)
第十期 阿甘Javascript开发思想(入门篇)
9scss
jQuery源码学习
jQuery源码学习
fangdeng
107个常用javascript语句 oss 计算技术 - ossez info of tech
107个常用javascript语句 oss 计算技术 - ossez info of tech
YUCHENG HU
Jquery指南
Jquery指南
yiditushe
jQuery介绍@disandu.com
jQuery介绍@disandu.com
Think hy
Web设计 4 锋利的j_query(进入企业级应用阶段)
Web设计 4 锋利的j_query(进入企业级应用阶段)
ziggear
J Query简介及入门指南
J Query简介及入门指南
AppZ
J Query Learn
J Query Learn
guestfb42fc
Backbone js and requirejs
Backbone js and requirejs
Chi-wen Sun
Mongodb
Mongodb
bj
Patterns in Zend Framework
Patterns in Zend Framework
Jace Ju
Ooredis
Ooredis
iammutex
I os 02
I os 02
信嘉 陳
jQuery底层架构
jQuery底层架构
fangdeng
jQuery 教學 ( 搭配 EZoApp )
jQuery 教學 ( 搭配 EZoApp )
EZoApp
A
A
guested19a2
A
A
guested19a2
Ecma script edition5-小试
Ecma script edition5-小试
lydiafly
More Related Content
What's hot
[2009.12.06]javascript dom selectors
[2009.12.06]javascript dom selectors
fangdeng
Php & Mysql
Php & Mysql
chuyenyin
冲浪 Object-c
冲浪 Object-c
jeff kit
前端开发之Js
前端开发之Js
fangdeng
第十期 阿甘Javascript开发思想(入门篇)
第十期 阿甘Javascript开发思想(入门篇)
9scss
jQuery源码学习
jQuery源码学习
fangdeng
107个常用javascript语句 oss 计算技术 - ossez info of tech
107个常用javascript语句 oss 计算技术 - ossez info of tech
YUCHENG HU
Jquery指南
Jquery指南
yiditushe
jQuery介绍@disandu.com
jQuery介绍@disandu.com
Think hy
Web设计 4 锋利的j_query(进入企业级应用阶段)
Web设计 4 锋利的j_query(进入企业级应用阶段)
ziggear
J Query简介及入门指南
J Query简介及入门指南
AppZ
J Query Learn
J Query Learn
guestfb42fc
Backbone js and requirejs
Backbone js and requirejs
Chi-wen Sun
Mongodb
Mongodb
bj
Patterns in Zend Framework
Patterns in Zend Framework
Jace Ju
Ooredis
Ooredis
iammutex
I os 02
I os 02
信嘉 陳
What's hot
(17)
[2009.12.06]javascript dom selectors
[2009.12.06]javascript dom selectors
Php & Mysql
Php & Mysql
冲浪 Object-c
冲浪 Object-c
前端开发之Js
前端开发之Js
第十期 阿甘Javascript开发思想(入门篇)
第十期 阿甘Javascript开发思想(入门篇)
jQuery源码学习
jQuery源码学习
107个常用javascript语句 oss 计算技术 - ossez info of tech
107个常用javascript语句 oss 计算技术 - ossez info of tech
Jquery指南
Jquery指南
jQuery介绍@disandu.com
jQuery介绍@disandu.com
Web设计 4 锋利的j_query(进入企业级应用阶段)
Web设计 4 锋利的j_query(进入企业级应用阶段)
J Query简介及入门指南
J Query简介及入门指南
J Query Learn
J Query Learn
Backbone js and requirejs
Backbone js and requirejs
Mongodb
Mongodb
Patterns in Zend Framework
Patterns in Zend Framework
Ooredis
Ooredis
I os 02
I os 02
Similar to jQuery 選取器解析
jQuery底层架构
jQuery底层架构
fangdeng
jQuery 教學 ( 搭配 EZoApp )
jQuery 教學 ( 搭配 EZoApp )
EZoApp
A
A
guested19a2
A
A
guested19a2
Ecma script edition5-小试
Ecma script edition5-小试
lydiafly
常見設計模式介紹
常見設計模式介紹
Jace Ju
潜力无限的编程语言Javascript
潜力无限的编程语言Javascript
jay li
Js培训
Js培训
yiditushe
Javascript之昨是今非
Javascript之昨是今非
Tony Deng
前端测试
前端测试
frontwindysky
前端测试
前端测试
Zheng Biao
Javascript
Javascript
Ryan Chung
Php for fe
Php for fe
jay li
Reactive application with akka.NET & .NET Core
Reactive application with akka.NET & .NET Core
Chen-Tien Tsai
Sun java
Sun java
softwaredesigner
Free Marker中文文档
Free Marker中文文档
yiditushe
Nightwatch101
Nightwatch101
Hsin-Hao Tang
所谓闭包
所谓闭包
youzitang
JavaScript Advanced Skill
JavaScript Advanced Skill
firestoke
基于原型的JavaScript面向对象编程
基于原型的JavaScript面向对象编程
zhangdaiping
Similar to jQuery 選取器解析
(20)
jQuery底层架构
jQuery底层架构
jQuery 教學 ( 搭配 EZoApp )
jQuery 教學 ( 搭配 EZoApp )
A
A
A
A
Ecma script edition5-小试
Ecma script edition5-小试
常見設計模式介紹
常見設計模式介紹
潜力无限的编程语言Javascript
潜力无限的编程语言Javascript
Js培训
Js培训
Javascript之昨是今非
Javascript之昨是今非
前端测试
前端测试
前端测试
前端测试
Javascript
Javascript
Php for fe
Php for fe
Reactive application with akka.NET & .NET Core
Reactive application with akka.NET & .NET Core
Sun java
Sun java
Free Marker中文文档
Free Marker中文文档
Nightwatch101
Nightwatch101
所谓闭包
所谓闭包
JavaScript Advanced Skill
JavaScript Advanced Skill
基于原型的JavaScript面向对象编程
基于原型的JavaScript面向对象编程
jQuery 選取器解析
1.
jQuery by Kingsley Zheng
2.
序 ● 什麼是 JQuery ●
Sizzle 選取器 ● JQuery 常用指令 ● Event ● 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.
Download https://jquery.com/ JQuery 版本
v1.x / v2.x ( 不支援 IE8 以下版本 )
7.
引用 <script src="./js/jquery-1.11.1.min.js"></script>
8.
初探 JQuery 「快速選取元素」並且「做一些事情」 $(‘’div’’).addClass(‘’special’’) ● $
只建立一個名為jQuery ( $ )的對象 ● 批次處理 ● $('div') = jQuery('div')
9.
取得 HTML 物件(DOM)的方法 Javascript
: document.getElementById(‘’id’’) document.getElementsByClassName(‘’class’’) JQuery : $(‘’#id’’) $(‘’.class’’)
10.
包裝 v.s. 未包裝 JQuery
包裝後的物件,只能使用JQuery的方法操作 * Chrome Develper Tool
11.
css1 ~ 3
、 Xpath Sizzle Selector
12.
JQuery 選取器速度 https://jsperf.com/id-vs-class-vs-tag-selectors/2 ●
速度: Id > tag > class > attribute = 偽類 特別是 IE9 以下的版本,針對 Selector 的速度真的很慢 ● 範圍:從越小的範圍來 select 會比較快
13.
● HTML標籤 $(‘’div’’) $(‘’p‘’) ●
CSS類別名稱 $(‘’.logo‘’) $(‘’.header‘’) ● #ID名稱 $(‘’#container‘’) $(‘’#footer‘’) ● 選取器1,選取器2,選取器N $(‘’#logo,#header,span,h1‘’) 簡單選取器
14.
層級選取器 兩個(或以上)元素組合的選取方式,也是 CSS 選取方式的一種: ●
$(‘’div li‘’) 兩個元素中間空一格,li 為 div 的子元素 (不管中間相隔幾層都沒關係) ● $(‘’ul > li‘’) li 必須為 ul 的子元素,中間不能有其他層 ● $(‘’h1 + div‘’) 兩個元素在同一層,必須相鄰 ● $(‘’h1 ~ div‘’) 兩個元素在同一層,不必相鄰
15.
子元素選取器 ● :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)‘’)
16.
定位篩選選取器 ● :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:選取所有正在執行動畫效果的元素。
17.
:first-child VS :first
? $(’body table:first’) $(’body table:first-child’) 得到所有 table 中的第一個 table 得到一個空的 jquery 對象,table 不是 body 的第一個子元素
18.
內容篩選選取器 根據元素內的文字內容,或是子元素來做篩選的選取方式。 ● :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>。
19.
顯示性選取器 根據元素是顯示或隱藏來選取。 ● :hidden:選出 display
: none / 隱藏 或 type="hidden" 的所有指定元素 ex : $(‘’li:hidden‘’) ● :visible:選出看得見的所有指定元素 ex : $(‘’li:visible‘’) ● 這兩個屬性不會被當作隱藏,在 html 中仍屬於可視範圍 opacity : 0 visibility : hidden hidden (KK [ˋhɪdn] )
20.
屬性選取器 ● [屬性名稱=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]:組合選取器,可以在需要同時滿足多個條件時使用。
21.
表單選取器 這些是 jQuery 自訂虛擬類別選擇器,可以用來選取各種表單
ui 元素。 :password :checkbox :reset :file :submit :text :image :input :radio :hidden :button :selected 使用 input[type="XXX"] 來替代,少用偽類 先用純CSS選取器選完,再用 .filter(":button")
22.
23.
表單狀態選取器 根據表單元素的屬性,是否勾選或啟用來做選取。 :enabled:選取不是 disabled (
失效 ) 的元素。 :disabled:選取不是 enabled ( 啟用 ) 的元素 :checked:選取已經被點選擇的元素,例如 radio 和 checkbox。 :selected:選取已經被選擇的元素,例如 select 中的一個或多個選項。
24.
25.
jQuery 選取器速度
26.
jQuery 選取器速度 https://jsperf.com/id-vs-class-vs-tag-selectors/2 ●
速度: Id > tag > class > attribute = 偽類 特別是 IE9 以下的版本,針對 Selector 的速度真的很慢 ● 範圍:從越小的範圍來 select 會比較快
27.
選取器速度比較 ● 最快的選擇器:id選擇器和元素標籤選擇器 $(‘‘#id‘‘) $(‘‘form‘‘)
$(‘‘input‘‘) ● 較慢的選取器 : class選擇器 $(‘‘.className‘‘) 改成 $(‘‘tag.className‘‘) ● 最慢的選擇器:偽類選擇器和屬性選擇器 $(‘‘:hidden’’) $(‘‘[attribute=value]‘‘) 但是,一些瀏覽器的新版本,增加了 querySelector() querySelectorAll() 方法,因此會使這類選擇器的性能有大幅提高。
28.
.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') 速 度
29.
jsperf http://jsperf.com/jq-select-speed-compare/3
30.
jsperf http://jsperf.com/jq-select-speed-compare/3
31.
緩存 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 的查找
32.
幾個選擇器技巧: ● length ● is("visible") ●
.closeset()
33.
Method Chaining 鍊式操作
34.
Method Chaining $(‘‘div’‘).hide().css(‘‘color‘‘,‘‘blue‘‘).slideDown(); $(‘‘div’‘).hide(); $(‘‘div‘‘).css(‘‘color‘‘,‘‘blue‘‘); $(‘‘div’‘).slideDown(); 80% jQuery
指令在執行完之後都會return this;
35.
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’’);
36.
牛刀小試 // [ ul
] // [ li , li ,li ] // [ li.hi , li.hi ,li.hi ] // [ ul ] // [ a , a , a ] // [ a , a , a ] // [ ul ]
37.
事件
38.
先來看個錯誤範例 因為 #container 還沒載入完全,所以
$(‘#id’) 為[ ],無法對 DOM 做任何的操作
39.
ready v.s. load $(document).ready(function()
{ … }) 當 document 物件下所有 DOM都可以正確取得時 $(window).load(function() { … }) 與 JavaScript 裡的 window.onload 事件一模一樣 整個視窗裡所有資源都已經全部下載後才會執行, ex : 該頁面有 100 張圖片就會等 100 圖片都下載完才會執行 其中也包括所有 iframe 子頁面的內容必須完整載入
40.
以 Document Ready
正確寫法
41.
回調函數(callback) 許多 jQuery 函數涉及動畫。這些函數也許會將
speed 或 duration 作為可選參數。 典型語法 : callback 參數是一個在 hide 操作完成後被執行的函數。
42.
還是不懂 callback ? 函數a有一個參數,這個參數就是一個函數b 當函數a執行完以後執行函數b。那麼這個過程就叫回調。 函數a
( 送她到車站並且她到家 ) 執行完成後 => 執行函數b( 發訊息給你 ) 白話: 跟心儀的對象約會結束後你送她到車站坐車回家,離別時 你肯定會說:「到家了給我發條信息,我很擔心你。」
43.
$(this) vs this
44.
$(this) 被 jQuery 處理的當前元素對象
45.
$(this) v.s. this this this
= document.getElementById('textbox') $(this) $(this) = $('#textbox') 不成立,噴錯
46.
參考資料 選取器效能 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
47.
Thank you !!
Download now