SlideShare a Scribd company logo
jQuery 选择器原理及应用优化 罗晴明 2011-03-01
序:选择器是神马 结构性选择器 E:root  /  E:nth-child(n)  /  E:nth-of-type(n) p:first-line{color:red;} #main:after{font-size:12px;} E:first-line  /  E:first-letter  /  E:before  /  E:after 伪对象选择器 p:nth-child(1){color:red;} p:nth-of-type(3){font-size:12px;} input:enabled{color:red;} input:disabled{color;#fff;} E:enabled  /  E:disabled  /  E:checked UI 元素状态选择器 p[class]{color:red;} p[class=red]{font-size:12px;} E[att]  / E[att=val] 属性选择器 p:link{color:red;} p:active{color:blue;} E:link  / E:visited  /  E:hover 伪类选择器 p:not {color:red;} p:target {font-size:12px;} E:not  /  E:target 其他选择器 body,p{color:red;} #main p{font-size:12px;} E,F  /  E F  /  E > F  / E + F 组合元素选择器 p{color:red;} #main{font-size:12px;} *  /  Tag  /  #ID  /  .className 基本选择器 示例 形式 选择器类别
本次新闻的主要内容有 ... ,[object Object],[object Object]
选择器的设计思路 正向匹配 ( 左->右,父->子 ) 以 $(div p.title) 为例 1 、 document.getElementsByTagName('div') 2 、遍历 div 元素集合,查找 p 元素,合并结果 3 、遍历 p 元素集合,判断其 class 是否等于 title ,过滤结果
选择器的设计思路 变换一下思路。 ——  汪凤震
选择器的设计思路 逆向匹配 ( 右->左,子->父 ) 以 $(div p.title) 为例 1 、 document.getElementsByTagName('p') 2 、遍历 p 元素集合,判断其 class 是否等于 title ,过滤结果 3 、遍历 p 元素集合的父节点,判断其是否为 div ,过滤结果
选择与过滤 class=title p div 选择 ,[object Object],[object Object],过滤 ,[object Object]
应用优化  1 ——  使用高效的选择符 ID 选择符: #toc {margin:0;} 类选择符: .chapter {font-weight:bold;} 相邻兄弟选择符:  h1 + #toc {margin:0;} 子选择符:  #toc > li {color:#000;} 后代选择符:  #toc a {text-decoration:none;} 通配选择符:  * {font-size:12px;} 类型选择符: a {text-decoration:none;} 属性选择符:  [href="#"] {font-size:12px;} 伪类选择符:  a:hover {text-decoration:underline;}
应用优化  2 ——  遵循“逆向匹配”原则 一、减少选择符的限定 尽量精简选择符的限定和嵌套,减少选择匹配的次数 二、具体的规则用 class 体现 尽量使用具体的语义化的 class 去选择匹配处于 DOM 树中比较深位置的元素 三、多用父子关系的选择符 后代选择需要递归匹配所有子节点和子节点的后代。父子关系明显开销更小。 div#toc -> #toc li.chapter -> .li-chapter div.window div.menu span a.title ↓ .window-menu-title-link  parent child  ↓  parent > child
应用优化  3 ——  某些场合使用 js 原生选择方法 由于 jQuery 本质是对 js 的封装,其选择器归根结底还是依赖于 document.getElementById() document.getElementsByTagName() 那么,在简单的选择指定 ID 或者指定类型元素时,直接使用上述两个原生方法,将得到最优的性能。 $ = document.getElementById;// 临时替换 ...// 选择操作 $ = jQuery;// 恢复引用
——  还没好透!  缓存对象,减少无谓的反复选择 for(var i=0;i<$('p').length;i++){ ....... } ↓ var len =  $('p').length; for(var i=0;i<len;i++){ ....... }
谢谢观赏 谢谢观赏

More Related Content

Similar to jQuery选择器原理及应用优化

Puppet安装测试
Puppet安装测试Puppet安装测试
Puppet安装测试Yiwei Ma
 
Php for fe
Php for fePhp for fe
Php for fe
jay li
 
jQuery介绍@disandu.com
jQuery介绍@disandu.comjQuery介绍@disandu.com
jQuery介绍@disandu.com
Think hy
 
Mastering Mustache
Mastering MustacheMastering Mustache
Mastering Mustachetinyhill
 
1 C入門教學
1  C入門教學1  C入門教學
1 C入門教學Sita Liu
 
旺铺前端设计和实现
旺铺前端设计和实现旺铺前端设计和实现
旺铺前端设计和实现hua qiu
 
第五章:Struts2标签库
第五章:Struts2标签库第五章:Struts2标签库
第五章:Struts2标签库
shmily7788
 
Practical Data Analysis in R
Practical Data Analysis in RPractical Data Analysis in R
Practical Data Analysis in R
Chun-Ming Chang
 
Practical data analysis in R: from data collection to data insight
Practical data analysis in R: from data collection to data insight Practical data analysis in R: from data collection to data insight
Practical data analysis in R: from data collection to data insight
Chun-Min Chang
 
[系列活動] 手把手教你R語言資料分析實務
[系列活動] 手把手教你R語言資料分析實務[系列活動] 手把手教你R語言資料分析實務
[系列活動] 手把手教你R語言資料分析實務
台灣資料科學年會
 
Inheritance css继承
Inheritance css继承Inheritance css继承
Inheritance css继承paulguo
 
