ইলিমেন্ট এবং মাল্টিপাল সিলেক্টর (Element & Multiple Selector)

ইলিমেন্ট এবং মাল্টিপাল সিলেক্টর (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 :

$("div") – Document এর সকল division কে select করবে।
$("p") - Document এর সকল paragraph কে select করবে।
$("a") - Document এর সকল anchor কে select করবে।

উদাহরন Code :

<!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>

ফলাফল(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 :

$('div, p') – সব div এবং p উপাদান নির্বাচন করবে।
$('p strong, .myclass') - p এর under এ সকল strong এবং myclass যুক্ত element কে নির্বাচন করবে।

উদাহরন Code :

<!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>

.map(),.get(),join(", ") এগুলি নিয়ে পরে আলোচনা করা হবে। এখানে শুধু লক্ষ্য করুন একাধিক উপাদান কিভাবে jQuery দ্বারা select করা হয়েছে।

ফলাফল(output):

Selector Example

<< Previous Next >>

লেখকঃ ঢাকা প্রকৌশল ও প্রযুক্তি বিশ্ববিদ্যায়ের(DUET) কম্পিউটার সায়েন্স এ্যান্ড ইঞ্জিনিয়ারিং(CSE) বিভাগের ৪র্থ বর্ষের এক জন ছাত্র। তিনি ওয়েব ডিজাইন, ওয়েব ডেভলপমেন্ট এর বিভিন্ন বিষয় যেমন : এইচটিএমএল, সিএসএস, জাভাস্ক্রিপ্ট, জে কোয়েরি, পিএইচপি, .Net ইত্যাদি বিষয়ের উপর অভিজ্ঞ। তিনি ACM ICPC সহ বিভিন্ন আন্তর্জাতিক প্রোগ্রামিং প্রতিযোগীতায় অংশগ্রহন করেছেন। তাকে ফেসবুকে অনুসরন করতে এখানে ক্লিক করুন।