Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • Jquery Chaining

    @nanda.puri
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 345
    Comment on it

    Jquery Chaining:

        Till now we know that Jquery statements are executed line by line i.e one line after the another, but there is a technique that allows executing multiple Jquery commands in a single line just one after the another called chaining.

    Syntax:

    For chaining we just need to write one command just after the another.

    Example:

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    5. <script>
    6. $(document).ready(function(){
    7.     $("button").click(function(){
    8.         $("#p1").slideUp(2000).slideDown(2000);
    9.     });
    10. });
    11. </script>
    12. </head>
    13. <body>
    14.  
    15. <p id="p1">jQuery Chaining</p>
    16.  
    17. <button>Click</button>
    18.  
    19. </body>
    20. </html>

      In this example above, the .slideUp() & .slideDown() functions are chained together and will be executed just one after the another.

    As chaining line can grow very long therefore we can format it as follows:

    1. $("#p1").slideUp(2000)
    2.     .slideDown(2000);

    Note:-> As jQuery is not very strict on the syntax we can easily include line breaks and indentations.

    Jquery chaining JQuery Calling multiple commands in single line
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: