網站建設之15個值得開發(fā)人員關注的jQuery開發(fā)技巧和心得

標簽：成都精典網站制作

在這篇文章中，我們將介紹15個讓你的jQuery更加有效的技巧，大部分關于性能提升的，希望大家能夠喜歡！

1. 盡量使用最新版本的jQuery類庫

jQuery項目中使用了大量的創(chuàng)新。最好的方法來提高性能就是使用最新版本的jQuery。每一個新的版本都包含了優(yōu)化的bug修復。對我們來說要干的就是修改tag，何樂而不為呢？

我們也可以使用免費的CDN服務，例如， Google來存放jQuery類庫。

2. 使用簡單的選擇器

直 到最近，返回DOM元素的方式都是解析選擇器字符串，javascript循環(huán)和內建的javascript API例如，getElementbyId()，getElementsByTagName()，getElementsByClassName()三種 方式的整合使用。但是現(xiàn)代瀏覽器都開始支持querySelectorAll()，這個方法能夠理解CSS查詢器，而且能帶來顯著的性能提升。

然而，我們應該避免使用復雜的選擇器返回元素。更不用說很多用戶使用老版本的瀏覽器，強迫jQuery去處理DOM樹。這個方式非常慢。

$('li[data-selected="true"] a') // Fancy, but slow $('li.selected a') // Better $('#elem') // Best

選擇id是最快速的方式。如果你需要使用class名稱， 那么你最好帶上tag名稱，這樣會更快些。特別是在老瀏覽器和移動設備上。

訪問DOM是javascript應用最慢的方式 ，因此盡量少使用。使用變量去保存選擇器，這樣會使用cache來保存。性能更好。

var buttons = $('#navigation a.button'); // Some prefer prefixing their jQuery variables with $: var $buttons = $('#navigation a.button');

另 外一個值得做的是jQuery給了你很多的額外便利選擇器 ，例如，:visible，:hidden，:animated還有其它，這些不是合法的CSS3選擇器。結果是你使用這些類庫就不能有效地利用 querySelectorAll()方法。為了彌補這個問題，你需要先選擇元素，再過濾，如下：

$('a.button:animated'); // Does not use querySelectorAll() $('a.button').filter(':animated'); // Uses it3. 數(shù)組方式使用jQuery對象

運行選擇器的結果是一個jQuery對象。然而，jQuery類庫讓你感覺你正在使用一個定義了index和長度的數(shù)組。

// Selecting all the navigation buttons:var buttons = $('#navigation a.button');// We can loop though the collection:for(var i=0;i

如果性能是你關注的，那么使用簡單for或者while循環(huán)來處理，而不是$.each()，這樣能使你的代碼更快。

檢查長度也是一個檢查你的collection是否含有元素的方式。

if(buttons){ // This is always true // Do something}if(buttons.length){ // True only if buttons contains elements // Do something}4. 選擇器屬性

jQuery提供了一個屬性，這個屬性顯示了用來做鏈式的選擇器。

$('#container li:first-child').selector // #container li:first-child$('#container li').filter(':first-child').selector // #container li.filter(:first-child)

雖然上面的例子針對同樣的元素，選擇器則完全不一樣。第二個實際上是非法的，你不可以使用它來創(chuàng)建一個對象。只能用來顯示filter方法是用來縮小collection。

5. 創(chuàng)建一個空的jQuery對象

創(chuàng)建一個新的jQuery空間能極大的減小開銷。有時候，你可能需要創(chuàng)建一個空的對象，然后使用add()方法添加對象。

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

這也是quickEach方法的基礎，你可以使用這種更快的方式而非each()。

6. 選擇一個隨機元素

上面我提到過，jQuery添加它自己的選擇器過濾。除了類庫，你可以添加自己的過濾器。只需要添加一個新的方法到$.expr[':']對象。一個非常棒的使用方式是Waldek Mastykarz的博客中提到的：創(chuàng)建一個用來返回隨機元素的選擇器。你可以修改下面代碼：

(function($){ var random = 0; $.expr[':'].random = function(a, i, m, r) { if (i == 0) { random = Math.floor(Math.random() * r.length); } return i == random; };})(jQuery);// This is how you use it:$('li:random').addClass('glow');7. 使用CSS Hooks

CSS hooks API是提供開發(fā)人員得到和設置特定的CSS數(shù)值的方法。使用它，你可以隱藏瀏覽器特定的執(zhí)行并且使用一個統(tǒng)一的界面來存取特定的屬性。、

$.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 }};// Use it without worrying which property the browser actually understands:$('#rect').css('borderRadius',5);

更好的在于，人們已經創(chuàng)建了一個支持CSS hooks類庫

8. 使用自定義的刪除方法

你可能聽到過jQuery的刪除插件，它能夠允許你給你的動畫添加特效。的缺點是你的訪問者需要加載另外一個javascript文件。幸運的是，你可以簡單的從插件拷貝效果，并且添加到jQuery.easing對象中，如下：

$.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()

使用callback方法的缺點之一是當執(zhí)行類庫中的方法后，context被設置到另外一個元素，例如：

 

文章題目：網站建設之15個值得開發(fā)人員關注的jQuery開發(fā)技巧和心得
瀏覽路徑：http://www.rwnh.cn/news/181302.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供網站制作、做網站、網站建設、定制網站、營銷型網站建設、網站收錄

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)