⭐️ آموزش متد text() در jQuery؛ دریافت و تغییر متن عناصر 📝

فهرست مطالب:

متد text در jQuery چیست و چه کاربردی دارد؟

💡آشنایی با متد text

در این راهنمای متد text در jQuery با روش خواندن و تغییر متن عناصر صفحه آشنا می شوید. این متد از ابزارهای پرکاربرد کتابخانه jQuery است و به شما اجازه می دهد محتوای متنی یک یا چند عنصر HTML را دریافت کنید یا متن تازه ای در آن ها قرار دهید. اگر در حال یادگیری آموزش JQuery هستید، شناخت تفاوت text با متدهای مشابه، مثل html، کمک می کند کد امن تر و قابل پیش بینی تری بنویسید.

✅دو کاربرد اصلی

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

خواندن متن: متن قابل مشاهده یا متنی را که درون عنصر انتخاب شده قرار دارد دریافت می کنید؛ برای نمونه، عنوان یک پاراگراف یا پیام داخل یک بخش.
تغییر متن: می توانید متن یک پاراگراف، دکمه یا عنصر دیگر را با رشته دلخواه جایگزین کنید. اگر انتخابگر چند عنصر را پیدا کند، متن همه آن عناصر تغییر می کند.

نحوه استفاده از متد text در jQuery

📘ساختار کلی

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

خواندن متن یک عنصر

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

برای خواندن متن یک عنصر، انتخابگر را به کار ببرید و text() را بدون مقدار فراخوانی کنید. مقدار برگشتی یک رشته متنی است که می توانید آن را در متغیر ذخیره کنید، در کنسول نمایش دهید یا برای به روزرسانی بخش دیگری از صفحه استفاده کنید. در مثال زیر، محتوای متنی پاراگراف در متغیر قرار می گیرد.

const paragraphText = $("p").text();
console.log(paragraphText);

⚠️نکته درباره چند عنصر

اگر انتخابگر بیش از یک عنصر را پیدا کند، فراخوانی text() برای خواندن، متن عناصر منطبق را به صورت یک رشته برمی گرداند. بنابراین، برای خواندن متن یک عنصر مشخص، بهتر است از شناسه یکتا یا انتخابگری دقیق استفاده کنید. اگر لازم است متن هر عنصر را جداگانه پردازش کنید، می توانید از پیمایش مجموعه عناصر با روش های jQuery استفاده کنید.

تغییر متن عناصر صفحه

✏️قرار دادن متن تازه

برای تغییر متن، مقدار دلخواه را داخل پرانتز متد قرار دهید. jQuery متن انتخاب شده را به عناصر منطبق اختصاص می دهد و محتوای متنی قبلی آن ها را جایگزین می کند. این روش برای نمایش پیام پس از کلیک، تغییر عنوان یک دکمه یا به روزرسانی توضیح یک محصول کاربرد دارد.

$("button").click(function() {
  $("p").text("Hello world!");
});

🧩توضیح مثال

در این نمونه، رویداد کلیک برای دکمه ثبت می شود. پس از کلیک، انتخابگر $("p") پاراگراف های صفحه را پیدا می کند و عبارت Hello world! را جایگزین متن آن ها می کند. اگر فقط یک پاراگراف باید تغییر کند، انتخابگر را به شناسه یا کلاس همان پاراگراف محدود کنید تا محتوای بخش های دیگر ناخواسته عوض نشود.

پارامترها و انتخابگرها در متد text

🧭نقش selector

انتخابگر مشخص می کند کدام عنصر یا عناصر صفحه هدف عملیات باشند. انتخابگر تگ، مانند $("p")، همه پاراگراف ها را هدف می گیرد. انتخابگر شناسه، مانند $("#message")، یک عنصر دارای شناسه مشخص را انتخاب می کند و انتخابگر کلاس، مانند $(".notice")، عناصر هم کلاس را پیدا می کند. به همین دلیل، انتخابگر دقیق بخش مهمی از استفاده درست از این متد است.

شکل استفاده	کاربرد	نمونه
بدون آرگومان	خواندن متن عنصر یا عناصر انتخاب شده	`$("p").text()`
با رشته متنی	قرار دادن متن ثابت تازه	`$("#message").text("متن تازه")`
با تابع	تولید متن بر اساس مقدار قبلی هر عنصر	`$("p").text(function(i, oldText) { ... })`

استفاده از تابع برای ساخت متن

✨مقدار پویا

به جای یک رشته ثابت می توانید تابعی به text() بدهید. تابع برای هر عنصر انتخاب شده اجرا می شود و می تواند بر اساس شماره عنصر یا متن قبلی، مقدار تازه بسازد. این کاربرد برای افزودن پیشوند، شماره گذاری عنوان ها یا تغییر پیام ها به شکل پویا مفید است. مقدار بازگشتی تابع به عنوان متن جدید همان عنصر استفاده می شود.

