এবার আমরা দেখব কিভাবে কোণ document (DOM tree) এ এক বা একাধিক উপাদানের উপর action সম্পন্ন করা যায়।
jQuery element selector এর মাধ্যমে কোণ নির্দিষ্ট DOM tree একটি উপাদানকে খুঁজে বের করে তার উপর action সম্পন্ন করা হয়।এখানে উপাদান বলতে tag name কে নির্দেশ করা হয়েছে।কোণ উপাদানকে খুঁজার জন্য jQuery, জাভাস্ক্রিপ্টের getElementByTagName() ফাংশন ব্যবহার করে।
অপরদিকে, multiple selector এর মাধ্যমে যে কোণ সংখ্যক উপাদানের উপর action সম্পন্ন করা সম্ভব। এক্ষেত্রে DOM tree এর ক্রম অনুসরন না হলে কোণ সমস্যা নেই একাধিক উপাদানকে manage করার এটিই সবচেয়ে ভাল পন্থা। .add() methode এর মাধ্যমেও এধরনের কিছু কাজ করা সম্ভব।
Element selector Syntax : $(‘tagname’)
tagname = যে tag টি খোঁজ করা হবে(An element to search for. Refers to the tagName of DOM nodes)।
Example :
- $(“div”) – Document এর সকল division কে select করবে।
- $(“p”) – Document এর সকল paragraph কে select করবে।
- $(“a”) – Document এর সকল anchor কে select করবে।
উদাহরন Code :
[sourcecode language=”html”]
<!DOCTYPE html>
<html>
<head>
<style>
div,span {
width: 60px;
height: 60px;
float:left;
padding: 10px;
margin: 10px;
background-color: #EEEEEE;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>
<script>$("div").css("border","9px solid red");</script>
</body>
</html>
[/sourcecode]
ফলাফল(output):
Multiple selector Syntax : $(‘selector1, selector2, selectorN’)
selector1: Any valid selector.
selector2: Another valid selector.
selectorN: As many more valid selectors as you like.
Example :
- $(‘div, p’) – সব div এবং p উপাদান নির্বাচন করবে।
- $(‘p strong, .myclass’) – p এর under এ সকল strong এবং myclass যুক্ত element কে নির্বাচন করবে।
উদাহরন Code :
[sourcecode language=”html”]
<!DOCTYPE html>
<html>
<head>
<style>
b { color:red; font-size:16px; display:block; clear:left; }
div,span,p { width: 40px; height: 40px; float:left;
margin: 10px; background-color: blue;
padding:3px; color:white;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<span>span</span>
<p>p</p>
<p>p</p>
<div>div</div>
<span>span</span>
<p>p</p>
<div>div</div>
<b></b>
<script>
var list = $("div,p,span").map(function () {
return this.tagName;
}).get().join(", ");
$("b").append(document.createTextNode(list));
</script>
</body>
</html>
[/sourcecode]
.map(),.get(),join(“, “) এগুলি নিয়ে পরে আলোচনা করা হবে। এখানে শুধু লক্ষ্য করুন একাধিক উপাদান কিভাবে jQuery দ্বারা select করা হয়েছে।
ফলাফল(output):
………………………………………………………………………………
আজ এখানেই শেষ করলাম। “HAVE A GOOD PROGRAMMING”
জে-কোয়েরী ধারাবাহিক টিউটোরিয়ালঃ
- ১. জে-কোয়েরী কি ? (What is jQuery ?)
- ২. JavaScript, AJAX এবং jQuery নিয়ে কিছু কথা
- ৩. জে-কোয়েরী কোডিং পদ্ধতি (Coding Process of jQuery)
- ৪. জে-কোয়েরী সিনট্যাক্স(jQuery Syntax)
- ৫. জে-কোয়েরী সেল্ফ এ্যাক্সিউটিং ফাংশন(jQuery self executing function)
- ৬. জে-কোয়েরী অবজেক্ট এ্যাস্কেসর(jQuery Object Accessors)
- ৭. জে-কোয়েরী সিলেক্টর সমূহ (jQuery Selectors)
- ৮. অল সিলেক্টর (All Selector)
- ৯. ক্লাস এবং আইডি সিলেক্টর (Class & ID Selector)
- ১০. ইলিমেন্ট এবং মাল্টিপাল সিলেক্টর(Element & Multiple Selector)
nice