常見設計模式介紹
常見設計模式介紹常見設計模式介紹
常見設計模式介紹
Jace Ju
 
数据处理算法设计要点
数据处理算法设计要点数据处理算法设计要点
数据处理算法设计要点thinkinlamp
 

Similar to jQuery选择器原理及应用优化 (13)

Puppet安装测试
Puppet安装测试Puppet安装测试
Puppet安装测试
 
Php for fe
Php for fePhp for fe
Php for fe
 
jQuery介绍@disandu.com
jQuery介绍@disandu.comjQuery介绍@disandu.com
jQuery介绍@disandu.com
 
Mastering Mustache
Mastering MustacheMastering Mustache
Mastering Mustache
 
1 C入門教學
1  C入門教學1  C入門教學
1 C入門教學
 
旺铺前端设计和实现
旺铺前端设计和实现旺铺前端设计和实现
旺铺前端设计和实现
 
第五章:Struts2标签库
第五章:Struts2标签库第五章:Struts2标签库
第五章:Struts2标签库
 
Practical Data Analysis in R
Practical Data Analysis in RPractical Data Analysis in R
Practical Data Analysis in R
 
Practical data analysis in R: from data collection to data insight
Practical data analysis in R: from data collection to data insight Practical data analysis in R: from data collection to data insight
Practical data analysis in R: from data collection to data insight
 
[系列活動] 手把手教你R語言資料分析實務
[系列活動] 手把手教你R語言資料分析實務[系列活動] 手把手教你R語言資料分析實務
[系列活動] 手把手教你R語言資料分析實務
 
Inheritance css继承
Inheritance css继承Inheritance css继承
Inheritance css继承
 
常見設計模式介紹
常見設計模式介紹常見設計模式介紹
常見設計模式介紹
 
数据处理算法设计要点
数据处理算法设计要点数据处理算法设计要点
数据处理算法设计要点
 

jQuery选择器原理及应用优化

  • 2. 序:选择器是神马 结构性选择器 E:root / E:nth-child(n) / E:nth-of-type(n) p:first-line{color:red;} #main:after{font-size:12px;} E:first-line / E:first-letter / E:before / E:after 伪对象选择器 p:nth-child(1){color:red;} p:nth-of-type(3){font-size:12px;} input:enabled{color:red;} input:disabled{color;#fff;} E:enabled / E:disabled / E:checked UI 元素状态选择器 p[class]{color:red;} p[class=red]{font-size:12px;} E[att] / E[att=val] 属性选择器 p:link{color:red;} p:active{color:blue;} E:link / E:visited / E:hover 伪类选择器 p:not {color:red;} p:target {font-size:12px;} E:not / E:target 其他选择器 body,p{color:red;} #main p{font-size:12px;} E,F / E F / E > F / E + F 组合元素选择器 p{color:red;} #main{font-size:12px;} * / Tag / #ID / .className 基本选择器 示例 形式 选择器类别
  • 3.
  • 4. 选择器的设计思路 正向匹配 ( 左->右,父->子 ) 以 $(div p.title) 为例 1 、 document.getElementsByTagName('div') 2 、遍历 div 元素集合,查找 p 元素,合并结果 3 、遍历 p 元素集合,判断其 class 是否等于 title ,过滤结果
  • 6. 选择器的设计思路 逆向匹配 ( 右->左,子->父 ) 以 $(div p.title) 为例 1 、 document.getElementsByTagName('p') 2 、遍历 p 元素集合,判断其 class 是否等于 title ,过滤结果 3 、遍历 p 元素集合的父节点,判断其是否为 div ,过滤结果
  • 7.
  • 8. 应用优化 1 —— 使用高效的选择符 ID 选择符: #toc {margin:0;} 类选择符: .chapter {font-weight:bold;} 相邻兄弟选择符: h1 + #toc {margin:0;} 子选择符: #toc > li {color:#000;} 后代选择符: #toc a {text-decoration:none;} 通配选择符: * {font-size:12px;} 类型选择符: a {text-decoration:none;} 属性选择符: [href=&quot;#&quot;] {font-size:12px;} 伪类选择符: a:hover {text-decoration:underline;}
  • 9. 应用优化 2 —— 遵循“逆向匹配”原则 一、减少选择符的限定 尽量精简选择符的限定和嵌套,减少选择匹配的次数 二、具体的规则用 class 体现 尽量使用具体的语义化的 class 去选择匹配处于 DOM 树中比较深位置的元素 三、多用父子关系的选择符 后代选择需要递归匹配所有子节点和子节点的后代。父子关系明显开销更小。 div#toc -> #toc li.chapter -> .li-chapter div.window div.menu span a.title ↓ .window-menu-title-link parent child ↓ parent > child
  • 10. 应用优化 3 —— 某些场合使用 js 原生选择方法 由于 jQuery 本质是对 js 的封装,其选择器归根结底还是依赖于 document.getElementById() document.getElementsByTagName() 那么,在简单的选择指定 ID 或者指定类型元素时,直接使用上述两个原生方法,将得到最优的性能。 $ = document.getElementById;// 临时替换 ...// 选择操作 $ = jQuery;// 恢复引用
  • 11. —— 还没好透! 缓存对象,减少无谓的反复选择 for(var i=0;i<$('p').length;i++){ ....... } ↓ var len = $('p').length; for(var i=0;i<len;i++){ ....... }