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 相关文章推荐
Dom加载让图片加载完再执行的脚本代码
May 15 Javascript
jQuery AJAX 调用WebService实现代码
Mar 24 Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
Nov 26 Javascript
HTML5 canvas 9绘制图片实例详解
Sep 06 Javascript
VueJS全面解析
Nov 10 Javascript
Django+Vue.js搭建前后端分离项目的示例
Aug 07 Javascript
jquery实现左右轮播图效果
Sep 28 jQuery
Vue2.0 实现单选互斥的方法
Apr 13 Javascript
详解微信小程序-canvas绘制文字实现自动换行
Apr 26 Javascript
Vue商品控件与购物车联动效果的实例代码
Jul 21 Javascript
vue使用echarts实现水平柱形图实例
Sep 09 Javascript
微信小程序实现可拖动悬浮图标(包括按钮角标的实现)
Dec 29 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
大师制作的中短波矿石收音机
2020/04/02 无线电
phpmyadmin 访问被拒绝的真实原因
2009/06/15 PHP
PHP运行模式的深入理解
2013/06/03 PHP
从零开始学YII2框架(一)通过Composer安装Yii2框架
2014/08/20 PHP
jquery中防刷IP流量软件影响统计的一点对策
2011/07/10 Javascript
原生js实现查找/添加/删除/指定元素的class
2013/04/12 Javascript
JavaScript对象和字串之间的转换实例探讨
2013/04/21 Javascript
JavaScript计算字符串中每个字符出现次数的小例子
2013/07/02 Javascript
Javascript实现鼠标右键特色菜单
2015/08/04 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
2015/08/27 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
2016/12/07 Javascript
js获取文件里面的所有文件名(实例)
2017/10/17 Javascript
Angular实现的简单定时器功能示例
2017/12/28 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
2018/01/25 Javascript
JavaScript图片处理与合成总结
2018/03/04 Javascript
解决layui前端框架 form表单,table表等内置控件不显示的问题
2018/08/19 Javascript
微信小程序如何使用globalData的方法
2019/06/06 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
2019/08/02 jQuery
举例详解Python中的split()函数的使用方法
2015/04/07 Python
Python库skimage绘制二值图像代码实例
2020/04/10 Python
详解pycharm连接远程linux服务器的虚拟环境的方法
2020/11/13 Python
Python3+Flask安装使用教程详解
2021/02/16 Python
HTML5边玩边学(3)像素和颜色
2010/09/21 HTML / CSS
澳大利亚婴儿喂养品牌:Cherub Baby
2018/11/01 全球购物
创联软件面试题笔试题
2012/10/07 面试题
给老婆的婚前保证书
2014/02/01 职场文书
护校行动方案
2014/05/31 职场文书
校本课程教学计划
2015/01/19 职场文书
劳动保障个人工作总结
2015/03/04 职场文书
2015年安全工作总结范文
2015/04/02 职场文书
教师节晚会主持词
2015/06/30 职场文书
又涨知识了,自律到底多重要?
2019/06/27 职场文书
人为什么会“幸灾乐祸”?
2019/08/06 职场文书
三好学生竞选稿范文
2019/08/21 职场文书
Springboot/Springcloud项目集成redis进行存取的过程解析
2021/12/04 Redis
oracle删除超过N天数据脚本的方法
2022/02/28 Oracle