الحصول على المحتوى وتعيينه

<p id="intro">مرحباً بك في <strong>jQuery</strong></p>
<button id="btn-get">الحصول على النص</button>
<button id="btn-set">تعيين النص</button>

// الحصول على محتوى النص
$("#btn-get").click(function() {
    var text = $("#intro").text();
    console.log(text); // "مرحباً بك في jQuery"
});

// تعيين محتوى النص
$("#btn-set").click(function() {
    $("#intro").text("محتوى نصي جديد");
});

<div id="container">
    <p>المحتوى الأصلي</p>
</div>

// الحصول على محتوى HTML
var html = $("#container").html();
console.log(html); // "<p>المحتوى الأصلي</p>"

// تعيين محتوى HTML
$("#container").html("<h3>عنوان جديد</h3><p>فقرة جديدة</p>");

// إضافة HTML
var current = $("#container").html();
$("#container").html(current + "<p>محتوى إضافي</p>");

<input type="text" id="username" value="أحمد">
<textarea id="message">مرحباً بالعالم</textarea>
<select id="country">
    <option value="us">الولايات المتحدة</option>
    <option value="uk" selected>المملكة المتحدة</option>
</select>

// الحصول على القيم
var username = $("#username").val();        // "أحمد"
var message = $("#message").val();          // "مرحباً بالعالم"
var country = $("#country").val();          // "uk"

// تعيين القيم
$("#username").val("فاطمة");
$("#message").val("رسالة جديدة");
$("#country").val("us");

// مسح حقل الإدخال
$("#username").val("");

<p class="item">الفقرة الأولى</p>
<p class="item">الفقرة الثانية</p>
<p class="item">الفقرة الثالثة</p>

// دالة الحصول تُرجع العنصر الأول فقط
var text = $(".item").text();
console.log(text); // "الفقرة الأولى"

// دالة التعيين تُطبق على جميع العناصر
$(".item").text("تم تحديث جميع الفقرات");

// الآن جميع الفقرات الثلاث لديها نفس النص

<div class="box">صندوق</div>
<div class="box">صندوق</div>
<div class="box">صندوق</div>

// تعيين نص مختلف لكل عنصر
$(".box").text(function(index, currentText) {
    return currentText + " " + (index + 1);
});
// النتيجة: "صندوق 1"، "صندوق 2"، "صندوق 3"

// التحديث بناءً على المحتوى الحالي
$(".box").html(function(index, currentHtml) {
    return "<strong>" + currentHtml + "</strong>";
});

<div id="user-profile">
    <h2 id="profile-name">جاري التحميل...</h2>
    <p id="profile-bio"></p>
    <input type="text" id="name-input" placeholder="أدخل الاسم">
    <textarea id="bio-input" placeholder="أدخل النبذة"></textarea>
    <button id="update-btn">تحديث الملف الشخصي</button>
</div>
<div id="preview"></div>

$(document).ready(function() {
    // تحميل البيانات الأولية
    $("#profile-name").text("أحمد محمد");
    $("#profile-bio").text("مطور ويب");

    // معاينة فورية
    $("#name-input, #bio-input").on("input", function() {
        var name = $("#name-input").val() || "اسمك";
        var bio = $("#bio-input").val() || "نبذة عنك";

        var preview = "<h3>" + name + "</h3><p>" + bio + "</p>";
        $("#preview").html(preview);
    });

    // تحديث الملف الشخصي
    $("#update-btn").click(function() {
        var newName = $("#name-input").val();
        var newBio = $("#bio-input").val();

        if (newName.trim() !== "") {
            $("#profile-name").text(newName);
        }

        if (newBio.trim() !== "") {
            $("#profile-bio").text(newBio);
        }

        // مسح حقول الإدخال
        $("#name-input, #bio-input").val("");
        $("#preview").html("<p style='color: green;'>تم تحديث الملف الشخصي!</p>");

        setTimeout(function() {
            $("#preview").html("");
        }, 2000);
    });
});