تنظیم محتوا و صفات تگ ها

نکته: ما از همان سه متد که در درس گذشته اموختیم استفاده میکنیم

• 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() میتوانند با عملگر callback نیز همراه شوند. عملگر callback دارای دو پارامتر است : index المان فعلی در لیست تگ های انتخاب شده و مقدار اصلی آن تگ ، شما میتوانید مقدار جدید را توسط یک عملگر به المان اعمال کنید.

مثال زیر نحوه استفاده از متدهای text()  و  html()  به همراه عملگر callback را نشان مید

$("#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()  میتواند برای تنظیم و ویرایش مقدار صفت استفاده شود.

در مثال زیر نحوه تغییر و تنظیم صفت 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"
});
});