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.
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.
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.
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.
jQuery Slide
jQuery slideDown()
Demonstrates the jQuery slideDown() method.
jQuery slideUp()
Demonstrates the jQuery slideUp() method.
jQuery slideToggle()
Demonstrates the jQuery slideToggle() method.
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).
jQuery Stop Animations
jQuery stop() sliding
Demonstrates the jQuery stop() method.
jQuery stop() animation (with parameters)
Demonstrates the jQuery stop() method.
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.
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().
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.
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
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.
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.
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.
jQuery Traversing Ancestors
jQuery parent()
Demonstrates the jQuery parent() method.
jQuery parents()
Demonstrates the jQuery parents() method.
jQuery parentsUntil()
Demonstrates the jQuery parentsUntil() method.
jQuery Traversing Descendants
jQuery children()
Demonstrates the jQuery children() method.
jQuery find()
Demonstrates the jQuery find() method.
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.
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.
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.
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.
