ضبط المحتوى وخصائص جافا سكريبت

ضبط المحتوى - text()،html() و val()

سنستخدم نفس الطرق الثلاثة من الفصل السابق لضبط المحتوى:

  • text() - ضبط أو العودة إلى محتوى النص العنصر المحدد
  • html() - ضبط أو العودة إلى محتوى العنصر المحدد (بما في ذلك العلامات HTML)
  • val() - ضبط أو العودة إلى قيمة حقل النموذج

هذا المثال يوضح كيفية استخدام الطرق text()،html() و val() لضبط المحتوى:

مثال

$("#btn1").click(function(){
  $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
  $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
  $("#test3").val("Dolly Duck");
});

جربها بنفسك

وظائف إعادة التشغيل الخاصة بtext()،html() و val()

الطريقة الثلاثة الخاصة بجافا سكريبت: text()،html() و val()، تحتوي أيضًا على وظائف إعادة التشغيل. وظائف إعادة التشغيل تأتي بثلاثة معلمات: مؤشر العنصر الحالي في قائمة العناصر المحددة، والقيمة الأصلية (القديمة). ثم تقوم بتقديم القيمة الجديدة ك�数ة مرة أخرى.

في المثال التالي، يتم عرض كيفية استخدام text() وhtml() مع دالة استدعاء:

مثال

$("#btn1").click(function(){
  $("#test1").text(function(i,origText){
    إرجاع "Old text: " + origText + " New text: Hello world!
    (index: " + i + ")";
  });
});
$("#btn2").click(function(){
  $("#test2").html(function(i,origText){
    إرجاع "Old html: " + origText + " New html: Hello <b>world!</b>
    (index: " + i + ")";
  });
});

جربها بنفسك

تعيين الخاصية - attr()

يستخدم jQuery طريقة attr() أيضًا لتعيين/تغيير قيمة الخاصية.

في المثال التالي، يتم عرض كيفية تغيير (تعيين) قيمة خاصية href في الرابط:

مثال

$("button").click(function(){
  $("#w3s").attr("href","http://www.codew3c.com/jquery");
});

جربها بنفسك

يسمح لك attr() أيضًا بتعيين عدة خاصيات في نفس الوقت.

في المثال التالي، يتم عرض كيفية تعيين href وtitle الخاصيتين في نفس الوقت:

مثال

$("button").click(function(){
  $("#w3s").attr({
    "href" : "http://www.codew3c.com/jquery",
    "title" : "CodeW3C.com jQuery Tutorial"
  });
});

جربها بنفسك

دالة الاستدعاء attr()

يقدم jQuery طريقة attr() أيضًا دالة استدعاء. دالة الاستدعاء تتكون من اثنين من المعلمات: الرقم المميز للعنصر الحالي في قائمة العناصر المحددة، والقيمة (القديمة) الأصلية. ثم تعود القيمة الجديدة ك�数ة عائدة.

في المثال التالي، يتم عرض كيفية استخدام attr() مع دالة استدعاء:

مثال

$("button").click(function(){
  $("#w3s").attr("href", function(i,origValue){
    إرجاع origValue + "/jquery";
  });
});

جربها بنفسك

دليل مراجعة jQuery HTML

للحصول على محتوى كامل لأساليب jQuery HTML، يرجى زيارة دليل المراجعة التالي: