تنظیم محتوا

 

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

  • 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");
});

یک عملگر Callback برای text(), html() و val()

تمام این سه متد  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"
});
});

عملگر callback برای صفت attr()

متد attr() میتواند با یک عملگر callback با دو پارامتر نیز کار کند. ایندکس تگ انتخاب شده و مقدار صفت آن ، شما میتوانید در یک رشته مقدار یک صفت را بازگردانی کنید:

مثال زیر نحوه استفاده از متد attr() را نشان میدهد:

$("button").click(function(){
$("#w3s").attr("href", function(i, origValue){
return origValue + "/jquery";
});
});
توسعه دهندگان
آریان آذر