［原创］jQuery的this和$(this)

浏览数：35 / 时间：2015年06月09日

网上有很多关于jQuery的this和$(this)的介绍，大多数只是理清了this和$(this)的指向，其实它是有应用场所的，不能一概而论在jQuery调用成员函数时，this就是指向dom对象。

 

$(this)指向jQuery对象是无可厚非的，但this就是指向dom对象，这个是因为jQuery做了特殊的处理。　

 

在创建dom的jQuery对象时，jQuery不仅仅为dom创建一个jQuery对象，而且还将dom存储在所创建对象的数组中。

 

Js代码  
  1. elem = document.getElementById(match[2]);  
  2. if (elem && elem.parentNode) {  
  3.   this.length = 1;  
  4.   this[0] = elem;  
  5. }  
  6.   
  7. this.context = document;  
  8. this.selector = selector;  
  9. return this;  

 

 this[0] = elem这条语句就是实现对象数组。所以javascript是很有意思的语言，使用this访问时，可以访问它所指向的对象的成员函数，而其实this又是一个对象数组。其存放的是dom对象。

 

先看看 $("p").each() -- 循环

 

 

Js代码  
  1. each: function( callback, args ) {  
  2.         return jQuery.each( this, callback, args );  
  3.     }  

 

 看了each函数的调用大家应该明白，jQuery.each( this, callback, args );调用的是对象数组，而对象的数组存储的是dom对象，因此在callback函数中的this自然是dom对象了

 

 

再看看$("p").hide()　--　成员函数

 

 

Js代码  
  1. hide: function() {  
  2.         return showHide( this );  
  3.     },  
Js代码  
  1.  function showHide( elements, show ) {var elem, display,  
  2.         values = [],  
  3.         index = 0,  
  4.         length = elements.length;  
  5.   
  6.     for ( ; index < length; index++ ) {  
  7.         elem = elements[ index ];  
  8.         if ( !elem.style ) {  
  9.             continue;  
  10.         }  
  11.         values[ index ] = jQuery._data( elem, "olddisplay" );  
  12.         if ( show ) {  
  13.             // Reset the inline display of this element to learn if it is  
  14.             // being hidden by cascaded rules or not  
  15.             if ( !values[ index ] && elem.style.display === "none" ) {  
  16.                 elem.style.display = "";  
  17.             }  
  18.   
  19.             // Set elements which have been overridden with display: none  
  20.             // in a stylesheet to whatever the default browser style is  
  21.             // for such an element  
  22.             if ( elem.style.display === "" && isHidden( elem ) ) {  
  23.                 values[ index ] = jQuery._data( elem, "olddisplay", css_defaultDisplay(elem.nodeName) );  
  24.             }  
  25.         } else {  
  26.             display = curCSS( elem, "display" );  
  27.   
  28.             if ( !values[ index ] && display !== "none" ) {  
  29.                 jQuery._data( elem, "olddisplay", display );  
  30.             }  
  31.         }  
  32.     }  
  33.   
  34.     // Set the display of most of the elements in a second loop  
  35.     // to avoid the constant reflow  
  36.     for ( index = 0; index < length; index++ ) {  
  37.         elem = elements[ index ];  
  38.         if ( !elem.style ) {  
  39.             continue;  
  40.         }  
  41.         if ( !show || elem.style.display === "none" || elem.style.display === "" ) {  
  42.             elem.style.display = show ? values[ index ] || "" : "none";  
  43.         }  
  44.     }  
  45.   
  46.     return elements;  
  47. }  

 从上面的代码可以看出hide行数其实调用的是showHide，而传入的第一个参数this，并不是dom对象，而是jQuery对象数组，因此showHide函数通过循环此对象数组获取每一个dom对象。

 

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

 

Js代码  
  1. bind: function( types, data, fn ) {  
  2.         return this.on( types, null, data, fn );  
  3.     },  

 

 

 

Js代码  
  1. on: function( types, selector, data, fn, /*INTERNAL*/ one ) {  
  2.         // 此部分代码省略  
  3.         return this.each( function() {  
  4.             jQuery.event.add( this, types, fn, data, selector );  
  5.         });  
  6.     },  

 

bind函数调用的是 on函数，而on函数又是通过 each函数实现了jQuery.event.add。因此　jQuery.event.add( this中的this也就是dom对象了。所以事件中的this也就是dom对象了。

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style 代码 java src 使用 com http word class style 代码 java src 使用 com http word

相关文章

随机文章

您可能还喜欢

您可能还喜欢