FULL COMPLETE jQuery Tutorial For Beginners & Experts

Last updated on 10th Jul 2020, Blog, Tutorials

jQuery is a fast, small and feature-rich JavaScript library included in a single .js file. jQuery simplifies HTML document traversing, event handling, animating, and Ajax interactions for Rapid Web Development. 

jQuery makes a web developer’s life easy. It provides many built-in functions using which you can accomplish various tasks easily and quickly.

• 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.

Query is a fast, small, cross-platform and feature-rich JavaScript library. It is designed to simplify the client-side scripting of HTML. It makes things like HTML document traversal and manipulation, animation, event handling, and AJAX very simple with an easy-to-use API that works on a lot of different type of browsers. 

The main purpose of jQuery is to provide an easy way to use JavaScript on your website to make it more interactive and attractive. It is also used to add animation. jQuery is a small, light-weight and fast JavaScript library. It is cross-platform and supports different types of browsers. It is also referred to as ?write less to do more? because it takes a lot of common tasks that require many lines of JavaScript code to accomplish, and binds them into methods that can be called with a single line of code whenever needed. It is also very useful to simplify a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.

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 J SON 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, IBMN etflix

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.

MethodsDescriptionappend()

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.

MethodsDescription

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

MethodsDescription

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.

MethodsDescription

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.

MethodsDescription

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.

MethodsDescription

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.