تنظیم محتوا (Set)
اینجا یاد می گیری چطور با jQuery، تنظیم محتوا در jQuery را انجام بدهی؛ یعنی متن، HTML، مقدار ورودی ها و حتی ویژگی ها را عوض کنی و صفحه را پویا کنی.
تنظیم محتوا در jQuery با text، html و val
سه متد مهم داری: text()، html() و val(). با text() متن ساده را عوض می کنی. با html() می توانی متن همراه تگ های HTML تنظیم کنی. با val() مقدار فیلدهای فرم مثل input را تغییر می دهی.
- text() برای تنظیم متن ساده داخل تگ ها است.
- html() متن را همراه تگ های HTML تنظیم می کند.
- val() مقدار ورودی ها و فرم ها را عوض می کند.
در مثال منبع، سه دکمه داریم که با کلیک، متن یک پاراگراف، HTML پاراگراف دیگر و مقدار یک input را تنظیم می کنند.
$("#btn1").click(function() {
$("#test1").text("Hello world!");
});
$("#btn2").click(function() {
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function() {
$("#test3").val("Dolly Duck");
});
این دقیقا شبیه وقتی است که می خواهی متن یک پیام، HTML یک کارت و نام داخل فرم را بعد از کلیک کاربر، سریع عوض کنی.
استفاده از تابع بازگشتی (Callback) در text، html و val
تابع بازگشتی Callback یعنی یک تابع که به متد داده می دهی تا jQuery آن را صدا بزند. این تابع دو ورودی می گیرد: index یا شماره المنت در لیست و origText یا مقدار قبلی.
خروجی این تابع، متن جدید است. یعنی خودت با استفاده از مقدار قبلی، متن تازه را می سازی.
$("#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()
ویژگی یا Attribute چیزهایی مثل href، src و title روی تگ ها هستند. متد attr() می تواند مقدار این ویژگی ها را عوض کند.
در مثال منبع، روی دکمه کلیک می کنیم و href یک لینک را به آدرس آموزش jQuery در W3Schools تغییر می دهیم.
$("button").click(function() {
$("#w3s").attr("href", "https://www.w3schools.com/jquery/");
});
مثلا در یک منو می توانی آدرس لینک ها را بر اساس حالت کاربر عوض کنی؛ مثلا اگر لاگین است به صفحه پروفایل بفرستی.
تنظیم چند ویژگی به صورت هم زمان
attr() می تواند یک شیء (Object) بگیرد و چند ویژگی را با هم تنظیم کند. این کار تمیزتر و خواناتر است.
در مثال منبع، هم href و هم title لینک w3s را در یک فراخوانی attr() تنظیم می کنیم.
$("button").click(function() {
$("#w3s").attr({
"href": "https://www.w3schools.com/jquery/",
"title": "W3Schools jQuery Tutorial"
});
});
این روش وقتی عالی است که بخواهی یک لینک را کامل آپدیت کنی؛ هم آدرس، هم متن راهنما.
تابع بازگشتی برای attr()
attr() هم مثل text() و html() می تواند Callback داشته باشد. اینجا به جای مقدار ثابت، تابعی می دهی که مقدار جدید ویژگی را برمی گرداند.
تابع دو ورودی دارد: i برای index المنت و origValue برای مقدار قبلی ویژگی.
$("button").click(function() {
$("#w3s").attr("href", function(i, origValue) {
return origValue + "/jquery/";
});
});
مثلا اگر چند لینک شبیه هم داری، می توانی بر اساس مقدار قبلی، آدرس جدید بسازی و به آن بخش اضافه کنی.
گام های تمرینی برای تنظیم محتوا (Set)
- یک پاراگراف با id برابر test1 بساز و یک دکمه با id برابر btn1 کنارش قرار بده.
- کد text() مثال اول را بنویس و روی دکمه کلیک کن تا متن پاراگراف عوض شود.
- یک پاراگراف دیگر با id برابر test2 بساز و مثال html() را تست کن.
- یک input با id برابر test3 بساز و با val() مقدار آن را تنظیم کن.
- یک لینک با id برابر w3s بساز و مثال های attr() را روی آن امتحان کن؛ برای خواندن دوباره مقدارها می توانی به صفحه دریافت محتوا (Get) هم سر بزنی.
جمع بندی سریع
- متدهای text()، html() و val() برای تنظیم محتوا داخل المنت ها هستند.
- attr() ویژگی هایی مثل href و title را تنظیم می کند.
- با Callback می توانی مقدار جدید را بر اساس مقدار قبلی بسازی.
- می توانی با attr() چند ویژگی را در یک مرحله تنظیم کنی.
- با ترکیب دریافت و تنظیم محتوا، کنترل کامل روی DOM در jQuery خواهی داشت.