免费亚洲欧美精品电影_国内精品偷拍福利视频_美女黄网站色视免费国产_国产不卡福利片在线观看

24小時咨詢電話:0571-88023217臺州網(wǎng)站建設(shè)公司 10年專業(yè)網(wǎng)絡(luò)服務(wù)供應(yīng)商

資訊中心

- 直擊網(wǎng)站建設(shè)第一現(xiàn)場,掌握全球化的消息 -

當(dāng)前位置 : 首頁 > 資訊中心 > 網(wǎng)站建設(shè)之15個值得開發(fā)人員關(guān)注的jQuery開發(fā)技巧和心得

網(wǎng)站建設(shè)之15個值得開發(fā)人員關(guān)注的jQuery開發(fā)技巧和心得

分享 2011.11.24 瀏覽次數(shù):7366次

網(wǎng)站建設(shè)之15個值得開發(fā)人員關(guān)注的jQuery開發(fā)技巧和心得

標(biāo)簽:杭州精典網(wǎng)站制作

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

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

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

我們也可以使用免費的CDN服務(wù),例如, Google來存放jQuery類庫。




2. 使用簡單的選擇器

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

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

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

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

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

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

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

$('a.button:animated');	// Does not use querySelectorAll() 
$('a.button').filter(':animated');	// Uses it

3. 數(shù)組方式使用jQuery對象

運行選擇器的結(jié)果是一個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

如果性能是你關(guān)注的,那么使用簡單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提供了一個屬性,這個屬性顯示了用來做鏈?zhǔn)降倪x擇器。

$('#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方法的基礎(chǔ),你可以使用這種更快的方式而非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ā)人員得到和設(shè)置特定的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);

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

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

你可能聽到過jQuery的刪除插件,它能夠允許你給你的動畫添加特效。唯一的缺點是你的訪問者需要加載另外一個javascript文件。幸運的是,你可以簡單的從插件拷貝效果,并且添加到j(luò)Query.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方法的缺點之一是當(dāng)執(zhí)行類庫中的方法后,context被設(shè)置到另外一個元素,例如:

 

執(zhí)行下面代碼:

$('#panel').fadeIn(function(){
	// this points to #panel
	$('#panel button').click(function(){
		// this points to the button
		$(this).fadeOut();
	});
});

你將遇到問題,button會消失,不是panel。使用$.proxy方法,你可以這樣書寫代碼:

$('#panel').fadeIn(function(){
	// Using $.proxy to bind this:

	$('#panel button').click($.proxy(function(){
		// this points to #panel
		$(this).fadeOut();
	},this));
});

這樣才正確的執(zhí)行。$.proxy方法接受兩個參數(shù),你最初的方法,還有context。這里閱讀更多$.proxy in the docs.。

10. 判斷頁面是否太過復(fù)雜

一個非常簡單的道理,約復(fù)雜的頁面,加載的速度越慢。你可以使用下面代碼檢查一下你的頁面內(nèi)容:

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

以上代碼返回的數(shù)值越小,網(wǎng)頁加載速度越快。你可以考慮通過刪除無用多余的元素來優(yōu)化你的代碼

11. 將你的代碼轉(zhuǎn)化成jQuery插件

如果你要花一定得時間去開發(fā)一段jQuery代碼,那么你可以考慮將代碼變成插件。這將能夠幫助你重用代碼,并且能夠有效的幫助你組織代碼。創(chuàng)建一個插件代碼如下:

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

你可以在這里閱讀更多開發(fā)教程。

12.  設(shè)置全局AJAX為缺省

如果你開發(fā)ajax程序的話,你肯定需要有”加載中“之類的顯示告知呼叫中心用戶,ajax正在進行,我們可以使用如下代碼統(tǒng)一管理,如下:

// ajaxSetup is useful for setting general defaults:
$.ajaxSetup({
    url            : '/ajax/',
    dataType    : 'json'
});

$.ajaxStart(function(){
    showIndicator();
    disableButtons();
});

$.ajaxComplete(function(){
    hideIndicator();
    enableButtons();
});

/*
    // Additional methods you can use:
    $.ajaxStop();
    $.ajaxError();
    $.ajaxSuccess();
    $.ajaxSend();
*/

詳細你可以查看這篇文章:

  • 如何快速創(chuàng)建一個AJAX的"加載"的圖片效果
  •  5個在線Ajax“加載中”旋轉(zhuǎn)圖標(biāo)生成器工具

13. 在動畫中使用delay()方法

鏈?zhǔn)降膭赢嬓Ч莏Query的強大之處。但是有一個忽略了的細節(jié)就是你可以在動畫之間加上delays,如下:

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

jQuery動畫幫了我們大忙,否則我們得自己處理一堆的細節(jié),設(shè)置timtout,處理屬性值,跟蹤動畫變化等等。

大家可以參考這個文章:jQuery animations

14. 合理利用HTML5的Data屬性

HTML5的data屬性可以幫助我們插入數(shù)據(jù)。特別合適前后端的數(shù)據(jù)交換。jQuery近來發(fā)布的data()方法,可以有效的利用HTML5的屬性,來自動得到數(shù)據(jù)。下面是個例子:

 
 

為了存取數(shù)據(jù)你需要調(diào)用如下代碼:

$("#d1").data("role");			// "page"
$("#d1").data("lastValue");		// 43
$("#d1").data("hidden");		// true;
$("#d1").data("options").name;	// "John";

如果你想看看實際的例子,請參考這篇教程:使用HTML5和jQuery插件Quicksand實現(xiàn)一個超酷的星際爭霸2兵種分類展示效果

data()的jQuery文檔:data() in the jQuery docs

15. 本地存儲和jQuery

本地存儲是一個超級簡單的API。簡單的添加你的數(shù)據(jù)到localStorage全局屬性中:

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

但是對于老的瀏覽器來說,這個不是個好消息。因為他們不支持。但是我們可以使用jQuery的插件來提供支持一旦本地存儲不能用的話。這種方式可以使得本地存儲功能正常工作。

以上是我們介紹的15個jQuery的開發(fā)技巧,如果你有更多的技巧和評論,請在下面給我們留言, 謝謝支持!

更多杭州網(wǎng)站建設(shè)資訊:畢業(yè)選擇起步型企業(yè)的原因是什么

最新網(wǎng)站案例

洞悉市場趨勢演變讓傳播回歸社會

    免費獲取網(wǎng)站建設(shè)與網(wǎng)絡(luò)推廣方案報價

    • 關(guān)于我們

      杭州帷拓科技有限公司,是一家新型的全案網(wǎng)絡(luò)開發(fā)公司,作為以互聯(lián)網(wǎng)高端網(wǎng)站建設(shè)、APP開發(fā)、小程序開發(fā)為核心的專業(yè)網(wǎng)絡(luò)技術(shù)服務(wù)供應(yīng)商,帷拓科技致力于全面分析市場環(huán)境、衡量與預(yù)測市場需求、整合區(qū)別于行業(yè)競爭對手的絕對優(yōu)勢,結(jié)合品牌理念深度挖掘項目優(yōu)勢和產(chǎn)品價值,提升客戶品牌認(rèn)知、認(rèn)可度。

    • 我們的客戶

      帷拓科技歷經(jīng)十年沉淀,與國內(nèi)外上千家客戶達成合作關(guān)系,其中穩(wěn)定合作的公司有:浙江華為、浙江移動、浙江5G產(chǎn)業(yè)聯(lián)盟、浙江省社科院、綠城足球俱樂部、娃哈哈雙語學(xué)校、健康中國杭州峰會、科雷機電等,帷拓科技始終堅持“帷有專業(yè),才能拓展無限”的服務(wù)理念,堅持“認(rèn)真堅持細節(jié)”的優(yōu)質(zhì)服務(wù)理念,不斷完善自身,成就企業(yè),最終實現(xiàn)共贏。

    • 我們的業(yè)務(wù)

      帷拓科技主營業(yè)務(wù)范圍包含互聯(lián)網(wǎng)高端網(wǎng)站建設(shè)、APP開發(fā)、小程序開發(fā)、商城網(wǎng)站建設(shè)、公眾號運營以及數(shù)字營銷等,涵蓋了服務(wù)、房產(chǎn)、數(shù)碼、服裝、物流貿(mào)易等行業(yè),根據(jù)品牌現(xiàn)狀,為每個客戶量身定制項目整體服務(wù)方案,以敏銳的市場洞察力、創(chuàng)新的市場策劃能力,全面把握市場變化,為客戶實現(xiàn)從企業(yè)到消費者的價值轉(zhuǎn)換。

    Designerpart Designagentur
    Designerpart Designagentur
    Designerpart Designagentur
    Designerpart Designagentur
    Designerpart Designagentur
    Designerpart Designagentur