×

对jQuery中this和$(this)的理解

作者:admin2017.11.28来源:Web前端之家浏览:2013评论:0
关键词:JQueryJS
微信公众号

微信公众号

谈到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)的理解了,如有什么纰漏,请联系我或者给我留言。

温馨提示:本文作者系admin ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
http://jiangweishan.com/article/svg1488124800789.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • admin

    关于微信小程序,后面会出一些文章的,请关注网站更新。。。...

  • webred

    博主可以分享点小程序的文章......

  • 访客

    可以用。...

  • admin

    可以的,可以联系下QQ,或者加群。...

  • admin

    可以的,可以联系下QQ,或者加群。...

  • Web前端技能

    申请交换友链,可以吗...

  • 访客

    代码不可以用...

  • asidl

    这个DEMO应该再细点更好。。。...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2013-2018 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.5.2 Zero