Scribd
Upload
24 views4 pages

jQuery Method Chaining Explained

The document explains jQuery chaining, which allows multiple jQuery methods to be executed on the same element in a single statement. This technique improves efficiency by preventing the browser from repeatedly finding the same elements. An example is provided where the color of a paragraph changes, followed by slide up and slide down animations upon a button click.

Uploaded by

ROSELIN ANDREW
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
24 views4 pages

jQuery Method Chaining Explained

The document explains jQuery chaining, which allows multiple jQuery methods to be executed on the same element in a single statement. This technique improves efficiency by preventing the browser from repeatedly finding the same elements. An example is provided where the color of a paragraph changes, followed by slide up and slide down animations upon a button click.

Uploaded by

ROSELIN ANDREW
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd

jQuery - Chaining

By:H.L. Chandrakar
jQuery - Chaining
• With jQuery, you can chain together actions/methods.
• Chaining allows us to run multiple jQuery methods (on the
same element) within a single statement.
• Until now we have been writing jQuery statements one at a
time (one after the other).
• However, there is a technique called chaining, that allows us to
run multiple jQuery commands, one after the other, on the
same element(s).
• Tip: This way, browsers do not have to find the same element(s)
more than once.
• To chain an action, you simply append the action to the
previous action.
The following example chains together the css(), slideUp(),
and slideDown() methods. The "p1" element first changes to red,
then it slides up, and then it slides down:

• <html>
• <head>
• <script src="[Link]
• <script>
• $(document).ready(function(){
• $("button").click(function(){
• $("#p1").css("color", "red").slideUp(2000).slideDown(2000);
• });
• });
• </script>
• </head>
• <body>

• <p id="p1">jQuery is fun!!</p>

• <button>Click me</button>

• </body>
• </html>
THANK YOU

You might also like