Jquery & amp; js $ (this) & amp; this

Jquery & amp; js $ (this) & amp; this
Preface: when using jquery to operate JavaScript, I often don't understand this and $ (this ). Take the time to test it carefully and record it for reference when you forget it! $ (This) What is generated $ () What is generated? In fact, $ () = jquery (), that is, a jquery object is returned.

Question: we usually use $ () directly for convenience. In fact, this function omitting the context parameter $ (selector) = $ (selector, document ). if context is specified, you can specify context as a dom element set or jquery object.

According to the conclusion that $ () returns the jquery object, we can conclude that $ (this) gets a jquery object. we can print an object using the omnipotent alert () method:
Alert ($ ('# btn'); The displayed result is:
The red box of this figure shows an object. You don't need to consider it. This object is a jquery object. That is to say, we use $ ('# btn') to call jquery's methods and attributes. What does this mean? This, programmers all know that this indicates the object in which the context is located. this is naturally good, but what is this object? If getType is added to js, what is the returned value? In fact, getType is not required in js, because we have a omnipotent alert. Please take a look at the following code:

$ ('# Btn'). bind ("click", function (){

Alert (this );

Alert ($ (this ));

});

Based on our experience (because $ () generates jquery objects), this is naturally a jquery object. But let's look at the returned results: What is returned? Object HTMLInputElement: A great html object. Therefore, we usually report an error when using this. val () Directly or calling the method or attribute specific to jquery through this: Why? Ask! Of course, the html object does not contain attributes or methods. So why is calling this in the context of a jquery object returns an html object instead of a jquery object? After reading the jquery api documentation, it seems that jquery has not performed a special "processing" on this keyword. That is to say, this is in js, rather than being redefined by jquery. So... Of course, this is just my own idea. If you know more about it, you can leave a message to correct it. Let's take a look at the returned results of alert ($ (this); in the above Code. Naturally, it is jquery's object. It is no problem to call jquery's unique methods and attributes here. Conclusion:
This indicates that the current context object is an html object. You can call the attributes and methods of the html object.
$ (This) indicates that the context object is a jquery context object. You can call jquery methods and attribute values.

The difference between this and $ (this) in jQuery

 
 

  
  
$("#textbox").hover( 
  
  
 function() { 
  
  
 this.title = "Test"; 
  
  
 }, 
  
  
 fucntion() { 
  
  
 this.title = "OK”; 
  
  
 } 
  
  
); 
 
 

Here this is actually an Html element (textbox). textbox has the text attribute, so there is no problem in writing this.
However, if you change this to $ (this), this is not the case. Error -- Reports. This differs from $ (this.

 
 

  
  
Error Code： 
  
  
$("#textbox").hover( 
  
  
 function() { 
  
  
 $(this).title ＝ "Test"; 
  
  
 }, 
  
  
 function() { 
  
  
 $(this).title = "OK"; 
  
  
 } 
  
  
); 
 
 

$ (This) is a JQuery object, and the jQuery object does not have the title attribute. Therefore, this write is incorrect.

JQuery has the attr () method that can get/set the attributes of DOM objects, so the correct syntax should be as follows:

Correct code:

 
 

  
  
$("#textbox").hover( 
  
  
 function() { 
  
  
 $(this).attr(’title’, ‘Test’); 
  
  
 }, 
  
  
 function() { 
  
  
 $(this).attr(’title’, ‘OK’); 
  
  
 } 
  
  
); 
 
 

The advantage of using jQuery is that it includes operations on DOM objects in various browser versions, so it is a good choice to use $ (this) instead of this.

Next, let's look at an example of w3School:

<Script type = "text/javascript" src = "/jquery. js"> </script>

• ListItem 1-one strong tag


• ListItem2-
  Two strong tags


• List item 3


• List item 4


• List item 5

<Script>
$ ("Li"). click (function (){
Var $ li = $ (this ),
IsWithTwo = $ li. is (function (){
Return $ ('strong ', this). length = 2;
});
If (isWithTwo ){
$Li.css ("background-color", "green ");
} Else {
$Li.css ("background-color", "red ");
}
});
</Script>

Note the functions of $ ('strong ', this). length = 2:We usually use $ () directly for convenience. In fact, this function omitting the context parameter $ (selector) = $ (selector, document ). if context is specified, you can specify context as a dom element set or jquery object. We can understand the role of this line of code by removing this to view the effect. No analysis here!

The difference between this and $ (this) in jQuery is described here.