سلام دوستان عزیز حالتون چطوره ؟ امیدووارم که خوب باشید و سلامت ، و با آموزش set content در jquery ما همراه بمانید.

jQuery – تنظیم و مقداردهی محتوا و خصیصه ها

توابع text()،html() و val()

کلیه ی توابع تشریح شده در مبحث قبلی را برای تنظیم محتوا (set content) بکار می بریم:

Text() – محتوای المان های انتخابی را تنظیم و بازمی گرداند.

()html – محتوای المان های انتخابی را مقداردهی کرده یا برمی گرداند. (همراه با تگ های HTML)

()val – محتوای فیلدهای انتخاب شده داخل یک فرم را مقداردهی کرده یا بازگردانی می نماید.

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

نمونه یک
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳

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

استفاده از ()text و ()html و ()val به همراه تابع callback

این امکان وجود دارد که سه متد ()val، ()html و ()text را همراه با تابع callback استفاده کرد. تابع callback دو پارامتر دارد: index – شماره ی المان جاری در فهرست عناصر انتخابی و origValue – مقدار اصلی (پیشین) خاصیت. سپس با استفاده از دستور return رشته ی ای را که مورد نظراتان است به عنوان مقدار جدید مورد استفاده قرار دهید را از تابع باز می گردانید (مقدار جدیدی را که در نظر دارید، set می کنید).

در این نمونه متدهای ()text و ()html همراه با تابع callback بکار برده شده اند:

نمونه دو
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵

$(document).ready(function () {
$(“#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 + “)”;
});
});
});

تنظیم مقدار خصیصه ها – attr()

برای دستکاری یا تنظیم مقدار برای یک خصیصه از متد ()attr استفاده می شود.

در نمونه ی زیر مقدار خصیصه ی href در عنصر با شناسه (id) “w3s” با کلیک روی دکمه عوض می شود:

نمونه سه
?
۱
۲
۳
۴
۵
۶
۷

$(document).ready(function () {
$(“button”).click(function () {
$(“#tahlil”).attr(“href”, “http://www.tahlildadeh.com/jquery”);
});
});

متد یاد شده همچنین به شما اجازه می دهید چندین خصیصه را به طور همزمان مقداردهی کنید.

مثال زیر چگونگی مقداردهی هر دو خصیصه ی href و title را به طور همزمان، نمایش می دهد:

نمونه چهار
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰

$(document).ready(function () {
$(“button”).click(function () {
$(“#tahlil”).attr({
“href”: “http://www.tahlildadeh.com/jquery”,
“title”: “Tahlildadeh jQuery Tutorial”
});
});
});

استفاده از ()attr به همراه تابع callback

شما می توانید متد ()attr را به همراه تابع callback مورد استفاده قرار دهید. تابع callback دو پارامتر دارد:

index – شماره ی المان فعلی در فهرست عناصر انتخابی

origValue – مقدار اصلی (قبلی) خصیصه

سپس با بهره گیری از دستور return مقدار جدیدی را که برای خصیصه ی مربوطه در نظر گرفته اید تنظیم می کنید.

در نمونه ی پیشرو متد ()attr همراه با تابع callback نمایش داده شده است:

نمونه پنج
?
۱
۲
۳
۴
۵
۶
۷
۸
۹

$(document).ready(function () {
$(“button”).click(function () {
$(“#tahlil”).attr(“href”, function (i, origValue) {
return origValue + “/jquery”;
});
});
});