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 相关文章推荐
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
Jun 12 Javascript
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
Oct 01 Javascript
jQuery中hover方法和toggle方法使用指南
Feb 27 Javascript
深入理解JavaScript系列(18):面向对象编程之ECMAScript实现
Mar 05 Javascript
javascript实现控制div颜色
Jul 07 Javascript
jQuery实现的网页左侧在线客服效果代码
Oct 23 Javascript
JS面向对象编程详解
Mar 06 Javascript
JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例
Aug 17 Javascript
vue做网页开场视频的实例代码
Oct 20 Javascript
vue2中使用less简易教程
Mar 27 Javascript
微信小程序 wxParse插件显示视频问题
Sep 27 Javascript
比较node.js和Deno
Apr 27 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
简单分析ucenter 会员同步登录通信原理
2014/08/25 PHP
10个超级有用值得收藏的PHP代码片段
2015/01/22 PHP
javascript读写json示例
2014/04/11 Javascript
ext combobox动态加载数据库数据(附前后台)
2014/06/17 Javascript
C++中的string类的用法小结
2015/08/07 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
深入理解Javascript中的valueOf与toString
2017/01/04 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
2017/01/10 Javascript
基于jQuery实现一个marquee无缝滚动的插件
2017/03/09 Javascript
jQuery动态产生select option下拉列表
2017/03/15 Javascript
微信小程序简单实现form表单获取输入数据功能示例
2017/11/30 Javascript
利用JS判断客户端类型你应该知道的四种方法
2017/12/22 Javascript
javaScript 连接打印机,打印小票的实例
2017/12/29 Javascript
jquery+ajaxform+springboot控件实现数据更新功能
2018/01/22 jQuery
python中matplotlib实现最小二乘法拟合的过程详解
2017/07/11 Python
python3+dlib实现人脸识别和情绪分析
2018/04/21 Python
python3中的md5加密实例
2018/05/29 Python
pandas 透视表中文字段排序方法
2018/11/16 Python
使用Python的Turtle库绘制森林的实例
2019/12/18 Python
推荐8款常用的Python GUI图形界面开发框架
2020/02/23 Python
使用Python判断一个文件是否被占用的方法教程
2020/12/16 Python
ABOUT YOU匈牙利:500个最受欢迎的时尚品牌
2019/07/19 全球购物
迪卡侬印尼体育用品商店:Decathlon印尼
2020/03/11 全球购物
.net笔试题
2014/03/03 面试题
应届生求职信写作技巧
2013/10/24 职场文书
工程管理造价应届生求职信
2013/11/13 职场文书
《匆匆》教学反思
2014/02/22 职场文书
诚信的演讲稿范文
2014/05/12 职场文书
教师廉洁自律承诺书
2014/05/26 职场文书
色戒观后感
2015/06/12 职场文书
奖学金主要事迹范文
2015/11/04 职场文书
CSS3实现的水平标题菜单
2021/04/14 HTML / CSS
mysql联合索引的使用规则
2021/06/23 MySQL
SQL实现LeetCode(196.删除重复邮箱)
2021/08/07 MySQL
《进击的巨人》新联动CM 兵长强势出击兽巨人
2022/04/05 日漫
MySQL中EXPLAIN语句及用法
2022/05/20 MySQL