I have written a lot of jQuery tutorial articles. This is an index post for all the jQuery tutorials posted here, you should go through these to learn jQuery.
- What is jQuery?
- jQuery Hello World
- jQuery document ready
- jQuery addClass
- jQuery fadeIn, fadeOut, fadeTo
- jQuery add
- jQuery after
- jQuery selector by class
- jQuery selector by id
- jQuery selector by name
- jQuery selector
- jQuery animate
- jQuery noConflict
- jQuery clearQueue
- jQuery delay
- jQuery attribute manipulation
- jQuery hide, show, toggle
- jQuery dequeue
- jQuery slide up, down, toggle
- jQuery UI Tabs
- HTML5 progress bar with jQuery animation
- jQuery event methods
- jQuery click
- jQuery double click
- jQuery mouse events
- jQuery hover
- jQuery keyup
- jQuery keydown
- jQuery keypress
- jQuery resize
- jQuery scroll
- jQuery select
- jQuery submit
- jQuery parent children
- jQuery first last
- jQuery next() prev()
- jQuery siblings()
- jQuery closest()
- jQuery eq()
- jQuery find()
- jQuery each()
- jQuery is()
- jQuery has(),
- jQuery slice
- jQuery end()
- jQueryUI Datepicker
- jQueryUI accordion
- jQueryUI Autocomplete
- jQueryUI progress bar
- jQueryUI dialog
- jQueryUI tooltip
- jQueryUI Menu
- jQuery Popup Overlay
- jQueryUI Button,
- How to develop a jQuery Plugin?
- jQuery scroll to top
- jQuery AJAX Java Web Application
- CSS3 Image Gallery with Thumbnail view
- jQuery Image Slider
- jQuery image slider with thumbnail
- jQuery Content Slider with Pagination
- jQuery Image Slider Plugins
A quick roundup on jQuery and it’s features.
Learn how to download jQuery JS file and use it in HTML pages. jQuery hello world program with complete explanation of jQuery functions.
$(document).ready() jQuery function and it’s advantage.
jQuery addClass method example to add one or more specified classes to the matched DOM elements.
jQuery fadeOut, fadeIn and fadeTo functions can be used for transparency effect in HTML.
jQuery add method can be used to add elements, selectors or html to the matched elements.
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 name allows you to find a specific HTML element with the value of its class attribute.
jQuery selector by ID allows you to find a specific HTML element with the value of its attribute id.
jQuery selector by name or Element selector allows you to find all HTML elements with the given tag name.
jQuery selector is the most significant element in the jQuery library. Learn about jQuery selector syntax and it’s usage.
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 clearQueue() removes all the functions waiting to execute or the queued functions of the selected element.
jQuery delay() method is used to delay the execution of items in the queue. This method sets a timer to delay the execution.
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.
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() method removes the next function waiting to execute in the queue of the selected elements.
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 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.
progress tag is used to create progress bar in view pages. You can use jQuery animation to spice up the progress bar.
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() method fires on clicking an HTML element. This method will attach an event handler to the click event.
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 over, mouse up, down, move, leave examples.
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 method triggers when you release the pressed key. You can attach functions to execute when this event occurs.
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 resize() method triggers when the browser window is resized. This method attaches a handler, which executes when the resize event is fired.
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() method triggers when a text in the text field or text area is selected.
jQuery submit() function triggers when a user tries to submit a form.
jQuery provides a lot of tree traversal functions that we can use to get the parent, child, siblings, previous and next elements.
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 API provides two traversing methods next() and prev() that returns the immediately following and preceding sibling element of the selected HTML element.
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() 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() 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() 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() method let us iterate over the DOM elements of the jQuery object and executes a function for each matched element.
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 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() 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() 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
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 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 plugin enables the users to easily search and filter items from an already populated list of items as they type on any input fields.
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.
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 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 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 plugin is used for responsive and accessible modal windows and tooltips.
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.
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.
In this jQuery tutorial, you will learn how to create scroll to top button in jQuery.
This jQuery tutorial shows how to integrate jQuery and Ajax with java web application.
Learn how to create image gallery with thumbnail view using CSS3 and jQuery.
You will learn how to create jQuery image slider in a web page without using any framework.
This jQuery tutorial explains how to create jQuery thumbnail image slider.
This jQuery tutorial explains how to create content slider with pagination using CSS and jQuery.
A curated list of jQuery image slider plugins.
That’s all for jQuery tutorial index post. I will keep on adding more tutorials to this list as and when I write more on jQuery.