MooTools-এ selectors ব্যবহার করে আপনি সহজেই HTML ডকুমেন্টের মধ্যে বিভিন্ন এলিমেন্ট নির্বাচন করতে পারেন। MooTools জাভাস্ক্রিপ্ট লাইব্রেরি তার নিজস্ব শক্তিশালী সিলেক্টর সিস্টেম প্রদান করে, যা ID, ক্লাস, ট্যাগ, অ্যাট্রিবিউট ইত্যাদি নির্বাচন করতে সক্ষম। এই সিলেক্টরগুলি DOM (Document Object Model) ম্যানিপুলেশন সহজ এবং দ্রুত করে তোলে।
MooTools-এ Selectors ব্যবহার করা
MooTools-এ সাধারণত সিলেক্টর ব্যবহার করতে $ (ডলার চিহ্ন) ফাংশন ব্যবহার করা হয়। এটি বিভিন্ন ধরনের সিলেক্টর যেমন ID, ক্লাস, ট্যাগ ইত্যাদি সিলেক্ট করতে সাহায্য করে।
1. ID সিলেক্ট করা
MooTools-এ একটি নির্দিষ্ট ID দ্বারা HTML এলিমেন্ট সিলেক্ট করতে $ ফাংশন ব্যবহার করা হয়। উদাহরণ:
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>MooTools ID Selector Example</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools.min.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
// ID সিলেক্ট করা
var element = $('myElement');
element.setStyle('color', 'blue'); // স্টাইল পরিবর্তন করা
});
</script>
</head>
<body>
<div id="myElement">এটি একটি টেক্সট এলিমেন্ট।</div>
</body>
</html>
এখানে, $ ফাংশন দ্বারা myElement নামক ID সিলেক্ট করা হয়েছে এবং তার টেক্সটের রঙ পরিবর্তন করা হয়েছে।
2. ক্লাস সিলেক্ট করা
MooTools-এ ক্লাস সিলেক্ট করতে ('div.myClass');
elements.each(function(element) {
element.setStyle('color', 'red'); // প্রতিটি এলিমেন্টের স্টাইল পরিবর্তন করা
});
});
</script>
</head>
<body>
<div class="myClass">ক্লাস ১</div>
<div class="myClass">ক্লাস ২</div>
<div class="myClass">ক্লাস ৩</div>
</body>
</html>
এখানে, ('div');
elements.each(function(element) {
element.setStyle('border', '1px solid black'); // প্রতিটি div এর সীমানা যোগ করা
});
});
</script>
</head>
<body>
<div>প্রথম ডিভ</div>
<div>দ্বিতীয় ডিভ</div>
<div>তৃতীয় ডিভ</div>
</body>
</html>
এখানে, ('a[href*="example"]');
links.each(function(link) {
link.setStyle('color', 'green'); // সব লিঙ্কের রঙ সবুজ করা
});
});
</script>
</head>
<body>
<a href="http://example.com">এটি একটি লিঙ্ক</a>
<a href="http://example.org">এটি অন্য একটি লিঙ্ক</a>
<a href="http://other.com">এটি একটি ভিন্ন লিঙ্ক</a>
</body>
</html>
এখানে, $$('a[href*="example"]') দ্বারা সমস্ত লিঙ্ক সিলেক্ট করা হয়েছে যাদের href অ্যাট্রিবিউটে "example" শব্দ রয়েছে, এবং তাদের টেক্সটের রঙ সবুজ করা হয়েছে।
সারাংশ
MooTools-এ সিলেক্টর ব্যবহার করে আপনি সহজেই HTML ডকুমেন্টের বিভিন্ন এলিমেন্ট সিলেক্ট করতে পারেন। ID, ক্লাস, ট্যাগ, এবং অ্যাট্রিবিউট সিলেক্টরের মাধ্যমে ওয়েব পেজের এলিমেন্টগুলোর স্টাইল, কনটেন্ট এবং কার্যকারিতা দ্রুত এবং সহজে পরিবর্তন করা সম্ভব। MooTools-এর সিলেক্টর সিস্টেম ওয়েব ডেভেলপমেন্টে খুবই কার্যকরী, এবং এর মাধ্যমে DOM ম্যানিপুলেশন আরও কার্যকরী এবং সময় সাশ্রয়ী হয়।
