مرجع توابع کار با Html و Css در JQuery

در این راهنما، مرجع توابع کار با HTML و CSS در jQuery را به زبانی ساده مرور می‌کنیم تا بتوانید متناسب با نیاز پروژه، متد مناسب را پیدا کنید. این توابع برای افزودن یا حذف محتوا، خواندن و تغییر ویژگی‌های عناصر، تنظیم اندازه و مدیریت کلاس‌های CSS کاربرد دارند.

اگر در حال یادگیری هستید، مطالب آموزش JQuery می‌تواند مسیر آشنایی با این کتابخانه را کامل‌تر کند. در ادامه، متدهای پرکاربرد را دسته‌بندی می‌کنیم و تفاوت‌های مهم آن‌ها را با مثال‌های کوتاه توضیح می‌دهیم.

jQuery انتخاب عنصر را ساده می‌کند؛ سپس با زنجیره کردن متدها می‌توانید همان عنصر را بخوانید، تغییر دهید یا به صفحه اضافه کنید. برای مثال، عبارت $("#message").text("سلام"); متن عنصر دارای شناسه message را تغییر می‌دهد.

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

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

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

$("#items").append("<li>مورد تازه</li>");
$("<strong>مهم</strong>").prependTo("#message");

متد after محتوا را پس از عنصر انتخاب‌شده قرار می‌دهد و متد before آن را پیش از عنصر درج می‌کند. این متدها خود عنصر انتخاب‌شده را جابه‌جا نمی‌کنند؛ بلکه محتوای تازه‌ای در اطراف آن می‌سازند.

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

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

اگر داده از ورودی کاربر می‌آید و قرار نیست به عنوان HTML تفسیر شود، استفاده از text انتخاب روشن‌تری است. برای نمونه، $("#message").text(userInput); مقدار را به صورت متن تنظیم می‌کند.

گاهی لازم است به جای تغییر محتوای عنصر، ویژگی یا وضعیت آن را کنترل کنید. انتخاب میان attr و prop به نوع ویژگی بستگی دارد؛ برای مقدار فیلدهای فرم نیز val معمولاً انتخاب سرراست‌تری است. همچنین toggleClass راهی سریع برای تغییر وضعیت ظاهری عنصر فراهم می‌کند.

متد attr برای خواندن یا تنظیم ویژگی‌هایی مانند title و href کاربرد دارد. متد prop با ویژگی‌های عنصر در DOM کار می‌کند و برای وضعیت‌هایی مانند فعال یا غیرفعال بودن یک کنترل فرم مناسب است.

متد removeAttr یک یا چند ویژگی HTML را حذف می‌کند. اگر هدف شما حذف کلاس CSS باشد، به جای آن از متدهای مدیریت کلاس استفاده کنید؛ نام متد باید با نوع تغییری که می‌خواهید انجام دهید هماهنگ باشد.

متد val مقدار ورودی‌هایی مانند input و select را می‌خواند یا تنظیم می‌کند. برای نمونه، $("#email").val("user@example.com"); مقدار یک فیلد را تغییر می‌دهد.

با متد toggleClass می‌توانید کلاسی را در صورت نبودن اضافه کنید و در صورت وجود داشتن بردارید. این الگو برای نمایش حالت باز و بسته، انتخاب‌شدن یک گزینه یا تغییر وضعیت ظاهری دکمه کاربرد دارد.

برای تغییر ظاهر، متد css امکان خواندن یا تنظیم یک ویژگی CSS را فراهم می‌کند. متدهای width و height برای کار با اندازه عنصر و position برای دریافت موقعیت آن نسبت به والد کاربرد دارند.

برای نمونه، کد $("#panel").css("color", "blue"); رنگ متن عنصر را تغییر می‌دهد. بهتر است برای تغییرات ظاهری بزرگ یا تکرارشونده، کلاس CSS تعریف کنید و با jQuery فقط کلاس را مدیریت کنید؛ به این ترتیب منطق صفحه از ظاهر آن جدا می‌ماند.

$("#panel").width(300);
$("#panel").height(150);
$("#panel").toggleClass("is-active");

متد empty محتوای درونی عنصر را پاک می‌کند، اما خود عنصر را در صفحه نگه می‌دارد. در مقابل، متد remove عنصر را همراه با فرزندان و داده‌ها و رویدادهای وابسته حذف می‌کند.

متد detach نیز عنصر را از صفحه برمی‌دارد، اما داده‌ها و رویدادهای jQuery آن را حفظ می‌کند. اگر قصد دارید عنصر را بعداً دوباره به صفحه اضافه کنید، این تفاوت می‌تواند مهم باشد.

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

متد replaceWith عنصر انتخاب‌شده را با محتوای جدید جایگزین می‌کند؛ متد replaceAll همین عمل را از سمت محتوای جایگزین بیان می‌کند. پیش از جایگزینی، مطمئن شوید رویدادها یا داده‌های عنصر قبلی دیگر موردنیاز نیستند.

با شناخت هدف هر تابع، استفاده از مرجع توابع کار با HTML و CSS در jQuery ساده‌تر می‌شود: برای درج محتوا از متدهای موقعیت‌دهی، برای خواندن یا تغییر مقدار از متدهای ویژگی و متن، و برای ظاهر از ابزارهای CSS و کلاس‌ها کمک بگیرید. تفاوت میان متدهای مشابه، به‌ویژه در حذف یا جایگزینی عناصر، از خطاهای رایج جلوگیری می‌کند.

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