অল সিলেক্টর (All Selector) ক্লাস এবং আইডি সিলেক্টর (Class & ID Selector)
.
অল সিলেক্টর (All Selector
অল সিলেক্টর কে * প্রতীক দ্বারা প্রকাশ করা হয়। ইহা DOM এর সকল উপাদান কে select করে (Selects all elements available in a DOM)।একে universal selector ও বলা হয়।যদি ইহা কোন HTML element এর সাথে ব্যবহার করা হয় তবে ইহা ঐ specified element এর সকল child element সিলেক্ট করবে।
Syntax : $("*")
Example :
- $('*') - ডকুমেন্টের সকল উপাদান select করবে।
- $("p > *") – যেসকল উপাদান paragraph element এর children paragraph tag এর মধ্যের উপাদান) তাদেরকে Select করবে।
- 3. table > *:not(thead)- ইহা thead ছাড়া টেবিলের সকল উপাদান নির্বাচন করবে।
উদাহরন ১:
- নিচের program টি head এবং body সহ document এর সকল HTML উপাদানকে গননা করবে।
<!DOCTYPE html>
<html>
<head>
<style>
h3 { margin: 0; }
div,span,p {
width: 80px;
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>DIV</div>
<span>SPAN</span>
<p>P <button>Button</button></p>
<script>
var elementCount = $("*").css("border","3px solid red").length;
$("body").prepend("<h3>" + elementCount + " elements found</h3>");
</script>
</body>
</html>ফলাফল(output):
উদাহরন ২:
- নিচের program টি শুধু body এর সকল HTML উপাদানকে সিলেক্ট করবে।
<!DOCTYPE html><!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("body *").css("background-color","red");
});
</script>
</head>
<body>
<h1>I am h1</h1>
<p class="intro">I am p with class "intro"</p>
<p>I am only p</p>
</body>
</html>
ফলাফল(output):
ক্লাস এবং আইডি সিলেক্টর (Class & ID Selector)
একই 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 :
- $('.big') – যে সকল উপাদানের class ID big তাদেরকে select করবে।
- $('p.small') - যে সকল paragraph এর class ID small তাদেরকে select করবে।
- $('.big.small') - যে সকল উপাদানের class big এবং small তাদেরকে select করবে।
উদাহরন Code :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!--[CDATA[
<!DOCTYPE html-->
<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>
<div class="notMe">div class="notMe"</div>
<div class="myClass" style="border: 3px solid red;">div class="myClass"</div>
<span class="myClass" style="border: 3px solid red;">span class="myClass"</span>
<script>$(".myClass").css("border","3px solid red");</script>
]]>
ফলাফল(output):
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 :
- $('#myid') – একটি single উপাদান select করবে যার id myid.
- $('div#yourid') - একটি single division select করবে যার id yourid.
উদাহরন Code :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!--[CDATA[
<!DOCTYPE html-->
<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>
<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv" style="border: 3px solid red;">id="myDiv"</div>
<script>$("#myDiv").css("border","3px solid red");</script>
]]>
ফলাফল(output):
Comments
Post a Comment
Thanks