成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

jQuery中鮮為人知的的幾個(gè)方法

DDreach / 1672人閱讀

摘要:轉(zhuǎn)來(lái)學(xué)習(xí)一下中鮮為人知的的幾個(gè)方法近些年來(lái)仍舊是開(kāi)發(fā)中最受歡迎的類庫(kù),雖然大家褒貶不一,但是仍舊不失為一款最流行的,在今天這篇文章中,我們將介紹幾個(gè)的相關(guān)方法,無(wú)論你是入門級(jí)極客或者骨灰級(jí)極客,可能都會(huì)忽略這些方法的使用。

轉(zhuǎn)來(lái)學(xué)習(xí)一下 jQuery中鮮為人知的的幾個(gè)方法

jQuery近些年來(lái)仍舊是web開(kāi)發(fā)中最受歡迎的類庫(kù),雖然大家褒貶不一,但是仍舊不失為一款最流行的Javascript,在今天這篇文章中,我們將介紹幾個(gè)jQuery的相關(guān)方法,無(wú)論你是入門級(jí)極客或者骨灰級(jí)極客,可能都會(huì)忽略這些方法的使用。希望大家會(huì)覺(jué)得有幫助!

在事件中return false

可能大家在編寫事件相關(guān)代碼的時(shí)候,有時(shí)候會(huì)使用return false語(yǔ)句,代碼如下:

