Home  >  Article  >  Web Front-end  >  The difference between jquery this and $(this)

The difference between jquery this and $(this)

藏色散人
藏色散人Original
2020-12-03 09:16:112225browse

The difference between jquery this and $(this) is: 1. this is an html element, and $this is just a variable name. The $ is added to indicate that it is a jquery object; 2. $(this) is a Conversion can be used to convert the dom object represented by this into a jquery object.

The difference between jquery this and $(this)

The operating environment of this tutorial: Windows 7 system, jquery version 1.10.0, Dell G3 computer.

Recommended: "jquery video tutorial"

The difference between JQuery this and $(this) and the method of obtaining the $(this) sub-element object

1. The difference between JQuery this and $(this)

 // this其实是一个Html 元素。
 
 // $this 只是个变量名,加$是为说明其是个jquery对象。
 
 // 而$(this)是个转换,将this表示的dom对象转为jquery对象,这样就可以使用jquery提供的方法操作。

I believe that many people who are new to JQuery will be confused about the difference between $(this) and this, so this What's the difference between the two?

First, let’s take a look at the $() symbol in JQuery. In fact, this symbol is equivalent to JQuery() in JQuery, that is, $(this)=jquery(); that is, this can return a jquery object. Then, when you alert($('#id')); on the web page, an [object Object] will pop up. This object object is also a jquery object.

So, let’s go back to $(this), what is this? Suppose we have the following code:

$("#desktop a img").each(function(index){
            alert($(this));
            alert(this);
}

Then, you can see at this time:

alert($(this));  弹出的结果是[object Object ]
alert(this);        弹出来的是[object HTMLImageElement]

In other words, the latter returns an html object (in this case, it is an img that traverses HTML object, so HTMLImageElement).

When many people use jquery, they often get this.attr('src'); At this time, an error message "The object does not support this attribute or method" will be reported. Why is this? In fact, if you understand the above example, you will know where the mistake is: it is very simple. This operates on the HTML object. So, how come there is a val() method in the HTML object? Therefore, in use, we cannot use this directly. Directly call jquery methods or properties.

2. Method to get $(this) child node object: find(element)

Understand the difference between $(this) and this, let’s take a look at this example: (Suppose, I The a tag in the page contains img and contains the src attribute). When I traverse, I want to get the address of src in img under $(this)

      $("#desktop a ").each(function(index){
         var imgurl=$(this).find('img').attr('src');
         alert(imgurl);
        }

where .find(element) returns a DOM element used to match the element, so that the desired src address can be obtained.

The above is the detailed content of The difference between jquery this and $(this). For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn