詳談jQuery中的this和$(this)
網(wǎng)上有很多關于jQuery的this和$(this)的介紹,大多數(shù)只是理清了this和$(this)的指向,其實它是有應用場所的,不能一概而論在jQuery調用成員函數(shù)時,this就是指向dom對象。
$(this)指向jQuery對象是無可厚非的,但this就是指向dom對象,這個是因為jQuery做了特殊的處理?!?/p>
在創(chuàng)建dom的jQuery對象時,jQuery不僅僅為dom創(chuàng)建一個jQuery對象,而且還將dom存儲在所創(chuàng)建對象的數(shù)組中。
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)
each: function( callback, args ) {
return jQuery.each( this, callback, args );
}
看了each函數(shù)的調用大家應該明白,jQuery.each( this, callback, args );調用的是對象數(shù)組,而對象的數(shù)組存儲的是dom對象,因此在callback函數(shù)中的this自然是dom對象了
再看看$("p").hide() -- 成員函數(shù)
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ù)其實調用的是showHide,而傳入的第一個參數(shù)this,并不是dom對象,而是jQuery對象數(shù)組,因此showHide函數(shù)通過循環(huán)此對象數(shù)組獲取每一個dom對象。
最后看看$("p").bind() -- 事件
bind: function( types, data, fn ) {
return this.on( types, null, data, fn );
},
on: function( types, selector, data, fn, /*INTERNAL*/ one ) {
// 此部分代碼省略
return this.each( function() {
jQuery.event.add( this, types, fn, data, selector );
});
},
bind函數(shù)調用的是 on函數(shù),而on函數(shù)又是通過 each函數(shù)實現(xiàn)了jQuery.event.add。因此 jQuery.event.add( this中的this也就是dom對象了。所以事件中的this也就是dom對象了。
以上就是個人對于jQuery中this與$(this)的理解了,如有什么紕漏,請聯(lián)系我或者給我留言
相關文章
使用基于jquery的gamequery插件做JS乒乓球游戲
現(xiàn)在jquery比較流行,用js做游戲的也越來越多了,雖然現(xiàn)在html5出來了,但實際上要用html5做點啥出來還是得靠javascript,所以學好js是非常重要的2011-07-07Asp.net下使用Jquery Ajax傳送和接收DataTable的代碼
對于習慣使用GridView的人來說,前臺頁面需要動態(tài)添加表格的行數(shù),是一件痛苦的事。GridView處理這種事情相當麻煩,你點擊“新增一行”,需要回傳到服務器。2010-09-09jquery層級選擇器(匹配父元素下的子元素實現(xiàn)代碼)
下面小編就為大家?guī)硪黄猨query層級選擇器(匹配父元素下的子元素實現(xiàn)代碼)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-09-09jQuery Chart圖表制作組件Highcharts用法詳解
這篇文章主要介紹了jQuery Chart圖表制作組件Highcharts用法,詳細分析了Highcharts插件的功能與具體使用技巧及相關注意事項,需要的朋友可以參考下2016-06-06jquery.jstree 增加節(jié)點的雙擊事件代碼
本文基于 jsTree 1.0-rc1 版本增加節(jié)點的雙擊事件。2010-07-07使用ajaxfileupload.js實現(xiàn)上傳文件功能
這篇文章主要為大家詳細介紹了使用ajaxfileupload.js實現(xiàn)上傳文件功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-08-08