jQuery example

jQuery Example

Do you want to improve your jQuery skills?

---

jQuery Selector

$(this).hide()

Demonstrate jQuery's hide() function to hide the current HTML element.

$("p").hide()

Demonstrates jQuery's hide() function to hide all <p> elements.

$(".test").hide()

Demonstrates jQuery's hide() function to hide all elements with class="test".

$("#test").hide()

Demonstrates jQuery's hide() function to hide elements with id="test".

---

jQuery event

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

jQuery dblclick()
Demo 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 jQuery focus() and blur() events.

Example analysis

---

##jQuery Hide/Show

jQuery hide()

Demonstrates the jQuery hide() method.

jQuery hide() and show()

Demonstrates the jQuery hide() and show() methods.

jQuery toggle()

jQuery toggle() is used to switch hide() and show() methods.

jQuery hide()

Another example of hiding text.

Example analysis

---

##jQuery fade in and fade out
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.

Example analysis

---

##jQuery sliding

jQuery slideDown()
Demonstrates the jQuery slideDown() method.

jQuery slideUp()
Demonstrates the jQuery slideUp() method.

jQuery slideToggle()
Demonstrates the jQuery slideToggle() method.

Example analysis

##jQuery animation

---

jQuery animate() Demonstrates the simple jQuery animate() method.

jQuery animate() - Setting multiple css properties
Demonstrates changing styles through the jQuery animate() method.

jQuery animate() - Using related values ​​
Demonstrates how to use related values ​​in the jQuery animate() method.

jQuery animate() - Using predefined values
Demonstrates predefined "hide", "show", "toggle" values ​​through the animate() method.

jQuery animate()
Demonstrate more jQuery animate() method examples

jQuery animate()
Demonstrate more jQuery animate() method examples (multiple animate() Callback).

Example analysis

jQuery stop animation

jQuery stop() Slide
Demo jQuery stop( ) method.

jQuery stop() animation (with parameters)
Demonstrates the jQuery stop() method.

Example analysis

---

##jQuery HTML acquisition and attributes

jQuery text() and html() - Get text and content

Use jQuery text() and html() methods to get content.

jQuery val() - Get the value

Use the jQuery val() method to get the field value of the form.

jQuery attr() - Get attribute value

Use jQuery attr() method to get attribute value.

Example analysis

---

jQuery HTML setting content and attributes

jQuery text(), html(), and val() - Setting content

Use jQuery text(), html() and val() methods to set content.

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

Use text() and html() to set the content and use the callback function

jQuery attr() - Set Attribute value

Use the jQuery attr() method to set the attribute value.

jQuery attr() - Set multiple attribute values

Use the jQuery attr() method to set multiple attribute values.

jQuery attr() - Set the attribute value and use the callback function

Set the attribute value + and use the callback function to call attr().

Example analysis

---

jQuery HTML Add element/content

jQuery append()

In selecting elements Add content at the end

jQuery prepend()

Add content at the beginning of the selected element

jQuery append() - Insert multiple elements

Innovate new text/HTML elements, jQuery and JavaScript/DOM. Appended after the text of the new element.

jQuery after() and before()

Add HTML elements before and after the selected element.

jQuery after() - Insert multiple elements

Innovate new text/HTML elements, jQuery and JavaScript/DOM. Inserts a new element at the end of the selected elements.

Example analysis

---

##jQuery HTML remove element/content
jQuery remove()

Remove the selected element

jQuery empty()

Remove all child elements of the selected element

jQuery remove() - Filter elements using parameters

and remove

Instance parsing

---

##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 the specified element Class

jQuery toggleClass()

Toggle (add/delete) class in the selected element

Instance analysis

---

jQuery css() method

jQuery css() - Returns the CSS property

Returns the css of the first matching element Property value

jQuery css() - Set CSS properties

Set CSS properties specified by all configuration elements

jQuery css() - Set CSS properties

Set multiple matching elements CSS properties

Example parsing

---

##jQuery size
jQuery - Returns width() and height()

Returns the width and height of the specified element

jQuery - Returns innerWidth() and innerHeight()

Returns the inner-width of the specified element /height

jQuery - Returns outerWidth() and outerHeight()

Returns the outer-width/height of the specified element

jQuery - Returns outerWidth(true) and outerHeight(true)

Return the outer-width/height of the specified element (including the outer border)

jQuery - Return width() and height() of document and window

Return the width and height of HTML document and window

jQuery - Set width() and height()

Set the width and height of the specified element

Instance analysis

---

jQuery Traversal - Ancestors
jQuery parent()

Demonstrates the jQuery parent() method.

jQuery parents()

Demonstrates the jQuery parents() method.

jQuery parentsUntil()

Demonstrates the jQuery parentsUntil() method.

Example Analysis

---

##jQuery Traversal - Descendants

jQuery children()
Demonstrates the jQuery children() method.

jQuery find()
Demonstrates the jQuery find() method.

Example Analysis

##jQuery Traversal - 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.

Example analysis

##jQuery AJAX load() method

---

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

Asynchronously loads the element content specified in the file content and inserts it into the <div> element.

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

Example analysis

---

##jQuery AJAX get() and post() methods

jQuery get()

Use the $.get() method to asynchronously obtain data from the server

jQuery post()

Use the $.post() method Asynchronously obtain data from the server

Instance analysis