jQuery Tutorial

jQuery tutorial for beginners and professionals provides deep knowledge of jQuery technology. Our jQuery tutorial will help you to learn jQuery fundamentals, example, selectors, events, effects, traversing, CSS and attributes.

What is jQuery?

• jQuery is a small and lightweight JavaScript library.
• jQuery is cross-platform.
• jQuery means “write less do more”.
• jQuery simplifies AJAX call and DOM manipulation.

Features supported by the jQuery

Here are some of the most important core features that are supported by this library:

• Event Handling : An extremely extraordinary way is offered by the jQuery to capture a wide array of events like a click on the link by the user. And this excludes the need of cluttering the HTML code in itself with the event handlers.
• Lightweight : This library is known to be the lightest weighted library of the programming language world. It’s about 19 KB in size.
• AJAX Support : A website that is most responsive and feature rich can be built using AJAX technology and this library helps you a lot in doing this.
• DOM Manipulation : With this library, now it is easy to select DOM elements, negotiate them and do some modification in their content by the use of Sizzle that is basically a cross-browser open source selector engine.
• Animations : There are plenty of animations that are built-in this library and can be used in developing one’s website.
• Latest Technology : This is the latest technology in the field as it supports the basic XPath syntax and the CSS3 selectors.
• Cross Browser Support :This library offers cross-browser support as it is compatible with various browsers like IE6.0+, Chrome, Opera9.0+ and Safari 3.0+.

jQuery is a JavaScript library designed to simplify the client-side scripting of Hypertext Markup Language (HTML). It is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid website development. Moreover, it provides capabilities for developers to create plug-ins on top of the JavaScript library.

jQuery was originally created in January 2006 at BarCamp NYC by John Resig , influenced by Dean Edwards’ earlier cssQuery library . In 2015, jQuery was used on 63% of the top 1 million websites, and 17% of all Internet websites. As of June 2018, jQuery is used on 73% of the top 1 million websites, and by 22.4% of all websites.

How to use jQuery?

There are two ways to use jQuery.

• Local Installation − You can download jQuery library on your local machine and include it in your HTML code.
• CDN Based Version − You can include jQuery library into your HTML code directly from Content Delivery Network (CDN).

jQuery Features

Following are the important features of jQuery.

• HTML manipulation
• DOM manipulation
• DOM element selection
• CSS manipulation
• Effects and Animations
• Utilities
• AJAX
• HTML event methods
• JSON Parsing
• Extensibility through plug-ins

Why is jQuery required?

Sometimes, a question can arise: what is the need of jQuery or what difference does it make on bringing jQuery instead of AJAX/ JavaScript? If jQuery is the replacement of AJAX and JavaScript? For all these questions, you can state the following answers.

• It is very fast and extensible.
• It facilitates the users to write UI related function codes in minimum possible lines.
• It improves the performance of an application.
• Browser’s compatible web applications can be developed.
• It uses mostly new features of new browsers.

So, you can say that out of the lot of JavaScript frameworks, jQuery is the most popular and the most extendable. Many of the biggest companies on the web use jQuery.

Some of these companies are:

• Microsoft
• Google
• IBM
• Netflix

What should you know before starting to learn jQuery?

It is always advised to a fresher to learn the basics of web designing before starting to learn jQuery. He should learn HTML, CSS and JavaScript first. But, if you belong to a technical background, it is up to you.

If you are a fresher and want to study these subjects first.

jQuery Important Features

• DOM Selection: 

jQuery provides Selectors to retrieve DOM elements based on different criteria like tag name, id, css class name, attribute name, value, nth child in hierarchy etc.

• DOM Manipulation: 

You can manipulate DOM elements using various built-in jQuery functions. For example, adding or removing elements, modifying html content, css class etc.

• Special Effects: 

You can apply special effects to DOM elements like show or hide elements, fade-in or fade-out of visibility, sliding effect, animation etc.

• Events:

jQuery library includes functions which are equivalent to DOM events like click, dblclick, mouseenter, mouseleave, blur, keyup, keydown etc. These functions automatically handle cross-browser issues.

