HTML5培训

jQuery:入门学习之选择器and jQuery性能优化的小建议

发布时间:2013年 08月 20日   |  作者:独行冰海

在jQuery中,
最快的选择器是ID,因为他直接来源于JavaScript中的getElementByID()方法,
第二快的选择器是tag选择器,他来源于JavaScript中的getElementByName()方法,
最慢的选择器是class。

多元素的选择其实就是DOM遍历和循环,这些都是比较慢的东西,为了性能的提高,最好从就近的ID开始继承
一: 永远不要让同一个选择器在你的代码中出现多次,解决这个问题的方法就是养成将jQuery对象缓存到变量的习惯
          $('dt').click(function(){});
          $('dt').css('background-color','green')
          $('dt').find('dd').hide()……
这样的情况,最好将jQuery对象缓存进一个变量再操作
          var $dt=$('dt'); //为了记住我们本地变量是Jquery的封装,通常用$作为变量的前缀。
          $dt.click();
          $dr.css();
          $dt.find();
二:使用子查询
    jQuery允许我们对一个已经封装的对象使用附加的选择器操作。因为我们已经保存了一个父级元素对象在变量里,
    所以这样就大大提高了我们对其子元素的操作。
    var $left=$dt.find('left')
    var $right=$dt.find('right')
    
    最近看到的Jquery性能优化就这些的,以后会继续研究的。

巩固下jQuery中的选择器层级,共有四个的
1:ancestor descendant
   $('ancestor descendant')
    ancestor:任何有效的选择器
    descendant:用以匹配元素的选择器,并且他是第一个选择器的后代元素
2:parent>child  在给定的父元素下匹配所有的子元素
   $('from>input')
     表单下的所有input元素
3:prev+next 匹配所有紧跟在prev元素后的next元素
   $('lable+input') 搜索所有跟在lable后面的input元素
4:prev~siblings  匹配prev元素后的所有shiblings元素
   prev 如何有效的选择器
   siblings 一个选择器,并且它作为第一个选择器的同辈
   $('form~input')
    搜索和form同辈的input元素
第一种最好不要用,原因上面已经写清楚。


相关文章
jQuery:each()和$.each()的区别
其他文章
提高网页加载速度---CSS
less语言特性(二) ——
less语言特性(一) ——
JavaScript中的一些坑
移动端性能大比拼:CSS
推荐大家使用的CSS书写规
 
 

版权所有:北京博看文思科技有限责任公司|(0.0445039272308s)