متد val و attr

کار با مقادیر فرم با val() و ویژگی‌های عناصر با attr()

متد val()

متد val() مخصوص فیلدهای فرم است (input، textarea، select):

// دریافت مقدار فیلد
var name = $("#name").val();

// تنظیم مقدار فیلد
$("#name").val("علی رضایی");

// دریافت مقدار select انتخاب‌شده
var city = $("#city").val();

متد attr()

متد attr() برای کار با ویژگی‌های (attributes) عناصر است:

// دریافت ویژگی
var href = $("#link").attr("href");
var src = $("#photo").attr("src");

// تنظیم یک ویژگی
$("#link").attr("href", "https://example.com");

// تنظیم چند ویژگی با هم
$("#photo").attr({
    src: "new-image.jpg",
    alt: "توضیح جدید تصویر",
    title: "عنوان تصویر"
});

attr با callback

// تغییر href همه لینک‌ها با یک الگو
$("a").attr("href", function(i, origValue) {
    return origValue + "?utm=learningcity";
});

attr در برابر prop

از jQuery 1.6 دو متد داریم و تفاوتشان مهم است:

متدبرای چیستمثال
attr()ویژگی HTML (مقدار اولیه در تگ)attr("checked") مقدار اولیه
prop()خصوصیت DOM (وضعیت فعلی)prop("checked") وضعیت الان
قانون ساده: برای وضعیت‌های checked، disabled و selected همیشه از prop() استفاده کنید؛ برای بقیه (href، src، id، class...) از attr().
// ✅ درست: بررسی وضعیت فعلی چک‌باکس
if ($("#agree").prop("checked")) {
    console.log("تایید شده");
}

// تنظیم وضعیت
$("#agree").prop("checked", true);   // تیک زدن
$("#agree").prop("disabled", true);  // غیرفعال کردن

حذف ویژگی با removeAttr

// حذف ویژگی readonly از فیلد
$("#name").removeAttr("readonly");

مثال کاربردی: اعتبارسنجی فرم

$("#myForm").submit(function(e) {
    var email = $("#email").val();
    var password = $("#password").val();

    if (email === "" || password === "") {
        e.preventDefault();
        $("#error").text("همه فیلدها الزامی است!").show();
    }
});

جمع‌بندی

این مبحث بخشی از دوره آموزش کامل jQuery است.

ابزارهای مرتبط