来源：自学PHP网 时间：2014-11-29 13:28 作者： 阅读:次
[导读] 在使用jquery操作js时，经常弄不明白this与$(this)。最近不是很忙，抽空仔细研究了一下，记录下来以供在忘记的时候拉出来参考参考！...
|
网上有很多关于jQuery的this和$(this)的介绍，大多数只是理清了this和$(this)的指向，其实它是有应用场所的，不能一概而论在jQuery调用成员函数时，this就是指向dom对象。 $(this)指向jQuery对象是无可厚非的，但this就是指向dom对象，这个是因为jQuery做了特殊的处理。 在创建dom的jQuery对象时，jQuery不仅仅为dom创建一个jQuery对象，而且还将dom存储在所创建对象的数组中。 复制代码 代码如下: 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() -- 循环 复制代码 代码如下: each: function( callback, args ) { return jQuery.each( this, callback, args ); } 看了each函数的调用大家应该明白，jQuery.each( this, callback, args );调用的是对象数组，而对象的数组存储的是dom对象，因此在callback函数中的this自然是dom对象了 再看看$("p").hide() -- 成员函数 复制代码 代码如下: 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() -- 事件 复制代码 代码如下: 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函数调用的是 on函数，而on函数又是通过 each函数实现了jQuery.event.add。因此 jQuery.event.add( this中的this也就是dom对象了。所以事件中的this也就是dom对象了。 以上就是个人对于jQuery中this与$(this)的理解了，如有什么纰漏，请联系我或者给我留言 |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com
