zoukankan      html  css  js  c++  java
  • 几条经验让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);

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

    码农随笔防失忆,只为记录风雨路上的脚丫印印~
  • 相关阅读:
    微信小程序之自定义toast弹窗
    NPOI 设置导出的excel内容样式
    NPOI excel导出快速构建
    GridView 基本使用
    jqgrid 各种方法参数的使用
    经典SQL语句大全
    jqgrid 加载时第一页面只显示多少条数据
    sqlserver2008 调试存储过程
    jqgrid 上移下移单元格
    jgrid 选择器 C#控件
  • 原文地址:https://www.cnblogs.com/bella-lin/p/8085973.html
Copyright © 2011-2022 走看看