اضافه کردن عناصر در جی کوئری

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

تنظیم Attribute برای یک عنصر

برای تنظیم Attribute برای یک عنصر با استفاده از متد attr پس از انتخاب عنصر و قرار دادن متد attr در پرانتز جلوی متد، دو پارامتر را قرار می دهیم و هر دو پارامتر نیز از نوع رشته هستند. پارامتر اول نام Attribute مورد نظر ما که می خواهیم آن را تغییر بدهیم است و پارامتر دوم مقداری است که می خواهیم در Attribute مورد نظر قرار دهیم.

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

$("button").click(function(){
  $("#w3s").attr("href", "https://www.w3schools.com/jquery/");
});

با استفاده از متد attr می توان چندین Attribute را در آن واحد تغییر داد. برای مثال در نمونه زیر با کلیک بر روی دکمه هم , Attribute href تغییر می کند و هم Attribute title.

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

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

متد attr می تواند با یک تابع callback بیاید. تابع callback دو ورودی می گیرد؛ اولی index عنصر مورد نظر از بین لیست عناصر انتخاب شده است و دومی origValue مخفف original value که مقدار اصلی Attribute را بر می گرداند و می توانید در آن تغییراتی ایجاد کنید.

برای مثال در نمونه زیر ما مقدار اصلی Attribute را با استفاده از یک تابع callback برمی گردانیم و سپس رشته «جی کوئری» را به آن اضافه می کنیم.

$("button").click(function(){
  $("#w3s").attr("href", function(i, origValue){
    return origValue + "/jquery/";
  });
});

با استفاده از جی کوئری شما می توانید به راحتی محتوا و عناصر جدید را به سند وب خود اضافه کنید. با برخی از مهم ترین متدهای مربوط به اضافه کردن عناصر در html آشنا می شویم:

متد append در جی کوئری

این متد، محتوایی را در انتهای عنصر انتخاب شده اضافه می کند. مانند نمونه زیر که با استفاده از متد append در انتهای متن پاراگراف، یک رشته را اضافه می کند.

$("p").append("Some appended text.");

متد prepend در جی کوئری

این متد دقیقا مانند متد append است با این تفاوت که متد append محتوا را در انتهای عنصر اضافه می کرد اما متد prepend محتوا را در آغاز عنصر اضافه می کند.

در کد زیر با استفاده از متد prepend رشته ای از حروف را در ابتدای پاراگراف اضافه کرده ایم:

$("p").prepend("Some prepended text.");

اضافه کردن عناصر جدید با استفاده از متدهای prepend و append

در مثال های بالا ما فقط یک متن را به ابتدا یا انتهای عناصر html خود اضافه کردیم. با استفاده از متدهای prepens و appends شما می توانید به جای text عناصر جدیدی را به عنوان پارامتر به آنها بدهید.

برای ساختن عناصر جدید در جاوا اسکریپت سه راه وجود دارد. در نمونه زیر این سه روش را مشاهده می کنید:

function appendText() {
  var txt1 = "<p>Text.</p>";               // Create element with HTML 
  var txt2 = $("<p></p>").text("Text.");   // Create with jQuery
  var txt3 = document.createElement("p");  // Create with DOM
  txt3.innerHTML = "Text.";
  $("body").append(txt1, txt2, txt3);      // Append the new elements
}

در نمونه اول ما با استفاده از یک رشته و تعریف یک متغیر، تگ های p را با استفاده از html تعریف کرده ایم.
در بخش دوم ما با استفاده از جی کوئری یک عنصر جدید را ساخته ایم و سپس با متد text محتوای آن را بر روی رشته ی مورد نظر قرار داده ایم.
در نمونه سوم با استفاده از جاوا اسکریپت و قابلیت های DOM یک عنصر جدید p ساخته ایم و در خط بعدی محتوای درون آن را برابر با رشته مورد نظر قرار داده ایم.

همانطور که مشاهده می کنید با استفاده از متد append هر سه عنصر ساخته شده با سه روش مختلف را به عنوان پارامتر به این متد داده ایم و به سند html خود اضافه کرده ایم.

متدهای before و after در جی کوئری

متد after در جی کوئری محتوایی را بعد از عنصر انتخاب شده اضافه می کند و متد before هم محتوایی را قبل از عنصر انتخاب شده اضافه می کند.

در مثال زیر ابتدا با متد after متنی را بعد از تصویر قرار داده ایم و سپس با استفاده از متد before متنی را قبل از تصویر قرار داده ایم.

$("img").after("Some text after");

$("img").before("Some text before");

اضافه کردن عناصر جدید با استفاده از متدهای before و after

مانند متدهای prepend و append در متدهای before و after نیز می توان به جای قرار دادن یک text به عنوان پارامتر عناصر HTML را به آنها ورودی بدهیم.

در مثال زیر مانند نمونه ی قبل می بینیم که با سه روش مختلف سه عنصر را ساخته ایم و سپس با استفاده از متد after هر سه را بعد از تصویر خود اضافه کرده ایم.

function afterText() {
  var txt1 = "<b>I </b>";                    // Create element with HTML 
  var txt2 = $("<i></i>").text("love ");     // Create with jQuery
  var txt3 = document.createElement("b");    // Create with DOM
  txt3.innerHTML = "jQuery!";
  $("img").after(txt1, txt2, txt3);          // Insert new elements after <img>
}

در این قسمت از دوره آموزش جی کوئری با نحوه تنطیم Attribute ها برای عناصر و متدهای مربوط به اضافه کردن اطلاعات آشنا شدیم. در قسمت بعد به مباحث css و جی کوئری خواهیم پرداخت.