Home > Web Front-end > JS Tutorial > body text

The difference between jquery this and $(this)

藏色散人
Release: 2021-01-08 17:03:14
Original
2331 people have browsed it

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提供的方法操作。
Copy after login

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);
}
Copy after login

Then, you can see at this time:

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

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);
        }
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template