jQuery Tutorial

Filed Under: jQuery

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.

jQuery Tutorial

jQuery Tutorial

  1. What is jQuery?
  2. A quick roundup on jQuery and it’s features.

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

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

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

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

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

  13. jQuery after
  14. 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.

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

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

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

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

  23. jQuery animate
  24. 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.

  25. jQuery noConflict
  26. 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.

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

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

  31. jQuery attribute manipulation
  32. 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.

  33. jQuery hide, show, toggle
  34. 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.

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

  37. jQuery slide up, down, toggle
  38. 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.

  39. jQuery UI Tabs
  40. 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.

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

  43. jQuery event methods
  44. 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.

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

  47. jQuery double click
  48. 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.

  49. jQuery mouse events
  50. jQuery mouse over, mouse up, down, move, leave examples.

  51. jQuery hover
  52. 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.

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

  55. jQuery keydown
  56. 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.

  57. jQuery keypress
  58. 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.

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

  61. jQuery scroll
  62. 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.

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

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

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

  69. jQuery first last
  70. 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.

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

  73. jQuery siblings()
  74. 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.

  75. jQuery closest()
  76. 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.

  77. jQuery eq()
  78. 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.

  79. jQuery find()
  80. 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.

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

  83. jQuery is()
  84. 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.

  85. jQuery has(),
    not(), filter()
  86. 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().

  87. jQuery slice
  88. 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.

  89. jQuery end()
  90. 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

  91. jQueryUI Datepicker
  92. 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.

  93. jQueryUI accordion
  94. 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.

  95. jQueryUI Autocomplete
  96. 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.

  97. jQueryUI progress bar
  98. 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.

  99. jQueryUI dialog
  100. 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.

  101. jQueryUI tooltip
  102. 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.

  103. jQueryUI Menu
  104. 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.

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

  107. jQueryUI Button,
  108. 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.

  109. How to develop a jQuery Plugin?
  110. 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.

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

  113. jQuery AJAX Java Web Application
  114. This jQuery tutorial shows how to integrate jQuery and Ajax with java web application.

  115. CSS3 Image Gallery with Thumbnail view
  116. Learn how to create image gallery with thumbnail view using CSS3 and jQuery.

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

  119. jQuery image slider with thumbnail
  120. This jQuery tutorial explains how to create jQuery thumbnail image slider.

  121. jQuery Content Slider with Pagination
  122. This jQuery tutorial explains how to create content slider with pagination using CSS and jQuery.

  123. jQuery Image Slider Plugins
  124. 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.


  1. Mohammed says:

    Hello Pankaj Sir,

    I really like to read your articles about java and different technologies.

    I have a little suggestion if you can add a “go to top” button in you web pages. It will be of great help.

Comments are closed.

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors