MooTools একটি শক্তিশালী জাভাস্ক্রিপ্ট লাইব্রেরি, যা DOM (Document Object Model) ম্যানিপুলেশন এবং সিলেক্টর ব্যবহারের জন্য বেশ কিছু সুবিধাজনক টুল সরবরাহ করে। MooTools এর সিলেক্টর এবং এলিমেন্ট ট্র্যাভার্সাল ফিচারগুলির মাধ্যমে আপনি সহজেই HTML ডকুমেন্টের বিভিন্ন উপাদান নির্বাচন করতে পারেন এবং তাদের উপর কাজ করতে পারেন। এটি বিশেষভাবে বড় এবং জটিল ওয়েব অ্যাপ্লিকেশন তৈরির সময় কাজে আসে, যেখানে ডাইনামিক DOM ম্যানিপুলেশন প্রয়োজন।
MooTools Selectors
MooTools সিলেক্টর সিস্টেম হল একটি শক্তিশালী পদ্ধতি, যা আপনাকে CSS-এর মতো সিলেক্টর ব্যবহার করে DOM এলিমেন্টগুলো সহজে খুঁজে বের করতে সাহায্য করে। এটি অনেকটাই jQuery এর মতোই কাজ করে, তবে MooTools এর সিলেক্টর আরও বেশি কাস্টমাইজেবল এবং ফাংশনাল।
1. আইডি সিলেক্ট করা
MooTools-এ আপনি আইডি ব্যবহার করে কোনো এলিমেন্ট সিলেক্ট করতে পারেন। উদাহরণস্বরূপ:
var element = $('myElement');
এখানে $('myElement') দিয়ে myElement আইডি বিশিষ্ট এলিমেন্টটি নির্বাচন করা হয়েছে।
2. ক্লাস সিলেক্ট করা
MooTools-এ আপনি ক্লাস নাম দিয়ে এলিমেন্ট সিলেক্ট করতে পারেন। উদাহরণ:
var elements = ('div.myClass')দ্বারা আপনিdivট্যাগের মধ্যে যেসব এলিমেন্টের ক্লাসmyClassরয়েছে, সেগুলো নির্বাচন করেছেন।3. ট্যাগ সিলেক্ট করা
MooTools-এ আপনি ট্যাগ নাম দিয়েও এলিমেন্ট সিলেক্ট করতে পারেন। উদাহরণ:
var divs = ('div')দ্বারা আপনি ডকুমেন্টের সবdivট্যাগ এলিমেন্ট নির্বাচন করেছেন।4. অ্যাট্রিবিউট সিলেক্ট করা
MooTools আপনাকে HTML অ্যাট্রিবিউটের মাধ্যমে এলিমেন্ট সিলেক্ট করার সুবিধা দেয়। উদাহরণ:
var links = ('a[href^="https"]')দ্বারা আপনি সমস্ত সেইaট্যাগ নির্বাচন করেছেন, যারhrefঅ্যাট্রিবিউটের মান"https"দিয়ে শুরু হচ্ছে।Element Traversal (এলিমেন্ট ট্র্যাভার্সাল)
MooTools এলিমেন্ট ট্র্যাভার্সাল টুল দিয়ে আপনি DOM এর মধ্যে বিভিন্ন এলিমেন্টের মধ্যে চলাফেরা করতে পারেন এবং তাদের উপর কার্যকরী কাজ করতে পারেন।
1. Parent এলিমেন্ট নির্বাচন
আপনি একটি এলিমেন্টের প্যারেন্ট এলিমেন্ট (অর্থাৎ তার পরবর্তী স্তরের এলিমেন্ট) নির্বাচন করতে পারেন:
var parent = $('myElement').getParent();এখানে,
$('myElement').getParent()দ্বারা আপনিmyElementআইডি বিশিষ্ট এলিমেন্টের প্যারেন্ট এলিমেন্টটি নির্বাচন করেছেন।2. Children এলিমেন্ট নির্বাচন
MooTools-এ আপনি একটি এলিমেন্টের সকল চাইল্ড এলিমেন্ট (অর্থাৎ তার নিচের স্তরের এলিমেন্টগুলো) নির্বাচন করতে পারেন:
var children = $('myElement').getChildren();এখানে,
$('myElement').getChildren()দ্বারা আপনিmyElementআইডি বিশিষ্ট এলিমেন্টের সমস্ত চাইল্ড এলিমেন্ট নির্বাচন করেছেন।3. Siblings (ভাই/বোন) এলিমেন্ট নির্বাচন
MooTools আপনাকে সিবলিংস (একই প্যারেন্টের মধ্যে থাকা অন্যান্য এলিমেন্ট) নির্বাচনের সুযোগ দেয়। উদাহরণ:
var sibling = $('myElement').getNext();এখানে,
$('myElement').getNext()দ্বারা আপনিmyElementআইডি বিশিষ্ট এলিমেন্টের পরবর্তী সিবলিং নির্বাচন করেছেন।4. Previous Sibling নির্বাচন
একইভাবে, আপনি প্যারেন্ট এলিমেন্টের আগের সিবলিং (আগের এলিমেন্ট) নির্বাচন করতে পারেন:
var previousSibling = $('myElement').getPrevious();এখানে,
$('myElement').getPrevious()দ্বারা আপনিmyElementআইডি বিশিষ্ট এলিমেন্টের আগের সিবলিং নির্বাচন করেছেন।MooTools-এর সিলেক্টর এবং ট্র্যাভার্সাল এর সুবিধা
- সাধারণ এবং সহজ: MooTools সিলেক্টর এবং ট্র্যাভার্সাল API সিম্পল এবং সহজ, যা ডেভেলপারদের দ্রুত DOM ম্যানিপুলেশন করতে সাহায্য করে।
- CSS সিলেক্টরের মতো: MooTools সিলেক্টর CSS সিলেক্টরের মতোই কাজ করে, যার মাধ্যমে আপনি সহজে HTML উপাদান নির্বাচন করতে পারেন।
- ফ্লেক্সিবল: MooTools আপনাকে ডাইনামিক এবং কাস্টম সিলেক্টর তৈরি করার সুযোগ দেয়।
- পারফরম্যান্স: MooTools-এর সিলেক্টর এবং ট্র্যাভার্সাল ফিচার দ্রুত এবং কার্যকরী, যা ওয়েব পেজের লোডিং টাইম কমাতে সাহায্য করে।
সারাংশ
MooTools এর সিলেক্টর এবং এলিমেন্ট ট্র্যাভার্সাল ফিচার ব্যবহার করে আপনি সহজেই DOM এলিমেন্টগুলো নির্বাচন এবং ম্যানিপুলেট করতে পারেন। এটি ডেভেলপারদের জন্য একটি শক্তিশালী টুল, যা ওয়েব পেজে দ্রুত এবং কার্যকরী DOM অপারেশন করতে সহায়তা করে। MooTools-এর সহজ, ফ্লেক্সিবল এবং দ্রুত সিলেক্টর সিস্টেম ওয়েব ডেভেলপমেন্টের কাজকে আরও সহজ এবং সাশ্রয়ী করে তোলে।
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 ম্যানিপুলেশন আরও কার্যকরী এবং সময় সাশ্রয়ী হয়।
MooTools-এ Element Traversal Methods ডেভেলপারদের জন্য ওয়েব পেজের DOM (Document Object Model) উপাদানগুলির মধ্যে নেভিগেট বা চলাচল করতে সহায়তা করে। এর মাধ্যমে আপনি একটি উপাদানের পিতা-মাতা, সন্তানেরা বা প্রতিবেশী উপাদানগুলির (siblings) উপর সহজেই কাজ করতে পারেন। MooTools-এর getParent(), getChildren(), এবং getSiblings() মেথডগুলো এই কাজগুলোর জন্য ব্যবহৃত হয়।
১. getParent() মেথড
getParent() মেথড একটি নির্দিষ্ট DOM উপাদানের পিতা-মাতাকে (parent element) রিটার্ন করে। এটি খুবই কার্যকরী যখন আপনি একটি উপাদান থেকে তার পিতা-মাতা উপাদানটি খুঁজে পেতে চান।
উদাহরণ:
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>MooTools getParent 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() {
var childElement = $('childElement'); // সন্তানের এলিমেন্ট সিলেক্ট করা
var parentElement = childElement.getParent(); // পিতা-মাতা উপাদান পেতে
console.log(parentElement); // পিতা-মাতা উপাদান কনসোল লগে দেখানো
});
</script>
</head>
<body>
<div id="parentElement">
<div id="childElement">এইটি একটি সন্তানের উপাদান</div>
</div>
</body>
</html>
এখানে, getParent() মেথড childElement এর পিতা-মাতা (অর্থাৎ parentElement) উপাদান রিটার্ন করবে।
২. getChildren() মেথড
getChildren() মেথডটি একটি নির্দিষ্ট DOM উপাদানের সমস্ত সন্তান (child elements) রিটার্ন করে। এটি একটি উপাদানের ভিতরের সব উপাদানগুলি নিয়ে কাজ করার জন্য ব্যবহৃত হয়।
উদাহরণ:
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>MooTools getChildren 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() {
var parentElement = $('parentElement'); // পিতা-মাতা এলিমেন্ট সিলেক্ট করা
var childrenElements = parentElement.getChildren(); // সকল সন্তান উপাদান পেতে
console.log(childrenElements); // সন্তানের উপাদান কনসোল লগে দেখানো
});
</script>
</head>
<body>
<div id="parentElement">
<div>সন্তান ১</div>
<div>সন্তান ২</div>
<div>সন্তান ৩</div>
</div>
</body>
</html>
এখানে, getChildren() মেথড parentElement এর সকল সন্তান উপাদান রিটার্ন করবে (যেমন ৩টি ডিভ ট্যাগ)।
৩. getSiblings() মেথড
getSiblings() মেথডটি একটি নির্দিষ্ট উপাদানের সমস্ত প্রতিবেশী (siblings) উপাদান রিটার্ন করে, অর্থাৎ সেই উপাদানটির সাথে একই স্তরে থাকা অন্যান্য উপাদান। এই মেথডটি আপনি তখন ব্যবহার করবেন যখন আপনি একটি উপাদানকে তার প্রতিবেশী উপাদানগুলির সাথে তুলনা করতে চান।
উদাহরণ:
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>MooTools getSiblings 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() {
var targetElement = $('childElement'); // লক্ষ্য উপাদান সিলেক্ট করা
var siblingElements = targetElement.getSiblings(); // প্রতিবেশী উপাদান পেতে
console.log(siblingElements); // প্রতিবেশী উপাদান কনসোল লগে দেখানো
});
</script>
</head>
<body>
<div id="parentElement">
<div>প্রতিবেশী ১</div>
<div id="childElement">লক্ষ্য উপাদান</div>
<div>প্রতিবেশী ২</div>
</div>
</body>
</html>
এখানে, getSiblings() মেথড childElement এর প্রতিবেশী উপাদানগুলোকে রিটার্ন করবে (যেমন "প্রতিবেশী ১" এবং "প্রতিবেশী ২")।
সারাংশ
MooTools-এ Element Traversal Methods ব্যবহার করে আপনি খুব সহজেই DOM উপাদানগুলির মধ্যে নেভিগেট করতে পারেন। getParent(), getChildren(), এবং getSiblings() মেথডগুলো ডেভেলপারদের পিতা-মাতা, সন্তান এবং প্রতিবেশী উপাদানগুলির উপর কাজ করতে সহায়তা করে, যা ওয়েব ডেভেলপমেন্টে বেশ কার্যকরী। এই মেথডগুলির মাধ্যমে আপনি DOM-এর ভেতরের সম্পর্কগুলো সহজে খুঁজে বের করতে পারেন এবং তাদের ওপর বিভিন্ন কাজ করতে পারেন।
MooTools একটি শক্তিশালী লাইব্রেরি যা DOM (Document Object Model) উপাদানগুলোর ম্যানিপুলেশন এবং ফিল্টারিং অত্যন্ত সহজ এবং কার্যকরী করে তোলে। MooTools-এ এলিমেন্ট ফিল্টারিং এবং ম্যানিপুলেশন করতে আপনি বিভিন্ন মেথড ব্যবহার করতে পারেন। এই মেথডগুলি আপনাকে HTML উপাদানগুলোর প্রপার্টি, স্টাইল, ক্লাস ইত্যাদি সহজে পরিবর্তন এবং পরিচালনা করতে সহায়তা করে।
Element Filtering in MooTools
MooTools-এ filter() মেথড ব্যবহার করে আপনি একটি নির্দিষ্ট শর্তের উপর ভিত্তি করে DOM উপাদানগুলিকে ফিল্টার করতে পারেন। এটি কোনো নির্দিষ্ট কন্ডিশনের সঙ্গে মেলে এমন উপাদানগুলো নির্বাচন করতে সাহায্য করে। উদাহরণস্বরূপ, একটি তালিকায় যদি শুধুমাত্র এমন আইটেমগুলো চেক করতে চান যা কোনো নির্দিষ্ট ক্লাস ধারণ করে, তাহলে আপনি filter() মেথড ব্যবহার করতে পারেন।
উদাহরণ: Filter by Class
window.addEvent('domready', function() { // 'highlight' ক্লাস ধারণকারী এলিমেন্টগুলো ফিল্টার করা var elements = $$('div'); var highlightedElements = elements.filter(function(element) { return element.hasClass('highlight'); }); // ফিল্টার করা এলিমেন্টগুলির উপর কিছু করা highlightedElements.each(function(element) { element.setStyle('color', 'red'); }); });ব্যবহার করে সমস্তএখানে:
()
$$divএলিমেন্টগুলো নির্বাচন করা হয়েছে।
filter() মেথডের মাধ্যমে highlight ক্লাস ধারণকারী এলিমেন্টগুলো ফিল্টার করা হয়েছে।each() মেথড ব্যবহার করে ফিল্টার করা এলিমেন্টগুলোকে লুপ করা হয়েছে এবং তাদের স্টাইল পরিবর্তন করা হয়েছে।উদাহরণ: Filter by Attribute
window.addEvent('domready', function() { // 'data-id' অ্যাট্রিবিউট ধারণকারী এলিমেন্টগুলো ফিল্টার করা var elements = $$('[data-id]'); var filteredElements = elements.filter(function(element) { return element.get('data-id') === '123'; }); // ফিল্টার করা এলিমেন্টগুলির উপর কিছু করা filteredElements.each(function(element) { element.setStyle('background-color', 'yellow'); }); });ব্যবহার করে সকল এলিমেন্ট যেগুলোরএখানে:
('[data-id]')
$$data-idঅ্যাট্রিবিউট আছে, সেগুলি ফিল্টার করা হয়েছে।
get() মেথডের মাধ্যমে data-id অ্যাট্রিবিউটের মান পাওয়া গেছে এবং ফিল্টার করা হয়েছে।Element Manipulation in MooTools
MooTools-এ DOM এলিমেন্ট ম্যানিপুলেশন খুবই সহজ এবং গতিশীল। আপনি বিভিন্ন মেথড ব্যবহার করে এলিমেন্টগুলোর স্টাইল, ক্লাস, অথবা অন্যান্য প্রপার্টি পরিবর্তন করতে পারেন। নিচে কিছু গুরুত্বপূর্ণ মেথডের উদাহরণ দেয়া হলো।
1. Changing Styles
window.addEvent('domready', function() {
var myElement = $('myElement');
myElement.setStyle('color', 'blue'); // এলিমেন্টের টেক্সটের রঙ পরিবর্তন করা
myElement.setStyle('background-color', 'yellow'); // ব্যাকগ্রাউন্ড রঙ পরিবর্তন করা
});
এখানে, setStyle() মেথড ব্যবহার করে myElement এর স্টাইল পরিবর্তন করা হয়েছে। আপনি এর মাধ্যমে টেক্সটের রঙ, ব্যাকগ্রাউন্ড রঙ, প্যাডিং, মার্জিন ইত্যাদি পরিবর্তন করতে পারেন।
2. Changing Classes
window.addEvent('domready', function() {
var myElement = $('myElement');
myElement.addClass('newClass'); // নতুন ক্লাস যোগ করা
myElement.removeClass('oldClass'); // পুরানো ক্লাস মুছে ফেলা
});
এখানে, addClass() এবং removeClass() মেথড ব্যবহার করে এলিমেন্টের ক্লাস পরিবর্তন করা হয়েছে।
3. Setting Attributes
window.addEvent('domready', function() {
var myElement = $('myElement');
myElement.set('href', 'https://www.example.com'); // লিঙ্কের href অ্যাট্রিবিউট সেট করা
});
এখানে, set() মেথড ব্যবহার করে href অ্যাট্রিবিউটের মান সেট করা হয়েছে।
4. Element Insertion
window.addEvent('domready', function() {
var myElement = $('myElement');
var newDiv = new Element('div', {
'class': 'newDivClass',
'html': 'This is a new div!'
});
myElement.grab(newDiv, 'bottom'); // নতুন div ট্যাগটি myElement এর নিচে যোগ করা
});
এখানে, new Element() ব্যবহার করে একটি নতুন div এলিমেন্ট তৈরি করা হয়েছে এবং grab() মেথড ব্যবহার করে এটিকে myElement এর নিচে যোগ করা হয়েছে।
Combining Filtering and Manipulation
MooTools-এ ফিল্টারিং এবং ম্যানিপুলেশন একসাথে ব্যবহার করে আপনি আরও শক্তিশালী ইন্টারঅ্যাকটিভ ওয়েব অ্যাপ্লিকেশন তৈরি করতে পারেন।
উদাহরণ: Filter and Modify Elements
window.addEvent('domready', function() {
// সমস্ত 'highlight' ক্লাস ধারণকারী এলিমেন্টগুলো ফিল্টার করা
var elements = $$('div');
var highlightedElements = elements.filter(function(element) {
return element.hasClass('highlight');
});
// ফিল্টার করা এলিমেন্টগুলোর স্টাইল পরিবর্তন করা
highlightedElements.each(function(element) {
element.setStyle('color', 'green');
element.setStyle('font-weight', 'bold');
});
});
এখানে:
filter()মেথডের মাধ্যমেhighlightক্লাস ধারণকারী সকল এলিমেন্ট ফিল্টার করা হয়েছে।- তারপর,
each()মেথডের মাধ্যমে এই এলিমেন্টগুলোর স্টাইল পরিবর্তন করা হয়েছে।
সারাংশ
MooTools আপনাকে DOM element filtering এবং manipulation করতে সহজ এবং কার্যকরী উপায় প্রদান করে। filter() মেথড ব্যবহার করে আপনি নির্দিষ্ট শর্তে এলিমেন্ট নির্বাচন করতে পারেন এবং setStyle(), addClass(), removeClass(), এবং set() মেথড দিয়ে এলিমেন্টের প্রপার্টি পরিবর্তন করতে পারেন। এই দুটি কৌশল একসাথে ব্যবহার করে আপনি ওয়েব পেজে উন্নত ইন্টারঅ্যাকটিভ ফিচার তৈরি করতে সক্ষম হবেন।
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 সিলেক্টর ব্যবহার করে পিতা-মাতা এবং সন্তান সম্পর্কের ভিত্তিতে উপাদান নির্বাচন করতে পারেন:
('div p').each(function(p) { p.setStyle('font-weight', 'bold'); }); });window.addEvent('domready', function() { // সব প্যারাগ্রাফ নির্বাচন যেগুলি div এর মধ্যে আছে $$এখানে,
(): এটি MooTools-এর একটি শক্তিশালী ফাংশন, যা CSS সিলেক্টর ব্যবহার করে একাধিক উপাদান নির্বাচন করে।getElementsByClassName(): এই ফাংশনটি ক্লাস নাম দ্বারা এলিমেন্ট নির্বাচন করতে ব্যবহৃত হয়। querySelector(): এটি একটি DOM মেথড যা CSS সিলেক্টরের মাধ্যমে একটি উপাদান নির্বাচন করে। সারাংশ
MooTools এর CSS Selectors ব্যবহার করে আপনি DOM উপাদানগুলো খুব সহজেই নির্বাচন এবং ম্যানিপুলেট করতে পারেন।
$()এবং$$()ফাংশনগুলি MooTools-এর প্রধান উপাদান নির্বাচন ফাংশন, যা CSS সিলেক্টরগুলির মাধ্যমে কাজ করে। এটি ডেভেলপারদের ওয়েব পেজের বিভিন্ন উপাদানকে দ্রুত এবং কার্যকরীভাবে নিয়ন্ত্রণ করতে সহায়তা করে। MooTools-এ CSS সিলেক্টর ব্যবহার করে DOM ম্যানিপুলেশন এবং স্টাইল পরিবর্তন করা একটি শক্তিশালী পদ্ধতি যা ওয়েব ডেভেলপমেন্টকে সহজ এবং দ্রুত করে তোলে।
Read more
