What do this and $(this) mean inside a widget method like create?
For example, Having a widget like this,
$.widget("sample.CustomWidget", {
options:{
},
_create: function(){
// Here what do this and $(this) mean
}
});
Thanks in advance,
-Raja.
It basically depends on the caller of the _create method... anyway:
this refers to the 'owner' of the Function
$(this) is the above object wrapped into a jQuery object
see also:
http://www.quirksmode.org/js/this.html
http://www.bennadel.com/blog/1838-Wrapping-The-Window-Object-In-A-jQuery-Wrapper.htm
Within an event handler of a standard jQuery UI-style widget, this will refer to the DOM element related to the event, $(this) creates a jQuery wrapper around this, and the DOM element (again) is available as this.
But when your widget functions are called, typically this refers to the jQuery object on which the function was called, not a specific DOM element. You then operate on the matched set of elements within that jQuery object.
In a method integrated with jQuery:
$.fn.yourFunction = function() {
// ...
};
the value of this is the jQuery object itself. There's no reason, therefore, to wrap this with another call to jQuery, though it doesn't hurt.
In a callback to an event handler:
$('#myButton').click(function() {
// ...
});
the value of this is the target DOM element of the event, or the target object if the event is triggered on something other than the actual DOM.
In other jQuery callback situations, like .each() for example, the value of this is generally determined by the nature of the jQuery object.
The upshot of all that is that inside an integrated-with-jQuery function (first sample), you generally don't wrap this in another call to jQuery; it's already a jQuery object. In all other cases, if you want to use this with jQuery facilities, you do have to wrap it.
In that context, "this" is the actual JQuery widget object, which allows you to query things such as widgetName, widgetEventPrefix etc, whereas "$(this)" is just the JQuery object for "this", which you can't get the widget properties using.
this represents the contructor you are in. For example in a click event, the dom element being clicked, in a function the constructor of function;
function test{
this.b = "hello jupiter";
}
var a = new test();
alert(a.b);
Acctually there is nothing special with $(this). There is a function called $ and "this" is it's parameter, like alert;
$(this);
//just like
alert("some string);
Related
I am currently working through this tutorial: Getting Started with jQuery
For the two examples below:
$("#orderedlist").find("li").each(function (i) {
$(this).append(" BAM! " + i);
});
$("#reset").click(function () {
$("form").each(function () {
this.reset();
});
});
Notice in the first example, we use $(this) to append some text inside of each li element. In the second example we use this directly when resetting the form.
$(this) seems to be used a lot more often than this.
My guess is in the first example, $() is converting each li element into a jQuery object which understands the append() function whereas in the second example reset() can be called directly on the form.
Basically we need $() for special jQuery-only functions.
Is this correct?
Yes you only need $() when you're using jQuery. If you want jQuery's help to do DOM things just keep this in mind.
$(this)[0] === this
Basically every time you get a set of elements back jQuery turns it into a jQuery object. If you know you only have one result, it's going to be in the first element.
$("#myDiv")[0] === document.getElementById("myDiv");
And so on...
$() is the jQuery constructor function.
this is a reference to the DOM element of invocation.
So basically, in $(this), you are just passing the this in $() as a parameter so that you could call jQuery methods and functions.
Yes, you need $(this) for jQuery functions, but when you want to access basic javascript methods of the element that don't use jQuery, you can just use this.
When using jQuery, it is advised to use $(this) usually. But if you know (you should learn and know) the difference, sometimes it is more convenient and quicker to use just this. For instance:
$(".myCheckboxes").change(function(){
if(this.checked)
alert("checked");
});
is easier and purer than
$(".myCheckboxes").change(function(){
if($(this).is(":checked"))
alert("checked");
});
this is the element, $(this) is the jQuery object constructed with that element
$(".class").each(function(){
//the iterations current html element
//the classic JavaScript API is exposed here (such as .innerHTML and .appendChild)
var HTMLElement = this;
//the current HTML element is passed to the jQuery constructor
//the jQuery API is exposed here (such as .html() and .append())
var jQueryObject = $(this);
});
A deeper look
thisMDN is contained in an execution context
The scope refers to the current Execution ContextECMA. In order to understand this, it is important to understand the way execution contexts operate in JavaScript.
execution contexts bind this
When control enters an execution context (code is being executed in that scope) the environment for variables are setup (Lexical and Variable Environments - essentially this sets up an area for variables to enter which were already accessible, and an area for local variables to be stored), and the binding of this occurs.
jQuery binds this
Execution contexts form a logical stack. The result is that contexts deeper in the stack have access to previous variables, but their bindings may have been altered. Every time jQuery calls a callback function, it alters the this binding by using applyMDN.
callback.apply( obj[ i ] )//where obj[i] is the current element
The result of calling apply is that inside of jQuery callback functions, this refers to the current element being used by the callback function.
For example, in .each, the callback function commonly used allows for .each(function(index,element){/*scope*/}). In that scope, this == element is true.
jQuery callbacks use the apply function to bind the function being called with the current element. This element comes from the jQuery object's element array. Each jQuery object constructed contains an array of elements which match the selectorjQuery API that was used to instantiate the jQuery object.
$(selector) calls the jQuery function (remember that $ is a reference to jQuery, code: window.jQuery = window.$ = jQuery;). Internally, the jQuery function instantiates a function object. So while it may not be immediately obvious, using $() internally uses new jQuery(). Part of the construction of this jQuery object is to find all matches of the selector. The constructor will also accept html strings and elements. When you pass this to the jQuery constructor, you are passing the current element for a jQuery object to be constructed with. The jQuery object then contains an array-like structure of the DOM elements matching the selector (or just the single element in the case of this).
Once the jQuery object is constructed, the jQuery API is now exposed. When a jQuery api function is called, it will internally iterate over this array-like structure. For each item in the array, it calls the callback function for the api, binding the callback's this to the current element. This call can be seen in the code snippet above where obj is the array-like structure, and i is the iterator used for the position in the array of the current element.
Yeah, by using $(this), you enabled jQuery functionality for the object. By just using this, it only has generic Javascript functionality.
this reference a javascript object and $(this) used to encapsulate with jQuery.
Example =>
// Getting Name and modify css property of dom object through jQuery
var name = $(this).attr('name');
$(this).css('background-color','white')
// Getting form object and its data and work on..
this = document.getElementsByName("new_photo")[0]
formData = new FormData(this)
// Calling blur method on find input field with help of both as below
$(this).find('input[type=text]')[0].blur()
//Above is equivalent to
this = $(this).find('input[type=text]')[0]
this.blur()
//Find value of a text field with id "index-number"
this = document.getElementById("index-number");
this.value
or
this = $('#index-number');
$(this).val(); // Equivalent to $('#index-number').val()
$(this).css('color','#000000')
From what I understand, this inside of a function refers to the object invoking the function. So, for instance, in
myObj = { name : "Charlie", getType : function() { return typeof(this); } };
console.log(myObj.getType());
the object invoking the function getType is myObj and therefore typeof(this) is typeof(myObj).
Why, then, do I always see $(this) inside jQuery functions? For instance, in
$('.not-taller-than-50-pixels').each(function()
{
if ($(this).height() > 50) $(this).height(50);
});
doesn't $('.not-taller-than-50-pixels') return an array of jQuery objects and so inside the each the invoking function is a jQuery object and so this would refer to that jQuery object and I can simply write if (this.height() > 50) this.height(50); ???
From what I understand, this inside of a function refers to the object invoking the function.
that is correct, if the function is being called as a property of that object. However, in your case, your jQuery collection isn't invoking the function as a property of the jQuery collection, instead it's invoking the function using either .apply or .call to set its context to the element currently being iterated over.
https://github.com/jquery/jquery/blob/1.9.1/src/core.js#L628
It works similar to the way Array.prototype.forEach does. I assume that similarity is on purpose so that it seems familiar to most developers who are also familiar with native methods.
Here's an example more inline with your first snippet that WILL act the way you were expecting:
$.fn.alertHeight = function () {
alert(this.height());
}
$('body').alertHeight();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>Hello World!</p>
Because the function is stored on the prototype of $, and invoked as a property of a jQuery collection (which is an instance of $,) this refers to the jQuery collection, thus allowing us to use this.height() directly to get the height of the first element in the collection.
We use the $(this) because otherwise the this doesn't have a getter/setter method .height(). $() gives all selected elements access to jquery methods which plain javascript equivalents don't have. try console.log($(this), " VS ", this); remember that $() is a function.
doesn't $('.not-taller-than-50-pixels') return an array of jQuery
objects
No, $('.not-taller-than-50-pixels') does not return an array of JQuery objects. It returns a single JQuery object, which may wrap zero, one, or many DOM elements.
and so inside the each the invoking function is a jQuery
object and so this would refer to that jQuery object and I can simply
write if (this.height() > 50) this.height(50); ???
The callback function passed to .each() is invoked for each of the DOM elements wrapped by the JQuery object, and when the callback function is invoked, the DOM element is used as the context. That is, inside the callback function this will reference the DOM element, not a JQuery object.
This is stated in the JQuery documentation for the .each() function:
When called it iterates over the DOM elements that are part of the
jQuery object. Each time the callback runs, it is passed the current
loop iteration, beginning from 0. More importantly, the callback is
fired in the context of the current DOM element, so the keyword this
refers to the element.
I've done quite a lot of reading this past day to get a deeper understanding of this vs. $(this) and how JS determines this as it interprets, but I still can't figure out one detail of a plugIn I'm analyzing to deepen my knowledge:
$.fn.plugInName = function(options) {
return this.each(function() {
new $.plugInName(this,options);
});
};
Everything I've read indicates that although this.each() is used to call JQuery.prototype.each(), each object should be referred to as $(this) within the each() function, but the above uses regular ol' this, and I can't figure why. The $.plugInName declaration looks like this:
$.plugInName = function(el,options) {
...
}
Any insights anyone may have will be a big help.
EDIT: Here's the full source on GitHub
From MDN:
When a function is called as a method of an object, its this is set to
the object the method is called on.
When you call something like
$('#myDiv').plugInName()
the function is called as a method of the jQuery object $('#myDiv'). So, in this case, this already refers to a jQuery object, thus we don't need the extra $() wrapper.
A common case when we do need $() is when binding events.
$('#myDiv').on('click', function(){
alert('You clicked my div!');
});
The difference here is that the function is called not on $('#myDiv'), but the DOM element that it belongs to. So, here this is a DOM object, not a jQuery object.
Inside the callback function passed to each, this refers to the DOM element, it is not a jQuery object.. which is just what $.plugInName wants. It expects a DOM element.
Ive been starting to do javascript and jQuery recently and one thing I constantly find myself wondering is when to use "$" I know that indicates jQuery but it just doesn't always seem to be that way. I'll give some examples:
These are two scripts I've written:
First:
$(function() {
var newHTML = '<span style="font-size: 1.7em; text-align:center; line-height:50px;">Login</span>';
var oldHTML = '<span style="font-size: 32px; line-height: 18px;">+</span><span style="font-size: 14px; float: left;">Add to watchlist</span>';
// on mouse over
$("a.bid-addwatchlist").hover(
function () {
(this).innerHTML = newHTML;
},
// on mouse out
function () {
(this).innerHTML = oldHTML;
});
});
Second:
(function(){
$("#container a").click(function(){
if ($(this).html() == "Stop Listening")
{
$(this).html("Listen");
}
else if ($(this).html() == "Listen")
{
$(this).html("Stop Listening");
}
});
});
Why is it that in the first script it wouldn't work if I had a $ before "this" but the second script needed it?
Note: I did already look here: When to use $ and when not to
But that answer was not nearly comprehensive enough.
$(function(){
// ...
});
is equivalent to:
$(document).ready(function () {
// ...
});
This is because jQuery itself will execute the function on the ready event.
On the other hand the below creates an anonymous function that isn't executed:
(function(){
// ...
});
What you'd need instead is:
(function(){
// ...
})();
and that would execute the function immediately.
The first script doesn't actually need the $(this) unless you want to use jQuery functions as the second function one does.
Although it is good to note that the second function isn't executed as stated above unless you have other code that isn't shown here.
You use $ when you NEED a jQuery object or method in order to solve your problem. If you have a DOM element already and a direct DOM property will give you everything you need, then there's no reason to use jQuery. On the other hand, if you want to use a jQuery method that is unique to jQuery, then, of course, you create a jQuery object and call a method on it.
Example:
$("#myButton").blur(function() {
if (!this.value) {
this.value = "Enter name";
}
});
So, in the first line of this script, we use a jQuery object because it's easier to find an object in the page and assign an event handler.
Inside the handler, I'm using plain javascript and direct properties because there's no advantage to using jQuery. This could have been written this way:
$("#myButton").blur(function() {
if (!$(this).val()) {
$(this).val("Enter name");
}
});
But, there's no advantage to using jQuery inside this handler. It's just more code and more function calls.
So ... use it when you need it or it makes more readable or more reliable code. If none of those apply, don't use jQuery for that particular operation.
JQuery objects are meant to represent a DOM element. In the second example, you are using "$(this)" followed by a function call. This means that you can use only the interfaces support by the JQuery object.
In the first example, you are just using "this", which is a reference to the DOM element that owns the current execution context. DOM elements do not implement the JQuery interface (or else you wouldn't need to use JQuery at all!)
In other words, JQuery maintains enough information about a DOM element to be able to find it and perform manipulations on it. However, that does not mean that JQuery exposes an interface identical to a DOM elements.
EDIT: DOM stands for Document Object Model. Essentially, this is a model where all elements in the document are represented as objects (DOM elements). For example, you could use document.getElementById("anId") to retrieve a "DOM element" by the value of its ID attribute. This Document Object Model gives us the ability to manipulate and alter various parts of the document via scripting languages. Basically, the DOM is just a bunch of hierarchical objects that represent the elements on your page. These objects expose interfaces like "innerHTML"--Since JQuery objects are not DOM objects, they do not
look at jquery source code
jQuery.fn = jQuery.prototype = {
....
// HANDLE: $(expr, context)
// (which is just equivalent to: $(context).find(expr)
} else {
return this.constructor( context ).find( selector );
}
// HANDLE: $(function)
// Shortcut for document ready
} else if ( jQuery.isFunction( selector ) ) {
return rootjQuery.ready( selector );
}
if (selector.selector !== undefined) {
this.selector = selector.selector;
this.context = selector.context;
}
return jQuery.makeArray( selector, this );
....
}
$(handler) the handler will execute when DOM is loaded, if DOM already loaded, handler will execute immediately.
(handler) just declare an anonymous function, if you want to execute it you should use (handler)() as James Khoury's answer;
In the first case, this is a DOM element on which the function is called. You're using the innerHtml property directly.
In the second case, you're wrapping the DOM element in a jQuery wrapper and using jQuery methods such as .html() and you're therefore manipulating the element's innerHtml indirectly.
What does it mean?
The document.body in javascript is a direct reference to the DOM element representing the <body> portion of the page.
The $() part depends on how it is used. $ could be a variable name, and () after a variable or property name attempts to call a function stored in that variable or property.
So if you have:
var $ = function() { alert('howdy'); };
Then this:
$();
...will call that function, and trigger the alert.
Functions can accept arguments, so you could modify the function above to accept the document.body element as an argument, and alert() its innerHTML (for example);
// alerts the innerHTML of the element it receives
var $ = function( elem ) { alert( elem.innerHTML ); };
$( document.body ); // Passes the element when calling the $ function
$ is the name of a function. It is being passed the document's body DOM element. Typically $ is used to represent a JavaScript library. Most commonly jQuery. In jQuery it selects the body element.
it passes a DOMElement reference to the jQuery object/function so that a jQuery object is returned where [0] contains the reference and the context is of the body.
I think this has meaning in jquery or prototype (or other frameworks), not in pure javascript. $ is a function, in prototype it extends document.body with framework methods.
You're simply passing an argument to a function named "$"
function $(someargument){
....
}
In this case the argument being passed is document.body
Typically Jquery uses $, so in that case probably someone wanted to use Jquery functions directly on the body i.e. wrapping the body in jquery.
$(document.body).html("hi");
(probably not a good idea to do that, but you get the idea)
check out the SymbolHound results for "$(document.body)"