jQuery addClass() মেথড: স্টাইলিংয়ের জন্য ক্লাস যোগ করার গাইড

jQuery addClass() কীভাবে কাজ করে

jQuery addClass() মেথড ডেভেলপারদের একটি গ্লোবালভাবে এলিমেন্ট পরিবর্তন করার উপায় দেয়। মেথডের নাম থেকে বোঝা যায়, আমরা একটি সিলেক্ট করা এলিমেন্টে ক্লাস অ্যাট্রিবিউট যোগ করতে পারি। আমরা কেন এটি করব?

একটি ওয়েব পেজের উদাহরণ নিই যাতে কিছু এক্সিস্টিং এলিমেন্ট আছে যেমন একটি টাইটেল, একটি প্যারাগ্রাফ, এবং একটি বাটন যা ক্লিক করলে কিছু করে। এই পেজের সাথে একটি স্টাইলশীট থাকে যা এই এলিমেন্ট들의 ক্লাস নাম ব্যবহার করে তাদের স্টাইল করে। বাটনে ক্লিক করলে, এক্সিস্টিং কন্টেন্টের স্টাইল বা আপিয়ারেন্স পরিবর্তন হতে পারে।

আমরা addClass() মেথড ব্যবহার করে বাটনে ক্লিক করার পর এক্সিস্টিং কন্টেন্টের জন্য একটি নতুন স্টাইল অ্যাট্রিবিউট ইনসার্ট করতে পারি, যা শুধু এক লাইন কোড ব্যবহার করে এক্সিস্টিং কন্টেন্টের স্টাইলিং পরিবর্তন করতে সক্ষম করে। এটি ডেভেলপারকে একটি স্টাইলড ফ্যাশনে এলিমেন্ট ম্যানিপুলেট করার চিন্তা করতে দেয়।

চলুন উদাহরণটি গভীরে যাই এবং কোডিং কীভাবে করবেন তা দেখি।

jQuery addClass() কীভাবে কাজ করে

আমাদের উদাহরণে, আমরা বাটনে ক্লিক করলে একটি অবজেক্টের ক্লাস অ্যাট্রিবিউট পরিবর্তন করছি। উদাহরণ কোডে যাওয়ার আগে, চলুন দেখি addClass() কীভাবে কাজ করে। ধরি আমাদের এই HTML আছে:

<head> <meta charset="utf-8"> <title>addClass demo</title> <style> p { margin: 8px; font-size: 16px; } .selected { color: blue; } .highlight { background: yellow; } </style> <script src="https://code.jquery.com/jquery-3.5.0.js"></script> </head> <body> <p>Hello</p> <p>and</p> <p>Goodbye</p>

আমরা <head>-এ <style> ব্যবহার করে আমাদের <p> ট্যাগের জন্য কিছু বেসিক স্টাইলিং অন্তর্ভুক্ত করেছি। আমরা আমাদের jQuery API লিংকও অন্তর্ভুক্ত করেছি। <body>-এ, আমাদের "Hello," "and," "Goodbye" শব্দগুলো তিনটি আলাদা <p> ট্যাগে র‍্যাপ করা আছে। addClass() কীভাবে কাজ করে তা দেখতে, <style>-এ ফিরে যাই।

<style>-এ দুটি ক্লাস আছে। একটি হল "selected," যা কালার অ্যাট্রিবিউটকে ব্লু রেন্ডার করে। অন্যটি হল "highlight." এই ক্লাস ব্যাকগ্রাউন্ড অ্যাট্রিবিউটকে ইয়েলো রেন্ডার করে। এখন, আমরা দেখতে পাচ্ছি এই স্টাইলগুলোর কোনোটিই রেন্ডার হচ্ছে না:

স্টাইলগুলো রেন্ডার হচ্ছে না কারণ আমাদের <p> ট্যাগগুলোর সাথে কোনো ক্লাস আয়ত্ত নেই। HTML-এ ম্যানুয়ালি <p>-এ ক্লাস লিখতে না গিয়ে, আমরা addClass() ব্যবহার করে যেকোনো বা সব <p> এলিমেন্টে যেকোনো বা সব ক্লাস অ্যাট্রিবিউট ইনসার্ট করতে পারি।

<script> $(document).ready(() => { $('p').addClass('selected') }) </script>

এখানে, আমরা শুধু সব <p> এলিমেন্ট সিলেক্ট করছি এবং তাদের 'selected' নামে একটি ক্লাস অ্যাট্রিবিউট যোগ করছি। আমরা আশা করি আমাদের সব <p> এলিমেন্টের ইনস্ট্যান্স এখন ব্লু কালারে রেন্ডার হবে।

