জেকুয়েরি prop() মেথড
« জেকুয়েরি এইচটিএমএল/সিএসএস মেথডসমূহ
সংজ্ঞা এবং ব্যবহার
prop() মেথড নির্বাচিত এলিমেন্টের প্রোপার্টি এবং ভ্যালু সেট করে এবং রিটার্ন করে।
যখন এই মেথডটি প্রোপার্টি ভ্যালু রিটার্ন করার জন্য ব্যবহার করা হয়, তখন এটি শুধুমাত্র প্রথম মিলকৃত এলিমেন্টের ভ্যালু রিটার্ন করে।
আর যখন এই মেথডটি প্রোপার্টি ভ্যালু সেট করার জন্য ব্যবহার করা হয়, তখন এটি এক বা একাধিক মিলকৃত এলিমেন্টের প্রোপার্টি/ভ্যালু জোড়ায় জোড়ায় সেট করে।
নোট: prop() মেথড প্রোপার্টির ভ্যালু পুনরুদ্ধার করতে ব্যবহার করা উচিত,
উদাহরণ ডোম প্রোপার্টি (যেমন tagName, nodeName, defaultChecked)
বা আপনার নিজস্ব প্রোপার্টি তৈরি করে।
পরামর্শঃ এইচটিএমএল প্রোপার্টি পুনরুদ্ধার করার জন্য, attr() মেথড ব্যবহার করুন।
পরামর্শঃ প্রোপার্টি রিমুভ করতে removeProp() মেথড ব্যবহার করুন।
সিনট্যাক্স ও ব্যাখ্যা
প্রোপার্টির ভ্যালু রিটার্ন:
$(selector).prop(property)
প্রোপার্টি এবং ভ্যালু সেট:
$(selector).prop(property,value)
ফাংশন ব্যাবহার করে প্রোপার্টি এবং ভ্যালু সেট:
$(selector).prop(property,function(index,currentvalue))
একাধিক প্রোপার্টি এবং ভ্যালু সেট:
$(selector).prop({property:value, property:value,...})
প্যারামিটার ও তাদের ভ্যালু
নিচের টেবিলে prop() মেথডে ব্যবহৃত প্যারামিটার এবং প্যারামিটারের সম্ভাব্য ভ্যালু গুলো দেখানো হলোঃ
| প্যারামিটার | বিবরণ |
|---|---|
property |
প্রোপার্টির নামকে নির্দেশ করে। |
value |
প্রোপার্টির ভ্যালুকে নির্দেশ করে। |
function (index,currentvalue) |
একটি ফাংশন উল্লেখ করে যা প্রোপার্টি ভ্যালু সেট করতে রিটার্ন করে।
|
উদাহরণ
<!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(){
$("button").click(function(){
var $x = $("div");
$x.prop("color", "009600");
$x.append("color প্রোপার্টির ভ্যালু হচ্ছে " + $x.prop("color"));
$x.removeProp("color");
$x.append("<br>এখন color প্রোপার্টির ভ্যালু হচ্ছেঃ " + $x.prop("color"));
});
});
</script>
</head>
<body>
<div>Satt Academy </div>
<button>প্রোপার্টি এড এবং রিমুভ করুন</button><br><br>
</body>
</html>
ফলাফল
উদাহরণ
prop() এবং attr() এর মধ্যে পার্থক্য
prop() এবং attr() বিভিন্ন মান প্রদর্শন করতে পারে। এই উদাহরণটি পার্থক্য দেখায় যখন চেকবক্সের checked স্ট্যাটাস রিটার্ন করার ক্ষেত্রে এই উদাহরণটি পার্থক্য দেখায়।
উদাহরণ
<!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(){
$("button").click(function(){
$("#p1").html("attr('checked'): " + $("input").attr('checked')
+ "<br>prop('checked'): " + $("input").prop('checked'));
});
});
</script>
</head>
<body>
<p><b>নোট:</b> চেকবক্সকে চেক এবং আন-চেক করুন এবং তারপর কন্টেন্টকে রিফ্রেশ করার জন্য বাটনে ক্লিক করুন</p>
<button>attr() এবং prop() এর চেক ভ্যালু</button>
<br><br>
<input id="check1" type="checkbox" checked="checked">
<label for="check1">চেক করুন</label>
<p id="p1"></p>
</body>
</html>
ফলাফল
« জেকুয়েরি এইচটিএমএল/সিএসএস মেথডসমূহ