How does $(this) work in jQuery - javascript

How does the jQuery tag $(this) exactly work? I know how to use it, but how does jQuery know which element is 'active'? And what is the original Javascript tag for getting the current item, or is it jQuery only?

The this is a simple javascript (DOM) object,
$(this) will turn the object into a jQuery object.
jQuery doesn't need to 'know' what this is, it doesn't treat this in a special way, no other than myHeaderDiv in
var myHeaderDiv = document.getElementById('header');
$myHeaderDiv = $(myheaderDiv); //just a variable transformed into jQuery object, as with this.

this is context-dependent in jQuery (and JavaScript in general). It usually represents the current DOM element in a event handler, but is not a jQuery object.
$(this) is a jQuery object containing the current DOM element.

The expression $(this) is just a regular Javascript function call, equivalent to jQuery(this). The this value is defined by Javascript itself, and is not a jQuery invention.

Perhaps you should read about scope in JavaScript
http://www.digital-web.com/articles/scope_in_javascript/

Related

can I use ".attr()" function in javascript?

".getAttribute" is used in java script inject coding.
in java script function ".attr()" is used.
So can I use ".attr" value is used in java script injection coding ?
No. attr() is a function of jQuery (and some other Javascript libraries). It's not a native function of Javascript.
In jQuery, attr() should be called on a jQuery object or collection. It cannot be called against DOM Elements. As you have correctly identified, if you don't want to use a library, you'll need to use getAttribute().
The following examples show how to get the same information using both jQuery and Javascript:
Javascript:
var src = document.getElementById('myImg').getAttribute('src');
jQuery:
var src = $('#myImg').attr('src');
It also worth noting the difference in jQuery between attr() and prop(), for example:
attr( attribute ) Get the value of an attribute for the first element in the set of matched elements or set one or more attributes for every matched element.
prop( propertyName )Get the value of a property for the first element in the set of matched elements or set one or more properties for every matched element.
You can read more about the differences here > .prop() vs .attr()
You cannot cause it is JQuery
In pure Javascript use this (examples):
document.querySelector("a").getAttribute("href");
document.getElementById("My_img").getAttribute("width");

jQuery / JavaScript, why do I need to wrap variables in $() to use them?

Say I have a map on an array of elements. The callback function takes the index and the value at that position in the array.
If I wrap the array element that the callback receives in $(), it behaves as I expect. If I use it without wrapping it in $(), it gives an error.
var nonHiddenElements = $( "form :input" ).not(':hidden');
nonHiddenElements.map(function(index, element){
input_id = $(element).attr('id'); // this works
input_id = element.attr('id') ; // this gives an error
})
Can someone explain how this works.
Is this a jQuery quirk, or a JavScript thing?
What type of objects does my nonHiddenElements array contain exactly?
What is element that gets passed to the callback?
And mainly what is the $() doing?
You need to understand how jQuery actually works. I will try to explain it briefly.
$ is nothing but a normal javascript function. jQuery === $, is just a function with a fancy name. This function does a lot of different things, depending on what you pass in it. For example if you pass a string it will be treated as CSS selector and jQuery internals will try to find corresponding DOM elements. Or if you pass a string starting with < and ending with > jQuery will create a new DOM element by provided HTML string.
Now if you pass a DOM element or NodeCollection of DOM elements, it/they will be wrapped into jQuery instances so that they can have a jQuery prototype methods. There are many prototype methods jQuery offers. For example text, css, append, attr - those are all methods of jQuery prototype. They are defined basically like this (simplified):
jQuery.prototype.text = function() { ... }
Normal DOM elements don't have those convenient methods jQuery provides. And inside of methods like map or each if you check this value or element parameter like you do, you will see that they are actually not jQuery instances:
element instanceof jQuery // => false
and of course you can't use instance methods with not an instance.
So in order to use jQuery prototype methods you need have a jQuery instance, which you can obtain if you call jQuery function with DOM element passed in it:
$(element) instanceof jQuery // true
Javascript is a programming language.
jQuery is a JavaScript Library.
With jQuery:
$("some element")
In native JavaScript you would have to do something like this.
getElementById('elementByID')
Explained in detail here: https://developer.mozilla.org/en-US/docs/Web/API/document.getElementById
MDN is a great resource for beginners. https://developer.mozilla.org/en-US/docs/Web/JavaScript