আমরা जैसा আশা করছিলাম ঠিক वैसा হয়েছে! jQuery addClass() মেথড একাধিক ক্লাস অ্যাট্রিবিউট একটি আর্গুমেন্ট হিসেবে গ্রহণ করতে পারে। উদাহরণস্বরূপ:

<script> $(document).ready(() => { $('p').addClass('selected highlight') }) </script>

দুই ক্লাসই এক সেট প্যারেনথেসিসে র‍্যাপ করা সিনট্যাক্সটি লক্ষ্য করুন। এটি আমাদের <p> এলিমেন্টগুলাকে ব্লু রেন্ডার করে এবং ব্যাকগ্রাউন্ড ইয়েলো করে।

এখন যেহেতু আমরা দেখেছি addClass() কীভাবে এলিমেন্টগুলে ক্লাস অ্যাট্রিবিউট যোগ করতে পারে, চলুন আমাদের মূল উদাহরণে বাটনসহ ফিরে যাই।

jQuery addClass() ব্যবহার করা

এখানে আমরা আমাদের প্রথম উদাহরণে একটি বাটন যোগ করেছি:

<head> <meta charset="utf-8"> <title>addClass demo</title> <style> p { margin: 8px; font-size: 16px; } .selected { color: blue; } .highlight { background: yellow; } </style> <script src="https://code.jquery.com/jquery-3.5.0.js"></script> </head> <body> <p> <strong>jQuery addClass Example</strong> </p> <p>Hello</p> <p>and</p> <p>Goodbye</p> <button> Click to add class </button>

উপরের কোড এখন একটি বাটন রেন্ডার করছে, কিন্তু এটি এখনো কিছু করছে না। পূর্বের উদাহরণে, আমরা সব <p> ট্যাগ একসাথে পরিবর্তন করেছিলাম। এখন চলুন বাটনে ক্লিক করলে শুধু একটি এলিমেন্ট পরিবর্তন করি। আমরা এটি jQuery click() মেথড অন্তর্ভুক্ত করে করতে পারি।

click() মেথডের দ্রুত রিভিউ: আমরা এটি ওবজেক্ট সিলেক্টরে কল করি যাতে আমরা একটি ইভেন্ট লিসেনার আটাচ করতে চাই। তারপর আমরা click()-এ একটি কলব্যাক ফাংশন আর্গুমেন্ট হিসেবে পাস করি। মনে রাখবেন যে একটি কলব্যাক ফাংশন হল একটি ফাংশন যা আর্গুমেন্ট হিসেবে পাস করা হয় বাদে এক্সিকিউট হওয়ার জন্য। এই উদাহরণে, কলব্যাক ফাংশন এক্সিকিউট হবে একবার বাটনে ক্লিক হলে।

এটি একশনে দেখি!

<script> $('button').click(() => { $('p').last().addClass('selected') }) </script>

কলব্যাক ফাংশনে, আমরা <p> এলিমেন্টগুলো সিলেক্ট করছি এবং last() কল করে <p>-র লাস্ট ইনস্ট্যান্স খুঁজছি। এখান থেকে, আমরা 'selected' নামে ক্লাস অ্যাট্রিবিউট যোগ করছি। আমরা আশা করি লাস্ট <p> এলিমেন্টটি যেটি "Goodbye" শব্দকে রেফার করে, বাটনে ক্লিক হলে ব্লু কালারে পরিবর্তন হবে।

চলুন বাটনে ক্লিক করি এবং জানি।

ঠিক যা আশা করছিলাম! আমরা দেখেছি jQuery addClass() কীভাবে সাধারণভাবে পেজ লোড होते ही সব <p> এলিমেন্টকে স্টাইলড ক্লাসে পরিবর্তন করতে পারে। আমরা এইদেখেছি addClass() কীভাবে অন্যান্য jQuery মেথড যেমন click() সাথে ব্যবহার করা যায় স্পেসিফিক্যালি একটি <p> এলিমেন্টের ক্লাস অ্যাট্রিবিউট পরিবর্তন করার জন্য যখন সিলেক্ট করা বাটনে ক্লিক হয়।

উপসংহার

আজ, আমরা শিখেছি jQuery addClass() কী এবং কীভাবে এটি কাজ করে। আমরা এইও শিখেছি যে addClass() স্কোপের ক্ষেত্রে অত্যন্ত ফ্লেক্সিবল এবং একসাথে একাধিক ক্লাস অ্যাট্রিবিউট পরিবর্তন করতে পারে। উপরের উদাহরণগুলো jQuery addClass()-র সম্ভাব্য ব্যবহারের বেসিক ইলাস্ট্রেশন। আরও 나아가তে, নিজে এক্সপেরিমেন্ট করুন এবং আপনার ওয়েব অ্যাপে addClass() কীভাবে উপকারী হতে পারে তা খুঁজুন।