How to Use jQuery With HTML?

jQuery() is a single global function defined by jQuery library. This function is so frequently used that the library also defines the global symbol $ as a shortcut for it.

This single global function with two names is the central query function for jQuery. For example, if you need to ask for the set of all <div> elements in a document, write the following code.

var divs=$("div");

The value returned by the jQuery() function represents a set of zero or more DOM elements is known as a jQuery object. jQuery objects define many methods for operating on the sets of elements they represent.

How to Obtain jQuery

jQuery library is free software. You can download if from http://www.jquery.com. Once you have download the code, you can include it in your web pages with a <script> element as given below.

<script src="jquery-1.11.2.min.js"></script>

Here the "min" in the filename indicates that this is the minimized version of the library, with unnecessary comments and whitespace removed, and internal identifiers replaced with shorter ones.

And another way to use jQuery in your web application is to allow a Content Distribution Network (CDN) to serve it using a URL like one of these.

Google CDN

https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js
https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js

Microsoft CDN

http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.3.min.js
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.2.min.js

jQuery CDN

http://code.jquery.com/jquery-2.1.3.min.js
http://code.jquery.com/jquery-1.11.2.min.js

If you use Google CDN, you can use "1.11" to get the latest release in the 1.11.x series, or just "1" to get the most current release less than 2.0.

The major advantage of loading jQuery from well-known URLs like these is that, because of jQuery's popularity, visitors to your website will likely already have a copy of the library in the browser's cache and no download will be necessary.

How to Use jQuery() Function

The jQuery() function is the most important one in the jQuery library. It is heavily overloaded, however, and there are four different ways you can invoke it.

The first, and the most common way to invoke $() is to pass a CSS selector to it. Which returns the set of elements from the current document that match the selector as given in the example below.

var id=$("#id");
var class=$(".class");

And the another way to invoke $() is to pass it an Element or Document or Window object. It simply wraps the element, document or window in a jQuery object and returns that object. Doing this allows you to use jQuery methods to manipulate the element rather than using raw DOM methods. For example you can call $(document) or $(this) to pass document or current element.

The third way to invoke $() is to pass it a string of HTML text. When you do this, jQuery creates the HTML element or elements described by that text and then returns a jQuery object representing those elements.

When invoked in this way, $() accepts an optional second argument. You can pass a document object to specify the document with which the elements are to be associated. If you do this, the object properties are assumed to specify the names and values of HTML attributes to be set on the object.

Here is an example, where three arguments are used to set the url, css of the image and the click event on the image.

var img=$("<img />"),
    {src:url,
    css:{borderWidth:5},
    click:handleClick
    });

And the fourth way to invoke $() is to pass a function to it. If you do this, the function you pass will be invoked when the document has been loaded and the DOM is ready to be manipulated. For example here is a jQuery version of onLoad() function which is invoked when the document has loaded.

$(function(){
// jQuery code
});