FULL COMPLETE jQuery Tutorial For Beginners & Experts
Last updated on 10th Jul 2020, Blog, Tutorials
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 cross-platform.
- jQuery means “write less do more”.
- jQuery simplifies AJAX call 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)
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?
What should you know before starting to learn jQuery?
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.
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.
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 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
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.
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.
These methods get and set css related properties of elements.
These methods get and set DOM attributes of elements.
These methods are used to add animation to elements.
These methods are used to get and set the CSS dimensions for the various properties.
Enroll in jQuery Training to Build Skills & Advance Your Career
- Instructor-led Sessions
- Real-life Case Studies
These methods and event handlers handle forms and their various elements.
These methods allow Ajax functionalities with jQuery
These methods are core methods in jQuery API.
These methods allow us to associate arbitrary data with specific DOM elements.
These methods are useful in various tasks e.g. traversing elements, converting to array etc.
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.
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.
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
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.
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.
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 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.
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:
- 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.
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.
- Easy to use:
- 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.