码迷,mamicode.com
首页 > Web开发 > 详细

几条经验让jQuery用的更漂亮

时间:2017-12-22 15:58:58      阅读:216      评论:0      收藏:0      [点我收藏+]

标签:引用   find   高性能   上下   文章   时间   结构   使用   代码   

  新手使用jQuery写代码时往往侧重实现功能,功能逻辑不太复杂的页面也不会太考虑性能问题,随着对jQuery的亲切问候,发现jQuery越来越简单,越是简单越是想把它用漂亮。下面总结几条常见常用又是又是经常忽略的小经验,有几条是明明知道确是看了别人的文章才发现自己常用的是糟糕的方法。

1、在</body>前引用jQuery后无需再用$(function(){})去等待DOM结构的加载了。

2、$(‘.class‘)效率是最低的,可以添加条件使用find()方法

$(‘#id‘).find(‘.class‘)

3、ID选择符是唯一的,避免使用多个ID选择符。

4、避免使用隐式通配符

$(‘.class :radio‘)//不建议
$(‘.class input:radio‘)//建议

5、为选择器指定上下文

$(‘.class #id‘)//限定搜索范围,性能高于$(‘.class‘)

6*、超过一次用到的jQuery 可考虑缓存来提高性能 $element表明jquery对象

$element = $(‘#element‘);
h = $element.height();
$element.css(‘height‘,h+5);

7*、正确使用时间委托

html

<ul id="list">
    <li>234</li>
    <li>234</li>
    <li>234</li>
    <li>234</li>
</ul>

相比

$(‘#list‘).find(‘li‘).on(‘click‘,function(){
    console.log(23);
})

这个

$(‘#list‘).on(‘click‘,‘li‘,function(){
    console.log(23);
})

性能要高很多,学习使用这种方法。

8、采用链式操作。

9、链式操作维持代码的可读性

$(‘#id‘)
    .on(‘click‘,function(){ alert(‘hello everybody‘);})
    .fadeIn(‘slow‘)
    .animate({height:‘120px‘},500);

好了,简单总结这几个,后续加油!

 

几条经验让jQuery用的更漂亮

标签:引用   find   高性能   上下   文章   时间   结构   使用   代码   

原文地址:http://www.cnblogs.com/bella-lin/p/8085973.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!