jQuery Examples

## jQuery Tutorial

jQuery HOME jQuery Intro jQuery Install jQuery Syntax jQuery Selectors jQuery Events

## jQuery Effects

jQuery Hide/Show jQuery Fade jQuery Slide jQuery Animate jQuery stop() jQuery Callback jQuery Chaining

## jQuery HTML

jQuery Get jQuery Set jQuery Add jQuery Remove jQuery CSS Classes jQuery css() jQuery Dimensions

## jQuery Traversing

jQuery Traversing jQuery Ancestors jQuery Descendants jQuery Siblings jQuery Filtering

## jQuery AJAX

jQuery AJAX Intro jQuery Load jQuery Get/Post

## jQuery Misc

jQuery noConflict()

## jQuery Examples

jQuery Examples jQuery Quiz jQuery Certificate

## jQuery References

jQuery Selectors jQuery Events jQuery Effects jQuery HTML/CSS jQuery Traversing jQuery AJAX jQuery Misc jQuery Properties

# jQuery Examples

« Previous
Next Chapter »

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 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

« Previous
Next Chapter »

## Your suggestion:

Your E-mail (optional):

Page address:

Description:

Close [X]

## Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

## WEB HOSTING

Best Web Hosting UK Reseller Hosting Wow! $5 SSD Hosting

## WEB BUILDING

Download XML Editor
FREE Website BUILDER FREE Website Creator

## WEB RESOURCES

Web Statistics Web Validation

## SHARE THIS PAGE