欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-03-07 14:32:00
...
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的问题解决的详细内容,更多请关注其它相关文章!