jQuery: Problem solving using this in click() method

jQ version: jquery-1.7.2.js

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

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

Please tell me, after getting through $('#box'), the jQuery object has been obtained , why does this correspond to DOM object, but $(this) is a jQuery object? Thanks!

You have to know that there is js without jquery, and there is no jquery without js. This is the stuff of js. FunctionThis in the execution environment belongs to native js. How can it point you to the jquery object. Wearing $(this) vest is the jquery object.

this refers to the environment object in which the function is executed. For example, when called globally, this is window. So your this is not returned by $("#box"), it is not a JQ object, but the dom object of the div that calls this function. Please understand this carefully. Typing on a mobile phone is very difficult. If you still don’t understand something, turn on the computer tomorrow and it will say that

$('#box') has returned the JQuery object, so you can only call the click() method later. Please note that this step is quite complicated. In

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

, the environment object of function execution has nothing to do with the object obtained by your code. The essence is to bind an

event to the DOM. When the event is triggered, this It’s just that this DOM

$(this) does not change the DOM object. It is just packaged, just like adding a shell to turn it into a JQuery object, so that JQuery methods can be used, and Instead of looking for the DOM like the incoming selector, it is still the div.box that currently triggers this event. Wrapped JQuery can be restored to a DOM object.

Look at the following code to get the object that triggered the event through the event object:

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

The above is the detailed content of jQuery: Problem solving using this in click() method. For more information, please follow other related articles on the PHP Chinese website!