源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

详谈jQuery中的this和$(this)

  • 时间:2020-08-16 01:28 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:详谈jQuery中的this和$(this)
网上有很多关于jQuery的this和$(this)的介绍,大多数只是理清了this和$(this)的指向,其实它是有应用场所的,不能一概而论在jQuery调用成员函数时,this就是指向dom对象。 $(this)指向jQuery对象是无可厚非的,但this就是指向dom对象,这个是因为jQuery做了特殊的处理。  在创建dom的jQuery对象时,jQuery不仅仅为dom创建一个jQuery对象,而且还将dom存储在所创建对象的数组中。
[u]复制代码[/u] 代码如下:
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这条语句就是实现对象数组。所以javascript是很有意思的语言,使用this访问时,可以访问它所指向的对象的成员函数,而其实this又是一个对象数组。其存放的是dom对象。 先看看 $("p").each() -- 循环
[u]复制代码[/u] 代码如下:
each: function( callback, args ) {          return jQuery.each( this, callback, args );      } 
 看了each函数的调用大家应该明白,jQuery.each( this, callback, args );调用的是对象数组,而对象的数组存储的是dom对象,因此在callback函数中的this自然是dom对象了 再看看$("p").hide() -- 成员函数
[u]复制代码[/u] 代码如下:
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行数其实调用的是showHide,而传入的第一个参数this,并不是dom对象,而是jQuery对象数组,因此showHide函数通过循环此对象数组获取每一个dom对象。 最后看看$("p").bind() -- 事件
[u]复制代码[/u] 代码如下:
bind: function( types, data, fn ) {          return this.on( types, null, data, fn );      }, 
[u]复制代码[/u] 代码如下:
on: function( types, selector, data, fn, /*INTERNAL*/ one ) {          // 此部分代码省略          return this.each( function() {              jQuery.event.add( this, types, fn, data, selector );          });      }, 
bind函数调用的是 on函数,而on函数又是通过 each函数实现了jQuery.event.add。因此 jQuery.event.add( this中的this也就是dom对象了。所以事件中的this也就是dom对象了。 以上就是个人对于jQuery中this与$(this)的理解了,如有什么纰漏,请联系我或者给我留言
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部