jQuery: সংক্ষিপ্ত পরিচিতি
jQuery হল একটি জাভাস্ক্রিপ্ট লাইব্রেরি যা ডেভেলপারদের DOM ম্যানিপুলেট করা, ইভেন্ট হ্যান্ডলার লেখা, অ্যানিমেশন তৈরি করা এবং AJAX রিকোয়েস্ট করা সক্ষম করে — সবকुछ কয়েক লাইন কোডে। এটি সম্ভব হয় jQuery API-এর уникаল সিলেক্টর এবং মেথডের মাধ্যমে। এমন একটি মেথড হল append()।
jQuery append() কী?
append() মেথড এক বা একাধিক আর্গুমেন্ট হিসেবে "কন্টেন্ট" নিতে পারে (যা হতে পারে HTML স্ট্রিং, টেক্সট, অ্যারে, এলিমেন্ট, বা আরও jQuery অবজেক্ট) এবং সিলেক্টরের সাথে মিলে যাওয়া যেকোনো বা সব এলিমেন্টের শেষে তা যুক্ত বা "অ্যাপেন্ড" করে। সাধারণ ব্যবহারের উদাহরণ들 شامل: একটি লিস্টের শেষে আইটেম যোগ করা (যেমন একটি "টু-ডু" লিস্টে নতুন "টু-ডু" আইটেম), বা বাটনে ক্লিক করলে নতুন কন্টেন্ট প্রদর্শন করা। এখন চলুন কিছু উদাহরণ কোডে append() কীভাবে কাজ করে তা দেখি।
jQuery append() কীভাবে ব্যবহার করবেন
উপরোক্ত টু-ডু লিস্টে আইটেম ইনসার্ট করার উদাহরণ নিচ্ছি, আমরা দেখব কীভাবে append() একটি সিলেক্টরে কল করা হয় এবং মেলে যাওয়া সব সিলেকশনে কন্টেন্ট ইনসার্ট করে।
প্রথমে আমাদের HTML যা একটি বেসিক টু-ডু লিস্ট তৈরি করে:
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h2>To Do List</h2> <ol class="list1"> <li>Read Chapters 1 & 2 </li> <li>Meeting at 3:00pm</li> <li>Write about yesterday's reading</li> </ol> </body> </html>
গুরুত্বপূর্ণ: HTML পেজের <head> অংশে <script> ট্যাগের মধ্যে jQuery API-এর ঠিকানা অন্তর্ভুক্ত করতে হবে। অন্যথায়, আমরা আমাদের HTML পেজে jQuery ব্যবহার করতে পারব না।
এখন, আমাদের টু-ডু লিস্ট সুন্দরভাবে রেন্ডার হয়েছে!
আমরা আজ অনেক উত্পাদনশীল মনে করছি, তাই লিস্টের শেষে একটি আইটেম যোগ করব। রাতের খাবারের প্ল্যান কেমন থাকবে?
আমাদের HTML লেআউট অনুযায়ী, অর্ডারড লিস্ট (<ol>) এর ক্লাস হল list1। এটি সুবিধাজনক কারণ আমরা <body>-র নিচে আরেকটি <script> ট্যাগ যোগ করে পুরো সিলেকশনটি সিলেক্ট করতে পারি:
<script> $(document).ready( () => { $(".list1").append("<li>Make dinner plans</li>") }) </script>
<script> ট্যাগের ভেতরে কিছু $ সিম্বল আছে। এগুলো কী? এগুলো হচ্ছে শক্তিশালী jQuery সিলেক্টর।
আমরা DOM-এ যেকোনো কিছু সিলেক্ট করতে পারি এলিমেন্ট, ক্লাস নাম, বা আইডি নাম পাস করে। এই কেসে, আমরা list1 ক্লাস वाली সব কিছু সিলেক্ট করেছি, যা পুরো <ol> এলিমেন্টটি সিলেক্ট করবে। উপরের (document) সিলেক্টর পুরো পেজটি সিলেক্ট করে এবং ready() মেথড কল করে পরবর্তী লাইন কোড কল করার আগে পেজটি পুরো লোড হওয়ার জন্য অপেক্ষা করে। এটি আমাদের কোড সিকুয়েনশিয়ালি চালাতে সাহায্য করে।
এখন, আমাদের ready() কলব্যাক ফাংশনের ভেতরে, আমরা list1 ক্লাস वाली সব এলিমেন্ট সিলেক্ট করেছি। এই কেসে, এটি আমাদের <ol> সিলেক্ট করবে এবং append()-এ পাস করা <li> কে ক্লোজিং </ol>-এর ঠিক উপরে ইনসার্ট করবে। সুতরাং, পেজ লোড হলে, Make dinner plans লিস্ট আইটেম আমাদের টু-ডু লিস্টে অ্যাপেন্ড হবে:
চমৎকার! এখন আরেকটি উদাহরণ দেখি। এইবার একটি বাটনে ক্লিক করলে আরও কন্টেন্ট প্রদর্শন করব।
jQuery append(): একটি রিয়েল-ওয়ার্ল্ড উদাহরণ
মান লজिये আমাদের ওয়েব পেজে একটি বাটন আছে এবং আমরা চাই বাটনে ক্লিক করলে নতুন কন্টেন্ট প্রদর্শন হয়। যদি পেজ রিফ্রেশ বা রিডায়রেক্ট ছাড়া নতুন কন্টেন্ট দেখানো যায়, তবে এটি কার্যকর এবং ব্যবহারকারীদের জন্য আরও সন্তোষজনক হবে।
এখানেই jQuery-র শক্তি এবং শаলীনতা নিহিত: আমরা বাটনে ক্লিক করলে পেজ রিফ্রেশ বা রিডায়রেক্ট ছাড়া নতুন কন্টেন্ট প্রদর্শন করতে পারি।
এই বেস HTML দেওয়া হল:
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <div class="content"> <p>Hello World!</p> </div> <button id="btn-main">Click Me!</button> </body> </html>
এটি আমাদের টু-ডু লিস্ট উদাহরণের মতোই, বাটন ছাড়া:
আমরা jQuery-র যা শিখেছি তা ব্যবহার করে "Hello World!"-এর নিচে আরও কন্টেন্ট অ্যাপেন্ড করব যখন বাটনে ক্লিক হবে।
<script> $(document).ready( () => { $("#main-btn").click( () => { $("p").append("<b>Goodbye</b>") }) }) </script>
একবার আবার, আমরা আমাদের <body>-র শেষে একটি <script> ট্যাগ অন্তর্ভুক্ত করেছি। টু-ডু লিস্ট উদাহরণের মতো, আমরা ডকুমেন্ট লোড হওয়ার অপেক্ষা করছি অন্য কিছু করার আগে।
ডকুমেন্ট লোড হলে, আমরা এখন বাটনে ক্লিক করতে পারি এবং আমাদের বাটনে click() মেথড কল করতে পারি। এখন আমাদের <p> ট্যাগ সিলেক্ট হয় এবং আমরা HTML স্ট্রিং <b>Goodbye</b> আর্গুমেন্ট হিসেবে append() মেথড কল করি। এটি <p> ট্যাগের শেষে বোল্ডে Goodbye শব্দটি ইনসার্ট করবে।
আমাদের চূড়ান্ত আউটপুট এইরকম দেখাবে:
<div class="content"> <p>Hello World.</p><b>Goodbye</b>. </div> <button id="btn-main">Click Me</button>
এবং স্ক্রিনে এইরকম দেখাবে:
অথবা যদি আমরা Goodbye-কে <div>-এর শেষে অ্যাপেন্ড করতে চাই, তবে শুধু <p> সিলেক্টরকে content ক্লাসে পরিবর্তন করলেই হবে:
<script> $(document).ready( () => { $("#main-btn").click( () => { $(".content").append("<b>Goodbye</b>") }) }) </script>
এটি নিচের মতো দেখাবে:
উপসংহার
সংক্ষেপে, আমরা দেখেছি append() মেথড কীভাবে স্বতন্ত্রভাবে এবং কলব্যাক ফাংশন들의 সিরিজের প্রেক্ষাপটে কাজ করে।
সহজে jQuery সিলেক্টর এবং মেথডগুলো <script> ট্যাগের ভেতরে অন্তর্ভুক্ত করে, আমরা আমাদের jQuery সিলেক্টর সাথে মিলে যাওয়া যেকোনো এলিমেন্টের শেষে বিভিন্ন ধরণের কন্টেন্ট অ্যাপেন্ড করতে পারি। append() মেথড ব্যবহারকারীদের নির্দিষ্ট সময়ে কন্টেন্ট প্রদর্শনের অসংখ্য সম্ভাবনা খুলে দেয় পেজ রিডায়রেক্ট বা রিফ্রেশ ছাড়া।
