ইলিমেন্ট এবং মাল্টিপাল সিলেক্টর(Element & Multiple Selector): জে-কোয়েরী -(পর্ব-১০)

এবার আমরা দেখব কিভাবে কোণ 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 :

  1. $(“div”) – Document এর সকল division কে select করবে।
  2. $(“p”) – Document এর সকল paragraph কে select করবে।
  3. $(“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):

Selector Example

Multiple selector Syntax : $(‘selector1, selector2, selectorN’)

selector1: Any valid selector.
selector2: Another valid selector.
selectorN: As many more valid selectors as you like.

Example :

  1. $(‘div, p’) – সব div এবং p উপাদান নির্বাচন করবে।
  2. $(‘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):

Selector Example

………………………………………………………………………………
আজ এখানেই শেষ করলাম। “HAVE A GOOD PROGRAMMING”

জে-কোয়েরী ধারাবাহিক টিউটোরিয়ালঃ

1 thought on “ইলিমেন্ট এবং মাল্টিপাল সিলেক্টর(Element & Multiple Selector): জে-কোয়েরী -(পর্ব-১০)”

Comments are closed.