欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳談jQuery中的this和$(this)

 更新時間:2014年11月13日 09:44:46   投稿:hebedich  
在使用jquery操作js時,經(jīng)常弄不明白this與$(this)。最近不是很忙,抽空仔細(xì)研究了一下,記錄下來以供在忘記的時候拉出來參考參考!

網(wǎng)上有很多關(guān)于jQuery的this和$(this)的介紹,大多數(shù)只是理清了this和$(this)的指向,其實它是有應(yīng)用場所的,不能一概而論在jQuery調(diào)用成員函數(shù)時,this就是指向dom對象。

$(this)指向jQuery對象是無可厚非的,但this就是指向dom對象,這個是因為jQuery做了特殊的處理。 

在創(chuàng)建dom的jQuery對象時,jQuery不僅僅為dom創(chuàng)建一個jQuery對象,而且還將dom存儲在所創(chuàng)建對象的數(shù)組中。

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

elem = document.getElementById(match[2]); 
if (elem && elem.parentNode) { 
  this.length = 1; 
  this[0] = elem; 

 
this.context = document; 
this.selector = selector; 
return this; 

 this[0] = elem這條語句就是實現(xiàn)對象數(shù)組。所以javascript是很有意思的語言,使用this訪問時,可以訪問它所指向的對象的成員函數(shù),而其實this又是一個對象數(shù)組。其存放的是dom對象。

先看看 $("p").each() -- 循環(huán)

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

each: function( callback, args ) { 
        return jQuery.each( this, callback, args ); 
    } 

 看了each函數(shù)的調(diào)用大家應(yīng)該明白,jQuery.each( this, callback, args );調(diào)用的是對象數(shù)組,而對象的數(shù)組存儲的是dom對象,因此在callback函數(shù)中的this自然是dom對象了

再看看$("p").hide() -- 成員函數(shù)

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

hide: function() { 
        return showHide( this ); 
    }, 
 function showHide( elements, show ) {var elem, display, 
        values = [], 
        index = 0, 
        length = elements.length; 
    for ( ; index < length; index++ ) { 
        elem = elements[ index ]; 
        if ( !elem.style ) { 
            continue; 
        } 
        values[ index ] = jQuery._data( elem, "olddisplay" ); 
        if ( show ) { 
            // Reset the inline display of this element to learn if it is 
            // being hidden by cascaded rules or not 
            if ( !values[ index ] && elem.style.display === "none" ) { 
                elem.style.display = ""; 
            } 
            // Set elements which have been overridden with display: none 
            // in a stylesheet to whatever the default browser style is 
            // for such an element 
            if ( elem.style.display === "" && isHidden( elem ) ) { 
                values[ index ] = jQuery._data( elem, "olddisplay", css_defaultDisplay(elem.nodeName) ); 
            } 
        } else { 
            display = curCSS( elem, "display" ); 
            if ( !values[ index ] && display !== "none" ) { 
                jQuery._data( elem, "olddisplay", display ); 
            } 
        } 
    } 
    // Set the display of most of the elements in a second loop 
    // to avoid the constant reflow 
    for ( index = 0; index < length; index++ ) { 
        elem = elements[ index ]; 
        if ( !elem.style ) { 
            continue; 
        } 
        if ( !show || elem.style.display === "none" || elem.style.display === "" ) { 
            elem.style.display = show ? values[ index ] || "" : "none"; 
        } 
    } 
    return elements; 

 從上面的代碼可以看出hide行數(shù)其實調(diào)用的是showHide,而傳入的第一個參數(shù)this,并不是dom對象,而是jQuery對象數(shù)組,因此showHide函數(shù)通過循環(huán)此對象數(shù)組獲取每一個dom對象。

最后看看$("p").bind() -- 事件

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

bind: function( types, data, fn ) { 
        return this.on( types, null, data, fn ); 
    }, 

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

on: function( types, selector, data, fn, /*INTERNAL*/ one ) { 
        // 此部分代碼省略 
        return this.each( function() { 
            jQuery.event.add( this, types, fn, data, selector ); 
        }); 
    }, 

bind函數(shù)調(diào)用的是 on函數(shù),而on函數(shù)又是通過 each函數(shù)實現(xiàn)了jQuery.event.add。因此 jQuery.event.add( this中的this也就是dom對象了。所以事件中的this也就是dom對象了。

以上就是個人對于jQuery中this與$(this)的理解了,如有什么紕漏,請聯(lián)系我或者給我留言

相關(guān)文章

  • 使用基于jquery的gamequery插件做JS乒乓球游戲

    使用基于jquery的gamequery插件做JS乒乓球游戲

    現(xiàn)在jquery比較流行,用js做游戲的也越來越多了,雖然現(xiàn)在html5出來了,但實際上要用html5做點(diǎn)啥出來還是得靠javascript,所以學(xué)好js是非常重要的
    2011-07-07
  • jquery簡單實現(xiàn)外部鏈接用新窗口打開的方法

    jquery簡單實現(xiàn)外部鏈接用新窗口打開的方法

    這篇文章主要介紹了jquery簡單實現(xiàn)外部鏈接用新窗口打開的方法,涉及jQuery正則匹配http://開頭外部鏈接網(wǎng)址的相關(guān)技巧,需要的朋友可以參考下
    2015-05-05
  • JQuery發(fā)送ajax請求時中文亂碼問題解決

    JQuery發(fā)送ajax請求時中文亂碼問題解決

    這篇文章主要介紹了JQuery發(fā)送ajax請求時中文亂碼問題解決,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2019-11-11
  • jquery+php實現(xiàn)搜索框自動提示

    jquery+php實現(xiàn)搜索框自動提示

    百度上有個很使用的功能,就是用戶在搜索的時候會自動提示相關(guān)搜索條件以供選擇,非常人性化的設(shè)計,我們?nèi)绾螌⒋斯δ芊诺阶约旱捻椖恐心?,?jīng)過一番研究,終于實現(xiàn)了此功能,分享給大家。
    2014-11-11
  • Asp.net下使用Jquery Ajax傳送和接收DataTable的代碼

    Asp.net下使用Jquery Ajax傳送和接收DataTable的代碼

    對于習(xí)慣使用GridView的人來說,前臺頁面需要動態(tài)添加表格的行數(shù),是一件痛苦的事。GridView處理這種事情相當(dāng)麻煩,你點(diǎn)擊“新增一行”,需要回傳到服務(wù)器。
    2010-09-09
  • jquery層級選擇器(匹配父元素下的子元素實現(xiàn)代碼)

    jquery層級選擇器(匹配父元素下的子元素實現(xiàn)代碼)

    下面小編就為大家?guī)硪黄猨query層級選擇器(匹配父元素下的子元素實現(xiàn)代碼)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-09-09
  • jQuery Chart圖表制作組件Highcharts用法詳解

    jQuery Chart圖表制作組件Highcharts用法詳解

    這篇文章主要介紹了jQuery Chart圖表制作組件Highcharts用法,詳細(xì)分析了Highcharts插件的功能與具體使用技巧及相關(guān)注意事項,需要的朋友可以參考下
    2016-06-06
  • jquery.jstree 增加節(jié)點(diǎn)的雙擊事件代碼

    jquery.jstree 增加節(jié)點(diǎn)的雙擊事件代碼

    本文基于 jsTree 1.0-rc1 版本增加節(jié)點(diǎn)的雙擊事件。
    2010-07-07
  • jquery實現(xiàn)拖拽添加元素功能

    jquery實現(xiàn)拖拽添加元素功能

    這篇文章主要為大家詳細(xì)介紹了jquery實現(xiàn)拖拽添加元素功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-12-12
  • 使用ajaxfileupload.js實現(xiàn)上傳文件功能

    使用ajaxfileupload.js實現(xiàn)上傳文件功能

    這篇文章主要為大家詳細(xì)介紹了使用ajaxfileupload.js實現(xiàn)上傳文件功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-08-08

最新評論