jQuery instance

jQuery instance

---

Do you want to improve your jQuery skills?

---

jQuery selector

$(this).hide()

Demonstrates jQuery's hide() function, which hides the current HTML element.

$("p").hide()

Demonstrates jQuery's hide() function, which hides all the elements.

$(".test").hide()

Demonstrates jQuery's hide() function, which hides all the elements of class"test".

$("#test").hide()

Demonstrates jQuery's hide() function, which hides the element of id"test".

---

jQuery event

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

jQuery dblclick()
Demonstrates the jQuery dblclick() event.

jQuery mouseenter()
Demonstrate the jQuery mouseenter() event.

jQuery mouseleave()
Demonstrate 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.

Instance resolution

---

jQuery Hide/Show

jQuery hide()
Demonstrate the jQuery hide() method.

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

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

jQuery hide()
Another instance of hidden text.

Instance resolution

---

jQuery fades in and out

jQuery fadeIn()
Demonstrates 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.

Instance resolution

---

jQuery slides

jQuery slideDown()
Demonstrate the jQuery slideDown() method.

jQuery slideUp()
Demonstrate the jQuery slideUp() approach.

jQuery slideToggle()
Demonstrates the jQuery slideToggle() approach.

Instance resolution

---

jQuery animation

jQuery animate()
Demonstrate the simple jQuery animate() approach.

jQuery animate() - Set multiple css properties
Demonstrates changing the style with the jQuery animate() method.

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

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

jQuery animate()
Demonstrate more examples of jQuery animate() methods

jQuery animate()
Demonstrates more jQuery animate() method instances (multiple animate() callbacks).

Instance resolution

---

jQuery stops the animation

jQuery stop() slide
Demonstrate the jQuery stop() method.

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

Instance resolution

---

jQuery HTML gets and properties

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

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

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

Instance resolution

---

jQuery HTML sets content and properties

jQuery text(), html(), and val() - set the content
Set the content using the jQuery text(), html() and val() methods.

jQuery text() and html() - set the content and use the callback function
Use text() and html() to set up content and use callback functions

jQuery attr() - Set property values
Set the property value using the jQuery attr() method.

jQuery attr() - Set multiple property values
Set multiple property values using the jQuery attr() method.

jQuery attr() - Set property values and use callback functions
Set the property value and call attr() using the callback function.

Instance resolution

---

jQuery HTML adds elements/content

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

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

jQuery append() - Insert multiple elements
Innovate new text/HTML elements, jQuery and JavaScript/DOM. After the text of the new element is added.

jQuery after() and before ()
Add HTML elements before and after you pick them.

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

Instance resolution

---

jQuery HTML removes elements/content

jQuery remove()
Remove the selected element

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

jQuery remove() - Use parameters
Filter the elements and remove them

Instance resolution

---

jQuery Get and Set CSS classes

jQuery addClass()
Add the class property to different elements

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

jQuery removeClass()
Remove the class of the specified element

jQuery toggleClass()
Switch (add/delete) classes in the selected element

Instance resolution

---

jQuery css() method

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

jQuery css() - Set the CSS property
Sets the CSS property specified by all configuration elements

jQuery css() - Set the CSS property
Set the CSS property for multiple matching elements

Instance resolution

---

jQuery size

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

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

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

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

jQuery - Returns width() and height() of document and window
Returns the width and height of html documents and windows

jQuery - Set width() and height()
Set the width and height of the specified element

Instance resolution

---

jQuery traversal - ancestor

jQuery parent()
Demonstrates the jQuery parent() method.

jQuery parents()
Demonstrates the jQuery parents() method.

jQuery parentsUntil()
Demonstrates the jQuery parentsUntil() method.

Instance resolution

---

jQuery traversal - descendants

jQuery children()
Demonstrate the jQuery children() method.

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

Instance resolution

---

jQuery traversal - siblings

jQuery siblings()
Demonstrate the jQuery siblings() approach.

jQuery next()
Demonstrate the jQuery next() method.

jQuery nextAll()
Demonstrate the jQuery nextAll() method.

jQuery nextUntil()
Demonstrate the jQuery nextUntil() method.

Instance resolution

---

jQuery AJAX load() method

jQuery load()
Asynchronously load the contents of the file and insert it into the element of the .lt;div.

jQuery load()
Asynchronously load the contents of the element specified in the contents of the file and insert it into the element.

jQuery load() - Use callback function (callback)
A callback function that uses the jQuery load() method.

Instance resolution

---

jQuery AJAX get() and post() methods

jQuery get()
Use the $.get() method to get data asynchronously from the service side

jQuery post()
Use the $.post() method to get data asynchronously from the service side

Instance resolution