قسمت هشتم: (DOM (set & get

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

دریافت محتوا و Attributes با استفاده از جی کوئری

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

دستکاری DOM توسط جی کوئری

یکی از مهم ترین بخش های جی کوئری دستکاری DOM است. با استفاده از جی کوئری شما می توانید به راحتی عناصر HTML و Attribute های آن را دست کاری کنید.

DOM چیست؟

Dom مخفف Document Object Model است. در مجموع به یک صفحه استاندارد HTML یا xml اشاره دارد. منظور ما از DOM سند HTML جاری است.

متدهای دریافت محتوا

متد text 

با استفاده از این متد شما می توانید محتوای درون یک عنصر HTML را در قالب متن دریافت کنید. اگر بخواهید که علاوه بر متن، تگ های HTML نیز دریافت و نمایش داده شوند باید از متد html استفاده کنید. در این صورت علاوه بر متن درون عنصر، تگ های درون آن نیز مانند تگ b نمایش داده خواهند شد.

در مثال زیر می بینیم که به دو دکمه متد کلیک داده شده و در تابع آن تعریف شده است که اگر بر روی دکمه کلیک شد متن درون عنصر نمایش داده شود. در اولی با استفاده از متد text تنها متن درون عنصر نمایش داده می شود و در دومی با استفاده از متد html هم متن و هم تگ های درون عنصر نمایش داده خواهد شد.

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});

متد value

با استفاده از این متد شما می توانید محتوای درون بخش های مختلف فرم ها را دریافت کنید.

در مثال زیر به یک دکمه، متد کلیک داده شده و در تابع آن پیامی تعریف شده است که با اجرای تابع محتوای درون input با آی دی test نمایش داده شود و برای این کار از متد val (مخفف value) استفاده شده است.

$("#btn1").click(function(){
  alert("Value: " + $("#test").val());
});

نحوه دریافت Attribute ها

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

برای مثال در نمونه زیر با کلیک بر روی دکمه تابعی اجرا می شود که محتوای درون href عنصر با آی دی w3s برای ما نمایش داده خواهد شد.

$("button").click(function(){
  alert($("#w3s").attr("href"));
});

تنظیم محتوا و Attribute با استفاده از جی کوئری

متدهای مربوط به تنظیم و ست کردن محتوا دقیقا همان متدهای دریافت محتوا است با این تفاوت که در متدهای دریافت محتوا ما پرانتز جلوی متد را خالی می گذاشتیم تا بتوانیم محتوا را از سند HTML خود دریافت کنیم اما برای تنظیم محتوای جدید بر روی عناصر و Attribute های آن ها مقدار مورد نظر خود را درون پرانتز جلوی این متدهای می نویسیم.

در نمونه زیر ما سه دکمه را انتخاب کرده و با اختصاص متد کلیک برای آن ها تابعی را تعریف کرده ایم. در تابع اول محتوای عنصر برابر با کلمه hello world قرار داده خواهد شد. در تابع بعدی محتوای عنصر برابر با کلمه  hello world درون تگ های b قرار داده خواهد شد که باعث bold شدن متن خواهد شد. در تابع سوم نیز مقدار درون input برابر با کلمه dolly duck قرار داده خواهد شد.

$("#btn1").click(function(){
  $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
  $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
  $("#test3").val("Dolly Duck");
});

استفاده از callback function برای متدهای text ،html و val 

هر سه ی متدهای جی کوئری بالا می توانند با یک callback function بیاید. یک callback function دو پارامتر یا ورودی دریافت می کند. اولی index عنصر مورد نظر در بین لیست عناصر انتخاب شده است و پارامتر دوم origText می باشد که مخفف original text است. با استفاده از یک callback function شما می توانید مقدار و محتوای قبلی یک عنصر را برگردانید و در آن تغییری ایجاد کنید؛ برای مثال یک رشته را به آن اضافه کنید.

در نمونه زیر با انتخاب دو دکمه و اختصاص متد کلیک به آن ها دو تابع تعریف شده است. در تابع اول با انتخاب عنصر با آی دی test1 درون متد text یک callback function را تعریف کرده ایم که old text را برابر با محتوای اصلی عنصر قرار می دهد و سپس رشته ای از حروف را به آن اضافه می کند. تابع دوم دقیقا مانند تابع قبلی است با این تفاوت که از متد html به جای متد text استفاده می کند که تگ های HTML را نیز علاوه بر متن برمی گرداند.

$("#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 + ")";
  });
});

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

در قسمت بعد با قراردادن و اضافه کردن محتوا برای عناصر و ویژگی های آن ها بیشتر آشنا خواهیم شد.

تمام فصل‌های سری ترتیبی که روکسو برای مطالعه‌ی دروس سری آموزش کتابخانه‌‌ی جی کوئری توصیه می‌کند:
نویسنده شوید

دیدگاه‌های شما

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.