Doesn't jQuery('#id') do the same thing as document.getElementById('#id') in javascript? [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
document.getElementById vs jQuery
I have a function that will take all the spans with a certain class ("jobStatus") and remove an additional class from it ("orange"). I call the function from a SELECT onchange (onchange="chgJobstatus(this);"). It's working great.
However, I'm trying to get it to run on page load, based upon the selected value (this is server-side dynamically generated.)
This will work:
$(document).ready(function(){
chgJobstatus(document.getElementById("chgStatus"));
});
This will NOT work:
$(document).ready(function(){
chgJobstatus(jQuery('#chgStatus'));
});
Doesn't jQuery('#id') do the same thing as document.getElementById('#id') ??
Regarding selecting the element, yes, but jQuery selectors return jQuery objects and getElementById returns a DOM Element object, you can get the DOM Element using [index] or get(index) method:
chgJobstatus(jQuery('#chgStatus')[0]);
This will surely work. jQuery(selector) always return a jQuery object (jQuery(selector) instanceof jQuery is true ) . but you can get native dom element using .get or simply using array like syntax as below.
$(document).ready(function(){
chgJobstatus(jQuery('#chgStatus')[0]);
});
jQuery('#id') - returns a jQuery Object
document.getElementById('#id') - returns a HTML DOM Object
jQuery('#id').get(0); OR jQuery('#id')[0]; - returns a HTML DOM Object
By using jquery it will allows you to access jquery functions. if you read below links you will get an good idea.
document.getElementById vs jQuery
jQuery $() vs. document.getElementByID — differences
getelementbyid-vs-jquery-id
jquery-sharp-vs-getelementbyid
getelementbyid-vs-jquery-id
On more important thing you should know is that jQuery returns a reference to a jQuery object, not the object itself.
No, jQuery('#id') returns a jquery object, with additional functions and properties attached to it.
I'm not entirely sure what you're trying to do, but something like this could substitute all the javascript you've described.
$("#chgStatus")
.bind("change", function() {
$(".jobStatus").removeClass("orange");
}).trigger("change");

How to Load an object to a jQuery object

In my javascript, I have a function which will return an element present in the HTML page .i have this stored in a variable and now want to do some kind of traversal in that using jquery methods like parent/fadeIn/fadeOut etc.
How can i do that.? My current code which returns the object is
var currentObject= GetThatObject();
Now i really want to play with this object like what we do with a typical jQuery object which we get like
var curObj=$("#tatElement")
You just do this:
var curObj = $(currentObject);
jQuery can take not only selector strings but HTML elements as arguments as well. It will just take that element, wrap it in its jQuery object and you can then use it the same way as if you had used a selector string. (It is actually a little more efficient because jQuery doesn't have to parse the selector and find the element).

Jquery object selector as string

Is there any way to get the selector for a jquery object
e.g in firefox I see a jquery object as [p.basket]
but there seems to be no way in jquery that I can get this selector?
Is there any way?
Phil
If a jQuery object was created with a selector string, then you can just look at its "selector" property. However, not all jQuery objects are so constructed. Thus you should make sure to check for null.
edit — if your jQuery object was not constructed with a selector, then there simply is not a selector available. The library does not have any built-in way of creating a selector that matches the set of elements it contains. You could do that yourself, though it's not clear why it would be useful; once you have a reference to the DOM elements (which you do if the jQuery object isn't empty), isn't that more useful?
Is the selector property what you want?

Categories