jQuery Examples

Do you want to develop your jQuery selector skills?

Please try our jQuery Selector Tester

jQuery Selectors

$("p").hide()
Demonstrates the jQuery hide() method, hiding all <p> elements.

$("#test").hide()
Demonstrates the jQuery hide() method, hiding the element with id="test".

$(".test").hide()
Demonstrates the jQuery hide() method, hiding all elements with class="test".

$(this).hide()
Demonstrates the jQuery hide() method, hiding the current HTML element.

Examples explained

jQuery Events

jQuery click()
Demonstrates the jQuery click() event.

jQuery dblclick()
Demonstrates the jQuery dblclick() event.

jQuery mouseenter()
Demonstrates the jQuery mouseenter() event.

jQuery mouseleave()
Demonstrates the jQuery mouseleave() event.

jQuery mousedown()
Demonstrates the jQuery mousedown() event.

jQuery mouseup()
Demonstrates the jQuery mouseup() event.

jQuery hover()
Demonstrates the jQuery hover() event.

jQuery focus() and blur()
Demonstrates the jQuery focus() and blur() events.

Examples explained

jQuery Hide/Show

jQuery hide()
Demonstrates the jQuery hide() method.

jQuery hide() and show()
Demonstrates jQuery hide() and show() methods.

jQuery toggle()
jQuery toggle() toggles between hide() and show().

jQuery hide()
Another hide demonstration. How to hide parts of text.

Examples explained

jQuery Fade

jQuery fadeIn()
Demonstrates the jQuery fadeIn() method.

jQuery fadeOut()
Demonstrates the jQuery fadeOut() method.

jQuery fadeToggle()
Demonstrates the jQuery fadeToggle() method.

jQuery fadeTo()
Demonstrates the jQuery fadeTo() method.

Examples explained

jQuery Slide

jQuery slideDown()
Demonstrates the jQuery slideDown() method.

jQuery slideUp()
Demonstrates the jQuery slideUp() method.

jQuery slideToggle()
Demonstrates the jQuery slideToggle() method.

Examples explained

jQuery Animate

jQuery animate()
Demonstrates a simple use of the jQuery animate() method.

jQuery animate() - manipulate multiple CSS properties
Demonstrates that you can manipulate multiple CSS properties with the jQuery animate() method.

jQuery animate() - using relative values
Demonstrates that you can use relative values in the jQuery animate() method.

jQuery animate() - using pre-defined values
Demonstrates that you can use the pre-defined values "hide", "show", "toggle" in the jQuery animate() method.

jQuery animate()
Demonstrates more using the jQuery animate() method (several animate() calls after each other).

jQuery animate()
Demonstrates more using the jQuery animate() method (several animate() calls after each other).

Examples explained

jQuery Stop Animations

jQuery stop() sliding
Demonstrates the jQuery stop() method.

jQuery stop() animation (with parameters)
Demonstrates the jQuery stop() method.

Examples explained

jQuery HTML Get Content and Attributes

jQuery text() and html() - Get content
Get content with the jQuery text() and html() methods.

jQuery val() - Get content
Get the value of a form field with the jQuery val() method.

jQuery attr() - Get attribute value
Get the value of an attribute with the jQuery attr() method.

Examples explained

jQuery HTML Set Content and Attributes

jQuery text(), html(), and val() - Set content
Set content with the jQuery text(), html() and val() methods.

jQuery text() and html() - Set content with a callback function
Set content + using a callback function inside text() and html().

jQuery attr() - Set attribute value
Set attribute value with the jQuery attr() method.

jQuery attr() - Set multiple attribute values
Set multiple attribute values with the jQuery attr() method.

jQuery attr() - Set attribute value with a callback function
Set attribute value + using a callback function inside attr().

Examples explained

jQuery HTML Add Elements/Content

jQuery append()
Insert content at the end of the selected HTML elements.

jQuery prepend()
Insert content at the beginning of the selected HTML elements.

jQuery append() - Insert several new elements
Create new elements with text/HTML, jQuery, and JavaScript/DOM. Then append the new elements to the text.

jQuery after() and before()
Insert content after and before the selected HTML elements.

jQuery after() - Insert several new elements
Create new elements with text/HTML, jQuery, and JavaScript/DOM. Then insert the new elements after the selected element.

Examples explained

jQuery HTML Remove Elements/Content

jQuery remove()
Remove the selected element(s).

jQuery empty()
Remove all child elements of the selected element(s).

jQuery remove() - with a parameter
Filter the elements to be removed

Examples explained

jQuery Get and Set CSS Classes

jQuery addClass()
Add class attributes to different elements.

jQuery addClass() - Multiple classes
Specify multiple classes within the addClass() method.

jQuery removeClass()
Remove a specific class attribute from different elements.

jQuery toggleClass()
Toggle between adding/removing classes from the selected elements.

Examples explained

jQuery css() Method

jQuery css() - return CSS property
Return the value of a specified CSS property from the FIRST matched element.

jQuery css() - set CSS property
Set a specified CSS property for ALL matched elements.

jQuery css() - set CSS properties
Set multiple CSS properties for ALL matched elements.

Examples explained

jQuery Dimensions

jQuery - return width() and height()
Return the width and height of a specified element.

jQuery - return innerWidth() and innerHeight()
Return the inner-width/height of a specified element.

jQuery - return outerWidth() and outerHeight()
Return the outer-width/height of a specified element.

jQuery - return outerWidth(true) and outerHeight(true)
Return the outer-width/height (including margins) of a specified element.

jQuery - return width() and height() of document and window
Return the width and height of the document (the HTML document) and window (the browser viewport).

jQuery - set width() and height()
Sets the width and height of a specified element.

Examples explained

jQuery Traversing Ancestors

jQuery parent()
Demonstrates the jQuery parent() method.

jQuery parents()
Demonstrates the jQuery parents() method.

jQuery parentsUntil()
Demonstrates the jQuery parentsUntil() method.

Examples explained

jQuery Traversing Descendants

jQuery children()
Demonstrates the jQuery children() method.

jQuery find()
Demonstrates the jQuery find() method.

Examples explained

jQuery Traversing Siblings

jQuery siblings()
Demonstrates the jQuery siblings() method.

jQuery next()
Demonstrates the jQuery next() method.

jQuery nextAll()
Demonstrates the jQuery nextAll() method.

jQuery nextUntil()
Demonstrates the jQuery nextUntil() method.

Examples explained

jQuery Traversing Filtering

jQuery first()
Demonstrates the jQuery first() method.

jQuery last()
Demonstrates the jQuery last() method.

jQuery eq()
Demonstrates the jQuery eq() method.

jQuery filter()
Demonstrates the jQuery filter() method.

jQuery not()
Demonstrates the jQuery not() method.

Examples explained

jQuery AJAX load() Method

jQuery load()
Load the content of a file into a <div> element.

jQuery load()
Load the content of a specific element inside a file, into a <div> element.

jQuery load() - with callback
Use of the jQuery load() method with a callback function.

Examples explained

jQuery AJAX get() and post() Methods

jQuery get()
Use the $.get() method to retrieve data from a file on the server.

jQuery post()
Use the $.post() method to send some data along with the request.

Examples explained