更高效的使用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 相关文章推荐
自定义右键属性覆盖浏览器默认右键行为实现代码
Feb 02 Javascript
javascript的document.referrer浏览器支持、失效情况总结
Jul 18 Javascript
javascript原始值和对象引用实例分析
Apr 25 Javascript
纯JavaScript代码实现文本比较工具
Feb 17 Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
Mar 18 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
Mar 08 Javascript
移动设备手势事件库Touch.js使用详解
Aug 18 Javascript
使用js实现将后台传入的json数据放在前台显示
Aug 06 Javascript
微信小程序实现签到功能
Oct 31 Javascript
微信小程序实现banner图轮播效果
Jun 28 Javascript
微信小程序发布新版本时自动提示用户更新的方法
Jun 07 Javascript
React Native项目框架搭建的一些心得体会
May 28 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
利用 window_onload 实现select默认选择
2006/10/09 PHP
php设计模式 Factory(工厂模式)
2011/06/26 PHP
php安装xdebug/php安装pear/phpunit详解步骤(图)
2013/12/22 PHP
win7计划任务定时执行PHP脚本设置图解
2014/05/09 PHP
PHP基于自定义类随机生成姓名的方法示例
2017/08/05 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
用javascript实现的支持lrc歌词的播放器
2007/05/17 Javascript
修改js Calendar日历控件 兼容IE9/谷歌/火狐
2013/01/04 Javascript
jQuery拖动图片删除示例
2013/05/10 Javascript
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
2013/06/14 Javascript
JavaScript中string转换成number介绍
2014/12/31 Javascript
js实现鼠标经过表格行变色的方法
2015/05/12 Javascript
js实现的简洁网页滑动tab菜单效果代码
2015/08/24 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
2015/11/09 Javascript
JQuery日历插件My97DatePicker日期范围限制
2016/01/20 Javascript
总结AngularJS开发者最常犯的十个错误
2016/08/31 Javascript
JavaScript字符串对象
2017/01/14 Javascript
Vue基于NUXT的SSR详解
2017/10/24 Javascript
ES6学习笔记之map、set与数组、对象的对比
2018/03/01 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
2018/04/03 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
2018/09/04 jQuery
vue如何解决循环引用组件报错的问题
2018/09/22 Javascript
[17:36]VG战队纪录片
2014/08/21 DOTA
[43:35]EG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python实现PS滤镜特效Marble Filter玻璃条纹扭曲效果示例
2018/01/29 Python
Python TCP通信客户端服务端代码实例
2019/11/21 Python
Python实现读取并写入Excel文件过程解析
2020/05/27 Python
Python判断变量是否是None写法代码实例
2020/10/09 Python
CSS教程:CSS3圆角属性
2009/04/02 HTML / CSS
css 元素选择器的简单实例
2016/05/23 HTML / CSS
关于HTML5的安全问题开发人员需要牢记的
2012/06/21 HTML / CSS
LN-CC中国:高端男装和女装的奢侈时尚目的地
2019/09/14 全球购物
农场厂长岗位职责
2013/12/28 职场文书
运动会广播稿200米
2014/01/27 职场文书
求职信怎么写范文
2014/05/26 职场文书
2016大学军训通讯稿
2015/11/25 职场文书