MooTools এর জন্য CSS Selectors এর সাথে কাজ করা

MooTools একটি শক্তিশালী JavaScript লাইব্রেরি যা CSS সিলেক্টর (CSS Selectors) এর মাধ্যমে DOM (Document Object Model) উপাদানগুলিকে সহজে নির্বাচন এবং ম্যানিপুলেট করতে সহায়তা করে। MooTools এর $ ফাংশনটি CSS সিলেক্টর ব্যবহার করে HTML উপাদানগুলি নির্বাচন করার জন্য ব্যবহৃত হয়। এটি jQuery-এর মতোই কাজ করে, তবে MooTools আরও কমপ্যাক্ট এবং দ্রুত পদ্ধতিতে DOM নির্বাচন এবং ম্যানিপুলেশন করতে সহায়তা করে।

MooTools-এ CSS Selectors ব্যবহার

MooTools আপনাকে CSS সিলেক্টর স্টাইলের মাধ্যমে HTML উপাদান নির্বাচন করতে সহায়তা করে। এটি মূলত $() ফাংশন ব্যবহার করে কাজ করে, যা একটি নির্দিষ্ট CSS সিলেক্টর এর মাধ্যমে একটি DOM উপাদান সিলেক্ট করে।

১. একটি একক উপাদান নির্বাচন

যখন আপনি শুধুমাত্র একটি DOM উপাদান নির্বাচন করতে চান, তখন CSS সিলেক্টরের মতো ব্যবহার করা হয়। উদাহরণ:

window.addEvent('domready', function() {
    var myDiv = $('myDiv');  // ID সিলেক্টর ব্যবহার করে ডিভ নির্বাচন
    myDiv.setStyle('background-color', 'red');  // নির্বাচিত ডিভের ব্যাকগ্রাউন্ড রঙ পরিবর্তন
});

এখানে, $('myDiv') দ্বারা myDiv আইডি এর ডিভটি নির্বাচন করা হয়েছে এবং তার ব্যাকগ্রাউন্ড রঙ red করা হয়েছে।

২. একাধিক উপাদান নির্বাচন

আপনি একাধিক DOM উপাদান CSS সিলেক্টরের মাধ্যমে নির্বাচন করতে পারেন। উদাহরণ:

window.addEvent('domready', function() {
    // ক্লাস সিলেক্টর ব্যবহার করে সব ডিভ নির্বাচন
    $$('div.myClass').each(function(div) {
        div.setStyle('background-color', 'blue');
    });
});
এখানে, $$
('div.myClass') দ্বারা সমস্ত div উপাদান নির্বাচন করা হয়েছে যেগুলোর ক্লাস myClass। তারপর তাদের ব্যাকগ্রাউন্ড রঙ পরিবর্তন করা হয়েছে।
৩. পিতামাতার উপাদান নির্বাচন
CSS সিলেক্টরের মাধ্যমে আপনি পিতামাতার উপাদান নির্বাচন করতে পারেন। উদাহরণ:
window.addEvent('domready', function() {
    // সব ul এর মধ্যে li নির্বাচন
    $$('ul li').each(function(item) {
        item.setStyle('font-size', '18px');
    });
});
এখানে, $$
('ul li') দ্বারা সমস্ত ul এর মধ্যে থাকা li উপাদানগুলো নির্বাচন করা হয়েছে এবং তাদের ফন্ট সাইজ ১৮ পিক্সেল করা হয়েছে।
৪. অ্যাট্রিবিউট সিলেকশন
MooTools CSS সিলেক্টর ব্যবহার করে আপনি কোনো অ্যাট্রিবিউটের ভিত্তিতে উপাদান নির্বাচন করতে পারেন। উদাহরণ:
window.addEvent('domready', function() {
    // যেকোনো এলিমেন্ট নির্বাচন যেখানে class অ্যাট্রিবিউট 'highlight' আছে
    $$('[class="highlight"]').each(function(element) {
        element.setStyle('color', 'green');
    });
});
এখানে, $$
('[class="highlight"]') দ্বারা সমস্ত উপাদান নির্বাচন করা হয়েছে যাদের class অ্যাট্রিবিউট highlight।
MooTools CSS Selectors-এ Advanced ব্যবহার
১. নির্দিষ্ট রেঞ্জে উপাদান নির্বাচন
MooTools আপনাকে CSS সিলেক্টর ব্যবহার করে নির্দিষ্ট রেঞ্জে উপাদান নির্বাচন করতে সহায়তা করে। উদাহরণ:
window.addEvent('domready', function() {
    // শুধুমাত্র প্রথম ৫টি প্যারাগ্রাফ নির্বাচন
    $$('p').slice(0, 5).each(function(p) {
        p.setStyle('color', 'purple');
    });
});
এখানে, slice(0, 5) মেথডটি প্রথম ৫টি প্যারাগ্রাফ নির্বাচন করার জন্য ব্যবহার করা হয়েছে।
২. পিতা-মাতা এবং সন্তান সম্পর্কের মাধ্যমে নির্বাচন
MooTools CSS সিলেক্টর ব্যবহার করে পিতা-মাতা এবং সন্তান সম্পর্কের ভিত্তিতে উপাদান নির্বাচন করতে পারেন:
window.addEvent('domready', function() {
    // সব প্যারাগ্রাফ নির্বাচন যেগুলি div এর মধ্যে আছে
    $$
('div p').each(function(p) {
        p.setStyle('font-weight', 'bold');
    });
});
এখানে, $('div p')</strong></code> দ্বারা শুধুমাত্র <code inline="">div</code> এর মধ্যে থাকা <code inline="">p</code> উপাদানগুলো নির্বাচন করা হয়েছে।</p><hr><h3>MooTools-এ CSS Selectors-এ ফিচার</h3><ul><li><strong>$(): এটি MooTools-এর একটি শক্তিশালী ফাংশন, যা CSS সিলেক্টর ব্যবহার করে একাধিক উপাদান নির্বাচন করে।
getElementsByClassName(): এই ফাংশনটি ক্লাস নাম দ্বারা এলিমেন্ট নির্বাচন করতে ব্যবহৃত হয়।
querySelector(): এটি একটি DOM মেথড যা CSS সিলেক্টরের মাধ্যমে একটি উপাদান নির্বাচন করে।
সারাংশ
MooTools এর CSS Selectors ব্যবহার করে আপনি DOM উপাদানগুলো খুব সহজেই নির্বাচন এবং ম্যানিপুলেট করতে পারেন। $() এবং $$() ফাংশনগুলি MooTools-এর প্রধান উপাদান নির্বাচন ফাংশন, যা CSS সিলেক্টরগুলির মাধ্যমে কাজ করে। এটি ডেভেলপারদের ওয়েব পেজের বিভিন্ন উপাদানকে দ্রুত এবং কার্যকরীভাবে নিয়ন্ত্রণ করতে সহায়তা করে। MooTools-এ CSS সিলেক্টর ব্যবহার করে DOM ম্যানিপুলেশন এবং স্টাইল পরিবর্তন করা একটি শক্তিশালী পদ্ধতি যা ওয়েব ডেভেলপমেন্টকে সহজ এবং দ্রুত করে তোলে।