更高效的使用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 计算当天是本年本月的第几周
Mar 22 Javascript
原生的html元素选择器类似jquery选择器
Oct 15 Javascript
JavaScript中用字面量创建对象介绍
Dec 31 Javascript
jQuery选择id属性带有点符号元素的方法
Mar 17 Javascript
跟我学习javascript的垃圾回收机制与内存管理
Nov 23 Javascript
JQuery 的跨域方法推荐_可跨任何网站
May 18 Javascript
谈一谈bootstrap响应式布局
May 23 Javascript
Angular2 PrimeNG分页模块学习
Jan 14 Javascript
js时间查询插件使用详解
Apr 07 Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
Apr 19 Javascript
解决angularJS中input标签的ng-change事件无效问题
Sep 13 Javascript
JavaScript中的LHS和RHS分析详情
Apr 06 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 日期和时间的处理-郑阿奇(续)
2011/07/04 PHP
thinkPHP实现瀑布流的方法
2014/11/29 PHP
PHP简单操作MongoDB的方法(安装及增删改查)
2016/05/26 PHP
PHP生成图像验证码的方法小结(2种方法)
2016/07/18 PHP
PHPMailer使用QQ邮箱实现邮件发送功能
2017/08/18 PHP
jQuery EasyUI 开源插件套装 完全替代ExtJS
2010/03/24 Javascript
javascript中call和apply方法浅谈
2013/09/27 Javascript
使用jQuery.wechat构建微信WEB应用
2014/10/09 Javascript
基于AngularJS实现iOS8自带的计算器
2016/09/12 Javascript
微信小程序 textarea 详解及简单使用方法
2016/12/05 Javascript
Angular实现类似博客评论的递归显示及获取回复评论的数据
2017/11/06 Javascript
使用VScode 插件debugger for chrome 调试react源码的方法
2019/09/13 Javascript
Vue.js下拉菜单组件使用方法详解
2019/10/19 Javascript
解决vue v-for src 图片路径问题 404
2019/11/12 Javascript
创建与框架无关的JavaScript插件
2020/12/01 Javascript
python开发之thread实现布朗运动的方法
2015/11/11 Python
安装Python和pygame及相应的环境变量配置(图文教程)
2017/06/04 Python
python输入错误密码用户锁定实现方法
2017/11/27 Python
使用pandas模块读取csv文件和excel表格,并用matplotlib画图的方法
2018/06/22 Python
python实现根据文件关键字进行切分为多个文件的示例
2018/12/10 Python
你还在@微信官方?聊聊Python生成你想要的微信头像
2019/09/25 Python
使用python切片实现二维数组复制示例
2019/11/26 Python
新版Pycharm中Matplotlib不会弹出独立的显示窗口的问题
2020/06/02 Python
python和c语言哪个更适合初学者
2020/06/22 Python
python3.8动态人脸识别的实现示例
2020/09/21 Python
Keras保存模型并载入模型继续训练的实现
2021/02/20 Python
css3 pointer-events 介绍详解
2017/09/18 HTML / CSS
Html5 video标签视频的最佳实践
2020/02/26 HTML / CSS
DNA测试:Orig3n
2019/03/01 全球购物
土木工程专业大学毕业生求职信
2013/10/13 职场文书
就业推荐表自我鉴定
2013/10/29 职场文书
《春天来了》教学反思
2014/04/07 职场文书
2014年个人售房协议书
2014/10/30 职场文书
2015年医院后勤工作总结
2015/05/20 职场文书
先进基层党组织事迹材料2016
2016/02/29 职场文书
Appium中scroll和drag_and_drop根据元素位置滑动
2022/02/15 Python