$("a").click(function() {
   $(".gbtags").toggle();
   return false;
}

以上代碼中,我們點(diǎn)擊a元素,如果不return false,會(huì)觸發(fā)對(duì)應(yīng)a元素的鏈接,導(dǎo)致頁(yè)面的地址變化。

而jQuery有標(biāo)準(zhǔn)的方法來(lái)幫助你實(shí)現(xiàn)類似上面的功能,代碼如下:

if ( ret !== undefined ) {
   if ( (event.result = ret) === false ) {
      event.preventDefault();
      event.stopPropagation();
   }
}

那么這兩個(gè)實(shí)現(xiàn)方式有什么不同呢? 我們可以看看jQuery的源代碼,如下:

if ( ret !== undefined ) {
   if ( (event.result = ret) === false ) {
      event.preventDefault();
      event.stopPropagation();
   }
}

大家看明白了嗎?最簡(jiǎn)單理解,如下:

return false;

等于

event.preventDefault();
event.stopPropagation();

在事件處理中,如果你直接返回false,那么將會(huì)同時(shí)阻止元素缺省行為并且終止元素事件的Bubbling,即事件同時(shí)阻止當(dāng)前元素父層元素,即:event.stopPropagation(); 所實(shí)現(xiàn)效果。

$.type來(lái)實(shí)現(xiàn)類型判斷

也許大家都已經(jīng)習(xí)慣了使用javascript的本地方法:typeof 來(lái)判斷類型,但是在jQuery中提供了一個(gè)更好的方法幫助你判斷類型,那就是$.type。

那么究竟有什么區(qū)別呢? 我們先看看這個(gè)gbdebug:

  

http://www.gbtags.com/gb/debug/3361dbff-41c0-465d-81e3-1ef6cbb275e1.htm

運(yùn)行以上代碼,能看到如下輸出結(jié)果:

// 返回object
result(typeof null);

// 返回object
result(typeof [0, 1, 2]);

// 返回object
result(typeof new Number(3));

// 返回null
result($.type(null));

// 返回array
result($.type([0, 1, 2]));

// 返回number
result($.type(new Number(3)));

大家看出來(lái)什么區(qū)別了嗎? 使用$.type能夠返回更準(zhǔn)確的對(duì)象類型,而typeof則返回object,所以如果你使用jQuery來(lái)編碼的時(shí)候,使用$.type 將更加方便。

使用attr()來(lái)實(shí)現(xiàn)removeAttr()的功能

可能大家習(xí)慣了使用attr()來(lái)添加元素屬性,而使用removeAttr() 來(lái)刪除元素屬性。

但是其實(shí)使用attr()也能執(zhí)行刪除的效果,為什么呢?請(qǐng)看看如下jQuery源代碼:

attr: function( elem, name, value ) {
    ...
    if ( value !== undefined ) {

        if ( value === null ) {
            jQuery.removeAttr( elem, name );
    ...
}

從上面jQuery的源代碼中可以看出來(lái),如果你設(shè)置value為null的話,其實(shí)它就可以實(shí)現(xiàn)removeAttr的方法功能。

  

http://www.gbtags.com/gb/debug/269c89e1-b22f-40f9-8d26-8d995e999d29.htm

因此,我們可以如下方式來(lái)運(yùn)行判斷是否刪除屬性:

$("a").attr("title", condition ? value : null);

否則你需要使用如下:

condition ? $("a").attr("title", value) : $("a").removeAttr("title");

是不是稍微簡(jiǎn)單一些?

$.makeArray來(lái)創(chuàng)建數(shù)組

有些時(shí)候我們需要將類似數(shù)組的數(shù)據(jù)結(jié)構(gòu)轉(zhuǎn)化成為一個(gè)真實(shí)的數(shù)組,然后調(diào)用相關(guān)數(shù)組方法,例如reverse,代碼如下:

// 返回 NodeList
var elems = document.getElementsByTagName( "li" );
// 轉(zhuǎn)化為Array
var arr = jQuery.makeArray( elems );
// 調(diào)用數(shù)組方法反向排序
arr.reverse();
$( arr ).appendTo( document.body );

相關(guān)gbdebug:

  

http://www.gbtags.com/gb/debug/75d28491-aa13-4868-aa95-10b079337b82.htm

是不是非常簡(jiǎn)單?如果不使用$.makeArray,那么你需要自己處理Javascript來(lái)實(shí)現(xiàn)類似的功能,會(huì)非常麻煩

總結(jié)

以上就是幾個(gè)大家可能在jQuery開(kāi)發(fā)中容易忽略的幾個(gè)實(shí)用方法,或者你也有自己的一些不錯(cuò)的方法,請(qǐng)大家不吝分享!

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/85541.html

相關(guān)文章

  • 由一個(gè)“bug”到鮮為人知jQuery.cssHooks

    摘要:干想了半天,認(rèn)為可能還是本身的寫法問(wèn)題。對(duì)象提供了一種通過(guò)定義函數(shù)來(lái)獲取或設(shè)置特定值的方法。簡(jiǎn)單來(lái)說(shuō),給我們暴露了一個(gè)鉤子,我們可以自己定義方法比如,來(lái)實(shí)現(xiàn)針對(duì)某個(gè)屬性的特定行為。 寫在最前 本次分享一下在一次jQuery賦值樣式失效的結(jié)果中來(lái)分析背后原因的過(guò)程。在翻jQuery源碼的過(guò)程中,感覺(jué)真是還不能說(shuō)自己只是會(huì)用jQuery,我好像連會(huì)用都達(dá)不到(逃 歡迎關(guān)注我的博客,不定期更...

    ernest.wang 評(píng)論0 收藏0
  • 由一個(gè)“bug”到鮮為人知jQuery.cssHooks

    摘要:干想了半天,認(rèn)為可能還是本身的寫法問(wèn)題。對(duì)象提供了一種通過(guò)定義函數(shù)來(lái)獲取或設(shè)置特定值的方法。簡(jiǎn)單來(lái)說(shuō),給我們暴露了一個(gè)鉤子,我們可以自己定義方法比如,來(lái)實(shí)現(xiàn)針對(duì)某個(gè)屬性的特定行為。 寫在最前 本次分享一下在一次jQuery賦值樣式失效的結(jié)果中來(lái)分析背后原因的過(guò)程。在翻jQuery源碼的過(guò)程中,感覺(jué)真是還不能說(shuō)自己只是會(huì)用jQuery,我好像連會(huì)用都達(dá)不到(逃 歡迎關(guān)注我的博客,不定期更...

    malakashi 評(píng)論0 收藏0
  • Tools - 收藏集 - 掘金

    摘要:個(gè)高級(jí)多線程面試題及回答后端掘金在任何面試當(dāng)中多線程和并發(fā)方面的問(wèn)題都是必不可少的一部分。默認(rèn)為提供了年杭州面試經(jīng)歷掘金想換個(gè)環(huán)境試試覺(jué)得做的不是自己想要的。源碼網(wǎng)站安居客項(xiàng)目架構(gòu)演進(jìn)掘金本文已授權(quán)微信公眾號(hào)獨(dú)家發(fā)布。 15 個(gè)高級(jí) Java 多線程面試題及回答 - 后端 - 掘金在任何Java面試當(dāng)中多線程和并發(fā)方面的問(wèn)題都是必不可少的一部分。如果你想獲得任何股票投資銀行的前臺(tái)資訊職...

    KitorinZero 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<