تنظیم محتوا و صفت تگها با کمک جی کوئری

در این مقاله به ویرایش محتوای یک تگ و قرار دادن متن ، متن بهمراه کد Html و صفت در یک تگ Html به کمک جی کوئری می پردازیم.

آموزش طراحی سایت با جی کوئری

تنظیم محتوا: 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");
});

مشاهده نتیجه

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

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

مثال زیر نحوه استفاده از متدهای 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():

متد 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";
});
});

مشاهده نتیجه

براي بهره مندي از مشاوره تخصصي در زمینه طراحی سایت در کرج با شرکت سارگون تماس بگيريد