jQuery中不爲人知的的幾個方法

轉來學習一下 jQuery中不爲人知的的幾個方法

jQuery近些年來仍舊是web開發中最受歡迎的類庫，雖然你們褒貶不一，可是仍舊不失爲一款最流行的Javascript，在今天這篇文章中，咱們將介紹幾個jQuery的相關方法，不管你是入門級極客或者骨灰級極客，可能都會忽略這些方法的使用。但願你們會以爲有幫助！

在事件中return false

可能你們在編寫事件相關代碼的時候，有時候會使用return false語句，代碼以下：

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

以上代碼中，咱們點擊a元素，若是不return false，會觸發對應a元素的連接，致使頁面的地址變化。

而jQuery有標準的方法來幫助你實現相似上面的功能，代碼以下：

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

那麼這兩個實現方式有什麼不一樣呢？　咱們能夠看看jQuery的源代碼，以下：

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

你們看明白了嗎？最簡單理解，以下：

return false;

等於

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

在事件處理中，若是你直接返回false，那麼將會同時阻止元素缺省行爲而且終止元素事件的Bubbling，即事件同時阻止當前元素父層元素，即：event.stopPropagation();　所實現效果。

$.type來實現類型判斷

也許你們都已經習慣了使用javascript的本地方法：typeof 來判斷類型，可是在jQuery中提供了一個更好的方法幫助你判斷類型，那就是$.type。

那麼究竟有什麼區別呢？　咱們先看看這個gbdebug：

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

運行以上代碼，能看到以下輸出結果：

// 返回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)));

你們看出來什麼區別了嗎？　使用$.type可以返回更準確的對象類型，而typeof則返回object，因此若是你使用jQuery來編碼的時候，使用$.type 將更加方便。

使用attr()來實現removeAttr()的功能

可能你們習慣了使用attr()來添加元素屬性，而使用removeAttr() 來刪除元素屬性。

可是其實使用attr()也能執行刪除的效果，爲何呢？請看看以下jQuery源代碼：

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

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

從上面jQuery的源代碼中能夠看出來，若是你設置value爲null的話，其實它就能夠實現removeAttr的方法功能。

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

所以，咱們能夠以下方式來運行判斷是否刪除屬性：

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

不然你須要使用以下：

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

是否是稍微簡單一些？

$.makeArray來建立數組

有些時候咱們須要將相似數組的數據結構轉化成爲一個真實的數組，而後調用相關數組方法，例如reverse，代碼以下：

// 返回 NodeList
var elems = document.getElementsByTagName( "li" );
// 轉化爲Array
var arr = jQuery.makeArray( elems );
// 調用數組方法反向排序
arr.reverse();
$( arr ).appendTo( document.body );

相關gbdebug：

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

是否是很是簡單？若是不使用$.makeArray，那麼你須要本身處理Javascript來實現相似的功能，會很是麻煩

總結

以上就是幾個你們可能在jQuery開發中容易忽略的幾個實用方法，或者你也有本身的一些不錯的方法，請你們不吝分享！