Jquery中文網 www.4271936.live
Jquery中文網 >  jQuery  >  jquery 教程  >  正文 jQuery中鮮為人知的的幾個方法

jQuery中鮮為人知的的幾個方法

發布時間:2016-09-18   編輯:www.4271936.live
jquery中文網為您提供jQuery中鮮為人知的的幾個方法等資源,歡迎您收藏本站,我們將為您提供最新的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開發中容易忽略的幾個實用方法,或者你也有自己的一些不錯的方法,請大家不吝分享!

您可能感興趣的文章:
JQuery 無廢話系列教程(一) jquery入門 [推薦]
怎么讓百度快速收錄新網站
jquery ready()的幾種實現方法小結
基于jquery實現拆分姓名的方法(純JS版)
11個用于提高排版水平的基于jquery的文字效果插件
jQuery get和post 方法傳值注意事項
JQuery從頭學起第一講
了解jQuery技巧來提高你的代碼
比較簡單的jquery教程 Easy Ajax with jQuery 中文版全集第1/3頁
jquery 圖片 上一張 下一張 鏈接效果(續篇)

[關閉]
微信下载APP完成任务如何赚钱 甘肃11选五走势图 2019上证50权重比例 广西快三和值走势 配资公司 浙江12选5任五遗漏 彩票玩法介绍 疯狂飞艇计划 股权投资基金配资 山西快乐十分投注 江西快三是不是合法的