jQuery教程 14个实用的jQuery技巧浅析
沉沙 2018-06-22 来源 : 阅读 1232 评论 0

摘要:jQuery如今已经成为Web开发中最流行的JavaScript库,通过jQuery和大量的插件,你可以轻松实现各种绚丽的效果。 本文将为你介绍一些实用的技巧,希望可以帮助你更加高效地使用jQuery。

jQuery如今已经成为Web开发中最流行的JavaScript库,通过jQuery和大量的插件,你可以轻松实现各种绚丽的效果。 

本文将为你介绍一些实用的技巧,希望可以帮助你更加高效地使用jQuery。 

Tip 1:使用最新版本 

jQuery每一个新版本都会包含一些性能优化和bug修复,为了便于升级,你可以使用Google CDN服务托管的jQuery库。有以下两种方式: 

包含特定版本 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

包含某个分支的的最新版本(此方法中jQuery版本的缓存期限只有1小时,不建议用于生产环境) 

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>


Tip 2:使用简单的选择器 

之前获取DOM元素通常使用jQuery的getElementById()、getElementsByTagName()和getElementsByClassName()方法。如今,所有主流浏览器都已经支持querySelectorAll(),该方法能够理解CSS查询器。你应该尝试使用这个更优的方式。 

 $('li[data-selected="true"] a') // 看起来不错,但是慢  
 $('li.selected a') // 更好的方法  
 $('#ElementID) // 最好


Tip 3:缓存jQuery的结果 
如果你没有别的选择,只能使用DOM选择器,那么你应该缓存jQuery的结果。例如: 

 var selectedListItem = $('li[data-selected="true"]a')

现在,jQuery的结果已经被缓存到变量“selectedListItem”,该变量可以多次使用而不会影响性能。 

Tip 4:使用jQuery扩展选择器的注意事项
jQuery提供了大量的扩展选择器,比如:visible、:hidden、:animated等,而它们不是有效的CSS3选择器。如果使用这些选择器,将不能再使用querySelectorAll()方法。为了避免这种情况,你可以先选择元素,然后再过滤。例如: 

 $('a.button:hidden'); //则不能使用querySelectorAll()  
 $('a.button').filter(':hidden'); //最佳方案

上述结果是相同的,但是第2个更快。 

Tip 5:像数组一样使用jQuery对象 

运行一个选择器得到的结果是一个jQuery对象。但是,通过jQuery可以使结果看起来更像一个数组,你可以定义索引元素和长度。 

 var buttons = $('#navigation a.button'); //Selecting all the navigation b //Selecting all the navigation buttons  
 // We can loop though the collection:  
 for(var i=0;i<buttons.length;i++){  
 console.log(buttons[i]); // A DOM element, not a jQuery object  
 }

如果你想实现更高的性能,可以使用一个简单的循环(或while语句)来代替$.each(),这样速度会比之前快几倍。 

Tip 6:检查一个元素是否存在 

确定一个元素集合是否存在或是否包含元素的唯一方法是检查元素的长度。 

 If (buttons.length){ // True only if buttons contains elements  
 // Do something }


Tip 7:创建jQuery空对象 
创建一个新的jQuery对象有时开销会比较大。不过你可以先创建一个空对象,然后通过add()填充它。 

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


Tip 8:统计Web页面中DOM元素数
如果页面中包含大量元素或内容,则浏览器渲染所需的时间也更多。你可以在控制台中执行以下语句,来统计页面中的DOM元素数: 

 console.log($('*').length);

如果所得数值较小,则页面渲染较快。你可以通过删除多余的标记和不必要的元素来进行优化。 

Tip 9:把你的代码变成jQuery插件 
如果你希望将你的jQuery代码封装成一个jQuery插件,以便以后重用,你可以通过以下代码来创建: 

 function($){  
 $.fn.yourPluginName = function(){  
 // Your code goes here  
 return this;  
 };  
 })(jQuery);


Tip 10:本地存储 

Local storage是一个用于在客户端上存储信息的API。使用时,你只需将你的数据作为localStorage全局对象的一个属性: 

 localStorage.someData = "This data is going to persist across page refreshes and browser restarts";

旧的浏览器不支持该API,不过有各种jQuery插件可以作为替代方案。这些插件在localStorage不可用时提供了其他存储方案。下面是一个例子: 

 // 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);


Tip 11: Live事件处理 

为任何匹配选择器的元素设置一个事件处理程序,即使它在初始页面加载后被添加到DOM: 

 $('button.yourClassName').live('click', yourFunctionName);

这样,通过ajax或javascript加载元素时,事件处理程序会自动为这些元素进行设置: 

 $('button.yourClassName').die('click', yourFunctionName);

尽管与常规事件相比,live事件处理程序有一些局限性,但它还是适用于大部分情况。Live事件支持jQuery 1.3及以上版本。 

Tip 12:克隆一个对象
使用.clone()方法克隆JavaScript中的DOM对象: 

 // Clone the DIV  
 var cloned = $('#yourdivID').clone();

.clone()方法无法克隆JavaScript对象。如果要克隆JavaScript对象,你可以使用下面的代码: 

 // Shallow copy  
 var newObject = jQuery.extend({}, oldObject);  
 // Deep copy  
 var newObject = jQuery.extend(true, {}, oldObject);


Tip 13:测试隐藏元素 
通过.hide()和.show()方法可以改变元素的可见性。使用下面的代码可以检测元素是否可见: 

 if($(element).is(":visible") == "true") {  
 //The element is Visible  
 }


Tip 14:找出最近的父DIV 

如果你想找出某个元素的父级DIV(无论该DIV是否有ID),那么你可以使用这个jQuery选择器: 

 $("#yourControl").closest("div");


本文由职坐标整理并发布,了解更多内容,请关注职坐标WEB前端jQuery频道!

本文由 @沉沙 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程