میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

(DOM (set & get در جی کوئری

۶۰ / ۱۰۰

سلام به شما همراهان و دوستان محترم سایت آموزشی و فروشگاهی مدرسه کدنویسی به دوره ی آموزش jQuery (جی کوئری) خوش آمدید. در این دوره قصد داریم شما را با نحوه ی دریافت اطلاعات و تنظیم محتوا با جی کوئری برای عناصر سند وب و متدهای آن (DOM (set & get در جی کوئری jQuery آشنا کرده نحوه استفاده از آن را به شما آموزش دهیم پس با من همراه باشید.


دریافت محتوا و 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 + ")";
  });
});

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

 


امیدواریم آموزش نحوه ی دریافت اطلاعات و تنظیم محتوا با جی کوئری برای عناصر سند وب و متدهای آن (DOM (set & get در جی کوئری jQuery نیز برای شما مفید واقع شده باشد و ادامه آموزش  آشنایی با jQuery را دنبال کنید . برای مطالعه پست‌ها بیشتر ، ما را در مدرسه کدنویسی تلگرام  و یا در تی جوان اینستاگرام دنبال کنید.

نظراتتون رو زیر همین پست با ما به اشتراک بگذارید.
ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