黑马程序员技术交流社区

标题: JQ中this和$(this)的区别 [打印本页]

---

作者: sjj632605    时间: 2018-11-14 21:07
标题: JQ中this和$(this)的区别
一般情况下 ，this表示的是注册点击事件的DOM元素，是DOM元素
$(this)是JQ对象，具体分析还需要结合上下文，比如说，在插件方法内部，this指的就是当前的JQ对象，而不是DOM元素。而在each方法中，this代表的每次都是DOM元素。
我们写的var $e=$(this) 是对this进行包装，使他从DOM元素变为JQ对象，然后调用JQ方法更方便。

如果你学过面向对象语言的话，例如JAVA，你应该明白这个this在JAVA里的意思，简单的说，谁在调用它，它就代表文谁。
那么，用到这个jquery里，也算是蛮简单的.举两个例子，一个是单个对象，一个是li元素集合
例1：
$("#btnConfirm").click(function(){
alert($(this).val()); //看这里，this代表的其实就是这个ID为btnConfirm的按钮,因为你现在点击的是ID为btnConfirm的按钮,那么this就是它
});
例子2:$("ul li").each(function(){
alert( $(this).text()); //这里的this代表的是迭代的每个li元素,因为每次迭代，得到的都是一个<li>元素,那么这个时候this 就代表着这个当前的<li>元素
})
$(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对象了。

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2