几条经验让jQuery用的更漂亮

Posted 2020-10-18 微lin

　　新手使用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);

好了，简单总结这几个，后续加油！