jQuery中大家不太了解的幾個(gè)方法

更新時(shí)間：2015年03月04日 10:54:50 投稿：hebedich

在今天這篇文章中，我們將介紹幾個(gè)jQuery的相關(guān)方法，無(wú)論你是入門級(jí)極客或者骨灰級(jí)極客，可能都會(huì)忽略這些方法的使用。希望大家會(huì)覺(jué)得有幫助！

jQuery近些年來(lái)仍舊是web開(kāi)發(fā)中最受歡迎的類庫(kù)，雖然大家褒貶不一，但是仍舊不失為一款最流行的Javascript，

在事件中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)類似上面的功能，代碼如下：

復(fù)制代碼代碼如下:

if ( ret !== undefined ) {

   if ( (event.result = ret) === false ) {

      event.preventDefault();

      event.stopPropagation();

   }

}

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

復(fù)制代碼代碼如下:

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é)果：

復(fù)制代碼代碼如下:

// 返回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源代碼：

復(fù)制代碼代碼如下:

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)行判斷是否刪除屬性：

復(fù)制代碼代碼如下:

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

否則你需要使用如下：

復(fù)制代碼代碼如下:

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，代碼如下：

復(fù)制代碼代碼如下:

// 返回 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)大家不吝分享！

您可能感興趣的文章: