jQuery使用技巧简单汇总


Posted in Javascript onApril 18, 2013

1.使用最新的jquery版本
觉得这个建议有待商榷,虽然越新的jquery版本性能上更加优秀,但是有些方法的变迁还是会导致一些bug,比如从1.4.2到1.5时很多朋友就抱怨ajax上出现问题了。建议是旧的页面的jquery升级需谨慎,新项目可以大胆的使用jquery新版本。

还有个建议是使用google的cdn上的jquery文件,加载速度更快。猛击Google Libraries API 进入查看。

<!-- Include a specific version of jQuery --> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
<!-- Include the latest version in the 1.6 branch --> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>

2.保持选择器的简单
这个建议明河非常赞同,有很多朋友不喜欢给元素增加样式或id,希望保持html的简洁,使用jquery强大的选择器去检索元素,这不是好的习惯。首先越复杂的选择器,遍历的效率越低,这是显而易见的,最高效率无疑是使用原生的getElementById();其次,复杂的选择器将标签名称和层级结构固化在里面,假如你的html结构发生了改变,或标签发生了改变,都直接造成检索失败。
$('li[data-selected="true"] a') // Fancy, but slow 
$('li.selected a') // Better 
$('#elem') // Best

访问DOM,是javascript最耗资源和性能的部分,所以尽量避免复杂或重复的遍历DOM。
避免重复遍历DOM的方法就是将$()检索的元素存储到变量,比如下面的代码:
var buttons = $('#navigation a.button');

// 使用$前缀来标示jquery对象,是非常好的习惯,推荐使用。
var $buttons = $('#navigation a.button'); 
var $buttons = $('#navigation a.button');

jquery选择器支持大部分的css3伪类方法,像:visible, :hidden, :animated,虽然很便利,但请慎用,因为当你使用伪类选择器的时候,jQuery不得不使用querySelectorAll(),性能的损耗更大。

3.jQuery对象作为数组处理
jQuery对象定义了length属性,当使用数组的形式操作时候返回其实是DOM元素而不是子jQuery对象,比如下面代码。

// Selecting all the navigation buttons: 
var buttons = $('#navigation a.button');

// 遍历buttons对象
for(var i=0;i<buttons.length;i++){ 
console.log(buttons[i]); // 是DOM元素,而不是jQuery对象! 
}

// We can even slice it:
var firstFour = buttons.slice(0,4);

根据实验,使用for或while循环,执行效率比$.each()来的高。详细测试可以看several times faster。
使用length属性来检查元素存在性:
if(buttons){ // This is always true 
// Do something 
} if(buttons.length){ // True only if buttons contains elements 
// Do something 
}

4.selector属性
jQuery对象都带有一个selector属性,用于获取选择器名称,比如:
$('#container li:first-child').selector // #container li:first-child 
$('#container li').filter(':first-child').selector // #container li.filter(:first-child)

留意第二行代码,selector返回的是获取的元素完整的选择器。
这个属性常用于编写jquery插件的时候。

5.创建一个空的jQuery对象
这种情况应用场景不多,当你需要先创建个空的jQuery对象,然后使用add()方法向此对象注入jQuery对象时会用到。

var container = $([]); 
container.add(another_element);)

6.选择随机元素
应用场景不多,举个例子,现在你需要随机给li增加一个red的class。
需要扩展jquery的选择器,这段代码很好的演示了jQuery.expr的用法。
(function($){ 
var random = 0; $.expr[':'].random = function(a, i, m, r) { 
if (i == 0) { 
random = Math.floor(Math.random() * r.length); 
} 
return i == random; 
}; 
10. 
11.})(jQuery); 
12. 
13. 
14. 
15.$('li:random').addClass('glow');

7.使用css钩子
jQuery.cssHooks是1.4.3新增的方法,用的不估计不多,当你定义新的CSS Hooks时实际上定义的是getter和setter方法,举个例子,border-radius这个圆角属性想要成功应用于firefox、webkit等浏览器,需要增加属性前缀,比如-moz-border-radius和-webkit-border-radius。你可以通过定义CSS Hooks将其封装成统一的接口borderRadius,而不是一一设置css属性。
$.cssHooks['borderRadius'] = { 
get: function(elem, computed, extra){ 
// Depending on the browser, read the value of 
// -moz-border-radius, -webkit-border-radius or border-radius 
}, 
set: function(elem, value){ 
// Set the appropriate CSS3 property 
} 
}; 
10. 
11.// Use it without worrying which property the browser actually understands: 
12.$('#rect').css('borderRadius',5);

8.使用自定义的Easing(缓动动画效果)函数
easing plugin是用的非常多的函数,可以实现不少华丽的效果。当内置的缓动效果无法满足你的需求时,还可以自定义缓动函数。
$.easing.easeInOutQuad = function (x, t, b, c, d) { 
if ((t/=d/2) < 1) return c/2*t*t + b; 
return -c/2 * ((--t)*(t-2) - 1) + b; 
}; // To use it: 
$('#elem').animate({width:200},'slow','easeInOutQuad');

9.$.proxy()的使用
关于$.proxy(),明河曾经详细介绍过,传送门在此《jquery1.4教程三:新增方法教程(3)》。
jquery有个让人头疼的地方,回调函数过多,上下文this总是在变化着,有时候我们需要控制this的指向,这时候就需要$.proxy()方法。
<div id="panel" style="display:none"> 
<button>Close</button> 
</div> 
$('#panel').fadeIn(function(){ 
// this points to #panel 
$('#panel button').click(function(){ 
// this points to the button 
$(this).fadeOut(); 
}); 
10.});