$("p").text(function(index, oldText) {
  return "پاراگراف " + (index + 1) + ": " + oldText;
});

تفاوت متد text با html در jQuery

⚠️متن ساده یا کد HTML؟

تفاوت اصلی text و html در نحوه برخورد آن ها با نشانه گذاری HTML است. متد text محتوای ورودی را به عنوان متن ساده در نظر می گیرد؛ اما متد html برای دریافت یا تنظیم محتوای HTML به کار می رود. اگر رشته ای شامل تگ به text بدهید، کاربر نشانه های تگ را به صورت متن می بیند، نه اینکه آن تگ به عنوان عنصر جدید در صفحه تفسیر شود.

ویژگی	text()	html()
دریافت محتوا	متن داخل عنصر را برمی گرداند.	محتوای HTML درون عنصر را برمی گرداند.
تنظیم محتوا	مقدار را به صورت متن ساده قرار می دهد.	مقدار را به عنوان نشانه گذاری HTML تفسیر می کند.
کاربرد مناسب	پیام، عنوان، توضیح و داده متنی	ساخت یا جایگزینی ساختار HTML درون عنصر

🛡️انتخاب امن تر برای متن پویا

اگر محتوایی از کاربر یا منبع خارجی دریافت می کنید و باید آن را به عنوان متن نمایش دهید، استفاده از text() انتخاب محتاطانه تری است. این متد رشته را به عنوان نشانه گذاری اجرایی HTML وارد صفحه نمی کند. با این حال، انتخاب متد به نیاز برنامه بستگی دارد و جایگزین اعتبارسنجی داده ها یا رعایت اصول امنیتی در سایر بخش های برنامه نیست.

نکات مهم و خطاهای رایج

انتخابگر را دقیق بنویسید. انتخابگر عمومی مانند تگ p ممکن است چند بخش صفحه را پیدا کند. در نتیجه، تغییر متن روی همه آن بخش ها اعمال می شود. شناسه یا کلاس مشخص، احتمال تغییر ناخواسته محتوا را کاهش می دهد.

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

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

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

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

راهنمای سریع انتخاب و استفاده

📝مسیر پیشنهادی

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

برای خواندن: انتخابگر دقیق را بنویسید و از text() بدون آرگومان استفاده کنید.
برای جایگزینی: متن ساده مورد نظر را به عنوان آرگومان ارسال کنید و مطمئن شوید جایگزین شدن محتوای قبلی مطلوب است.
برای تغییرهای وابسته به داده: تابع را به کار ببرید تا مقدار قبلی یا شماره عنصر در تولید متن جدید نقش داشته باشد.
برای محتوای دارای نشانه گذاری: نیاز پروژه را با دقت بررسی کنید و متد مناسب را همراه با کنترل های امنیتی لازم انتخاب کنید.

🌐کاربرد در پروژه های وب

در یک رابط کاربری، متد text می تواند پیام موفقیت یا خطا را پس از ارسال فرم نمایش دهد، تعداد نتایج را به روز کند یا عنوان یک بخش را تغییر دهد. هنگام طراحی سایت، چنین تعامل هایی باید روشن و قابل فهم باشند؛ کاربر باید متوجه شود پس از هر اقدام چه اتفاقی افتاده است. بهتر است پیام ها کوتاه باشند و فقط همان بخش مورد نیاز صفحه را تغییر دهند.

جمع بندی

🎯نکته پایانی

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

سوالات متداول متد text در jQuery

متد text در jQuery چه کاری انجام می دهد؟

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

آیا متد text تگ های HTML را اجرا می کند؟

خیر. متد text محتوا را به صورت متن ساده در نظر می گیرد. اگر رشته شامل نشانه های تگ باشد، آن ها به عنوان متن نمایش داده می شوند، نه اینکه مانند محتوای HTML ساخته شوند.

تفاوت text() و html() چیست؟

text برای دریافت یا تنظیم متن ساده به کار می رود، اما html محتوای HTML درون عنصر را دریافت یا تنظیم می کند. زمانی که به نشانه گذاری نیاز ندارید، text انتخاب مناسب تری است.

اگر انتخابگر چند عنصر را پیدا کند چه اتفاقی می افتد؟

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

آیا می توان متن عنصر را با توجه به مقدار قبلی تغییر داد؟

بله. می توانید به جای رشته ثابت، تابعی به متد text بدهید. تابع برای هر عنصر اجرا می شود و می تواند از شماره عنصر و متن قبلی برای ساخت مقدار جدید استفاده کند.

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