জেকুয়েরি জাভাস্ক্রিপ্ট এঙ্গুলার এইচটিএমএল সিএসএস বুটস্ট্রাপ
ফোরাম
 

জেকুয়েরি [attribute|=value] সিলেক্টর

« জেকুয়েরি সিলেক্টরসমূহ



সংজ্ঞা এবং ব্যবহার

[attribute|=value] সিলেক্টরের মাধ্যমে নির্দিষ্ট এট্রিবিউট যুক্ত প্রত্যেকটি এলিমেন্টকে সিলেক্ট করা হয়, এবং এট্রিবিউটের ভ্যালুও নির্দিষ্ট স্ট্রিং হয় (যেমন "en") অথবা পরে একটি হাইফেনযুক্ত শব্দ দিয়ে শুরু হয় (যেমন "en-us")।

টিপস: এই সিলেক্টরটি প্রায়ই language এট্রিবিউটের ক্ষেত্রে ব্যবহার করা হয়।


সিনট্যাক্স ও ব্যাখ্যা

$("[attribute|='value']")

প্যারামিটার ও তাদের ভ্যালু

নিচের টেবিলে [attribute|=value] সিলেক্টরে ব্যবহৃত প্যারামিটার এবং প্যারামিটারের সম্ভাব্য ভ্যালু গুলো দেখানো হলোঃ

প্যারামিটার বিবরণ
attribute আবশ্যক। যেই এট্রিবিউট খুজে বের করা হবে সেটিকে নির্দেশ করে।
value আবশ্যক। এট্রিবিউটের স্ট্রিং ভ্যালু যে শব্দ দিয়ে শুরু হয়, তা নির্দেশ করে।

[attribute|=value] সিলেক্টর সংক্রান্ত উদাহরণ

যেসকল <p> এলিমেন্টের title এট্রিবিউটের ভ্যালু "Tomorrow" শব্দ দিয়ে শুরু হয়, সেগুলোকে সিলেক্ট:

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("p[title|='Tomorrow']").css({"background-color": "green", "color": "white"});});
</script>
</head>
<body>

<p title="Tomorrow">এটি একটি প্যারগ্রাফ।</p>
<p title="tomorrow">এটি একটি প্যারগ্রাফ।</p>
<p title="Tom">এটি একটি প্যারগ্রাফ।</p>
<p title="See You Tomorrow">এটি একটি প্যারগ্রাফ।</p>
<p title="Tomorrow-the day after today">এটি একটি প্যারগ্রাফ।</p>

<p>এই সিলেক্টর ঐসকল এলিমেন্টকে সিলেক্ট করে, যেগুলোর title এট্রিবিউটের ভ্যালু 'Tomorrow', অথবা 'Tomorrow' দিয়ে শুরু হয় পরে হাইফেন থাকবে।</p>
</body>
</html>

ফলাফল




সিলেক্টর সংক্রান্ত উদাহরণ

language এট্রিবিউটের ক্ষেত্রে

নিচের উদাহরনে hreflang এট্রিবিউটযুক্ত সকল <a> এলিমেন্টকে সিলেক্ট করে, যেখানে এট্রিবিউটের ভ্যালুটি "en" দিয়ে শুরু হয়।

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("a[hreflang|='en']").css({"background-color": "green", "color": "white"});});
</script>
</head>
<body>

<a href="../index.php" hreflang="en">sattacademy.com</a><br>
<a href="../index.php" hreflang="en-us">sattacademy.com</a><br>
<a href="../index.php" hreflang="us-en">sattacademy.com</a><br>
<a href="../index.php" hreflang="fr">sattacademy.com</a>

<p>এই সিলেক্টর "en" এবং "en-us" উভয়কেই সিলেক্ট করবে।</p>
</body>
</html>

ফলাফল




« জেকুয়েরি সিলেক্টরসমূহ