jQuery example


You want to improve jQuery Skills ?


jQuery selector

$(this).hide()

demonstration jQuery of hide() function , Hide the current HTML element .

$("p").hide()

demonstration jQuery of hide() function , Hide all <p> element .

$(".test").hide()

demonstration jQuery of hide() function , Hide all class="test" Elements of .

$("#test").hide()

demonstration jQuery of hide() function , hide id="test" Elements of .


jQuery event

jQuery click()
demonstration jQuery jQuery click() event .

jQuery dblclick()
demonstration jQuery dblclick() event .

jQuery mouseenter()
demonstration jQuery mouseenter() event .

jQuery mouseleave()
demonstration jQuery mouseleave() event .

jQuery mousedown()
demonstration jQuery mousedown() event .

jQuery mouseup()
demonstration jQuery mouseup() event .

jQuery hover()
demonstration jQuery hover() event .

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

Instance resolution


jQuery hide / Show

jQuery hide()
demonstration jQuery hide() method .

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

jQuery toggle()
jQuery toggle() Used to switch hide() and show() method .

jQuery hide()
Another example of hidden text .

Instance resolution


jQuery Fade in and out

jQuery fadeIn()
demonstration jQuery fadeIn() method .

jQuery fadeOut()
demonstration jQuery fadeOut() method .

jQuery fadeToggle()
demonstration jQuery fadeToggle() method .

jQuery fadeTo()
demonstration jQuery fadeTo() method .

Instance resolution


jQuery slide

jQuery slideDown()
demonstration jQuery slideDown() method .

jQuery slideUp()
demonstration jQuery slideUp() method .

jQuery slideToggle()
demonstration jQuery slideToggle() method .

Instance resolution


jQuery Animation

jQuery animate()
Demonstrate simple jQuery animate() method .

jQuery animate() - Set multiple css attribute
The demonstration passed jQuery animate() method Change the style .

jQuery animate() - Use related values
Demonstrate how to jQuery animate() Method .

jQuery animate() - Use predefined values
The demonstration passed animate() Methods are predefined "hide", "show", "toggle" Worth .

jQuery animate()
Demonstrate more jQuery animate() Method instance

jQuery animate()
Demonstrate more jQuery animate() Method instance ( Multiple animate() Callback ).

example Parse


jQuery Stop Animation

jQuery stop() slide
demonstration jQuery stop() method .

jQuery stop() Animation ( With parameters )
demonstration jQuery stop() method .

Instance resolution


jQuery HTML obtain and attribute

jQuery text() and html() - Get text and content
use jQuery text() and html() Method to get the content .

jQuery val() - Get value
use jQuery val() Method to get the field value of the form .

jQuery attr() - Get property value
use jQuery attr() Method to get the property value .

Instance resolution


jQuery HTML Set content and properties

jQuery text(), html(), and val() - Set content
use jQuery text(), html() and val() Method to set the content .

jQuery text() and html() - Set the content and use the callback function
use text() and html() Set the content and use the callback function

jQuery attr() - Set the property value
use jQuery attr() Method to set the property value .

jQuery attr() - set up Multiple attribute values
use jQuery attr() Method to set multiple attribute values .

jQuery attr() - Set the property value and use the callback function
Set the property value + And use the callback function to call attr().

Instance resolution


jQuery HTML Add elements / content

jQuery append()
Add content at the end of the selected element

jQuery prepend()
Add content at the beginning of the selected element

jQuery append() - Insert multiple elements
Innovate new text/HTML element , jQuery and JavaScript/DOM. Add after new element text .

jQuery after() and before()
Add... Before and after the selected element HTML  element .

jQuery after() - Insert multiple elements
Innovate new text/HTML element ,jQuery and JavaScript/DOM. Insert a new element at the end of the selected element .

Instance resolution


jQuery HTML Remove element / content

jQuery remove()
Remove the selected element

jQuery empty()
Remove all child elements of the selected element

jQuery remove() - Use parameters
Filter elements and remove

Instance resolution


jQuery Get and set up CSS class

jQuery addClass()
Add different elements class attribute

jQuery addClass() - Multiple classes
use addClass() Method to add multiple classes

jQuery removeClass()
Removes the class of the specified element

jQuery toggleClass()
Switch between selected elements ( add to / Delete ) class

Instance resolution


jQuery css() method

jQuery css() - return CSS attribute
Returns the of the first matching element css Attribute value

jQuery css() - set up CSS attribute
set up Specified by all configuration elements CSS attribute

jQuery css() - set up CSS attribute
Set the of multiple matching elements CSS attribute

Instance resolution


jQuery size

jQuery - return width() and height()
Returns the of the specified element width and height

jQuery - return innerWidth() and innerHeight()
Returns the of the specified element inner-width/height

jQuery - return outerWidth() and outerHeight()
Returns the of the specified element outer-width/height

jQuery - return outerWidth(true) and outerHeight(true)
Returns the of the specified element outer-width/height ( Include outer border )

jQuery - return width() and height() of document and window
return HTML Of documents and windows width and height

jQuery - set up width() and height()
Sets the value of the specified element width and height

Instance resolution


jQuery ergodic - ancestors

jQuery parent()
demonstration jQuery parent() method .

jQuery parents()
demonstration jQuery parents() method .

jQuery parentsUntil()
demonstration jQuery parentsUntil() method .

Instance resolution


jQuery ergodic - Offspring

jQuery children()
demonstration jQuery children() method .

jQuery find()
demonstration jQuery find() method .

Instance resolution


jQuery ergodic - compatriot (siblings)

jQuery siblings()
demonstration jQuery siblings() method .

jQuery next()
demonstration jQuery next() method .

jQuery nextAll()
demonstration jQuery nextAll() method .

jQuery nextUntil()
demonstration jQuery nextUntil() method .

Instance resolution


jQuery AJAX load() method

jQuery load()
Load the contents of the file asynchronously and insert it into <div> Element .

jQuery load()
Load the element content specified in the file content asynchronously and insert it into <div> element .

jQuery load() - Use callback function (callback)
use jQuery load() Method .

Instance resolution


jQuery AJAX get() and post() method

jQuery get()
use $.get() Method asynchronously obtains data from the server

jQuery post()
use $.post() Method asynchronously obtains data from the server

Instance resolution


Other examples

jQuery Dynamic particle effect