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