التعامل مع الخصائص

<img id="logo" src="logo.png" alt="شعار الشركة" width="200">
<a id="website" href="https://example.com">زيارة الموقع</a>

// الحصول على خاصية واحدة
var imgSrc = $("#logo").attr("src");
console.log(imgSrc); // "logo.png"

var linkHref = $("#website").attr("href");
console.log(linkHref); // "https://example.com"

// الخاصية غير الموجودة تُرجع undefined
var title = $("#logo").attr("title");
console.log(title); // undefined

// تعيين خاصية واحدة
$("#logo").attr("width", "300");
$("#website").attr("target", "_blank");

// تعيين خصائص متعددة
$("#logo").attr({
    src: "new-logo.png",
    alt: "شعار الشركة الجديد",
    width: "250",
    height: "100"
});

<input type="text" id="email" disabled required placeholder="البريد الإلكتروني">

// إزالة خاصية واحدة
$("#email").removeAttr("disabled");

// إزالة خصائص متعددة (مفصولة بمسافة)
$("#email").removeAttr("disabled required");

// الآن حقل الإدخال مُفعّل ولم يعد مطلوباً

<input type="checkbox" id="terms" checked>
<input type="text" id="username" value="أحمد">
<button id="submit" disabled>إرسال</button>

// الحصول على الخصائص
var isChecked = $("#terms").prop("checked");
console.log(isChecked); // true

var isDisabled = $("#submit").prop("disabled");
console.log(isDisabled); // true

// تعيين الخصائص
$("#terms").prop("checked", false);      // إلغاء التحديد
$("#submit").prop("disabled", false);    // تفعيل الزر

// تبديل الخاصية
var current = $("#terms").prop("checked");
$("#terms").prop("checked", !current);

// إضافة خاصية مخصصة
$("#username").prop("customProp", "customValue");

// إزالة الخاصية المخصصة
$("#username").removeProp("customProp");

// تحذير: لا تزيل الخصائص الأصلية أبداً
// $("#username").removeProp("disabled"); // لا تفعل هذا!

<img class="thumbnail" src="img1.jpg">
<img class="thumbnail" src="img2.jpg">
<img class="thumbnail" src="img3.jpg">

// إضافة معرّف فريد لكل صورة
$(".thumbnail").attr("id", function(index) {
    return "img-" + (index + 1);
});

// تحديث src بناءً على القيمة الحالية
$(".thumbnail").attr("src", function(index, currentSrc) {
    return currentSrc.replace(".jpg", "-large.jpg");
});

// خصائص شرطية
$(".thumbnail").attr("loading", function(index) {
    return index < 3 ? "eager" : "lazy";
});

<div class="gallery">
    <img src="thumb1.jpg" data-full="full1.jpg" alt="صورة 1">
    <img src="thumb2.jpg" data-full="full2.jpg" alt="صورة 2">
    <img src="thumb3.jpg" data-full="full3.jpg" alt="صورة 3">
</div>

<div id="lightbox" style="display: none;">
    <img id="lightbox-img" src="" alt="">
    <button id="close-lightbox">إغلاق</button>
</div>

$(document).ready(function() {
    // إضافة مؤشر وعنوان للصور المصغرة
    $(".gallery img").attr({
        "style": "cursor: pointer;",
        "title": "انقر لعرض بالحجم الكامل"
    });

    // فتح العارض عند النقر على الصورة المصغرة
    $(".gallery img").click(function() {
        var fullSrc = $(this).attr("data-full");
        var alt = $(this).attr("alt");

        $("#lightbox-img").attr({
            src: fullSrc,
            alt: alt
        });

        $("#lightbox").show();
    });

    // إغلاق العارض
    $("#close-lightbox").click(function() {
        $("#lightbox").hide();
        $("#lightbox-img").attr("src", ""); // مسح الصورة
    });

    // الإغلاق عند النقر على الخلفية
    $("#lightbox").click(function(e) {
        if (e.target.id === "lightbox") {
            $(this).hide();
        }
    });
});

<form id="signup-form">
    <input type="email" id="email" placeholder="البريد الإلكتروني">
    <input type="password" id="password" placeholder="كلمة المرور">
    <input type="checkbox" id="agree"> أوافق على الشروط
    <button type="submit" id="submit-btn" disabled>التسجيل</button>
</form>

$(document).ready(function() {
    // فحص صحة النموذج عند الإدخال
    $("#email, #password, #agree").on("input change", function() {
        var email = $("#email").val();
        var password = $("#password").val();
        var agreed = $("#agree").prop("checked");

        // تفعيل الإرسال إذا تحققت جميع الشروط
        var isValid = email.length > 0 &&
                      password.length >= 6 &&
                      agreed;

        $("#submit-btn").prop("disabled", !isValid);

        // إضافة تغذية راجعة مرئية
        if (isValid) {
            $("#submit-btn").attr("title", "انقر للإرسال");
        } else {
            $("#submit-btn").attr("title", "أكمل جميع الحقول");
        }
    });

    // معالجة إرسال النموذج
    $("#signup-form").submit(function(e) {
        e.preventDefault();

        // تعطيل النموذج أثناء الإرسال
        $("#signup-form input, #signup-form button").prop("disabled", true);
        $("#submit-btn").attr("value", "جاري الإرسال...");

        // محاكاة استدعاء API
        setTimeout(function() {
            alert("تم إرسال النموذج بنجاح!");
            $("#signup-form")[0].reset();
            $("#signup-form input, #signup-form button").prop("disabled", false);
            $("#submit-btn").prop("disabled", true);
        }, 1500);
    });
});