What Does "This" Mean in Jquery

jquery: what does $(this) exactly mean?

this is a reference to the member that invokes the current function...

then you can wrap it in the jquery function $() to select it just like you would another selector.

So setInterval calls a anonymous function so it is not invoked by a referencable member, so it defaults to the window object.

save the this context in a variable and then use it internally like this...

$(document).ready(function(){
    $("#round").click(function(){
        var clicked = this;   //<----store the click context outside setInterval
        setInterval(function(){
            $(clicked).animate(  //<----------use it here
                {height: 250,
                width: 150,
                top:150,
                left: 425},
                {duration: 300}
                ).
            animate(
                {height: 200,
                width: 200,
                top:200,
                left: 400},
                {duration: 300}
            );
        }, 0);
    });
});

what does $(this) mean in jquery

$(this)

converts the DOM element returned by this to a jQuery object, from which, you can continue using jQuery on.

What does the $ sign mean in jQuery or JavaScript?

In JavaScript it has no special significance (no more than a or Q anyway). It is just an uninformative variable name.

In jQuery the variable is assigned a copy of the jQuery function. This function is heavily overloaded and means half a dozen different things depending on what arguments it is passed. In this particular example you are passing it a string that contains a selector, so the function means "Create a jQuery object containing the element with the id Text".

What does this mean in jQuery?

this in JavaScript is very special and powerful. It can mean just about anything. I cover some of it here and here, but it's really worth finding a good tutorial on JavaScript and spending some time with it.

Let's look at jQuery's use of it first, then talk about it more generally in JavaScript (a bit).

In jQuery, specifically

In code written with jQuery, this usually refers to the DOM element that's the subject of the function being called (for instance, in an event callback).

Example jQuery event callback (what this is is covered in the .bind docs):

$("div").click(function() {
    // Here, `this` will be the DOM element for the div that was clicked,
    // so you could (for instance) set its foreground color:
    this.style.color = "red";

    // You'll frequently see $(this) used to wrap a jQuery object around the
    // element, because jQuery makes lots of things a lot simpler. You might
    // hide the element, for example:
    $(this).hide();
});

Similarly, various jQuery functions that act on all of the elements matched by the current jQuery selector can optionally accept a function, and when that function gets called, this is again the DOM element in question — for instance, the html function allows this:

// Find all divs inside the `foo` element, and set
// their content to their CSS class name(s)
// (Okay, so it's a hokey example)
$("#foo div").html(function() {
    return this.className;
});

Another place jQuery uses this is in the callback on jQuery.each:

var a = ["one", "two", "three"];
jQuery.each(a, function() {
    alert(this);
});

...which will alert "one", then "two", then "three". As you can see, this is a totally different usage of this.

