JQuery坑二跋,說說哪些大家都踩過的坑

1 亂用選擇器

坑人指數(shù):200

JQuery選擇器調(diào)用代價(jià)很大,反復(fù)調(diào)用效率更低缩挑。應(yīng)采用緩存對(duì)象的方法或采用鏈?zhǔn)秸{(diào)用的方式但两。

//錯(cuò)誤的寫法
$("#button").click(function(){
    $('#list li').addClass('strong');
    $('#list li').css('color', 'red');
});
//正確的寫法
$("#button").click(function(){
    $lis = $('#list li');
    $lis.addClass('strong');
    $lis.css('color', 'red');
});
//更好的寫法
$("#button").click(function(){
    $('#list li').addClass('strong').css('color', 'red');
});

2 全局選擇效率低

坑人指數(shù):100

盡量使用上下文(context)查找,避免全局選擇的使用供置。全局選擇器會(huì)進(jìn)行整個(gè)Doc的查找谨湘,效率很低。

//錯(cuò)誤的寫法
$(".active").method();
//正確的寫法
var ul = $("#myList");
$(".active",ul).method();

3 復(fù)制匿名函數(shù)

坑人指數(shù):50

避免多次復(fù)制匿名函數(shù)的寫法芥丧,將匿名函數(shù)分離出來紧阔,供其它對(duì)象多次調(diào)用。

//錯(cuò)誤的寫法
$('#myDiv').click( function(){
   //一些操作
});
//正確的寫法
function divClickFn(){
   //一些操作   
}
$('#myDiv').click(function(){
    divClickFn();
});

4 誤用ajax的complete

坑人指數(shù):30

當(dāng)用ajax進(jìn)行數(shù)據(jù)請(qǐng)求時(shí)续担,避免使用complete回調(diào)方法擅耽,而應(yīng)該使用success方法。complete回調(diào)在請(qǐng)求成功或失敗都會(huì)觸發(fā)赤拒。

//錯(cuò)誤的寫法
$.ajax({
  url: "http://tools.42du.cn/jsonp/student/all",
}).complete(function( data ) {
    //一些操作  
});
//正確的寫法
$.ajax({
  url: "http://tools.42du.cn/jsonp/student/all",
}).success(function( data ) {
    //一些操作  
});

5 鏈?zhǔn)秸{(diào)用的誤用

坑人指數(shù):20

采用鏈?zhǔn)秸{(diào)用的方式會(huì)使對(duì)象在漸變未完成之前就被移除秫筏,即remove方法會(huì)在fadeOut方法完成之前調(diào)用。當(dāng)需要第一方法完成之后挎挖,再執(zhí)行第二個(gè)方法这敬,請(qǐng)使用回調(diào),即第二種方式蕉朵。

//錯(cuò)誤的寫法
$("#myDiv").click(function(e) {
  $(this).fadeOut("slow").remove();
});
//正確的寫法
$("myDiv").click(function(e){
  $(this).fadeOut("slow", function(){
    $(this).remove();
  });
});

6 事件多次綁定

坑人指數(shù):20

如果你綁定(bind)同一事件多次崔涂,響應(yīng)就會(huì)被執(zhí)行多次。為避免多次執(zhí)行始衅,請(qǐng)先做事件解綁再重新綁定冷蚂。

//避免響應(yīng)多次執(zhí)行
$("myDiv").unbind("click").bind("click");

7 錯(cuò)誤使用this指示符

坑人指數(shù):10

this指示符存在于一定的上下文中的,當(dāng)上下文變化時(shí)this指向不同的對(duì)象汛闸。如果還想調(diào)用原上下文中的this蝙茶,則需要在原上下文中緩存原this對(duì)象($that = $(this))。

//錯(cuò)誤的寫法
$( "#myList").click( function() {
   $(this).method(); 
   $("#myList li").each( function() {
      //this并不指向myList
      $(this).method2(); 
   })
});
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末诸老,一起剝皮案震驚了整個(gè)濱河市隆夯,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌别伏,老刑警劉巖蹄衷,帶你破解...
    沈念sama閱讀 218,036評(píng)論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異厘肮,居然都是意外死亡愧口,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,046評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門类茂,熙熙樓的掌柜王于貴愁眉苦臉地迎上來耍属,“玉大人托嚣,你說我怎么就攤上這事『衿” “怎么了注益?”我有些...
    開封第一講書人閱讀 164,411評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)溯捆。 經(jīng)常有香客問我,道長(zhǎng)厦瓢,這世上最難降的妖魔是什么提揍? 我笑而不...
    開封第一講書人閱讀 58,622評(píng)論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮煮仇,結(jié)果婚禮上劳跃,老公的妹妹穿的比我還像新娘。我一直安慰自己浙垫,他們只是感情好刨仑,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,661評(píng)論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著夹姥,像睡著了一般杉武。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上辙售,一...
    開封第一講書人閱讀 51,521評(píng)論 1 304
  • 那天轻抱,我揣著相機(jī)與錄音,去河邊找鬼旦部。 笑死祈搜,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的士八。 我是一名探鬼主播容燕,決...
    沈念sama閱讀 40,288評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼婚度!你這毒婦竟也來了蘸秘?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,200評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤陕见,失蹤者是張志新(化名)和其女友劉穎秘血,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體评甜,經(jīng)...
    沈念sama閱讀 45,644評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡灰粮,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,837評(píng)論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了忍坷。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片粘舟。...
    茶點(diǎn)故事閱讀 39,953評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡熔脂,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出柑肴,到底是詐尸還是另有隱情霞揉,我是刑警寧澤,帶...
    沈念sama閱讀 35,673評(píng)論 5 346
  • 正文 年R本政府宣布晰骑,位于F島的核電站适秩,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏硕舆。R本人自食惡果不足惜秽荞,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,281評(píng)論 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望抚官。 院中可真熱鬧扬跋,春花似錦、人聲如沸凌节。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,889評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽倍奢。三九已至朴上,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間卒煞,已是汗流浹背余指。 一陣腳步聲響...
    開封第一講書人閱讀 33,011評(píng)論 1 269
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留跷坝,地道東北人酵镜。 一個(gè)月前我還...
    沈念sama閱讀 48,119評(píng)論 3 370
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像柴钻,于是被迫代替她去往敵國(guó)和親淮韭。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,901評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,133評(píng)論 25 707
  • 1.JQuery 基礎(chǔ) 改變web開發(fā)人員創(chuàng)造搞交互性界面的方式贴届。設(shè)計(jì)者無需花費(fèi)時(shí)間糾纏JS復(fù)雜的高級(jí)特性靠粪。 1....
    LaBaby_閱讀 1,174評(píng)論 0 1
  • 1.JQuery 基礎(chǔ) 改變web開發(fā)人員創(chuàng)造搞交互性界面的方式。設(shè)計(jì)者無需花費(fèi)時(shí)間糾纏JS復(fù)雜的高級(jí)特性毫蚓。 1....
    LaBaby_閱讀 1,335評(píng)論 0 2
  • 圖.文/臧賢凱 前幾天發(fā)了文章《手繪教程|怎樣畫一個(gè)“多快好省”的星星人元潘?》畔乙,有情懷的80后吃貨一枚評(píng)論:“贊!手...
    臧賢凱閱讀 1,400評(píng)論 5 11
  • 1/27 當(dāng)陽光還沒爬上布滿蔓藤的籬笆返咱;我的迫不及待的紅玫瑰早已綴滿了你的窗臺(tái)。 文|四面楚歌 謀得個(gè)嫁給愛情的故...
    四面楚歌先生閱讀 1,481評(píng)論 0 1