Using Method Chaining in jQuery

jQuery's Method chaining empowers you to execute multiple actions on a singular set of elements, seamlessly integrating these actions into a single line of code. This approach, known as command chaining, enables the sequential application of multiple methods to the identical set of elements. This not only offers efficiency by eliminating redundant element searches but also enhances code conciseness and browser performance.

How Method Chaining Works?

Virtually all jQuery methods yield a jQuery object as their output. This means that following the execution of a method on your chosen selection, you can seamlessly proceed to apply additional methods. Furthermore, you have the capability to alter your selection and then proceed to apply methods on the newly refined selection. This versatility facilitates a fluid and efficient workflow when manipulating elements.

$('myDiv').removeClass('off').addClass('on');

Every jQuery function provides an instance of the jQuery class as its output, enabling the subsequent invocation of methods on that instance. Even if you deconstruct the process, the result would remain unchanged, preserving the intended effect of the code.

jQuery_obj = $('myDiv'); jQuery_obj = jQuery_obj.removeClass('off'); jQuery_obj = jQuery_obj.addClass('on');
Example : Without Chaining
$(document).ready(function(){ $('#myContent').addClass('hello'); $('#myContent').css('color', 'red'); $('#myContent').fadeOut('fast'); });?
Example : With Chaining
$('#myContent').addClass('hello').css('color', 'red').fadeOut('fast');

While chaining, the line of code may extend in length. Nonetheless, jQuery offers flexibility in syntax, allowing you to format the code according to your preference. This encompasses the incorporation of line breaks and indentations to enhance code readability.

$(document).ready(function(){ $('#myContent').addClass('hello') .css('color', 'red') .fadeOut('fast'); });?

Above examples do the same thing and it is faster and shorter in code. Without Chaining , JQuery has to search the entire DOM to find the element and after that it executes the function on it.

Advantages:

  1. It makes your code short and easy to manage.
  2. It gives better performance(faster).
  3. The chain starts from left to right. So left most will be called first and so on.

Not only functions or methods, chaining also works with events in jQuery . For example, below piece of code have click, mouseover and mouseout event for a button.

?$(document).ready(function() { $("#myBtn").click(function(e) { alert("Button Clicked !"); }).mouseover(function(e) { alert("mouse over!") }).mouseout(function(e) { alert("mouse out!") }); });

It's crucial to recognize that certain methods do not yield the jQuery object as a return value, whereas others offer this behavior based on the parameters supplied. When no parameters are provided, these methods return the existing text of the chosen element(s) instead of a jQuery object. Conversely, by furnishing a solitary parameter, jQuery will modify the indicated text and furnish a jQuery object as the outcome.

example
$(document).ready(function(){ $("button").click(function(){ // This will work $("h1").html("Chaining Here...!").addClass("Hi"); // This will NOT work $("p").html().addClass("Hi"); }); });

Conclusion

Method chaining in jQuery allows for the sequential execution of multiple actions on the same set of elements within a single line of code. This approach optimizes efficiency by enabling the reuse of element selections and the application of various methods in a concise manner, enhancing both code readability and browser performance.






Related Topics
  1. What is jQuery?
  2. How jQuery Works
  3. jQuery Fundamentals
  4. What is $(document).ready() method in jQuery
  1. jQuery Hello world example