jQuery - تعيين المحتوى والسمات
تعيين المحتوى - نص () و html () و val ()
سنستخدم نفس الطرق الثلاث من الصفحة السابقة لتعيين المحتوى :
text()- يعين أو يعيد محتوى النص للعناصر المحددةhtml()- تعيين أو إرجاع محتوى العناصر المحددة (بما في ذلك ترميز HTML)val()- تعيين أو إرجاع قيمة حقول النموذج
يوضح المثال التالي كيفية تعيين المحتوى باستخدام jQuery 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");
});
وظيفة رد الاتصال للنص () و html () و val ()
جميع توابع jQuery الثلاثة أعلاه: text()، html()و val()، تأتي أيضًا بوظيفة رد نداء. تحتوي وظيفة رد الاتصال على معلمتين: فهرس العنصر الحالي في قائمة العناصر المحددة والقيمة الأصلية (القديمة). ثم تقوم بإرجاع السلسلة التي ترغب في استخدامها كقيمة جديدة من الوظيفة.
يوضح المثال التالي text()مع html()وظيفة رد الاتصال:
مثال
$("#btn1").click(function(){
$("#test1").text(function(i, origText){
return "Old text: " + origText + " New text: Hello world!
(index: " + i + ")";
});
});
$("#btn2").click(function(){
$("#test2").html(function(i, origText){
return "Old html: " + origText + " New html: Hello
<b>world!</b>
(index: " + i + ")";
});
});
تعيين السمات - Attr ()
تُستخدم طريقة jQuery attr()أيضًا لتعيين / تغيير قيم السمات.
يوضح المثال التالي كيفية تغيير (تعيين) قيمة السمة href في ارتباط:
مثال
$("button").click(function(){
$("#w3s").attr("href", "https://www.w3schools.com/jquery/");
});
تسمح attr()لك الطريقة أيضًا بتعيين سمات متعددة في نفس الوقت.
يوضح المثال التالي كيفية تعيين كل من سمات href و title في نفس الوقت:
مثال
$("button").click(function(){
$("#w3s").attr({
"href" : "https://www.w3schools.com/jquery/",
"title" : "W3Schools jQuery Tutorial"
});
});
وظيفة رد الاتصال لـ attr ()
يأتي التابع jQuery attr()أيضًا مع دالة رد نداء. تحتوي وظيفة رد الاتصال على معلمتين: فهرس العنصر الحالي في قائمة العناصر المحددة وقيمة السمة الأصلية (القديمة). ثم تقوم بإرجاع السلسلة التي ترغب في استخدامها كقيمة السمة الجديدة من الوظيفة.
يوضح المثال التالي attr()مع وظيفة رد الاتصال:
مثال
$("button").click(function(){
$("#w3s").attr("href", function(i, origValue){
return origValue + "/jquery/";
});
});
تمارين مسج
مرجع HTML jQuery
للحصول على نظرة عامة كاملة على جميع طرق jQuery HTML ، يرجى الانتقال إلى مرجع jQuery HTML / CSS الخاص بنا .