几条经验让jQuery用的更漂亮

Posted 微lin

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了几条经验让jQuery用的更漂亮相关的知识,希望对你有一定的参考价值。

  新手使用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用的更漂亮的主要内容,如果未能解决你的问题,请参考以下文章

编写代码片段的更简洁的方法

几个可以直接拿来用的jQuery代码片段

几个可以直接拿来用的jQuery代码片段

可以直接拿来用的15个jQuery代码片段

jQuery使用经验建议

硬核23种设计模式娓娓道来,助你优雅的编写出漂亮代码!