jQuery Example
Do you want to improve your jQuery skills?
jQuery Selectors
Demonstrate jQuery's hide() function, hiding the current HTML element.
Demonstrate jQuery's hide() function, hiding all <p> elements.
Demonstrate jQuery's hide() function, hiding all elements with class="test".
Demonstrate jQuery's hide() function, hiding the element with id="test".
jQuery Events
jQuery click()
Demonstrate the jQuery click() event.
jQuery
dblclick()
Demonstrate the jQuery dblclick() event.
jQuery
mouseenter()
Demonstrate the jQuery mouseenter() event.
jQuery
mouseleave()
Demonstrate the jQuery mouseleave() event.
jQuery
mousedown()
Demonstrate the jQuery mousedown() event.
jQuery mouseup()
Demonstrate the jQuery mouseup() event.
jQuery hover()
Demonstrate the jQuery hover() event.
jQuery focus() and blur()
Demonstrate the jQuery focus() and blur() events.
jQuery Hide/Show
jQuery hide()
Demonstrate the jQuery hide() method.
jQuery hide() and show()
Demonstrate the jQuery hide() and show() methods.
jQuery toggle()
jQuery toggle() is used to switch between hide() and show() methods.
jQuery hide()
Another example of hiding text.
jQuery Fade In/Fade Out
jQuery fadeIn()
Demonstrate the jQuery fadeIn() method.
jQuery fadeOut()
Demonstrate the jQuery fadeOut() method.
jQuery fadeToggle()
Demonstrate the jQuery fadeToggle() method.
jQuery fadeTo()
Demonstrate the jQuery fadeTo() method.
jQuery Sliding
jQuery slideDown()
Demonstrate the jQuery slideDown() method.
jQuery slideUp()
Demonstrate the jQuery slideUp() method.
jQuery slideToggle()
Demonstrate the jQuery slideToggle() method.
jQuery Animation
jQuery animate()
Demonstrate the simple jQuery animate() method.
jQuery animate() - Set Multiple CSS Properties
Demonstrate changing styles with the jQuery animate() method.
jQuery animate() - Using Relative Values
Demonstrate how to use relative values in the jQuery animate() method.
jQuery animate() - Using Predefined Values
Demonstrate the predefined values "hide", "show", "toggle" with the animate() method.
jQuery animate()
Demonstrate more jQuery animate() method examples
jQuery animate()
Demonstrate more jQuery animate() method examples (multiple animate() callbacks).
jQuery Stop Animations
jQuery stop() Sliding
Demonstrate the jQuery stop() method.
jQuery stop() Animation (with parameters)
Demonstrate the jQuery stop() method.
jQuery HTML Get and Attributes
jQuery text() and html() - Get Text and Content
Use the jQuery text() and html() methods to get content.
jQuery val() - Get Value
Use the jQuery val() method to get the value of a form field.
jQuery attr() - Get Attribute Value
Use the jQuery attr() method to get attribute values.
jQuery HTML Set Content and Attributes
jQuery text(), html(), and val() - Set Content
Use the jQuery text(), html(), and val() methods to set content.
jQuery text() and html() - Set Content Using Callback Functions
Use text() and html() to set content and use callback functions
jQuery attr() - Set Attribute Values
Use the jQuery attr() method to set attribute values.
jQuery attr() - Set Multiple Attribute Values
Use the jQuery attr() method to set multiple attribute values.
jQuery attr() - Set Attribute Values Using Callback Functions
Set attribute values and use callback functions to call attr().
jQuery HTML Add Elements/Content
jQuery append()
Add content at the end of the selected elements
jQuery prepend()
Add content at the beginning of the selected elements
jQuery append() - Insert Multiple Elements
Create new text/HTML elements, jQuery and JavaScript/DOM. Add after the new element text.
jQuery after() and before()
Add HTML elements before and after the selected elements.
jQuery after() - Insert Multiple Elements
Create new text/HTML elements, jQuery and JavaScript/DOM. Insert new elements at the end of the selected elements.
jQuery HTML Remove Elements/Content
jQuery remove()
Remove the selected elements
jQuery empty()
Remove all child elements of the selected elements
jQuery remove() - Using Parameters
Filter elements and remove
jQuery Get and Set CSS Classes
jQuery addClass()
Add class attributes to different elements
jQuery addClass() - Multiple Classes
Use the addClass() method to add multiple classes
jQuery removeClass()
Remove classes from specified elements
jQuery toggleClass()
Toggle (add/remove) classes on selected elements
jQuery css() Method
jQuery css() - Return CSS Properties
Return the CSS property value of the first matched element
jQuery css() - Set CSS Properties
Set the specified CSS properties for all matched elements
jQuery css() - Set CSS Properties
Set CSS properties for multiple matched elements
jQuery Dimensions
jQuery - Return width() and height()
Return the width and height of the specified element
jQuery - Return innerWidth() and innerHeight()
Return the inner-width/height of the specified element
jQuery - Return outerWidth() and outerHeight()
Return the outer-width/height of the specified element
jQuery - Return outerWidth(true) and outerHeight(true)
Return the outer-width/height of the specified element (including the outer border)
jQuery - Return the width() and height() of document and window
Return the width and height of the HTML document and window
jQuery - Set width() and height()
Set the width and height of the specified element
jQuery Traversing - Ancestors
jQuery parent()
Demonstrate the jQuery parent() method.
jQuery parents()
Demonstrate the jQuery parents() method.
jQuery parentsUntil()
Demonstrate the jQuery parentsUntil() method.
jQuery Traversing - Descendants
jQuery children()
Demonstrate the jQuery children() method.
jQuery find()
Demonstrate the jQuery find() method.
jQuery Traversing - Siblings
jQuery siblings()
Demonstrate the jQuery siblings() method.
jQuery next()
Demonstrate the jQuery next() method.
jQuery nextAll()
Demonstrate the jQuery nextAll() method.
jQuery nextUntil()
Demonstrate the jQuery nextUntil() method.
jQuery AJAX load() Method
jQuery load()
Asynchronously load file content and insert it into the <div> element.
jQuery load()
Asynchronously load the content of the specified element in the file and insert it into the <div> element.
jQuery load() - Using the Callback Function
Use the callback function of the jQuery load() method.
jQuery AJAX get() and post() Methods
jQuery get()
Use the $.get() method to asynchronously retrieve data from the server.
jQuery
post()
Use the $.post() method to asynchronously retrieve data from the server.
More Examples
jQuery Dynamic Particle Effect
Other Extensions