(Confusingly, jQuery has two functions called each, the one above which is on the jQuery/$ function itself and always called that way [jQuery.each(...) or $.each(...)], and a different one on jQuery instances [objects] rather than the jQuery/$ function iself. Here are the docs for the other one, I don't discuss the other one in this answer because it uses this the same way html and event callback do, and I wanted to show a different use of this by jQuery.)

Generically in JavaScript

this refers to an object. Update: As of ES5's strict mode, that's no longer true, this can have any value. The value of this within any given function call is determined by how the function is called (not where the function is defined, as in languages like C# or Java). The most common way to set up this when calling a function is by calling the function via a property on the object:

var obj = {};
obj.foo = function() {
    alert(this.firstName);
};
obj.firstName = "Fred";
obj.foo(); // alerts "Fred"

There, because we called foo via a property on obj, this was set to obj for the duration of the call. But don't get the impression that foo is in any way married to obj, this works just fine:

var obj = {};
obj.foo = function() {
    alert(this.firstName);
};
obj.firstName = "Fred";
obj.foo(); // alerts "Fred"

var differentObj = {};
differentObj.firstName = "Barney";
differentObj.bar = obj.foo; // Not *calling* it, just getting a reference to it
differentObj.bar(); // alerts "Barney"

In fact, foo isn't intrinsically tied to any object at all:

var f = obj.foo; // Not *calling* it, just getting a reference to it
f(); // Probably alerts "undefined"

There, since we didn't call f via an object property, this wasn't explicitly set. When this isn't explicitly set, it defaults to the global object (which is window in browsers). window probably doesn't have a property firstName, and so we got "undefined" in our alert.

There are other ways to call functions and set what this is: By using the function's .call and .apply functions:

function foo(arg1, arg2) {
    alert(this.firstName);
    alert(arg1);
    alert(arg2);
}

var obj = {firstName: "Wilma"};
foo.call(obj, 42, 27); // alerts "Wilma", "42", and "27"

call sets this to the first argument you give it, and then passes along any other arguments you give it to the function it's calling.

apply does exactly the same thing, but you give it the arguments for the function as an array instead of individually:

var obj = {firstName: "Wilma"};
var a   = [42, 27];
foo.apply(obj, a); // alerts "Wilma", "42", and "27"
//             ^-- Note this is one argument, an array of arguments for `foo`

Again, though, there's a lot more to explore about this in JavaScript. The concept is powerful, a bit deceptive if you're used to how some other languages do it (and not if you're used to some others), and worth knowing.

Here are some examples of this not referring to an object in ES5's strict mode:

(function() {
    "use strict";   // Strict mode

    test("direct");
    test.call(5, "with 5");
    test.call(true, "with true");
    test.call("hi", "with 'hi'");

    function test(msg) {
        console.log("[Strict] " + msg + "; typeof this = " + typeof this);
    }
})();

Output:

[Strict] direct; typeof this = undefined
[Strict] with 5; typeof this = number
[Strict] with true; typeof this = boolean
[Strict] with 'hi'; typeof this = string

Whereas in loose mode, all of those would have said typeof this = object; live copy.

what is the meaning of the word this in Jquery script

It refers to each of p tags in your selector $("p") that gets clicked. For example, you can see html of each p tag you clicked on like this:

$("p").click(function(){
   alert($(this).html());
});

Notice also that $(this) and this in above context mean different things. The latter this refers to DOM element itself which won't have jQuery methods/properties available to it, for example:

$("p").click(function(){
   alert(this.html());
});

Won't work because html() won't be available because this refers to DOM element in there. So if you want to use jQuery methods, use $(this) instead.

What does this operator ~= mean in jquery?

When the equal sign in an attribute selector is preceded by a tilde (
~ ), that means that the selector will match if the value listed is
any one of the space-separated values of the given attribute. So the
first rule's selector, *[class~="urgent"] , will match any of the
following elements:

<p class="very urgent really">
<table class="urgent">
<ul class="not urgent">
<pre class="not terribly urgent but still worth knowing">

Source: http://meyerweb.com/eric/articles/webrev/200008b.html

---

jQuery documentation for the tilde selector can be found here:

http://api.jquery.com/attribute-contains-word-selector/

What does ++ mean in jQuery/JavaScript?

It's to increment.

var i = 1;
i++; // i becomes 2.

What is the meaning of symbol $ in jQuery?

The jQuery object :)

From the jQuery documentation:

By default, jQuery uses "$" as a shortcut for "jQuery"

So, using $("#id") or jQuery("#id") is the same.

What does this line of JQuery code mean?

This construct is based on the bracket notation to access properties. It allows here a dynamic selection of the method to apply (show or hide).

logoSH is either "show" or "hide".

Which means your line is either

$('#mini-logo')["show"](300); or $('#mini-logo')["hide"](300);

which you can also read as

$('#mini-logo').show(300); or $('#mini-logo').hide(300);

This is a common construct, that you may also find with a ternary operator:

$('#mini-logo')[someBool ? "show" : "hide"](300);

Note: were there not the duration, you could have use the toggle function which takes a boolean as argument.

---

Related Topics