更高效的使用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 相关文章推荐
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
Dec 28 Javascript
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
Dec 26 Javascript
onkeydown事件解决按回车键直接提交数据的需求
Apr 11 Javascript
JS实现的5级联动Select下拉选择框实例
Aug 17 Javascript
VUEJS实战之利用laypage插件实现分页(3)
Jun 13 Javascript
BootStrap Typeahead自动补全插件实例代码
Aug 10 Javascript
AngularJS入门教程之静态模板详解
Aug 18 Javascript
php简单数据库操作类的封装
Jun 08 Javascript
jQuery实现全选、反选和不选功能
Aug 16 jQuery
vue 项目如何引入微信sdk接口的方法
Dec 18 Javascript
记一次webpack3升级webpack4的踩坑经历
Jun 12 Javascript
js正则表达式简单校验方法
Jan 03 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
33道php常见面试题及答案
2015/07/06 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
phpwind放自动注册方法
2006/12/02 Javascript
JQuery扩展插件Validate—4设置错误提示的样式
2011/09/05 Javascript
Javascript中的delete介绍
2012/09/02 Javascript
自己写的Javascript计算时间差函数
2013/10/28 Javascript
深入解析JavaScript中的变量作用域
2013/12/06 Javascript
JavaScript关闭当前页面(窗口)不带任何提示
2014/03/26 Javascript
jQuery判断元素是否存在的可靠方法
2014/05/06 Javascript
jquery修改网页背景颜色通过css方法实现
2014/06/06 Javascript
JavaScript动态改变div属性的实现方法
2015/07/22 Javascript
浅析jQuery Mobile的初始化事件
2015/12/03 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
2015/12/18 Javascript
jquery动态切换背景图片的简单实现方法
2016/05/14 Javascript
JavaScript绑定事件监听函数的通用方法
2016/05/14 Javascript
微信小程序中子页面向父页面传值实例详解
2017/03/20 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
2018/02/02 jQuery
Vue弹出菜单功能的实现代码
2018/09/12 Javascript
Nodejs监听日志文件的变化的过程解析
2019/08/04 NodeJs
js回调函数原理与用法案例分析
2020/03/04 Javascript
微信分享invalid signature签名错误踩过的坑
2020/04/11 Javascript
Python算法应用实战之栈详解
2017/02/04 Python
Python实现PS滤镜中马赛克效果示例
2018/01/20 Python
python实现简单遗传算法
2018/03/19 Python
Python面向对象实现一个对象调用另一个对象操作示例
2019/04/08 Python
解决python xx.py文件点击完之后一闪而过的问题
2019/06/24 Python
详解Python对JSON中的特殊类型进行Encoder
2019/07/15 Python
python正则爬取某段子网站前20页段子(request库)过程解析
2019/08/10 Python
selenium框架中driver.close()和driver.quit()关闭浏览器
2020/12/08 Python
《最后的姿势》教学反思
2014/02/27 职场文书
保护环境的标语
2014/06/09 职场文书
2014教师教育实践活动对照检查材料思想汇报
2014/09/21 职场文书
2015年毕业生自荐信范文
2015/03/24 职场文书
建筑技术负责人岗位职责
2015/04/13 职场文书
2015年秋季灭鼠工作总结
2015/07/27 职场文书
MySQL COUNT函数的使用与优化
2021/05/10 MySQL