jQuery and Function Chaining

Function chaining is a way to make code more readable and concise by calling multiple functions in sequence, where the output of one function becomes the input of the next. 
Imagine you have a series of tasks to complete, like washing your clothes:
1. Gather clothes: This is your first function.
2. Wash clothes: This function takes the output (clothes) from the first function as its input.
3. Dry clothes: This function takes the output (washed clothes) from the second function.

In function chaining, you can express this entire process in a single line of code:

gatherClothes()
.washClothes()
.dryClothes();

Instead of writing separate lines for each function, chaining allows you to link them together in a streamlined way. This improves readability and reduces the need for temporary variables. 
Key points about function chaining:

• Each function in the chain should return a value.
• The returned value becomes the input for the next function.
• The functions in the chain are typically related in some way.

Example:

const number = 10;
const result = number
.toString() // Convert to string
.toUpperCase() // Convert to uppercase
.replace("10", "Ten"); // Replace "10" with "Ten"
console.log(result); // Outputs “TEN”

Here, the `toString` function returns a string, which is used as input by the `toUpperCase` function. The result of `toUpperCase` is then used as input for the `replace` function. This way, we achieve the desired result with a single chain of functions.

Function chaining in jQuery allows you to execute multiple actions on the same set of elements in a single line of code. This is accomplished by returning the jQuery object after each function call, enabling you to chain subsequent methods onto the same selection. It streamlines code, improves readability, and enhances performance by reducing the number of DOM traversals. For example, you can chain `$('.element').addClass('newClass').css('color', 'red').hide()` to add a class, change the color, and hide elements with the "element" class, all in one concise line.

I am learning new things about jQuery: function chaning is a really cool feature:
 

<script type="text/javascript">
$(document).ready(function() {
    $('#testclick').click(function() {   
         alert('Hello world clicker!');   
     });   
    $('#testclick').click(function() {   
        $('#div1').html( 'clicked' );
     });   
     
});
</script>