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 相关文章推荐
JS格式化数字金额用逗号隔开保留两位小数
Oct 18 Javascript
JavaScript中的null和undefined区别介绍
Jan 01 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
Jun 25 Javascript
JavaScript简单获取系统当前时间完整示例
Aug 02 Javascript
Angularjs中的页面访问权限怎么设置
Nov 11 Javascript
原生js实现无缝轮播图效果
Jan 11 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
Feb 20 Javascript
浅谈webpack下的AOP式无侵入注入
Nov 12 Javascript
vux-scroller实现移动端上拉加载功能过程解析
Oct 08 Javascript
JavaScript switch语句使用方法简介
Dec 30 Javascript
js实现的订阅发布者模式简单示例
Mar 14 Javascript
利用Vue的v-for和v-bind实现列表颜色切换
Jul 17 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环境配置 php5 mysql5 apache2 phpmyadmin安装与配置
2006/11/17 PHP
php 文件上传代码(限制jpg文件)
2010/01/05 PHP
php缓存技术详细总结
2013/08/07 PHP
基于php解决json_encode中文UNICODE转码问题
2020/11/10 PHP
js 获取浏览器高度和宽度值(多浏览器)
2009/09/02 Javascript
通过url查找a元素应用案例
2014/04/29 Javascript
javascript实现日期格式转换
2014/12/16 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
2015/10/16 Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
2016/06/08 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
2016/12/13 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
2017/02/13 Javascript
详解Vue 实例中的生命周期钩子
2017/03/21 Javascript
微信小程序发布新版本时自动提示用户更新的方法
2019/06/07 Javascript
nodejs一个简单的文件服务器的创建方法
2019/09/13 NodeJs
jquery实现轮播图特效
2020/04/12 jQuery
通过实例解析jQ Ajax操作相关原理
2020/09/23 Javascript
python将控制台输出保存至文件的方法
2019/01/07 Python
Python合并同一个文件夹下所有PDF文件的方法
2019/03/11 Python
Python closure闭包解释及其注意点详解
2019/08/28 Python
Python异常模块traceback用法实例分析
2019/10/22 Python
python:批量统计xml中各类目标的数量案例
2020/03/10 Python
基于Python下载网络图片方法汇总代码实例
2020/06/24 Python
使用keras实现BiLSTM+CNN+CRF文字标记NER
2020/06/29 Python
GitHub上值得推荐的8个python 项目
2020/10/30 Python
浅谈CSS3中display属性的Flex布局的方法
2017/08/14 HTML / CSS
详解如何在css中引入自定义字体(font-face)
2018/05/17 HTML / CSS
css3利用transform变形结合事件完成扇形导航
2020/10/26 HTML / CSS
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
2013/01/06 HTML / CSS
酒店大堂副理的职责范文
2014/02/13 职场文书
优秀团队获奖感言
2014/02/19 职场文书
同居协议书范本
2014/04/23 职场文书
暑期学习心得体会
2014/09/02 职场文书
六查六看自检自查剖析材料
2014/10/14 职场文书
《黄山奇石》教学反思
2016/02/18 职场文书
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
2021/03/30 HTML / CSS
总结Python变量的相关知识
2021/06/28 Python