jQuery Examples

This section contains a whole bunch of examples demonstrating the various jQuery features and effects in real action.

jQuery Basic

• How to include jQuery in HTML document
• How to Display "Hello World" message in jQuery
• What is Standard syntax of jQuery
• Shorthand syntax of jQuery
• How to Change text color of the elements with jQuery
• How to Change text contents of the elements on button click using jQuery

jQuery Selectors

• Select an element by ID in jQuery
• Select elements by class name in jQuery
• Select elements by element name in jQuery
• Select elements by attribute in jQuery
• Select elements by compound CSS selector in jQuery
• Select elements by jQuery custom selector

jQuery Events

• Run code on document ready event in jQuery
• Run code on click event in jQuery
• Run code on double-click event in jQuery
• Run code on hover event in jQuery
• Run code on mouseenter event in jQuery
• Run code on mouseleave event in jQuery
• Run code on keypress event in jQuery
• Run code on keydown event in jQuery
• Run code on keyup event in jQuery
• Run code on change event in jQuery
• Run code on focus event in jQuery
• Run code on blur event in jQuery
• Run code on submit event in jQuery
• Run code on resize event in jQuery
• Run code on scroll event in jQuery

jQuery Show and Hide Effects

• Creating a simple show hide effect in jQuery
• Creating animated show hide effect in jQuery
• Creating simple toggle effect in jQuery
• Creating animated toggle effect in jQuery

jQuery Fading Effects

• Creating fade-in and fade-out effect in jQuery
• Setting the duration of fading effect in jQuery
• Creating fade toggle effect in jQuery
• Setting the duration of fade toggle effect in jQuery
• Fading elements to a certain opacity in jQuery

jQuery Sliding Effects

• Creating slide-up and slide-down effect in jQuery
• Setting the duration of sliding effect in jQuery
• Creating slide toggle effect in jQuery
• Setting the duration of slide toggle effect in jQuery

jQuery Animation Effects

• Creating animation effect in jQuery
• Animate multiple CSS properties in jQuery
• Animate multiple CSS properties One by One in jQuery
• Animate CSS property using relative values in jQuery
• Animate CSS property with predefined values in jQuery

jQuery Chaining

• Method chaining in jQuery
• Breaking method chaining code in multiple line in jQuery
• Exceptions method chaining in jQuery

jQuery Callback

• jQuery effect method without a callback function
• jQuery effect method with a callback function
• Executing callback multiple times in jQuery

jQuery Get & Set Contents

• jQuery get text contents of the elements
• jQuery set text contents of the elements
• jQuery get HTML contents of the elements
• jQuery set HTML contents of the elements
• jQuery get value an attribute of an element
• jQuery set an attribute for the elements
• jQuery set multiple attributes for the elements
• jQuery get the value of a form element
• jQuery set the values of the form elements

jQuery Insert Content

• jQuery insert HTML at the end of the elements
• jQuery insert HTML at the beginning of the elements
• jQuery multiple HTML elements at the beginning or end of the elements
• jQuery insert HTML before and after the elements
• jQuery insert multiple HTML elements before and after the elements
• jQuery wrap HTML around the elements

jQuery Remove Elements & Attribute

• jQuery remove the contents of the elements
• jQuery remove the HTML elements from the page
• jQuery remove the parent element of an HTML element from the page
• jQuery remove an attribute from the HTML elements

jQuery Add and Remove CSS Classes

• jQuery add a CSS class to the HTML elements
• jQuery add multiple CSS classes to the HTML elements
• jQuery remove CSS classes from the HTML elements
• jQuery remove all the CSS classes from the HTML elements at once
• jQuery toggle the CSS classes of the HTML elements

jQuery Get and Set CSS Properties

• jQuery get the value of a CSS property of an element
• jQuery set the value of a CSS property for the elements
• jQuery set the value of multiple CSS properties of the elements

jQuery Dimensions

• jQuery get width and height of an element
• jQuery set width and height of the elements
• jQuery get inner width and height of an element
• jQuery set inner width and height of the elements
• jQuery get outer width and height of an element
• jQuery get outer width and height of an element including margin area
• jQuery set outer width and height of the elements

jQuery Traversing

• jQuery select the direct parent element of an element
• jQuery select all the ancestor elements of an element
• jQuery select the specific ancestor elements of an element
• jQuery select all the ancestor elements between two elements
• jQuery select the direct children element of an element
• jQuery select the specific descendant elements of an element
• jQuery select all the descendant elements of an element
• jQuery select all the sibling elements of an element
• jQuery select specific sibling elements of an element
• jQuery select the next sibling element of an element
• jQuery select all the next sibling elements of an element
• jQuery select all the following sibling elements between two elements
• jQuery select the previous sibling element of an element
• jQuery select all the previous sibling elements of an element
• jQuery select all the preceding sibling elements between two elements

jQuery Filtering

• jQuery select the first element only
• jQuery select the last element only
• jQuery select an element by index
• jQuery select an element by negative index
• jQuery filter the selection of elements via selectors
• jQuery filter the selection of elements through a custom function
• jQuery select the elements that has specific child elements
• jQuery select the elements that does not match certain condition
• jQuery select the elements that did not pass certain function test
• jQuery select the elements by range of indices
• jQuery select the elements by range of negative indices

jQuery Ajax

• jQuery load content inside an element from a file
• jQuery execute code based upon load request response
• jQuery load content of selected element from a file
• jQuery make ajax request using HTTP get method
• jQuery send data with ajax using HTTP get method
• jQuery submit form data with ajax using HTTP post method

jQuery No-Conflict Mode

• Putting the jQuery into no-conflict mode
• Prevent conflict between jQuery and other JavaScript libraries
• Avoid conflict when including the jQuery before other JavaScript libraries