`
zheyiw
  • 浏览: 1016210 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

jquery技巧[转]

阅读更多

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

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

Tip 1:使用最新版本 

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

包含特定版本 

Html代码 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>  


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

Html代码 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>  


Tip 2:使用简单的选择器 

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

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


Tip 3:缓存jQuery的结果 

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

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


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

Tip 4:使用jQuery扩展选择器的注意事项 


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

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


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

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

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

Javascript代码 
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:检查一个元素是否存在 

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

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


Tip 7:创建jQuery空对象 

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

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


Tip 8:统计Web页面中DOM元素数 

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

Javascript代码 
console.log($('*').length);  


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

Tip 9:把你的代码变成jQuery插件 

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

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


Tip 10:本地存储 

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

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


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

Javascript代码 
// 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: 

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


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

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


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

Tip 12:克隆一个对象 

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

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


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

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


Tip 13:测试隐藏元素 

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

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


Tip 14:找出最近的父DIV 

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

Javascript代码 
$("#yourControl").closest("div");  

分享到:
评论

相关推荐

    jquery技巧总结(转)

    **jQuery 技巧总结** jQuery 是一款非常流行的 JavaScript 库,它简化了 HTML 文档遍历、事件处理、动画制作和Ajax交互等任务。自2006年发布以来,jQuery 已经成为 web 开发不可或缺的一部分。这篇总结将探讨一些...

    jQuery、jQueryUI及jQueryMobile技巧与示例

    资源名称:jQuery、jQuery UI及jQuery Mobile技巧与示例内容简介:《jQuery、jQuery UI及jQuery Mobile技巧与示例》包括jQuery、jQuery UI、jQuery Mobile以及jQuery插件四部分内容。第一部分介绍jQuery核心库,从...

    jQuery常见开发技巧详细整理

    在jQuery的开发过程中,掌握一些常见技巧能显著提升开发效率和代码质量。下面是一些详细的jQuery开发技巧: 1. **引用页面元素**:jQuery通过`$()`选择器引用元素,支持ID、类名、元素类型以及层级关系和DOM或XPath...

    jQuery技巧,比较经典的几种用法总结。

    本篇文章将深入探讨一些jQuery的经典技巧和用法。 首先,jQuery 提供了一种简洁的方式来引用页面上的元素。你可以通过ID、类、元素名称或DOM层级关系,甚至XPath条件来选择元素。例如,`$("#msg")`会选取ID为'msg'...

    jquery使用技巧总结

    《jQuery使用技巧深度解析》 在Web开发领域,jQuery是一个广泛应用的JavaScript库,它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互等任务。本文将深入探讨jQuery的使用技巧,帮助开发者提升效率,更好地...

    jQuery 技巧总结

    jQuery 技巧总结,是经验的系统总结,对新手很有帮助,如果你是老手就不要下了,句句实话。jQuery 技巧总结,是经验的系统总结,对新手很有帮助,如果你是老手就不要下了,句句实话。jQuery 技巧总结,是经验的系统总结...

    jQuery应用技巧大全modified

    《jQuery应用技巧大全modified》是一份关于jQuery技术的详尽指南,主要涵盖了jQuery在实际开发中的各种实用技巧。本文将深入解析这些技巧,帮助开发者更好地理解和运用jQuery。 首先,jQuery的核心在于对页面元素的...

    15个Jquery 技巧

    ### 15个jQuery技巧深度解析 在前端开发领域,jQuery作为一款优秀的JavaScript库,以其简洁、高效的特点深受开发者喜爱。以下是对“15个Jquery 技巧”文章中的核心知识点进行的深入分析,旨在帮助使用jQuery框架的...

    jQuery技巧大放送

    本篇文章将深入探讨一些实用的jQuery技巧,帮助开发者更高效地利用这个强大的工具。 1. **页面元素的引用** 在jQuery中,我们可以使用`$()`选择器来引用页面上的元素,支持多种方式,如ID(`#id`)、类(`.class`...

    jQuery技巧大全.doc

    《jQuery技巧大全》这篇文章主要介绍了jQuery的一些核心技巧和常见用法,帮助读者深入理解并熟练运用jQuery。以下是对这些知识点的详细阐述: 1. **页面元素引用**:jQuery提供了多种方式来选择和引用页面上的元素...

    jquery文字3D翻转特效

    《jQuery文字3D翻转特效详解》 在网页设计中,动态效果往往能吸引用户的注意力,提高用户体验。本文将深入探讨“jQuery文字3D翻转特效”...通过掌握这些技巧,开发者可以创造出更具吸引力的交互式网页,提升用户体验。

    jQuery 技巧

    **jQuery 技巧** jQuery 是一个广泛应用于 web 开发中的 JavaScript 库,它极大地简化了 JavaScript 的使用,尤其是处理 DOM 操作、事件处理、动画效果和Ajax交互。本篇文章将深入探讨 jQuery 中的一些实用技巧,...

    jQuery教程14个实用的jQuery技巧

    ### jQuery教程:14个实用的jQuery技巧详解 #### 技巧一:高效利用jQuery选择器 在网页开发中,选择器是与DOM元素交互的关键工具。jQuery通过强大的选择器功能,让开发者能够轻松地定位到页面中的任何元素。虽然...

    jquery技巧大放送

    ### jQuery技巧大放送知识点详解 #### 一、页面元素的引用 在使用jQuery时,一个常见的需求就是选择页面上的元素。jQuery通过`$()`函数提供了多种方式来选择元素: - **通过ID选择器**:例如`$("#elementId")`会...

Global site tag (gtag.js) - Google Analytics