• Ajax: 

jQuery also includes easy to use AJAX functions to load data from servers without reloading the whole page.

• Cross-browser support: 

jQuery library automatically handles cross-browser issues, so the user does not have to worry about it. jQuery supports IE 6.0+, FF 2.0+, Safari 3.0+, Chrome and Opera 9.0+.

jQuery Selectors

jQuery Selectors are used to select and manipulate HTML elements. They are very important part of jQuery library.

With jQuery selectors, you can find or select HTML elements based on their id, classes, attributes, types and much more from a DOM.

In simple words, you can say that selectors are used to select one or more HTML elements using jQuery and once the element is selected then you can perform various operations on that.

How to use Selectors

The jQuery selectors can be used single or with the combination of other selectors. They are required at every step while using jQuery. They are used to select the exact element that you want from your HTML document.

 You learned about jQuery selectors in the previous section. The jQuery selector finds particular DOM element(s) and wraps them with jQuery object. For example, document.getElementById() in the JavaScript will return DOM object whereas $(‘#id’) will return jQuery object. The following figure illustrates the difference.

jQuery Methods

As you can see in the above figure, document.getElementById function returns a div element whereas jQuery selector returns a jQuery object which is a wrapper around div element. So now, you can call jQuery methods of jQuery objects which are returned by the jQuery selector.

jQuery provides various methods for different tasks e.g. manipulate DOM, events, ajax etc. The following table lists different categories of methods.

Methods

DOM Manipulation

These methods manipulate DOM elements in some manner e.g. changing attribute, style attribute, adding and removing elements etc.

Traversing

These methods help in navigating from DOM element to another element in a parent child hierarchy e.g. finding ancestors, descendants or sibling element of a specified element.

CSS

These methods get and set css related properties of elements.

Attributes

These methods get and set DOM attributes of elements.

Events

These methods are used to handle DOM or JavaScript events.

Effects

These methods are used to add animation to elements.

Dimensions

These methods are used to get and set the CSS dimensions for the various properties.

Forms

These methods and event handlers handle forms and their various elements.

Ajax

These methods allow Ajax functionalities with jQuery 

Core

These methods are core methods in jQuery API.

Data

These methods allow us to associate arbitrary data with specific DOM elements.

Miscellaneous

These methods are useful in various tasks e.g. traversing elements, converting to array etc.

Utilities

Utility methods are helpful in getting information on various things e.g. browser, function, array, window etc.

DOM Manipulation Methods in jQuery

jQuery provides various methods to add, edit or delete DOM element(s) in the HTML page.

The following table lists some important methods to add/remove new DOM elements.

Methods	Description
append()	Inserts content to the end of element(s) which is specified by a selector.
before()	Inserts content (new or existing DOM elements) before an element(s) which is specified by a selector.
after()	Inserts content (new or existing DOM elements) after an element(s) which is specified by a selector.
prepend()	Insert content at the beginning of an element(s) specified by a selector.
remove()	Removes element(s) from DOM which is specified by selector.
replaceAll()	Replace target element(s) with specified element.
wrap()	Wrap an HTML structure around each element which is specified by selector.

Manipulate HTML Attributes using jQuery

The following table lists jQuery methods to get or set value of attribute, property, text or html.

Methods	Description
attr()	Get or set the value of the specified attribute of the target element(s).
prop()	Get or set the value of specified property of the target element(s).
html()	Get or set html content to the specified target element(s).
text()	Get or set text for the specified target element(s).
val()	Get or set value property of the specified target element.

Manipulate DOM Element’s Dimensions using jQuery

The jQuery library includes various methods to manipulate DOM element’s dimensions like height, width, offset, position etc.

The following table lists all the jQuery methods to get or set DOM element’s dimensions.

Methods	Description
height()	Get or set height of the specified element(s).
innerHeight()	Get or set inner height (padding + element’s height) of the specified element(s).
outerHeight()	Get or set outer height (border + padding + element’s height) of the specified element(s).
offset()	Get or set left and top coordinates of the specified element(s).
position()	Get the current coordinates of the specified element(s).
width()	Get or set the width of the specified element(s).
innerWidth()	Get or set the inner width (padding + element’s width) of the specified element(s).
outerWidth()	Get or set outer width (border + padding + element’s width) of the specified element(s).

Traversing DOM Elements using jQuery

The jQuery library includes various methods to traverse DOM elements in a DOM hierarchy.

The following table lists jQuery methods for traversing DOM elements.

Methods	Description
children()	Get all the child elements of the specified element(s)
each()	Iterate over specified elements and execute specified call back function for each element.
find()	Get all the specified child elements of each specified element(s).
first()	Get the first occurrence of the specified element.
next()	Get the immediately following sibling of the specified element.
parent()	Get the parent of the specified element(s).
prev()	Get the immediately preceding sibling of the specified element.
siblings()	Get the siblings of each specified element(s)

CSS Manipulation using jQuery

The jQuery library includes various methods to manipulate style properties and CSS class of DOM element(s).

The following table lists jQuery methods for styling and css manipulation.

Methods	Description
css()	Get or set style properties to the specified element(s).
addClass()	Add one or more class to the specified element(s).
hasClass()	Determine whether any of the specified elements are assigned the given CSS class.
removeClass()	Remove a single class, multiple classes, or all classes from the specified element(s).
toggleClass()	Toggles between adding/removing classes to the specified elements

jQuery Animation

jQuery includes methods which give special effects to the elements on hiding, showing, changing style properties, and fade-in or fade-out operation. These special effect methods can be useful in building an interactive user interface.

The following table lists jQuery methods for adding special effects to the DOM elements.

Methods	Description
animate()	Perform custom animation using element’s style properties.
queue()	Show or manipulate the queue of functions to be executed on the specified element.
stop()	Stop currently running animations on the specified element(s).
fadeIn()	Display specified element(s) by fading them to opaque.
fadeOut()	Hides specified element(s) by fading them to transparent.
fadeTo()	Adjust the opacity of the specified element(s)
fadeToggle()	Display or hide the specified element(s) by animating their opacity.
hide()	Hide specified element(s).
show()	Display specified element(s).
toggle()	Display hidden element(s) or hide visible element(s).
slideUp()	Hide specified element(s) with sliding up motion.
slideDown()	Display specified element(s) with sliding down motion.
slideToggle()	Display or hide specified element(s) with sliding motion.

Advantages of jQuery

• Easy to learn: 

jQuery is easy to learn because it supports the same JavaScript style coding.

• Write less do more: 

jQuery provides a rich set of features that increase developers’ productivity by writing less and readable code.

• Excellent API Documentation: 

jQuery provides excellent online API documentation.

• Cross-browser support: 

jQuery provides excellent cross-browser support without writing extra code.

• Unobtrusive: 

jQuery is unobtrusive which allows separation of concerns by separating html and jQuery code.

• Save lots of time:

 You can save lots of time and efforts by using the jQuery inbuilt effects and selectors and concentrate on other development work.

• Simplify common JavaScript tasks:

 jQuery considerably simplifies the common JavaScript tasks. Now you can easily create feature rich and interactive web pages with fewer lines of codes, a typical example is implementing Ajax to update the content of a page without refreshing it.

• Easy to use:

jQuery is very easy to use. Anybody with the basic working knowledge of HTML, CSS and JavaScript can start development with jQuery.

• Compatible with browsers:

jQuery is created with modern browsers in mind and it is compatible with all major modern browsers such as Chrome, Firefox, Safari, Internet Explorer, etc.

• Absolutely Free 

And the best part is, it is completely free to download and use.

Conclusion

You’ll be hard pressed to find a website that uses JavaScript without also using jQuery. It has become a very important tool in modern web development, and rightly so. You’ve learned how it makes DOM manipulation and AJAX so much easier, and we’ve barely scratched the surface! jQuery is well documented, so be sure to visit the official documentation.