JQuery chaining methods allows you to handle multiple element properties efficiently instead of writing each one on a separate line and here is the solution.
Pre-requisites:
- Code editor preferably vs code
- Understanding the basics of HTML, CSS, Javascript, and Jquery
- Jquery library CDN - https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js
jQuery provides one of the additional features that are the chaining method and that’s gonna allow us to write multiple actions on the same element in one line of code.
Prepare HTML document:
Firstly prepare an HTML document with required ids and classes. My experimental piece of code is
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>jQuery chaining methods</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
<!-- this is the jQuery cdn link -->
</script>
</head>
<body>
<!-- example-1 -->
<h1 id="chain">Hello every one! click this
button to see a magic 🤩</h1>
<button id="btn1">Click me</button>
<!-- example-2 -->
<p>Click below button to hide me 😕</p>
<button id="hide">Hide</button>
<script src="./script.js"></script>
</body>
</html>
JQuery chaining methods:
Now add the different properties to the same element and try to experiment with different elements with different properties. Here is my experimental jQuery code for chaining methods.
//example-1
$(document).ready(function () {
$("#btn1").click(function () {
$("#chain").css("background-color","Aqua")
.slideUp(1000)
.slideDown(1000);
});
//example-1
$("#hide").click(function () {
$("p").css("font-size", "5rem").hide(2000);
});
});
jQuery chaining method is so simple and reduces the clumsiness of our code because it allows us to write all the relatable properties of a particular element in one line. You can write multiple properties that are all you planned in your design like as shown above.
Analyzing results:
Let us have a glance at the examples that we are experimenting with the jQuery chaining method.
In the first example, we are adding one background color, slide-up action, and slide-down action whenever the button is clicked.
https://www.youtube.com/watch?v=ssdJVnuDfTI
In the second example, we are changing font size, and also we are adding a hide action that should happen in 2 milliseconds when the button is clicked.
https://www.youtube.com/watch?v=GK0MbsUQUUU
Here is my source code for this experiment https://github.com/kosarajunavya/kosarajunavya.github.io/tree/main/jQueryChaining
Conclusion:
That’s all guys! You're ready to start with this info. Experiment with all of the properties in the jQuery chaining function to discover how much fun you can have.
Thank you so much for taking time to read this🤗! I Hope you found this post useful , will see you in the comments secton. Happy learning🙌!
FAQ
What is JQuery?
jQuery is one of the libraries in javascript that and the functionality becomes very simple with JQuery and it follows the principle of
“ write less do more ”.
What is the limit for addon properties?
There is no proper limit for the chaining add-ons, depending on the requirement you can add the properties and the properties could render in the format of first and followed by second and next.
What is the purpose of introducing chaining methods?
Chaining methods allow us to write multiple properties for the same element, which reduces the length of code. If the code length is minimum then the load on the Javascript engine will be getting reduced so that the data flow could be faster.
What are the methods of including the JQuery library in the project folder?
You can include the JQuery library in two methods one is by including a CDN link and the other is by downloading the JQuery library, but the preferred method is using a CDN link because when a web application loads the data loading from CDN is faster than the downloaded file.
21 likes
Add to read list
Comments