I am reading JavaScript and JQuery, The Missing Manual
and they start of with this Snippet :
$(document).ready(function(){});
I know that function(){} is an anonymous function, and that document is an object with properties I can set / read, and that ready() is a JQuery function defined in the library, but I don't know what the rest of the syntax is for and it is not explained in the book.
Particularly,
$(document)
Can someone explain what this does or point me to a link? Also, someone said that you can identify JQuery by this alone, is this true?
$(document) wraps a jQuery instance around the document object. ($ is just an alias for jQuery.) So the return value of $(document) is a jQuery instance, which has a ready function on it.
It is a synonym for the jquery() function:
http://api.jquery.com/jQuery/
$ is a shortcut for the JQuery object. All methods in the jQuery library are part of the jQuery object.
$(selector) is the same as writing 'jQuery(selector)`
the $ before jquery statements is to differentiate between standard javascript and jquery. But other frameworks can use the dollar sign as well, so sometimes you will see jQuery(document) so as not to conflict. It can also be set to anything really, even $jq, etc. All it is doing is telling your code to use the framework functions instead of standard javascript.
The $ is a synonym for jQuery and what that does is described here: http://api.jquery.com/jQuery/
$ is an alias (short-hand) for the variable jQuery which is the blanket object that stores all jQuery functions.
$(document) is taking your current window.document (the window. part is often omitted when accessing window properties) and passing it to the jQuery constructor $(), and then attaching an event handler to the ready event, which executes the anonymous function passed as a callback.
$ is just a selector for jquery. You're pretty much saying that what follows after "$" is part of the jquery library.
Be careful because some other javascript libraries use that same selector.
Related
I have been going through some jQuery functionality.
Can any one please give me some idea of what the difference is between the use of $ and $$?
$ and $$ will work on any web page (if jQuery is not included also) on Google Chrome, Firefox and Safari browsers where $ returns first element of selector passed.
Here,
$ is document.querySelector
$$ is document.querySelectorAll
They are native functions of Google Chrome and Firefox browsers, you can see $ and $$ definition in Safari as well.
Open Google in any of Google Chrome, Firefox or Safari, and open Developer Tools to check these results... (why Google, because they won't use jQuery or Moo tools)
$('div'); // returns first DIV in DOM
$$('div'); // returns all DIVs in DOM
On jQuery documentation there is no $$ statement. jQuery has a default selector with $ character. Maybe this script uses another javascript package and has some conflicts with jQuery. In this case, you can use jquery.NoConflict to avoid this kind of problem, and set another jquery selector.
Something like:
var s = jQuery.noConflict();
// something with new jQuery selector
s("div p").hide();
// something with another library using $()
$("content").style.display = 'none';
If your code has somethig like to avoid conflicts: var $$ = jquery.noConfict();, you can use $$ as a jquery selector:
$$("#element").method();
See more on the documentation:
http://api.jquery.com/jQuery.noConflict/
jQuery is an object provided by jQuery. $ is another, which is just an alias to jQuery.
$$ is not provided by jQuery. It's provided by other libraries, such as Mootools or Prototype.js.
More importantly, $$ is also provided in the console of modern browsers as an alias to document.querySelectorAll. Except if it's overridden by another library. $ is also provided in the same way, as an alias to document.querySelector.
See this answer for more information.
$ AND $$ are mootools selectors and $ is also a jquery selector.
see jquery noconflict-mode
All jQuery functionality is encapsulated in the jQuery object, which is also accessible as $. The code you are examining might be using a different library (eg. Mootools), that uses a $$ function.
$$ has no significant in Jquery, however it is used within the prototype framework.
Prototype $$
Also check that this is not a previous version of Jquery assigned using noConflict.
Search the code for var $$ to find a possible assignment of an older jquery version.
var $$ = jquery.noConfict();
Short Anser: $$ is NOT defined in jQuery specifications, in addition the notation of single $( ) - sign means you encapsulate things inside bracket to a jQuery object.
Thus, alias $ is an abbreviation to say - i am using jQuery library, where as double $$ is not defined in a standard jQuery library.
Was having trouble a few weeks ago getting jquery to run in firebug (esp on drupal sites). Apparently the issue was that Drupal was grabbing the $ variable, so I got a little namespace snippet (function($)...(Jquery)); that reclaimed the $. I have been using the namespace in firebug but geting inconsistent results, especially when mixing pure javascript and Jquery within the namespace. I understand that all Jquery is javascript and they work together, but looking at samples I see some weird variations in the way people deploy this namespace. As a general question but also specifically within Firebug context, is there any need to place javascript in any particular relation to namespaced Jquery (inside the namespace, function calls inside, function out, or any other convention)?
Thanks
If you meant preventing the $ from being reclaimed, there is no convention but there is a way. other frameworks also use the $ name. anything declared later to use $ will take over $. however, you can prevent it or get around it.
jQuery offers a lot of ways to prevent it via its noConflict() method. but my preferred method is just wrap them in a function. jQuery also uses the jQuery namespace. $ is a shorthand alias, a very common one too. so functions like $.each() is also jQuery.each(). what crazy framework uses jQuery as its namespace anyway?
an example of wrapping in a function is like this:
(function($){
//inside here, "$" is jQuery
}(jQuery)); //pass "jQuery"
I have 2 js on a single page. In one of the js I am doing var jQuery = $.noConflict(true); and after that using all the jQuery methods using jQuery object, like jQuery("#div").hide();
In another js, I am using the traditional $ variable & accessing the jQuery methods as $("#div").hide();
When on a page I use either of the 2 js', things work fine. However, when I include both, the $ in the second js seems to be overwritten by jQuery. for example, in js 2 I can no longer do $("#div").hide() but if I use jQuery instead of $, it works fine - jQuery("#div").hide();!
Why am I experimenting this is because the first div will be distributed to different websites as a plugin, and the second js could be the Jquery written by that website developer.
Please help me figure out where am I going wrong..
Thanks.
You're using noConflict, which releases jQuery's hold on $. Doesn't matter if it's in separate scripts, since it's the same global environment.
In the script where you want to use $, define that variable inside your .ready() handler.
jQuery(function($) {
$('foo').bar();
});
The easiest way to solve this is to use a pattern that plugin authors employ.
(function($) {
// Use $ safely within the function
})(jQuery); // Passes in jQuery object
This is function is created and invoked immediately, and at the same time allows you to pass a variable into the scope of the function. Using this, you can carry on referring to $ in your code and not worry about overwriting it or conflicting.
The jQuery documentation advises this pattern
Files do not have scope, you dereferenced $ with noConflict for your entire page. Anything
jQuery(function ($) {..}
I am trying to learn jQuery and came across some code that started like the above statement. What does that mean?
That is a shortcut for:
jQuery(document).ready(function($) {
// ...
});
It sets up an event handler for when the document is ready to have its DOM manipulated. It's good practice to initiate your jQuery code after the document is ready. The first parameter $ references the jQuery object so you can use $ in place of jQuery in your code.
I believe this allows you to abstract $ into an anonymous function. As a few different javascript libraries use the $ syntax you don't want to create conflicts. So instead you call jQuery using its explicit identifier jQuery and pass in $. Now you can use $ all you want inside the anonymous function and not need to worry about conflicting with other libraries.
Jacob is correct.
Other variations you will see along with jQuery(function($){..} are
$(document).ready(function(){...}
jQuery(document).ready(function(){...}
$(function(){...}
All wait until your DOM has fully loaded.
Passing a function to a call to jQuery() has the effect of executing that function when the dom is ready.
The function is passed a reference to jQuery as the first parameter. So, Setting the name of the arg in that function to $ allows you to use $ as shorthand for jQuery from within your function. $ is a global reference to jQuery by default, so you only need to specify $ as a parameter in your function if you are overriding $ elsewhere, for example by using jQuery.noconflict(). This is common practice for plugin developers, since they can't be guaranteed that $ has not been overridden by the plugin consumer.
I am trying to decipher a .js script and I am finding it filled with $ throughout? Is there any reason to use this? I'm pretty new to JavaScript.
I think you are reading a JavaScript library famously known as jQuery (or possibly another library). The $ is just a short form for a namespace or use as an identifier.
You can think of it like this jQuery('p') to select all the paragraphs on a page,
or for short form you can just write $('p').
Here is a link for jQuery tutorials/docs jQuery
Here is a list of standards section 7.6 describes it in detail ECMA Standard
A number of libraries have used $ as their primary symbol. It's nothing to do with JavaScript per se, but it's a short distinctive symbol and so libraries have tended to glom onto it. (You can start an identifier with $ in JavaScript, and identifiers can be one character long, so $ is a valid identifier, just like a or x.)
I know of at least three libraries that use $ for something:
jQuery - It's the all purpose function for jQuery, an alias of the jQuery function; more here.
Prototype - It's Prototype's replacement for document.getElementById, more here. Prototype also has $$, which is for looking things up via CSS selectors.
MooTools - Same use as Prototype (because MooTools is either "inspired by" or "forked from" Prototype, some years back, depending on who you ask), more here. And like Prototype, it has $$.
$ is a variable. A number of frameworks use it as a short hand for using it. Prototype and Jquery are the two big ones. This does not mean that the $ automatically is either one of those. It could be anything as anything in JavaScript can assign something to the $. This is something to be aware of, because when you start combining scripts from different sources, it's really easy for one to accidentally reassign a variable to something else.
Most likely it is a framework reference, but you'll have to read the code to be sure. At one point in time the $ was meant to be used to indicate that the code referenced by it was auto generated, but this is just a guideline.
if you're new to javascript, $() can look strange.
Try to think of it like
var $ = function(){
//do something
}
So the dollar sign is just the name of a variable like any other.
var myFunction = function(){
//do something
}
// this is exactly the same just a different name.
So the dollar sign has no special meaning in javascript.
Frameworks like to use it because you are using their functions so often, having to write e.g. jQuery() every time would be tedious. Having one character is nice and short.
I think they also have a preference for the $ symbol, purely because it is unusual so it is quickly distinguishable from other code.
A quick way to find out if it is jQuery is to do console.log(jQuery) if the console returns a string of code $() is jQuery. If you get undefined, it is something else.
Maybe you're reading jQuery code.
Because JavaScript lets you define variables which start with $ sign, or literally which are only $. For example, you can do:
var $ = "something";
alert($);
jQuery is a library built on JavaScript (the most popular at the time) and it has a global object to keep everything encapsulated. You access that global object using $.
The script is probably using a third party library such as Prototypejs or jQuery or he defined his own function $() which explain why the dollar sign appears so often in that script.
It's a jQuery function. That's what it is most probably. Might also be the Prototype library, or just a function that does something that's needed many times in the code, like getElementById etc
Without seeing the code, it sounds like the script you are looking at makes use of jQuery, as the $ is the default jQuery object.
Typically the $ will represent jQuery or another specific library (Moo Tools, etc.) . $ is the shortened form of referencing the jQuery object (or whatever library it was assigned). It makes the code much more readable and easy to use.
If you are just learning javascript, you will soon become very familiar with jQuery. :)
Either its jQuery or an old PHP habit by some javascript programmer :)
$ is only a function. It means you work with some javascript superstructure (framework).