آموزش تنظیم محتوا و ویژگی ها در جی کوئری Set Content and Attributes

بازدید: 509 بازدید
تنظیم محتوا و ویژگی ها
[cdb_box_content]

با سلام خدمت همراهان همیشگی وب سایت پرنیان طرح

با یکی دیگر از مقالات آموزش جی کوئری در خدمت شما عزیزان هستیم.

می توانید برای مطالعه بیشتر در مورد جی کوئری به این لینک در وب سایت پرینان طرح مراجعه کنید.

در آموزش امروز قصد داریم در مورد تنظیم محتوا و ویژگی ها در کتابخانه جی کوئری صحبت کنیم.

در ادامه آموزش همراه ما باشید.

[/cdb_box_content]
[cdb_box_content]

مقدمه


در این مقاله ، تنظیم کردن محتوا و ویژگی ها را در کتابخانه جی کوئری مورد بررسی  وتمرین قرار خواهیم داد.

در ادامه همراه ما باشید.

[/cdb_box_content]
[cdb_box_content]

مثال زیر چگونگی تنظیم محتوا با استفاده از متدهای ()text و ()html و ()val را در کتابخانه جی کوئری،  نمایش می دهد:

[php]
$(“#btn1”).click(function(){
$(“#test1”).text(“Hello world!”);
});
$(“#btn2”).click(function(){
$(“#test2”).html(“Hello world!“);
});
$(“#btn3”).click(function(){
$(“#test3”).val(“Dolly Duck”);
});
[/php]

نتیجه کد بالا را از این لینک ، مشاهده کنید.

[/cdb_box_content]

یک تابع Callback برای متدهای بالا:

هر سه روش گفته شده در مرحله قبل ، یعنی متنtext، و html و val دارای تابع مقداربرگشتی یا Callback هستند.

تابع مقدار بازگشت، دو مقدار دارد:

1- موقعیت عنصر فعلی در لیست عناصر انتخاب شده

2- مقدار اصلی (قدیمی).

سپس رشته ای را که می خواهید به عنوان مقدار جدید از تابع استفاده کنید ، برمی گردانید.

مثال زیر چگونگی استفاده از متدهای متن و html با استفاده از تابع برگشتی نمایش می دهد.

[php]
$(“#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 world! (index: ” + i + “)”;
});
});
[/php]

نتیجه کد بالا را از این لینک مشاهده کنید.

[cdb_box_content]

تنظیم ویژگی ها

()attr

از روش ()jQuery attr نیز تنظیم کردن و یا تغییر دادن مقادیر ویژگی ها استفاده می شود.

مثال زیر نحوه تغییر (تنظیم) مقدار صفت href را در یک لینک نشان می دهد:

[php]
$(“button”).click(function(){
$(“#w3s”).attr(“href”, “https://www.w3schools.com/jquery/”);
});
[/php]

نتیجه کد بالا را از این لینک مشاهده کنید.

[/cdb_box_content]
[cdb_box_content]

روش ()attr همچنین به شما امکان می دهد چندین ویژگی را به طور همزمان تنظیم کنید.

مثال زیر نحوه تنظیم هر دو ویژگی href و title را همزمان نشان می دهد:

[php]
$(“button”).click(function(){
$(“#w3s”).attr({
“href” : “https://www.w3schools.com/jquery/”,
“title” : “W3Schools jQuery Tutorial”
});
});
[/php]

نتیجه کد بالا را از این لینک مشاهده کنید.

[/cdb_box_content]
[cdb_box_content]

یک تابع مقدار برگشتی برای ()attr

روش ()attr نیز مانند روش های قبلی دارای تابع بازگشتی است.

عملکرد و مقادیر این تابع در تمامی متدهای گفته شده (همان روش ها) یکسان است.

مثال زیر متد ()attr را همراه با تابع بازگشتی نمایش می دهد:

[php]
$(“button”).click(function(){
$(“#w3s”).attr(“href”, function(i, origValue){
return origValue + “/jquery/”;
});
});
[/php]

نتیجه کد بالا را از این لینک مشاهده کنید.

[/cdb_box_content]
[cdb_box_content]

اگر این مطلب برای شما مفید بود، ما را در گوگل ستاره باران کنید.

ترجمه و ارائه : رویا نجفی

منبع : وب سایت w3schools

[/cdb_box_content]
دسته بندی JQuery
اشتراک گذاری
مقالات مرتبط

دیدگاهتان را بنویسید

سبد خرید

هیچ محصولی در سبد خرید نیست.