জেকুয়েরি .class সিলেক্টর
সংজ্ঞা এবং ব্যবহার
.class সিলেক্টর নির্দিষ্ট ক্লাসযুক্ত সকল এলিমেন্টকে সিলেক্ট করে
ক্লাস বলতে এখানে এইচটিএমএলের class এট্রিবিউটকে বুঝাচ্ছে।
class এট্রিবিউটের মাধ্যমে অনেকগুলো এইচটিএমএল এলিমেন্টে একই সাথে নির্দিষ্ট করে স্টাইল করা যায়।
বিঃদ্রঃ কখনোই class এট্রিবিউট সংখ্যা দিয়ে শুরু করবেন না। এটা কিছু ব্রাউজারে সমস্যা করতে পারে।
সিনট্যাক্স
$(".class")
প্যারামিটার ও তাদের ভ্যালু
নিচের টেবিলে .classসিলেক্টরে ব্যবহৃত প্যারামিটার এবং প্যারামিটারের সম্ভাব্য ভ্যালু গুলো দেখানো হলোঃ
| প্যারামিটার | বিবরণ |
|---|---|
| class | আবশ্যক। যেই এলিমেন্টকে সিলেক্ট করা হবে ঐ এলিমেন্টের ক্লাসকে নির্দেশ করে। |
.class সিলেক্টর সংক্রান্ত উদাহরণ
"desc" ক্লাসযুক্ত সকল এলিমেন্টকে সিলেক্ট
কিভাবে "desc" ক্লাস যুক্ত সকল এলিমেন্টকে সিলেক্ট করা যায় তা নিচের উদাহরণে দেখানো হলোঃ
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<title>জেকুয়েরি class সিলেক্টর</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".desc").css({
"background-color": "green",
"color": "white",
});
});
</script>
</head>
<body>
<h3>আমাদের ওয়েবসাইটে আপনাকে স্বাগতম!!</h3>
<p class="desc">আমাদের ওয়েবসাইটে আমরা বাংলায় প্রোগ্রামীং শিক্ষার ব্যবস্থা করেছি।</p>
<p class="desc">আমাদের ওয়েবসাইটটি ফলো করে আপনি খুব সহজে প্রোগ্রামীং শিখতে পারবেন।</p>
<p>আমাদের ওয়েবসাইট থেকে আপনি যেই যেই বিষয়গুলো শিখতে পারবেনঃ</p>
<ul>
<li>এইচটিএমএল</li>
<li>সিএসএস</li>
<li>জাভাস্ক্রিপ্ট</li>
<li>পিএইচপি</li>
<li>এসকিউএল</li>
<li>জেকুয়েরি</li>
<li>বুটস্ট্রাপ</li>
<li>এঙ্গুলার জেএস</li>
<li>ওয়ার্ডপ্রেস</li>
<li>সি প্রোগ্রামীং</li>
<li>পাইথন প্রোগ্রামীং</li>
</ul>
</body>
</html>
ফলাফল
"web" ক্লাসযুক্ত সকল <li> এলিমেন্ট সিলেক্ট
কিভাবে "web" ক্লাসযুক্ত সকল <li> এলিমেন্টকে সিলেক্ট করা যায় তা নিচের উদাহরণে দেখানো হলোঃ
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<title>জেকুয়েরি class সিলেক্টর</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("li.web").css({
"background-color": "green",
"color": "white",
});
});
</script>
</head>
<body>
<h3>আমাদের ওয়েবসাইটে আপনাকে স্বাগতম!!</h3>
<p class="desc">আমাদের ওয়েবসাইটে আমরা বাংলায় প্রোগ্রামীং শিক্ষার ব্যবস্থা করেছি।</p>
<p class="desc">আমাদের ওয়েবসাইটটি ফলো করে আপনি খুব সহজে প্রোগ্রামীং শিখতে পারবেন।</p>
<p>আমাদের ওয়েবসাইট থেকে আপনি যেই যেই বিষয়গুলো শিখতে পারবেনঃ</p>
<ul>
<li class="web">এইচটিএমএল</li>
<li class="web">সিএসএস</li>
<li class="web">জাভাস্ক্রিপ্ট</li>
<li class="web">পিএইচপি</li>
<li class="web">এসকিউএল</li>
<li>জেকুয়েরি</li>
<li>বুটস্ট্রাপ</li>
<li>এঙ্গুলার জেএস</li>
<li>ওয়ার্ডপ্রেস</li>
<li>সি প্রোগ্রামীং</li>
<li>পাইথন প্রোগ্রামীং</li>
</ul>
</body>
</html>
ফলাফল