jQuery：click()方法中使用this的问题解决

jQ版本：jquery-1.7.2.js

    <div id="box">test</div>

登录后复制

<script>
    $(function(){ 
        $('#box').click(function(){ 
            //alert(this.html()); // 报错
            alert(this.innerHTML);// test
            alert($(this).html()); // test
        });    
    });</script>

登录后复制

请问一下，经$('#box')获取后，已经得到jQuery对象了，为什么this对应的还是DOM对象，而$(this)却是jQuery对象呢？谢谢！

你要知道没有jquery 也有js，没有js就没有jquery。 this 是js的东东，函数执行环境中的this 是属于原生js的，怎么能够给你指向jquery对象。 穿上$(this)马甲 才是jquery对象。

this引用的是函数执行的环境对象，比如在全局中调用，this就是window。所以你这个this并不是$("#box")返回的，不是JQ对象，而是调用此函数的div这个dom对象。仔细理解下this。手机打字好费劲，如果还有不明白的明天开电脑说

$('#box')已经返回JQuery对象了啊，所以你后面才能调用click()方法，注意你这一步相当于

var $box = $('#box');
$box.click(function(){    //TODO});

登录后复制

而函数执行的环境对象跟你这句代码获得什么对象没关系，本质是在这个DOM上绑定一个事件，
事件触发时，this就只是这个DOM

$(this)并不会改变这个DOM对象，只是进行了一次包装，就像是加了一层外壳，让他变成JQuery对象，从而能够使用JQuery方法，并不是像传入选择器一样去寻找DOM，因此它仍是当前触发此事件的div.box。包装后的JQuery可以还原成DOM对象。
看看下面的代码，通过事件对象获取触发事件的对象：

$('.box').click(function(event){    console.log(event.target);    console.log(event.target==this);//非事件冒泡情况下为true
    console.log($(this).get(0)==this);//true});

登录后复制

以上就是jQuery：click()方法中使用this的问题解决的详细内容，更多请关注Work网其它相关文章！