Getting started with jQuery
Each version of jQuery can be downloaded from https://code.jquery.com/jquery/ in both compressed (minified) and uncompressed formats.
|1.0||First stable release||2006-08-26|
|1.3||Sizzle introduced into core||2009-01-14|
|1.5||Deferred callback management, ajax module rewrite||2011-01-31|
|1.6||Significant performance gains in the ||2011-05-03|
|1.7||New Event APIs: ||2011-11-03|
|1.8||Sizzle rewritten, improved animations and ||2012-08-09|
|1.9||Removal of deprecated interfaces and code cleanup||2013-01-15|
|1.10||Incorporated bug fixes and differences reported from both the 1.9 and 2.0 beta cycles||2013-05-24|
|2.0||Dropped IE 6–8 support for performance improvements and reduction in size||2013-04-18|
|3.0||Massive speedups for some jQuery custom selectors||2016-06-09|
|3.1||No More Silent Errors||2016-07-07|
Create a file
hello.html with the following content:
Open this file in a web browser. As a result you will see a page with the text:
Explanation of code
Loads the jQuery library from the jQuery CDN:
This introduces the
$global variable, an alias for the
jQueryfunction and namespace.
Be aware that one of the most common mistakes made when including jQuery is failing to load the library BEFORE any other scripts or libraries that may depend on or make use of it.
Once the DOM is ready, jQuery executes the callback function shown above. Inside of our function, there is only one call which does 2 main things:
Gets the element with the
idattribute equal to
#hello). Using a selector as the passed argument is the core of jQuery's functionality and naming; the entire library essentially evolved from extending document.querySelectorAllMDN.
text()inside the selected element to
For more refer to the jQuery - Documentation page.
Avoiding namespace collisions
Libraries other than jQuery may also use
$ as an alias. This can cause interference between those libraries and jQuery.
$ for use with other libraries:
After calling this function,
$ is no longer an alias for
jQuery. However, you can still use the variable
jQuery itself to access jQuery functions:
Optionally, you can assign a different variable as an alias for jQuery:
Conversely, to prevent other libraries from interfering with jQuery, you can wrap your jQuery code in an immediately invoked function expression (IIFE) and pass in
jQuery as the argument:
Inside this IIFE,
$ is an alias for jQuery only.
Another simple way to secure jQuery's
$ alias and make sure DOM is ready:
$no longer refers to jQuery, while the variable
var jQuery2 = jQuery.noConflict()-
$no longer refers to jQuery, while the variable
jQuerydoes and so does the variable
Now, there exists a third scenario - What if we want jQuery to be available only in
var jQuery2 = jQuery.noConflict(true)
This results in neither
jQuery referring to jQuery.
This is useful when multiple versions of jQuery are to be loaded onto the same page.
Include script tag in head of HTML page
Now, copy the source of the version of jQuery, you want to load. Suppose, you want to load jQuery 2.X, click uncompressed or minified tag which will show you something like this:
Copy the full code (or click on the copy icon) and paste it in the
<body> of your html.
async attribute. Here is a demonstration:
jQuery Namespace ("jQuery" and "$")
jQuery is the starting point for writing any jQuery code. It can be used as a function
jQuery(...) or a variable
$ is an alias for
jQuery and the two can usually be interchanged for each other (except where
jQuery.noConflict(); has been used - see Avoiding namespace collisions).
Assuming we have this snippet of HTML -
We might want to use jQuery to add some text content to this div. To do this we could use the jQuery
text() function. This could be written using either
$. i.e. -
Both will result in the same final HTML -
$ is more concise than
jQuery it is the generally the preferred method of writing jQuery code.
jQuery uses CSS selectors and in the example above an ID selector was used. For more information on selectors in jQuery see types of selectors.
Loading jQuery via console on a page that does not have it.
Sometimes one has to work with pages that are not using
jQuery while most developers are used to have
In such situations one can use
Chrome Developer Tools console (F12) to manually add
jQuery on a loaded page by running following:
Version you want might differ from above(
1.12.4) you can get the link for one you need here.
Loading namespaced jQuery plugins
Typically when loading plugins, make sure to always include the plugin after jQuery.
If you must use more than one version of jQuery, then make sure to load the plugin(s) after the required version of jQuery followed by code to set
jQuery.noConflict(true); then load the next version of jQuery and its associated plugin(s):
Now when initializing the plugins, you'll need to use the associated jQuery version
It is possible to only use one document ready function to initialize both plugins, but to avoid confusion and problems with any extra jQuery code inside the document ready function, it would be better to keep the references separate.
The jQuery Object
Every time jQuery is called, by using
jQuery(), internally it is creating a
new instance of
jQuery. This is the source code which shows the new instance:
Internally jQuery refers to its prototype as
.fn, and the style used here of internally instantiating a jQuery object allows for that prototype to be exposed without the explicit use of
new by the caller.
In addition to setting up an instance (which is how the jQuery API, such as
filter, etc. is exposed), internally jQuery will also create an array-like structure to match the result of the selector (provided that something other than nothing,
null, or similar was passed as the argument). In the case of a single item, this array-like structure will hold only that item.
A simple demonstration would be to find an element with an id, and then access the jQuery object to return the underlying DOM element (this will also work when multiple elements are matched or present).