jQuery Tutorial With Examples [Latest]

• What is jQuery?

A quick roundup on jQuery and it’s features.

• jQuery Hello World

Learn how to download jQuery JS file and use it in HTML pages. jQuery hello world program with complete explanation of jQuery functions.

• jQuery document ready

Learn about $(document).ready() jQuery function and it’s advantage.

• jQuery addClass

jQuery addClass method example to add one or more specified classes to the matched DOM elements.

• jQuery fadeIn, fadeOut, fadeTo

jQuery fadeOut, fadeIn and fadeTo functions can be used for transparency effect in HTML.

• jQuery add

jQuery add method can be used to add elements, selectors or html to the matched elements.

• jQuery after

jQuery after method can be used to add HTML content, DOM element, or jQuery object to insert after each element in the set of matched elements.

• jQuery selector by class

jQuery selector by class name allows you to find a specific HTML element with the value of its class attribute.

• jQuery selector by id

jQuery selector by ID allows you to find a specific HTML element with the value of its attribute id.

• jQuery selector by name

jQuery selector by name or Element selector allows you to find all HTML elements with the given tag name.

• jQuery selector

jQuery selector is the most significant element in the jQuery library. Learn about jQuery selector syntax and it’s usage.

• jQuery animate

jQuery animate() method is used to perform a custom animation of a set of CSS properties. This method allows you to create custom animation only on numeric properties.

• jQuery noConflict

jQuery noConflict() method releases the control of the $ variable. You might have seen many JavaScript libraries which uses $ variable. In jQuery $ is used as an alias for jQuery. If you want to use the $ variable of other libraries, jQuery have to release the control over the $ variable by calling this method.

• jQuery clearQueue

jQuery clearQueue() removes all the functions waiting to execute or the queued functions of the selected element.

• jQuery delay

jQuery delay() method is used to delay the execution of items in the queue. This method sets a timer to delay the execution.

• jQuery attribute manipulation

The most basic components we can manipulate using jQuery is through the attributes and properties of the HTML DOM elements. Learn about jQuery get attribute, set attribute, remove attribute with examples.

• jQuery hide, show, toggle

we can use these jQuery methods to hide an HTML element, show any hidden HTML element and toggle it from hidden/shown.
These methods are used a lot in real web pages, where you get to see the data on click of a button. On click again, the data is again hidden.

• jQuery dequeue

jQuery deQueue() method removes the next function waiting to execute in the queue of the selected elements.

• jQuery slide up, down, toggle

jQuery provides three useful sliding effect methods – slideUp, slideDown and slideToggle. We can use these methods to show and hide an HTML DOM element with sliding effect.

• jQuery UI Tabs

jQuery UI tabs allow us to create tabs in view pages. These tabs can be horizontal as well as vertical too. It’s a very common feature and you will find it in a lot of login and registration pages.

• HTML5 progress bar with jQuery animation

HTML5 progress tag is used to create progress bar in view pages. You can use jQuery animation to spice up the progress bar.

• jQuery event methods

jQuery event method registers an event handler when the user interacts with the web pages. We can make any manipulations on the selected element after registering the event handler. This makes the web page more dynamic.

• jQuery click

jQuery click() method fires on clicking an HTML element. This method will attach an event handler to the click event.

• jQuery double click

jQuery dblclick() method fires when an HTML element is double clicked. This method will attach an event handler to the double click event. We can do desired manipulations on the selected HTML element using this event handler.

• jQuery mouse events

jQuery mouse over, mouse up, down, move, leave examples.

• jQuery hover

jQuery hover() method fires when the mouse pointer enters and leaves the selected HTML element. This method will attach two event handlers to execute when the mouse enters and leaves the element. The hover() method attaches handlers for mouse enter and mouse leave events.

• jQuery keyup

jQuery keyup method triggers when you release the pressed key. You can attach functions to execute when this event occurs.

• jQuery keydown

jQuery keydown method triggers when you first press a key on the keyboard and hold it. You can attach functions to execute when this event occurs.

• jQuery keypress

jQuery keypress method triggers with key press event of the javascript. Since this event varies across browsers, this is not covered in any official specification. This event triggers only for the focused element. This can vary across different browsers.

• jQuery resize

jQuery resize() method triggers when the browser window is resized. This method attaches a handler, which executes when the resize event is fired.

• jQuery scroll

jQuery scroll() method triggers when the element is scrolled. This method attaches a handler, which executes when the scroll event is fired. A scroll event fires for all elements which are scrollable and it also fires for window objects.

• jQuery select

jQuery select() method triggers when a text in the text field or text area is selected.

• jQuery submit

