更高效的使用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 相关文章推荐
JQuery在光标位置插入内容的实现代码
Jun 18 Javascript
js判断选择时间不能小于当前时间的示例代码
Sep 24 Javascript
jquery实现弹出层完美居中效果
Mar 03 Javascript
jQuery取得iframe中元素的常用方法详解
Jan 14 Javascript
浅析JavaScript中命名空间namespace模式
Jun 22 Javascript
ionic实现滑动的三种方式
Aug 27 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
Jan 21 Javascript
Angular实现跨域(搜索框的下拉列表)
Feb 16 Javascript
完美实现js选项卡切换效果(一)
Mar 08 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
Dec 19 Javascript
layui异步加载table表中某一列数据的例子
Sep 16 Javascript
vue组件创建的三种方式小结
Feb 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
PHP利用COM对象访问SQLServer、Access
2006/10/09 PHP
Windows7下PHP开发环境安装配置图文方法
2010/05/20 PHP
《PHP编程最快明白》第三讲:php数组
2010/11/01 PHP
PHP设置图片文件上传大小的具体实现方法
2013/10/11 PHP
tp5框架使用composer实现日志记录功能示例
2019/01/10 PHP
Javascript结合css实现网页换肤功能
2009/11/02 Javascript
jQuery ReferenceError: $ is not defined 错误的处理办法
2013/05/10 Javascript
Google (Local) Search API的简单使用介绍
2013/11/28 Javascript
页面get请求 中文参数方法乱码问题的快速解决方法
2016/05/31 Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
2016/10/21 Javascript
那些精彩的JavaScript代码片段
2017/01/12 Javascript
微信小程序中用WebStorm使用LESS
2017/03/08 Javascript
nodejs6下使用koa2框架实例
2017/05/18 NodeJs
强大的 Angular 表单验证功能详细介绍
2017/05/23 Javascript
JS获取数组中出现次数最多及第二多元素的方法
2017/10/27 Javascript
Auto.js自动收取自己和好友蚂蚁森林能量脚本
2018/06/28 Javascript
微信小程序实现文字从右向左无限滚动
2020/11/18 Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
2019/08/09 Javascript
javascript跳转与返回和刷新页面的实例代码
2019/11/20 Javascript
15分钟上手vue3.0(小结)
2020/05/20 Javascript
React Native登录之指纹登录篇的示例代码
2020/11/03 Javascript
利用python实现xml与数据库读取转换的方法
2017/06/17 Python
10分钟教你用Python实现微信自动回复功能
2018/11/28 Python
pycharm配置git(图文教程)
2019/08/16 Python
基于python修改srt字幕的时间轴
2020/02/03 Python
Python tkinter实现简单加法计算器代码实例
2020/05/13 Python
浅谈python 调用open()打开文件时路径出错的原因
2020/06/05 Python
Python延迟绑定问题原理及解决方案
2020/08/04 Python
英国一家专门出售品牌鞋子的网站:Allsole
2016/08/07 全球购物
澳大利亚制造的蜡烛和扩散器:Glasshouse Fragrances
2018/05/20 全球购物
万宝龙英国官网:Montblanc手表、书写工具、皮革和珠宝
2018/10/16 全球购物
亚马逊意大利站点:Amazon.it
2020/12/31 全球购物
公务员培的训心得体会
2014/09/01 职场文书
怀孕辞职信怎么写
2015/02/28 职场文书
中秋节晚会开场白
2015/05/29 职场文书
Rust中的Struct使用示例详解
2022/08/14 Javascript