I'm trying to understand why something works the way it does in jQuery.
When I want to apply a jQuery extension, for example datatables, I run the command:
$("#some_id").datatables(.. parameters ..);
I don't know why this works, obviously the DOM element didn't have a method datatables() beforehand.
Thanks!
$("#some_id") does not return a HTML DOM element, it returns a JQuery object wrapping it.
This JQuery object does have the datatables method.
The reason for that is because you are not making this call on DOM element - you are making it on jQuery object that stores the information on the DOM objects it should influence.
And the reason .datatables() is available is that some plugin (probably DataTables) made it accessible in the way similar to this:
jQuery.fn.my_foo_func = function(){
console.log(jQuery(this));
};
If you apply the above, you will be able to do something like that:
$("#some_id").my_foo_func();
which will pass to the console the jQuery object(s) on which you invoked it.
Is it clear enough?
Once you call $("#some_id") you no longer have a DOM object but a jQuery object.
The DOM object is reachable with $("#some_id")[0].
You installed a plugin which added a method, .datatables(), to the jQuery() object, often abbreviated as $(). If you're interested in creating your own jQuery() object methods, here's a Google search to get you started.
Related
I was looking at this question: The preferred way of creating a new element with jQuery
In it, they mention these two methods of using jquery:
Either:
var div = $("<div></div>");
$("#box").append(div);
Or:
$("#box").append("<div></div>");
I'm looking at this, and noticing that if you put actual HTML in the $ function, it acts like you are creating elements in memory. But if you use an HTML selector, it's referring to elements on the document? At least that's my interpretation. I'd like to find all the ways i can use the $ function, but when I search the site, I don't know how to find it.
Can someone list all the ways I can use $, and if possible, links to the official documentation?
$() is a shortcut for the jQuery() function, and you can find the documentation for it here: https://api.jquery.com/jQuery/
Multiple argument types are accepted, including selector, element, elementArray, object, and callback types. From the docs:
In chrome console, i am able to inject a js like below
$("#pageForm").window('open');
And then the DIV form will pop up, however, if i change it to below
document.querySelector("div#pageForm").window('open');
It will return error: Uncaught TypeError: document.querySelector(...).window is not a function
at :1:41
Am I doing wrong in locating an element ?
Thanks
The window method you're calling - whatever that is - is a method that is provided to jQuery by a plugin you're using. It doesn't seem as though jQuery has a window method out of the box. Because you're using a jQuery plugin you need to locate your element using jQuery instead of a query selector.
that $ (dollar sign) you use is jQuery. (It may not be exactly every-day jQuery, it might be something chrome made up for pages that have not jQuery)
there is a difference between the result of $('<some_selector>') & document.querySelector('<some_selector>'); the first one returns a javascript object, which is a wrapper around the DOM Node found in the HTML. this wrapper object has some methods on it (including height(), width(), show(), window(), etc...) which may be added by jQuery or it's plugins (as suggested by Dwight). But the second way (document.querySelector) returns a DOMNode. it is a regular DOM Node and no! it has not a window() method on it
Yes, I agree with answer above. It seems you correctly select the element. However, window property does not belong js out of the box. Its gotta be a jquery plugin so that you can use with jquery. Another function made available to jquery.
You could simply wrap the queryselctor with $
$(document.querySelector("div#pageForm")).window('open');
Is it possible to call an jQuery function on newly matched items automatically?
For example I have the following code:
$(document).ready(function(){
$('[draggable]').draggable();
});
This adds the 'draggable' to each element which matches [draggable] however when further along the road new elements with the attribute 'draggable' are added those are not getting the 'draggable()' function getting called on them.
Is it possible to monitor the DOM or something and also call this method on each new dom item which matches the selector?
I know there is something like this for 'click' events and such (the jquery delegate method) but as far as I know I can't seem to use that for this case.
Check "Mutation Events" there is an event called DOMNodeInserted maybe it helps you
by the way, check: JQuery - use element with DOMNodeInserted
You can use the arrive.js library that I developed for the exact same purpose (it uses MutationObserver internally). Usage:
document.arrive('[draggable]', function(){
// 'this' refers to the newly created element
$(this).draggable();
});
there was ".live()" for jQuery, but i see it's deprecated?!
don't get the transformation from ".live()" to the new ".on()"-method currently, but take a look # yourself and maybe ask in their forum...
this should be the right way to do...
http://api.jquery.com/live/
.on() is what you need if you are running jQuery 1.7 or later. It will run on elements as they are added to the page, as well as those already in place when it's called. If you're using an earlier version, take a look at the .live() method, which has since been deprecated but has the same functionality with added elements.
Depending on which version of jQuery you're using, look into the .on() method. If I understand what you're looking for here, it should meet your needs.
The equivalent in previous versions of the framework was .live().
I've looked at some js/jquery code and I saw this line here:
$(this).
How can one find out what methods to call on this thing. Is there something similar to javadocs for js?
Is this code in js or is it jquery?
Note: this might be of relevance to those who reply, I write backend code and never done front end (not more than simple html)
The $ method is just an alias for the jQuery method. It will wrap the element (or object) and expose the methods available to the framework. Many other javascript libraries use $ as an alias as well.
In that case this refers to a DOM element, and $(this) refers to that element turned into a jQuery set.
It then has all the usual jQuery functions
This is jQuery
$(this) is used to when you want to operate on the selected selector
e.g.
If you want to get the value of the text box element with class "email" and this is how the code can be written
$('email').blur(function(){
var email = $(this).val();
});
Because of the limited info you provided, this could be anything. I would put a debug point on $(this). and create a watch on this to see what it is and what methods it exposes. Firebug is really good at showing this.
Following up on my question about jQuery.get() I was wondering if there is a list of DOM properties and methods that aren't available in jQuery that can only be accessible if you were working with the raw DOM object (i.e. $("#someID").get().scrollHeight; )
I haven't encountered a list but if one existed it would probably be quite lengthy. In addition to browser-specific (proprietary) properties there's a bunch of other less useful properties and methods not currently abstracted by jQuery. But then, I don't really see this as a problem, or even a valid point of discussion because jQuery IS JavaScript; if you need access to something beyond what jQuery provides then you can use get() or access a specified element within one of your "jQuery collections" like an array:
jQuery(elem)[0].someDOMProperty;
Plus jQuery provides absolutely no support for non-element nodes within the DOM. If, for whatever reason, you need direct access to comment nodes, text nodes etc. then you'll need to use the "raw" DOM.
I don't know of a compiled list of DOM operations/properties that are NOT available in jQuery (and a quick google search didn't turn anything up), but if you go to http://api.jquery.com/ you can see the entire API, and even download it as an Adobe AIR app in case you don't have internet when you need it.
No. JQuery is just JavaScript. If you can do it in JavaScript, you can do it in jQuery. Some properties and methods are overwritten in the context of a jQuery object and that's where you would want to us the get() method--to 'get' (i.e. access) the standard property/method.
That's really as complicated as it is.
Every attribute of every element is accessible through the attr() function. If you could do a document.getElementById() on that element and then access a property, you can also do it using the attr() function. However, some properties are accessed more easily in other ways when using jquery. For example, to see if an element is hidden or visible, you could do:
var isVisible=$("#el").is(":visible");
instead of using the attr() method. Similarly, you can find the selectedIndex of dropdowns and the text of the selected option, in easier ways than using the attr() method. This pdf outlines some of these easier approaches.
To access a css property, you are better off doing:
var fontWeight=$("#el").css("fontWeight");
rather than using get() or attr(). You can also set the css properties in this way, e.g:
$("#el").css("fontWeight","bold");
I could be wrong, but I think you can access any properties via the attr method.