জেকুয়েরি জাভাস্ক্রিপ্ট এঙ্গুলার এইচটিএমএল সিএসএস বুটস্ট্রাপ
লগইন
 

জেকুয়েরি -চেইনিং


জেকুয়েরির মাধ্যমে, আপনি এ্যকশন/মেথডকে একসাথে চেইনিং করতে পারেন।

চেইনিংয়ের মাধ্যমে একটি এলিমেন্টের (একই এলিমেন্টের) মধ্যে একাধিক মেথড ব্যবহার করা যায়।


জেকুয়েরি মেথড চেইনিং

এতক্ষন পর্যন্ত আমরা একসাথে শুধুমাত্র একটি (একটির পর একটি) স্টেটমেন্ট লিখেছি।

যাইহোক, একটি কৌশল রয়েছে যার মাধ্যমে আমরা একটি এলিমেন্টের মধ্যে একাধিক জেকুয়েরি কমান্ড ব্যবহার করতে পারি (একটির পর একটি)।

টিপসঃ এই পদ্ধতিতে, ব্রাউজারের একটি এলিমেন্টকে দ্বিতীয়বার খুজে নিতে হয়না।

একটি একশনকে চেইনিং করার জন্য শুধুমাত্র পূর্ববর্তী একশনের সাথে এটিকে সংযুক্ত করতে হবে।

নিম্নলিখিত উদাহরনে css(), slideUp(), এবং slideDown() মেথডকে একসাথে চেইনিং করা হয়েছে। "paragraph" এলিমেন্টটি প্রথমে লালে রুপান্তর হবে, তারপর উপরে স্লাইড হবে এবং তারপর নিচে স্লাইড হবেঃ

উদাহরণ

<!DOCTYPE html>
<html>
    <head>
        <title>জেকুয়েরি উদাহরণ</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("#paragraph").css({"background-color": "aqua", "color": "red"}).slideUp(2000).slideDown(2000);
            });
        });
        </script>
    </head>
    <body>

        <p id="paragraph">জেকুয়েরি শেখা অনেক সহজ!!</p>
        <button>এখানে ক্লিক করুন</button>   
    
    </body>
</html>

ফলাফল



আমাদের প্রয়োজনের উপর নির্ভর করে আমরা আরো বেশি মেথড কল করতে পারি।

টিপসঃ চেইনিংয়ের সময়, কোডের লাইন অনেক বেশি হতে পারে। যাইহোক, সিনট্যাক্সের ক্ষেত্রে জেকুয়েরি স্ট্রিক্ট নয়; আপনার ইচ্ছামতো এগুলোকে ফরম্যাট করতে পারেন।

এই নিয়মও ভালভাবে কাজ করবেঃ

উদাহরণ

<!DOCTYPE html>
<html>
    <head>
        <title>জেকুয়েরি উদাহরণ</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("#paragraph").css({"background-color": "aqua", "color": "red"})
                    .slideUp(2000)
                    .slideDown(2000);
            });
        });
        </script>
    </head>
    <body>

        <p id="paragraph">জেকুয়েরি শেখা অনেক সহজ!!</p>
        <button>এখানে ক্লিক করুন</button>

    </body>
</html>

ফলাফল



জেকুয়েরি অতিরিক্ত খালি জায়গা বাদ দিয়ে, উপরের কোডগুলো একটি বড়লাইনের মতো করেই এক্সিকিউট করবে।