更高效的使用JQuery 這里總結(jié)了8個(gè)小技巧
1、DOM遍歷是昂貴的,將變量緩存起來。
//不推薦
var h = $('#ele').height();
$('#ele').css('height', h-20);
//推薦
var $ele = $('#ele');
var h = $ele.height();
$ele.css('height',h-20);
2、優(yōu)化選擇符。
//不推薦
$('div#myid')
//推薦
$('#myid')
3、避免隱式通用選擇符。
//不推薦
$('.someclass :radio')
//推薦
$('.someclass input:radio')
4、避免通用選擇符。
//不推薦
$('.container > *')
//推薦
$('.container').children()
5、盡可能保持代碼簡(jiǎn)潔。
//不推薦
if(arr.length > 0){}
//推薦
if(arr.length){}
6、盡可能地合并函數(shù)。
//不推薦
$f.on("click", function(){
$(this).css('border','1px solid red');
$(this).css('color','blue');
});
//推薦
$f.on("click", function(){
$(this).css({
'border':'1px solid red',
'color': 'blue'
});
});
7、盡可能使用鏈?zhǔn)讲僮鳌?/strong>
//不推薦
$ele.html();
$ele.on("click",function(){});
$ele.fadeIn('slow');
//推薦
$ele.on("click",function(){
}).fadeIn('slow').animate({height:'12px'},500);
8、對(duì)DOM元素作大量操作,先分離在追加
//不推薦
var $container = $('#somecontainer');
var $ele = $container.first();
.......一系列復(fù)雜操作
//推薦
var $container = $('#somecontainer');
var $ele = $container.first().detach();
.......一系列復(fù)雜操作
$container.append($ele);
相關(guān)文章
Jquery公告滾動(dòng)+AJAX后臺(tái)得到數(shù)據(jù)
ajax得到值,用JQUERY綁定給對(duì)應(yīng)的UL.利用JQUERY的動(dòng)畫來實(shí)現(xiàn)他們的滾動(dòng)公告。2011-04-04JQuery實(shí)現(xiàn)的購(gòu)物車功能(可以減少或者添加商品并自動(dòng)計(jì)算價(jià)格)
這篇文章主要介紹了JQuery實(shí)現(xiàn)的購(gòu)物車功能(可以減少或者添加商品并自動(dòng)計(jì)算價(jià)格),本文的這個(gè)模擬實(shí)現(xiàn)的購(gòu)物車難登大雅之堂,但是可以從中得到一些啟發(fā)或者相關(guān)的知識(shí)點(diǎn),需要的朋友可以參考下2015-01-01jQuery使用模式窗口實(shí)現(xiàn)在主頁面和子頁面中互相傳值的方法
這篇文章主要介紹了jQuery使用模式窗口實(shí)現(xiàn)在主頁面和子頁面中互相傳值的方法,涉及jQuery模式窗口及參數(shù)傳遞相關(guān)技巧,需要的朋友可以參考下2016-03-03jquery ajax 登錄驗(yàn)證實(shí)現(xiàn)代碼
ajax 登錄驗(yàn)證實(shí)現(xiàn)代碼,這里用到了jquery,當(dāng)然如果不想用,可以參考腳本之前發(fā)布的文章。2009-09-09jQuery遍歷對(duì)象、數(shù)組、集合實(shí)例
這篇文章主要介紹了jQuery遍歷對(duì)象、數(shù)組、集合實(shí)例,本文直接給出實(shí)例代碼,在代碼中有詳細(xì)注釋來解釋代碼的作用,需要的朋友可以參考下2014-11-11jQuery中ajax請(qǐng)求后臺(tái)返回json數(shù)據(jù)并渲染HTML的方法
今天小編就為大家分享一篇jQuery中ajax請(qǐng)求后臺(tái)返回json數(shù)據(jù)并渲染HTML的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08jQuery仿gmail實(shí)現(xiàn)fixed布局的方法
這篇文章主要介紹了jQuery仿gmail實(shí)現(xiàn)fixed布局的方法,涉及jQuery操作頁面元素屬性的相關(guān)技巧,需要的朋友可以參考下2015-05-05