ক্লাস এবং আইডি সিলেক্টর (Class & ID Selector): জে-কোয়েরী -(পর্ব-৯)

2 Comments / জে-কোয়েরী (jQuery) / By

একই class যুক্ত html element কে খুজেঁ বের করার জন্য class selector ব্যবহার করা হয়। ধরুন অপনি চাচ্ছেন .square class যুক্ত যেসকল html element আছে তাদেরকে click করলে কোন message দেখাবেন অথবা শর্ত-সাপেক্ষে ঐ class যুক্ত element এ নতুন কোন content যুক্ত করবেন, এ ক্ষেত্রে আপনি .square class কে reference হিসেবে ব্যবহার করতে পারেন।
অপরদিকে নির্দিষ্ট কোণ html element এর উপর কোণ action সম্পন্ন করতে চাইলে, সেক্ষেত্রে ID ব্যবহার করা হয়। কারন, একই ID একাধিক html element এ থাকবেনা।

Class Syntax : $(‘.classid’)

.classid = ইহা document এর মধ্যের কোণ Class Id(This is class ID available in the document)।

Example :

  1. $(‘.big’) – যে সকল উপাদানের class ID big তাদেরকে select করবে।
  2. $(‘p.small’) – যে সকল paragraph এর class ID small তাদেরকে select করবে।
  3. $(‘.big.small’) – যে সকল উপাদানের class big এবং small তাদেরকে select করবে।

উদাহরন Code :

[sourcecode language=”html”]
<!DOCTYPE html>
<html>
<head>
<style>
div,span {
width: 100px;
height: 40px;
float:left;
padding: 10px;
margin: 10px;
background-color: #EEEEEE;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div class="notMe">div class="notMe"</div>

<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>
<script>$(".myClass").css("border","3px solid red");</script>

</body>
</html>
[/sourcecode]

ফলাফল(output):

Selector Example

ID Syntax : $(‘#elementid’)

#elementid = ইহা document এর মধ্যের কোণ উপাদানের Id(Specifies the id of the element to select)। যদি ID কোণ special character ধারন করে, তবে তার সামনে backslashes দিতে হবে। যেমন: যদি id=”myID.entry[1]” হয়, তার জন্য jQuery code হবে $(“#myID\\.entry\\[1\\]”)।

Example :

  1. $(‘#myid’) – একটি single উপাদান select করবে যার id myid.
  2. $(‘div#yourid’) – একটি single division select করবে যার id yourid.

উদাহরন Code :

[sourcecode language=”html”]
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 90px;
height: 90px;
float:left;
padding: 5px;
margin: 5px;
background-color: #EEEEEE;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="notMe"><p>id="notMe"</p></div>

<div id="myDiv">id="myDiv"</div>
<script>$("#myDiv").css("border","3px solid red");</script>

</body>
</html>
[/sourcecode]

ফলাফল(output):

Selector Example

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

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

2 thoughts on “ক্লাস এবং আইডি সিলেক্টর (Class & ID Selector): জে-কোয়েরী -(পর্ব-৯)”

Leave a Comment