更高效的使用JQuery 这里总结了8个小技巧


Posted in Javascript onApril 13, 2016

1、DOM遍历是昂贵的,将变量缓存起来。

//不推荐

var h = $('#ele').height();

$('#ele').css('height', h-20);
//推荐

var $ele = $('#ele');

var h = $ele.height();

$ele.css('height',h-20);

2、优化选择符。

//不推荐

$('div#myid')
//推荐

$('#myid')

3、避免隐式通用选择符。

//不推荐

$('.someclass :radio')
//推荐

$('.someclass input:radio')

4、避免通用选择符。

//不推荐

$('.container > *')
//推荐

$('.container').children()

5、尽可能保持代码简洁。

//不推荐

if(arr.length > 0){}

 
//推荐   

if(arr.length){}

6、尽可能地合并函数。

//不推荐

$f.on("click", function(){

    $(this).css('border','1px solid red');

    $(this).css('color','blue');

});
//推荐

$f.on("click", function(){

    $(this).css({

        'border':'1px solid red',

        'color': 'blue'

    });

});

7、尽可能使用链式操作。

//不推荐

$ele.html();

$ele.on("click",function(){});

$ele.fadeIn('slow');
//推荐

$ele.on("click",function(){

   

}).fadeIn('slow').animate({height:'12px'},500);

8、对DOM元素作大量操作,先分离在追加

//不推荐

var $container = $('#somecontainer');

var $ele = $container.first();

.......一系列复杂操作
 
//推荐

var $container = $('#somecontainer');

var $ele = $container.first().detach();

.......一系列复杂操作

$container.append($ele);
Javascript 相关文章推荐
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
Aug 08 Javascript
控制input输入框中提示信息的显示和隐藏的方法
Feb 12 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
Jul 27 Javascript
js重写alert控件(适合学习js的新手朋友)
Aug 24 Javascript
JS修改iframe页面背景颜色的方法
Apr 01 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
Apr 15 Javascript
javascript Slip.js实现整屏滑动的手机网页
Nov 25 Javascript
JavaScript浏览器对象之一Window对象详解
Jun 03 Javascript
jQuery深拷贝Json对象简单示例
Jul 06 Javascript
Wireshark基本介绍和学习TCP三次握手
Aug 15 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
May 29 Javascript
swiper4实现移动端导航栏tab滑动切换
Oct 16 Javascript
深入理解关于javascript中apply()和call()方法的区别
Apr 12 #Javascript
javascript中去除数组重复元素的实现方法【实例】
Apr 12 #Javascript
Bootstrap每天必学之折叠
Apr 12 #Javascript
JavaScript几种数组去掉重复值的方法推荐
Apr 12 #Javascript
学习使用bootstrap基本控件(table、form、button)
Apr 12 #Javascript
如何高效率去掉js数组中的重复项
Apr 12 #Javascript
学习使用bootstrap3栅格系统
Apr 12 #Javascript
You might like
php 获取完整url地址
2008/12/20 PHP
js限制checkbox勾选的个数以及php获取多个checkbbox的方法深入解析
2013/07/18 PHP
PHP对象链式操作实现原理分析
2016/10/09 PHP
/etc/php-fpm.d/www.conf 配置注意事项
2017/02/04 PHP
javascript两段代码,两个小技巧
2010/02/04 Javascript
使用JavaScript构建JSON格式字符串实现步骤
2013/03/22 Javascript
javascript中为某个元素指定事件的三种方式
2014/08/07 Javascript
nodejs中使用多线程编程的方法实例
2015/03/24 NodeJs
js模仿php中strtotime()与date()函数实现方法
2015/08/11 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
2015/08/21 Javascript
AngularJS ng-style中使用filter
2016/09/21 Javascript
使用 jQuery.ajax 上传带文件的表单遇到的问题
2016/10/31 Javascript
微信小程序制作表格的方法
2019/02/14 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
2019/09/06 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
2020/07/18 Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
2020/11/06 Javascript
详解datagrid使用方法(重要)
2020/11/06 Javascript
Python设计模式之代理模式实例
2014/04/26 Python
Python中MySQLdb和torndb模块对MySQL的断连问题处理
2015/11/09 Python
深入解析Python中的list列表及其切片和迭代操作
2016/03/13 Python
django允许外部访问的实例讲解
2018/05/14 Python
浅谈pandas用groupby后对层级索引levels的处理方法
2018/11/06 Python
python3 自动识别usb连接状态,即对usb重连的判断方法
2019/07/03 Python
pandas通过字典生成dataframe的方法步骤
2019/07/23 Python
python基于K-means聚类算法的图像分割
2019/10/30 Python
python 安装教程之Pycharm安装及配置字体主题,换行,自动更新
2020/03/13 Python
Django ForeignKey与数据库的FOREIGN KEY约束详解
2020/05/20 Python
Numpy 多维数据数组的实现
2020/06/18 Python
英国工具中心:UK Tool Centre
2017/07/10 全球购物
健康教育评估方案
2014/05/25 职场文书
安全标兵事迹材料
2014/08/17 职场文书
老干部工作汇报材料
2014/10/28 职场文书
长城的导游词
2015/01/30 职场文书
2015年学校总务工作总结
2015/07/20 职场文书
Python利器openpyxl之操作excel表格
2021/04/17 Python
vue实现列表拖拽排序的示例代码
2022/04/08 Vue.js