Selectors হলো jQuery লাইব্রেরির ফাউন্ডেশন। jQuery ব্যবহার করে DOM ম্যানিপুলেট করার সময় সেগুলো সবসময় ব্যবহার করা হবে। Selectors একটি ফাংশন হিসেবে অপারেট করে একটি ম্যাচিং এলিমেন্ট রিটার্ন করার জন্য। সেগুলো jQuery লাইব্রেরির সাথে আসে এবং আউট অফ দ্য বক্স ব্যবহার করার জন্য প্রস্তুত থাকে।
সিলেক্টর ফাংশনটির একটি স্বতন্ত্র লুক আছে। এটি একটি ডলার সাইন ($) দিয়ে শুরু হয় এবং তারপর parentheses থাকে।
$()
Parentheses-এর ভিতরে যা এক্সেপ্ট করা হয় সেটি হলো এলিমেন্টের নাম, আইডি, বা ক্লাস। একটি এলিমেন্ট সিলেক্ট হলে, সেই এলিমেন্টটি পরিবর্তন করার মেথডগুলো সিলেক্টর ফাংশনের সাথে ডট নোটেশন ব্যবহার করে চেইন করা যায়।
$('p').html("Some new content rendered from jQuery")
এটি পৃষ্ঠার সকল প্যারাগ্রাফ এলিমেন্ট সিলেক্ট করে এবং তাদের ভিতরের HTML কে একটি স্ট্রিং দিয়ে রিপ্লেস করে। jQuery কুইকলি যেকোনো এলিমেন্ট বা এলিমেন্টগুলো অ্যাক্সেস করতে এবং মেথডগুলো ব্যবহার করে বাঞ্ছিত পরিবর্তনগুলো করতে বিল্ড করা হয়েছে। এই ফাংশনালিটি একটি ডাইনামিক ওয়েব অ্যাপ্লিকেশন তৈরি করার গেসওয়ার্ক (guesswork) দূর করে।
jQuery Selector কী?
jQuery selector হলো jQuery লাইব্রেরির সাথে আসা একটি ফাংশন। jQuery ব্যবহার করার জন্য এটি আবশ্যক। এটি তার প্যারামিটার হিসেবে এলিমেন্টের নাম, ক্লাস, এবং/অথবা আইডি একটি স্ট্রিং হিসেবে এক্সেপ্ট করে। এখান থেকে, একটি jQuery মেথড চেইন করা যায় DOM-এ একটি ম্যানিপুলেশন পারফর্ম করার জন্য।
এটি কেন উপযোগী? jQuery শর্টহ্যান্ড ইন্ট্রোডিউস করে মেথডগুলোর মধ্যে যেগুলো সাদা জাভাস্ক্রিপ্টে ভার্বোজ (verbose) হতে পারে, একটি সিলেক্টর ব্যবহার করে সরাসরি একটি এলিমেন্টকে রেফার করে বরং document.querySelector() বা document.querySelectorAll() কল করার।
একটি jQuery selector জাভাস্ক্রিপ্ট querySelector()-কে $()-এ রিডিউস করে। এটি ডকুমেন্টে ইমপ্লিসিটলি কল হয় এক্সপ্লিসিটলি না, যা আবার রিকোয়ার্ড কোড কমায়।
jQuery Selector সিনট্যাক্স
এতক্ষণে আমরা বিমূর্তভাবে jQuery selector ফাংশন সম্পর্কে কথা বলেছি। এখন আমরা জানি যে এটি একটি ফাংশন যা সরাসরি একটি নির্দিষ্ট DOM এলিমেন্টকে রেফার করে। যা দরকার সেটি হলো এলিমেন্টের নাম, ক্লাস, বা আইডি। নামটিও একটি ক্লাস বা আইডির সাথে কাম্বাইন করা যায় আপনার HTML কীভাবে অর্গানাইজ করা আছে সেটার উপর নির্ভর করে।
সিলেক্টরটি পৃষ্ঠার সকল এলিমেন্ট সিলেক্ট করার মতো জেনেরিক হতে পারে:
$('*')
এভাবে jQuery ব্যবহার করা সাধারণত রিকমেন্ডেড নয়। আরও সাধারণ অভ্যাস হলো একই ধরনের এলিমেন্টের একটি গ্রুপ সিলেক্ট করা। উদাহরণস্বরূপ, আমরা যদি সকল প্যারাগ্রাফ এলিমেন্ট পরিবর্তন করতে চাই, তবে সেগুলোকে সরাসরি সিলেক্ট করতে পারি:
$('p')
আমরা বর্তমান পৃষ্ঠার সকল <p> ট্যাগ সিলেক্ট করেছি। এখান থেকে, একটি jQuery মেথড চেইন করি পরিবর্তন করার জন্য।
$('p').html('Replace original paragraph HTML with this.')
html() মেথডটি সিলেক্ট করা সকল <p> ট্যাগের HTML অ্যাট্রিবিউটগুলো রিপ্লেস করে।
আমরা যদি শুধু একটি নির্দিষ্ট প্যারাগ্রাফ এলিমেন্ট চাই? ধরুন আমাদের একাধিক <p> ট্যাগ আছে। उनमें से একটির আইডি 'new-content'। আমরা সরাসরি সেটাকে সিলেক্ট করতে পারি।
$('p#new-content')
jQuery selectors CSS রেফারেন্স ব্যবহার করে এলিমেন্টগুলোতে (# = id, . = class)। এখন শুধু 'new-content' আইডি 가진 প্যারাগ্রাফ এলিমেন্টটি সিলেক্ট হয়েছে এবং পরিবর্তনের জন্য প্রস্তুত।
শেষে একটি অ্যাসাইন করা ক্লাস 가진 এলিমেন্ট সিলেক্ট করি। আমাদের অ্যাপে বেশ কিছু <div> এলিমেন্ট আছে। কিছু 'main-content' ক্লাস 가진 একটি <div>-এর ভিতরে র্যাপ করা আছে। যদি আমরা মেইন কন্টেন্ট সিলেক্ট করে ডাইনামিকভাবে পরিবর্তন করতে চাই, তবে নাম এবং ক্লাস সিলেক্টরকে পাস করি।
$('div.main-content')
এখন সিলেক্ট করা <div>-এ মোড়ানো সকল কন্টেন্ট ম্যানিপুলেট করার জন্য প্রস্তুত।
উপসংহার
jQuery selector ফাংশনটি হলো যা লাইব্রেরিটি চালায়। সিলেক্টর ফাংশন সাথে কীভাবে কাজ করতে হয় এবং jQuery মেথডগুলো সেটার সাথে কীভাবে চেইন করতে হয় সেটা জানা জQuery-এর đầyশক্তি বোঝার জন্য অপরিহার্য। আমরা শিখেছি jQuery selector কী এবং এলিমেন্ট সিলেক্ট করার সিনট্যাক্স।
এখন আপনার কাছে jQuery selector কী এবং কীভাবে ব্যবহার করতে হয় সেটার স্পষ্ট ধারণা থাকা উচিত। এখান থেকে, সিলেক্টর এবং সেগুলোর সাথে jQuery মেথড চেইন করার প্র্যাকটিস করুন কিছু রিয়াল ফানের জন্য! হ্যাপি কোডিং!