jQuery submit() function triggers when a user tries to submit a form.

• jQuery parent children

jQuery provides a lot of tree traversal functions that we can use to get the parent, child, siblings, previous and next elements.

• jQuery first last

jQuery first() method is used to get the first element from the selected HTML elements. jQuery last() method is used to get the last element from the selected HTML elements.

• jQuery next() prev()

jQuery API provides two traversing methods next() and prev() that returns the immediately following and preceding sibling element of the selected HTML element.

• jQuery siblings()

jQuery siblings() method is used to get all the siblings of the selected HTML element. Unlike jQuery next() and prev() methods, this method traverses both forward and backwards along the siblings of the selected element.

• jQuery closest()

jQuery closest() method returns the first matched ancestor element of the selected HTML element. The method accepts a mandatory parameter, which filters out the traversal.

• jQuery eq()

jQuery eq() method is used to get an element with a specific index of the selected HTML element. You can give either positive or negative integer value as index.

• jQuery find()

jQuery find() method returns all the descendant elements like child, grandchild and so on. This method is used if you want to search all the elements deeper in the DOM tree. This method traverses downwards and finds all its descendants of the selected element.

• jQuery each()

jQuery each() method let us iterate over the DOM elements of the jQuery object and executes a function for each matched element.

• jQuery is()

We use jQuery is() to check the selected element with another element, selector or any jQuery object. This method traverses along the DOM elements to find a match, which satisfies the passed parameter. It will return true if there is a match otherwise returns false.

• jQuery has(),
  not(), filter()

jQuery API provides traversing methods to filter out the matched elements. Some of these methods are discussed in this post – jQuery has(), not() and filter().

• jQuery slice

jQuery slice() method reduces the matched set of elements to a subset specified by a range of indices. This method accepts two integer values, start index and end index. This method will return the elements between the start and end index.

• jQuery end()

jQuery end() method ends the most recent filtering operation in the current chain, and return the matched set of elements to its previous state.This method does not take any arguments.

jQuery UI Tutorial

• jQueryUI Datepicker

The jQueryUI Datepicker plugin allow us to select a date from a popup or an in-line calendar. This plugin provide several options to customize the date format, localize calendar, restrict date range, and select a date range and many more.

• jQueryUI accordion

jQueryUI accordion plugin is used to display vertically stacked list of contents such as tabs or thumbnails that can be expanded to reveal the contents associate with it and you can also collapse the revealed contents.

• jQueryUI Autocomplete

jQueryUI autocomplete plugin enables the users to easily search and filter items from an already populated list of items as they type on any input fields.

• jQueryUI progress bar

jQuery UI provides progress bar plugin to indicate the percentage of completeness for a process. We can classify progressbar into two types – determinate and indeterminate.

• jQueryUI dialog

The jQueryUI Dialog plugin is used for displaying information, which contains a dialog title and a content area. We can move, resize or close the dialog window.

• jQueryUI tooltip

jQueryUI tooltip plugin is used to replace the native tooltips. We can customize the tooltip with different options, methods and events to improve the user experience.

• jQueryUI Menu

jQueryUI provides menu() method to create themeable menu with keyboard and mouse interaction. We can create menu from any valid markup and the most commonly used element is the unordered list.

• jQuery Popup Overlay

jQuery Popup Overlay plugin is used for responsive and accessible modal windows and tooltips.

• jQueryUI Button,
  Buttonset

jQuery UI provides two widgets called Button and Buttonset Widget for creating themeable buttons. We can use these widgets to enhance the look and feel of standard form elements like buttons, inputs, anchors etc. These widgets use the jQuery UI CSS framework to enhance its look and feel.

• How to develop a jQuery Plugin?

Plugin is a piece of code that adds some kind of functionality to our applications. Plugins can be very helpful if you want to encapsulate a piece of behaviour that you may want to use in different parts of your applications. This jQuery tutorial outline the process of creating a jQuery plugin.

• jQuery scroll to top

In this jQuery tutorial, you will learn how to create scroll to top button in jQuery.

• jQuery AJAX Java Web Application

This jQuery tutorial shows how to integrate jQuery and Ajax with java web application.

• CSS3 Image Gallery with Thumbnail view

Learn how to create image gallery with thumbnail view using CSS3 and jQuery.

• jQuery Image Slider

You will learn how to create jQuery image slider in a web page without using any framework.

• jQuery image slider with thumbnail

This jQuery tutorial explains how to create jQuery thumbnail image slider.

• jQuery Content Slider with Pagination

This jQuery tutorial explains how to create content slider with pagination using CSS and jQuery.

• jQuery Image Slider Plugins

A curated list of jQuery image slider plugins.