دریافت محتوا (Get)

در jQuery چند متد ساده داری که با آن ها می توانی دریافت محتوا در jQuery را انجام بدهی؛ یعنی متن، HTML، مقدار ورودی ها و حتی ویژگی ها را از صفحه بخوانی و بعد از آن ها در کدت استفاده کنی.

DOM چیست و چرا برای دریافت محتوا مهم است؟

DOM یا Document Object Model مثل نقشه درختی صفحه است. مرورگر صفحه HTML را به یک ساختار شی ءگرا تبدیل می کند تا جاوااسکریپت و jQuery بتوانند به محتوا و استایل ها دسترسی بگیرند.

با jQuery روی این DOM کار می کنی؛ یعنی تگ ها، متن ها و ویژگی ها را می خوانی یا عوض می کنی. این صفحه تمرکز روی بخش خواندن و دریافت محتوا در jQuery دارد.

متدهای text() و html() برای دریافت محتوا

متد text() فقط متن ساده را برمی گرداند؛ یعنی بدون تگ های HTML. اما متد html() محتوای کامل همراه با تگ ها را می دهد.

در مثال منبع، روی دو دکمه با idهای btn1 و btn2 کلیک می کنیم و محتوا را از المنتی با id برابر test می خوانیم.

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

مشاهده در ادیتور

اگر test فقط متن داشته باشد، تفاوت زیادی نمی بینی. اما وقتی داخل test تگ strong یا em باشد، text() آن تگ ها را حذف می کند و فقط متن را نشان می دهد، در حالی که html() کل کد HTML را برمی گرداند.

متد val() برای دریافت مقدار ورودی ها

متد val() برای فرم هاست. با آن مقدار input، مثل متن واردشده در یک فیلد نام کاربری، برگردانده می شود.

در مثال منبع، روی دکمه ای با id برابر btn1 کلیک می کنیم و مقدار input با id برابر test را می خوانیم.

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

مشاهده در ادیتور

این دقیقا شبیه زمانی است که فرم لاگین داری و می خواهی قبل از ارسال، مقدار input را چک کنی. با val() مقدار ورودی را مثل یک رشته ساده می گیری.

متد attr() برای دریافت ویژگی ها (Attributes)

ویژگی (Attribute) مثل href، src یا title روی تگ هاست. مثلا در تگ a، آدرس لینک داخل href ذخیره می شود.

متد attr() مقدار یک ویژگی را برمی گرداند. در مثال منبع، روی یک دکمه کلیک می کنیم و href یک لینک با id برابر w3s را می خوانیم.

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

مشاهده در ادیتور

این ترفند زمانی عالی است که می خواهی قبل از حرکت کاربر، آدرس لینک را چک یا لاگ کنی. بعدا در بخش تنظیم محتوا می توانی همین attr() را برای تغییر href هم استفاده کنی و به صفحه تنظیم محتوا و ویژگی ها سر بزنی.

گام های تمرینی برای دریافت محتوا (Get)

1. یک پاراگراف با id برابر test و یک دکمه با id برابر btn1 بساز.
2. داخل پاراگراف یک تگ strong قرار بده تا تفاوت text() و html() را ببینی.
3. کد مثال text() و html() را بنویس و روی btn1 و btn2 تست کن.
4. یک input با id برابر test قرار بده و کد val() را اجرا کن.
5. یک لینک با id برابر w3s و یک دکمه بساز و مقدار href را با attr() نمایش بده تا دریافت محتوا در jQuery را خوب تمرین کنی.

جمع بندی سریع

• text() فقط متن ساده را از المنت ها برمی گرداند.
• html() متن همراه با تگ های HTML را می دهد.
• val() مقدار input و سایر فیلدهای فرم را برمی گرداند.
• attr() برای دریافت مقدار ویژگی ها مثل href استفاده می شود.
• همه این متدها ابزار اصلی دریافت محتوا در jQuery هستند.