嵌套的二个回调函数this指向是不同的!现在我们希望this的指向是#panel的元素。代码如下:
$('#panel').fadeIn(function(){ 
// Using $.proxy to bind this: $('#panel button').click($.proxy(function(){ 
// this points to #panel 
$(this).fadeOut(); 
},this)); 
});

10.快速获取节点数
这是个常用的技巧,代码如下:
console.log( $('*').length );

11.构建个jquery插件
(function($){ 
$.fn.yourPluginName = function(){ 
// Your code goes here 
return this; 
}; 
})(jQuery);

关于jquery插件的构建,明河曾发过系列教程,传送门:制作jquery文字提示插件—jquery插件实战教程(1)。
这里就不再详述。

12.设置ajax全局事件
关于ajax全局事件,明河曾发过完整的介绍文章,传送门:《jquery的ajax全局事件详解—明河谈jquery》。

13.延迟动画

// This is wrong: 
$('#elem').animate({width:200},function(){ 
setTimeout(function(){ 
$('#elem').animate({marginTop:100}); 
},2000); 
}); // Do it like this: 
$('#elem').animate({width:200}).delay(2000).animate({marginTop:100});

当存在多个animate动画时,如何处理动画的执行顺序是个烦心事,原文作者是建议使用delay()函数,如上面的代码,但明河的建议是使用queue()方法,因为delay你要考虑延迟多少时间,而queue没有这个问题,进入队列的函数会一个个顺序执行。可以看明河以前的文章queue和dequeue—明河谈jquery。

15.jquery的本地存储
本地存储在现在web应用中使用越来越频繁,jquery有个专门用于本地存储的插件叫$.jStorage jQuery plugin。

// Check if "key" exists in the storage 
var value = $.jStorage.get("key"); 
if(!value){ 
// if not - load the data from the server 
value = load_data_from_server(); 
// and save it 
$.jStorage.set("key",value); 
}
Javascript 相关文章推荐
获取Javscript执行函数名称的方法
Dec 22 Javascript
利用进制转换压缩数字函数分享
Jan 02 Javascript
超简单JS二级、多级联动的简单实例
Feb 18 Javascript
基于jquery和svg实现超炫酷的动画特效
Dec 09 Javascript
jQuery中使用animate自定义动画的方法
May 29 Javascript
用JavaScript获取页面文档内容的实现代码
Jun 10 Javascript
谈谈对JavaScript原生拖放的深入理解
Sep 20 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
Nov 01 Javascript
js排序与重组的实例讲解
Aug 28 Javascript
jquery实现倒计时小应用
Sep 19 jQuery
浅谈Angular4中常用管道
Sep 27 Javascript
JavaScript进制转换实现方法解析
Jan 18 Javascript
document.documentElement的一些使用技巧
Apr 18 #Javascript
JQuery 图片的展开和伸缩实例讲解
Apr 18 #Javascript
jQuery基本选择器选择元素使用介绍
Apr 18 #Javascript
jQuery层次选择器选择元素使用介绍
Apr 18 #Javascript
jQuery基本过滤选择器使用介绍
Apr 18 #Javascript
使用jQuery内容过滤选择器选择元素实例讲解
Apr 18 #Javascript
jQuery随机切换图片的小例子
Apr 18 #Javascript
You might like
PHP类中Static方法效率测试代码
2010/10/17 PHP
php实现按照权重随机排序数据的方法
2015/01/09 PHP
PHP数组与对象之间使用递归实现转换的方法
2015/06/24 PHP
PHP实现JS中escape与unescape的方法
2016/07/11 PHP
PHP数据库表操作的封装类及用法实例详解
2016/07/12 PHP
在 Laravel 中 “规范” 的开发短信验证码发送功能
2017/10/26 PHP
实例讲解PHP中使用命名空间
2019/01/27 PHP
jQuery boxy弹出层插件中文演示及使用讲解
2011/02/24 Javascript
Javascript 闭包引起的IE内存泄露分析
2012/05/23 Javascript
jquery验证表单中的单选与多选实例
2013/08/18 Javascript
jquery图片切换插件
2015/03/16 Javascript
jQuery插件ajaxFileUpload实现异步上传文件效果
2015/04/14 Javascript
JavaScript判断是否是微信浏览器
2016/06/13 Javascript
使用JavaScript计算前一天和后一天的思路详解
2019/12/20 Javascript
[01:16:13]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第一场 2月22日
2021/03/11 DOTA
利用Python实现在同一网络中的本地文件共享方法
2018/06/04 Python
对python使用telnet实现弱密码登录的方法详解
2019/01/26 Python
python itchat实现调用微信接口的第三方模块方法
2019/06/11 Python
详解python和matlab的优势与区别
2019/06/28 Python
对python中基于tcp协议的通信(数据传输)实例讲解
2019/07/22 Python
python+mysql实现个人论文管理系统
2019/10/25 Python
pygame实现打字游戏
2021/02/19 Python
浅析python中while循环和for循环
2019/11/19 Python
Python ellipsis 的用法详解
2020/11/20 Python
全球知名提供各类营养保健品的零售商:Vitamin Shoppe
2016/10/09 全球购物
维氏瑞士军刀英国网站:Victorinox英国
2019/07/04 全球购物
美国工业用品采购网站:Zoro.com
2020/10/27 全球购物
挂职自我鉴定
2014/02/26 职场文书
企业总经理任命书
2014/06/05 职场文书
品牌转让协议书
2014/08/20 职场文书
教师党员个人剖析材料
2014/09/29 职场文书
2015年质量月活动总结报告
2015/03/27 职场文书
社区干部培训心得体会
2016/01/06 职场文书
2019生态环境保护倡议书!
2019/07/03 职场文书
ORM模型框架操作mysql数据库的方法
2021/07/25 MySQL
「月刊Comic Alive」2022年5月号封面公开
2022/03/21 日漫