Latest web development tutorials

jQuery Examples

Do you want to enhance jQuery skills?


jQuery selector

$ (this) .hide ()

Demonstrates the jQuery hide () function, hiding the current HTML element.

$ ( "p"). hide ()

Demonstrates the jQuery hide () function, hiding all <p> elements.

$ ( ". test"). hide ()

Demonstrates the jQuery hide () function, hiding all class = "test" element.

$ ( "# test"). hide ()

Demonstrates the jQuery hide () function, hide id = "test" element.


jQuery Event

jQuery click ()
Demo jQuery jQuery click () event.

jQuery dblclick ()
Demo jQuery dblclick () event.

jQuery mouseenter ()
Demo jQuery mouseenter () event.

jQuery mouseleave ()
Demo jQuery mouseleave () event.

jQuery mousedown ()
Demo jQuery mousedown () event.

jQuery mouseup ()
Demo jQuery mouseup () event.

jQuery hover ()
Demo jQuery hover () event.

jQuery focus () and blur ()
Demo jQuery focus () and blur () event.

Examples of analytical


jQuery Hide / Show

jQuery hide ()
Demo jQuery hide () method.

jQuery hide () and show ()
Demo jQuery hide () and show () method.

jQuery toggle ()
jQuery toggle () for switching hide () and show () method.

jQuery hide ()
Further examples of a hidden text.

Examples of analytical


jQuery Fade

jQuery fadeIn ()
Demo jQuery fadeIn () method.

jQuery fadeOut ()
Demo jQuery fadeOut () method.

jQuery fadeToggle ()
Demo jQuery fadeToggle () method.

jQuery fadeTo ()
Demo jQuery fadeTo () method.

Examples of analytical


jQuery slide

jQuery slideDown ()
Demo jQuery slideDown () method.

jQuery slideUp ()
Demo jQuery slideUp () method.

jQuery slideToggle ()
Demo jQuery slideToggle () method.

Examples of analytical


jQuery animation

jQuery animate ()
Demo simple jQuery animate () method.

jQuery animate () - set multiple css property
Demo () method to change the style by jQuery animate.

jQuery animate () - the use of the correlation value
Demonstrates how to use the values ​​in the jQuery animate () method.

jQuery animate () - using a predefined value
Demonstration of predefined "hide", "show", "toggle" values ​​animate ().

jQuery animate ()
Demo More jQuery animate () method instance

jQuery animate ()
Demo More jQuery animate () method instance (multiple animate () callback).

Examples of analytical


Stop jQuery animations

jQuery stop () slide
Demo jQuery stop () method.

jQuery stop () Anime (parameters)
Demo jQuery stop () method.

Examples of analytical


jQuery HTML Get and property

jQuery text () and html () - get the text and content
Use jQuery text () and html () method to get the content.

jQuery val () - Gets the value
Use jQuery val () method to get the form field values.

jQuery attr () - Gets the property value
Use jQuery attr () method to get the property value.

Examples of analytical


jQuery HTML content and setting properties

jQuery text (), html () , and val () - set the content
Use jQuery text (), html () and val () method to set the content.

jQuery text () and html () - set the content and use a callback function
Using text () and html () set the content and use a callback function

jQuery attr () - to set property values
Use jQuery attr () method to set property values.

jQuery attr () - set multiple property values
Use jQuery attr () method to set multiple property values.

jQuery attr () - to set property values using a callback function
+ And set property values ​​using a callback function call attr ().

Examples of analytical


jQuery HTML to add elements / content

jQuery append ()
At the end of selected elements add content

jQuery prepend ()
In the beginning of selected elements add content

jQuery append () - insert multiple elements
Innovative new text / HTML elements, jQuery and JavaScript / DOM. Adding a new element in the text.

jQuery after () and before ()
Before and after the selected element to add HTML elements.

jQuery after () - insert multiple elements
Innovative new text / HTML elements, jQuery and JavaScript / DOM. At the end of selected element to insert new elements.

Examples of analytical


jQuery HTML elements are removed / content

jQuery remove ()
Remove selected element

jQuery empty ()
Remove selected elements of all child elements

jQuery remove () - parameters
And remove the filter element

Examples of analytical


jQuery Get and Set CSS classes

jQuery addClass ()
Add different elements class attribute

jQuery addClass () - more than one class
Use addClass () method to add multiple classes

jQuery removeClass ()
Removes the specified element of class

jQuery toggleClass ()
In selected switching elements (add / remove) class

Examples of analytical


jQuery css () method

jQuery css () - Returns the CSS property
Returns the first matching element css property values

jQuery css () - Set CSS properties
Set all configuration elements specified CSS property

jQuery css () - Set CSS properties
A plurality of matching elements CSS properties

Examples of analytical


jQuery Dimensions

jQuery - returns the width () and height ()
Returns the specified element's width and height

jQuery - returns innerWidth () and innerHeight ()
Returns the specified element's inner-width / height

jQuery - returns outerWidth () and outerHeight ()
Returns the specified element's outer-width / height

jQuery - returns outerWidth (true) and outerHeight (true)
Returns the specified element's outer-width / height (including the outer frame)

jQuery - returns the width () and height () of document and window
Returns the HTML document and the window width and height

jQuery - Setting width () and height ()
Setting the width and height specified element

Examples of analytical


jQuery traversal - ancestor

jQuery parent ()
Demo jQuery parent () method.

jQuery parents ()
Demo jQuery parents () method.

jQuery parentsUntil ()
Demo jQuery parentsUntil () method.

Examples of analytical


jQuery traversal - offspring

jQuery children ()
Demo jQuery children () method.

jQuery find ()
Demo jQuery find () method.

Examples of analytical


jQuery traversal - Compatriots (siblings)

jQuery siblings ()
Demo jQuery siblings () method.

jQuery next ()
Demo jQuery next () method.

jQuery nextAll ()
Demo jQuery nextAll () method.

jQuery nextUntil ()
Demo jQuery nextUntil () method.

Examples of analytical


jQuery AJAX load () method

jQuery load ()
Asynchronous loading the file contents and inserted into the <div> element.

jQuery load ()
Asynchronous load file contents specified element content and inserted into the <div> element.

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

Examples of analytical


jQuery AJAX get () and post () method

jQuery get ()
Using $ .get () method to retrieve data from the server asynchronously

jQuery post ()
Using the $ .post () method to retrieve data from the server asynchronously

Examples of analytical