-
jQuery Remove Elements & Attribute
jQuery Remove Elements or Contents jQuery provides handful of methods, such as empty(), remove(), unwrap() etc. to remove existing HTML elements or contents from the document. jQuery empty() Method The jQuery empty() method removes all child elements as well as other descendant elements and the text content within the selected elements from the DOM. The following example will remove all the content inside…
-
jQuery before() Method
The jQuery before() method is used to insert content before the selected elements. The following example will insert a paragraph before the container element on document ready, whereas insert an image before the <h1> element on button click. Example Note: The contents or elements inserted using the jQuery before() and after() methods is added outside of the selected elements. jQuery after() Method The jQuery after() method is used…
-
jQuery Insert Content
jQuery Insert New Content jQuery provides several methods, like append(), prepend(), html(), text(), before(), after(), wrap() etc. that allows us to insert new content inside an existing element. The jQuery html() and text() methods have already covered in the previous chapter, so in this chapter, we will discuss about the rest of them. jQuery append() Method The jQuery append() method is used to insert content to the end of the selected…
-
jQuery html() Method
The jQuery html() method is used to get or set the HTML contents of the elements. Get HTML Contents with html() Method The following example will show you how to get the HTML contents of the paragraph elements as well as a <div> element container: Example Note: If multiple elements are selected, the html() method only returns the HTML contents of the first element…
-
jQuery Getters & Setter
jQuery Get or Set Contents and Values Some jQuery methods can be used to either assign or read some value on a selection. A few of these methods are text(), html(), attr(), and val(). When these methods are called with no argument, it is referred to as a getters, because it gets (or reads) the value of the element. When…
-
jQuery Callback
jQuery Callback Functions JavaScript statements are executed line by line. But, since jQuery effect takes some time to finish the next line code may execute while the previous effect is still running. To prevent this from happening jQuery provides a callback function for each effect method. A callback function is a function that is executed…
-
jQuery Chaining
jQuery Method Chaining The jQuery provides another robust feature called method chaining that allows us to perform multiple action on the same set of elements, all within a single line of code. This is possible because most of the jQuery methods return a jQuery object that can be further used to call another method. Here’s…
-
Creating Smooth Hover Effect
While creating the animated hover effect one of the common problem you may face is multiple queued animations, when you place and remove the mouse cursor rapidly. Because, in this situation mouseenter or mouseleave events are triggered quickly before the animation complete. To avoid this problem and create a nice and smooth hover effect you can add the stop(true, true) to…
-
jQuery Stop Animations
jQuery stop() Method The jQuery stop() method is used to stop the jQuery animations or effects currently running on the selected elements before it completes. The basic syntax of the jQuery stop() method can be given with: $(selector).stop(stopAll, goToEnd); The parameters in the above syntax have the following meanings: Here’s a simple example that demonstrates the jQuery stop() method in real action in…
-
Animate Multiple Properties One by One or Queued Animations
You can also animate the multiple properties of an element one by one individually in a queue using the jQuery’s chaining feature. We’ll learn more about chaining in next chapter. The following example demonstrates a jQuery queued or chained animation, where each animation will start once the previous animation on the element has completed. Example…