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

« Previous
Next Chapter »

### WEB HOSTING

UK Reseller Hosting

### WEB BUILDING

FREE Website BUILDER Free HTML5 Templates

### W3SCHOOLS EXAMS

HTML, CSS, JavaScript, PHP, jQuery, XML, and ASP Certifications

### SHARE THIS PAGE

### Color Picker

### HTML/CSS

HTML Tutorial HTML5 Tutorial CSS Tutorial CSS3 Tutorial Bootstrap Tutorial

### JavaScript

JavaScript Tutorial jQuery Tutorial jQuery Mobile Tutorial AngularJS Tutorial AJAX Tutorial JSON Tutorial

### Graphics

Canvas Tutorial SVG Tutorial Google Maps Tutorial

### Server Side

SQL Tutorial PHP Tutorial ASP Tutorial ASP.NET Tutorial VBScript Tutorial AppML Tutorial

### Web

Web Building Web Statistics Web Certification

### XML

XML Tutorial DTD Tutorial Schema Tutorial XML DOM Tutorial XPath Tutorial XSLT Tutorial XQuery Tutorial XSL-FO Tutorial RSS Tutorial WSDL Tutorial

### HTML/CSS

HTML Tag Reference HTML Event Reference HTML Color Reference CSS 1,2,3 Reference Bootstrap Reference

### JavaScript

JavaScript Reference HTML DOM Reference jQuery Reference jQuery Mobile Reference Google Maps Reference

### Server Side

PHP Reference SQL Reference ASP Reference VBScript Reference Razor Reference ASP.NET Reference

### XML

XML DOM Reference XSLT Reference XSL-FO Reference XPath Reference XQuery Reference Schema Reference RSS Reference SVG Reference

### HTML Charsets

HTML Character Sets HTML ASCII HTML ANSI HTML Windows-1252 HTML ISO-8859-1 HTML Symbols HTML UTF-8

### HTML/CSS

HTML Examples CSS Examples

### Browser Scripting

JavaScript Examples HTML DOM Examples jQuery Examples jQuery Mobile Examples AngularJS Examples AJAX Examples

### Server Scripting

PHP Examples ASP Examples VBScript Examples Razor Examples .NET Examples

### XML Languages

XML Examples DTD Examples XML DOM Examples XSL Examples XSLT Examples XPath Examples XQuery Examples Schema Examples RSS Examples SVG Examples