জেকুয়েরি [attribute|=value] সিলেক্টর
সংজ্ঞা এবং ব্যবহার
[attribute|=value] সিলেক্টরের মাধ্যমে নির্দিষ্ট এট্রিবিউটযুক্ত এলিমেন্টকে সিলেক্ট করা হয়, এবং এট্রিবিউটের নির্দিষ্ট স্ট্রিং ভ্যালুওযুক্ত(যেমন "en") অথবা পরে একটি হাইফেনযুক্ত শব্দ দিয়ে শুরু হয়(যেমন "en-us")।
পরামর্শঃ এই সিলেক্টরটি প্রায়ই language এট্রিবিউটের ক্ষেত্রে ব্যবহার করা হয়।
সিনট্যাক্স
$("[attribute|='value']")
প্যারামিটার ও তাদের ভ্যালু
নিচের টেবিলে [attribute|=value] সিলেক্টরে ব্যবহৃত প্যারামিটার এবং প্যারামিটারের সম্ভাব্য ভ্যালু গুলো দেখানো হলোঃ
| প্যারামিটার | বিবরণ |
|---|---|
| attribute | আবশ্যক। যেই এট্রিবিউট খুজে বের করা হবে সেটিকে নির্দেশ করে। |
| value | আবশ্যক। এট্রিবিউটের স্ট্রিং ভ্যালু যে শব্দ দিয়ে শুরু হয়, তা নির্দেশ করে। |
[attribute|=value] সিলেক্টর সংক্রান্ত উদাহরণ
যেসকল <p> এলিমেন্টের title এট্রিবিউটের ভ্যালু "para" শব্দ দিয়ে শুরু হয়, সেগুলোকে সিলেক্ট
নিচের উদাহরণে [attribute|=value] সিলেক্টরের ব্যবহার দেখানো হলোঃ
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<title>জেকুয়েরি [attribute|=value] সিলেক্টর</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p[title|='para']").css({
"background-color": "green",
"color": "white",
});
});
</script>
</head>
<body>
<p title="para">এটি একটি প্যারগ্রাফ।</p>
<p title="paragraph">এটি একটি প্যারগ্রাফ।</p>
<p title="paragraph">এটি একটি প্যারগ্রাফ।</p>
<p title="para-graph">এটি একটি প্যারগ্রাফ।</p>
</body>
</html>
এই সিলেক্টর ঐসকল এলিমেন্টকে সিলেক্ট করে, যেগুলোর title এট্রিবিউটের ভ্যালু 'para', অথবা 'para' দিয়ে শুরু হইয়ে পরে হাইফেন থাকবে।
ফলাফল
language এট্রিবিউটের ক্ষেত্রে
নিচের উদাহরনে hreflang এট্রিবিউটযুক্ত সকল <a> এলিমেন্টকে সিলেক্ট করে, যেখানে এট্রিবিউটের ভ্যালু "en" অথবা "en" দিয়ে শুরু হয়ঃ
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<title>জেকুয়েরি [attribute|=value] সিলেক্টর</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("a[hreflang|='en']").css({
"background-color": "yellow",
"color": "red",
});
});
</script>
</head>
<body>
<a href="https://sattacademy.com" hreflang="en">sattacademy.com</a><br>
<a href="https://sattacademy.com" hreflang="en-us">sattacademy.com</a><br>
<a href="https://sattacademy.com" hreflang="us-en">sattacademy.com</a><br>
<a href="https://sattacademy.com" hreflang="fr">sattacademy.com</a>
</body>
</html>
এই সিলেক্টর "en" এবং "en-us" উভয়কেই সিলেক্ট করবে।
ফলাফল