⭐️ آموزش متد hasClass در jQuery؛ بررسی وجود کلاس CSS با مثال کاربردی 💻

Q: متد hasClass در jQuery چه کاری انجام میدهد؟

این متد بررسی میکند که عنصر یا مجموعه عناصر انتخابشده کلاس مشخصی دارند یا نه. اگر کلاس پیدا شود، مقدار true و در غیر این صورت false برمیگرداند.

Q: آیا باید نام کلاس را با نقطه بنویسیم؟

خیر. نام کلاس را بدون نقطه وارد کنید؛ برای مثال hasClass("intro") درست است.

Q: hasClass روی چند عنصر چه نتیجهای میدهد؟

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

Q: آیا hasClass کلاس عنصر را تغییر میدهد؟

خیر. این متد فقط وضعیت کلاس را میخواند. برای افزودن، حذف یا تغییر وضعیت کلاس از addClass، removeClass یا toggleClass استفاده کنید.

Q: جایگزین hasClass در جاوااسکریپت معمولی چیست؟

برای بررسی کلاس یک عنصر در جاوااسکریپت معمولی میتوانید از element.classList.contains("نامکلاس") استفاده کنید.

فهرست مطالب ▼

متد hasClass در jQuery چیست و چگونه از آن استفاده کنیم؟

⭐ بررسی سریع متد

متد hasClass در jQuery بررسی می‌کند که آیا عنصر انتخاب‌شده کلاس CSS مشخصی دارد یا نه؛ نتیجه این بررسی به شکل مقدار درست یا نادرست در اختیار شما قرار می‌گیرد.

📌 خلاصه در یک نگاه

نکته کاربردی

جدول راهنما

پرسش متداول

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

💡 جایگاه این آموزش

در این بخش از آموزش JQuery، کاربرد متد hasClass را همراه با ساختار، مثال‌های عملی و نکات رایج یاد می‌گیریم. این متد برای تشخیص وضعیت ظاهری یا رفتاری یک عنصر کاربرد دارد و به تنهایی کلاس جدیدی ایجاد یا حذف نمی‌کند.

۵ نکته مهم درباره متد hasClass در jQuery

📘 آشنایی با نکته‌ها

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

۱. ساختار متد را درست بنویسید

ساختار اصلی متد به این صورت است: $(selector).hasClass(classname). ابتدا با selector عنصر یا مجموعه‌ای از عناصر را انتخاب می‌کنید و سپس نام کلاسی را که قصد بررسی آن را دارید، به متد می‌دهید. نام کلاس باید به صورت رشته و بدون نقطه نوشته شود؛ نقطه فقط در selector برای انتخاب کلاس استفاده می‌شود.

📌

برای نمونه، در $("p").hasClass("intro")، همه پاراگراف‌ها انتخاب می‌شوند و سپس وجود کلاس intro بررسی می‌شود. نوشتن hasClass(".intro") درست نیست، چون آرگومان متد نام کلاس است، نه selector کامل. این تفاوت کوچک در زمان عیب‌یابی بسیار مهم است.

⚠️ یادآوری کوتاه

داخل hasClass() نام کلاس را بدون نقطه بنویسید؛ برای مثال "intro"، نه ".intro".

۲. مقدار بازگشتی را در شرط به کار ببرید

✅ نتیجه بررسی

خروجی hasClass() یک مقدار بولی است: اگر کلاس پیدا شود، true و اگر پیدا نشود، false برمی‌گردد. به همین دلیل، این متد به‌خوبی در شرط‌های if، رویدادهای کلیک و منطق تغییر رابط کاربری جا می‌گیرد.

🧩 مثال کاربردی

فرض کنید با کلیک روی یک دکمه می‌خواهید بررسی کنید که آیا پاراگرافی کلاس intro دارد یا نه. اگر پاسخ درست باشد، می‌توانید پیام مناسبی نمایش دهید یا عملیات دیگری انجام دهید. نمونه زیر نشان می‌دهد که نتیجه متد چگونه با alert() نمایش داده می‌شود.

$("button").click(function() {
  alert($("p").hasClass("intro"));
});

۳. وقتی چند عنصر انتخاب شده‌اند، نتیجه را درست تفسیر کنید

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

🔎 مثال با چند عنصر

برای مثال، اگر سه پاراگراف انتخاب شوند و فقط پاراگراف دوم کلاس intro را داشته باشد، عبارت $("p").hasClass("intro") مقدار true می‌دهد. اگر لازم دارید کلاس هر عنصر را جداگانه بررسی کنید، باید روی عناصر پیمایش انجام دهید و برای هر کدام نتیجه را بسنجید؛ بررسی گروهی جایگزین بررسی تک‌تک عناصر نیست.

۴. حروف بزرگ و کوچک را دقیق بررسی کنید

🔤 نام کلاس حساس است

نام کلاس را همان‌طور که در HTML تعریف شده است بنویسید. در نام‌گذاری کلاس‌ها، تفاوت حروف بزرگ و کوچک می‌تواند باعث شود جست‌وجوی نام اشتباه نتیجه ندهد. برای نمونه، کلاس menuOpen با menuopen یکسان نیست. انتخاب یک الگوی ثابت برای نام‌گذاری، خوانایی کد را نیز بهتر می‌کند.

📌

تصور کنید در HTML نوشته‌اید class="isActive"، اما در کد jQuery عبارت hasClass("isactive") را بررسی می‌کنید. اگر نام‌ها با هم تطبیق نداشته باشند، نتیجه مورد انتظار دریافت نمی‌شود. هنگام اشکال‌زدایی، ابتدا نام کلاس را در HTML و سپس رشته داخل متد مقایسه کنید.

۵. وضعیت پویا را در زمان مناسب بررسی کنید

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

🖱️ سناریوی واقعی

فرض کنید کاربر با کلیک روی یک کارت، کلاس selected را به آن اضافه می‌کند. برای فهمیدن اینکه کارت اکنون انتخاب شده است یا نه، بررسی hasClass("selected") را در رویداد کلیک انجام دهید. این روش برای کنترل نمایش پنل‌ها، وضعیت منوها و بازخوردهای دیداری ساده و قابل فهم است.

مزایای متد hasClass

🌱 چرا از این متد استفاده کنیم؟

متد hasClass() یکی از روش‌های ساده برای خواندن وضعیت کلاس‌ها در jQuery است. نتیجه بولی آن باعث می‌شود بتوانید منطق برنامه را بدون مقایسه دستی رشته‌های کلاس بنویسید. مزیت‌های زیر آن را به گزینه‌ای مناسب برای بسیاری از تعامل‌های معمول صفحه تبدیل می‌کنند.

⚡

خوانایی بالا

نام متد روشن می‌کند که هدف، بررسی وجود کلاس است.

🔁

خروجی بولی

نتیجه مستقیم در شرط‌ها و تصمیم‌گیری‌های برنامه استفاده می‌شود.

🧰

کاربرد متنوع

برای وضعیت منو، تب، کارت و بخش‌های تعاملی مناسب است.

🧭

کد ساده‌تر

نیازی به تجزیه دستی مقدار ویژگی class ندارید.

خوانایی مناسب برای شرط‌ها

👓 کد قابل فهم

عبارت hasClass("active") قصد برنامه‌نویس را به‌روشنی بیان می‌کند: بررسی کن که آیا عنصر کلاس فعال دارد یا خیر. این وضوح هنگام بازبینی کد یا همکاری با اعضای دیگر تیم مفید است. در مقابل، خواندن مستقیم ویژگی class و جست‌وجوی رشته‌ای در آن معمولا نیازمند توجه بیشتری است.

تفکیک بررسی از تغییر کلاس

📌

hasClass() فقط وضعیت را می‌خواند و آن را تغییر نمی‌دهد. این تفکیک کمک می‌کند بررسی وضعیت و تغییر آن را در بخش‌های جداگانه کد نگه دارید. برای مثال، ابتدا وجود کلاس را بررسی می‌کنید و سپس بر اساس نتیجه، پیام نشان می‌دهید یا متد مناسب دیگری را فراخوانی می‌کنید.

مناسب برای کنترل رابط کاربری

🖥️ تعامل‌های روزمره

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

خواندن آسان‌تر در پروژه‌های گروهی

👥 مناسب همکاری تیمی

وقتی نام کلاس‌ها هدفمند باشد، بررسی آن‌ها با hasClass() خواندن منطق رابط را برای دیگران ساده می‌کند. کلاسی مانند has-error یا is-selected معنا را منتقل می‌کند و شرطی که آن را بررسی می‌کند، نیاز کمتری به توضیح جداگانه دارد.

معایب و محدودیت‌های متد hasClass

⚖️ انتخاب متناسب با پروژه

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

وابستگی به وجود jQuery

📦 نیاز به کتابخانه

برای اجرای hasClass() باید jQuery در صفحه بارگذاری شده باشد و کد پس از آماده شدن عناصر مورد نظر اجرا شود. اگر پروژه‌ای از jQuery استفاده نمی‌کند، می‌توانید در جاوااسکریپت معمولی از element.classList.contains() برای بررسی کلاس یک عنصر استفاده کنید.

خروجی گروهی ممکن است برداشت اشتباه ایجاد کند

🔔 به معنای وجود در همه نیست

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

مقایسه متدهای بررسی و مدیریت کلاس

📊 کدام روش برای چه کاری؟

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

متد	کاربرد اصلی	نمونه	تغییر کلاس
hasClass()	بررسی وجود کلاس	`hasClass("active")`	خیر
addClass()	افزودن کلاس	`addClass("active")`	بله
removeClass()	حذف کلاس	`removeClass("active")`	بله
toggleClass()	افزودن یا حذف بر اساس وضعیت	`toggleClass("active")`	بله

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

بررسی وضعیت با hasClass

🔍 فقط خواندن وضعیت

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

تغییر وضعیت با addClass، removeClass و toggleClass

📌

اگر قصد افزودن کلاس را دارید، addClass() را به کار ببرید؛ برای حذف کلاس از removeClass() استفاده کنید. متد toggleClass() نیز وضعیت را جابه‌جا می‌کند: اگر کلاس وجود داشته باشد آن را حذف می‌کند و اگر وجود نداشته باشد، آن را می‌افزاید. این متدها جایگزین بررسی نیستند، بلکه برای تغییر کلاس طراحی شده‌اند.

مثال کامل بررسی کلاس هنگام کلیک

🧪 نمونه قابل اجرا

در کد زیر، با کلیک روی دکمه، کلاس پاراگراف بررسی می‌شود. اگر کلاس intro وجود داشته باشد، پیام درست و در غیر این صورت پیام نادرست نمایش داده می‌شود. نوشتن شرط به این شکل، خروجی متد را به صورت روشن در منطق رویداد به کار می‌گیرد.

$("button").click(function() {
  if ($("p").hasClass("intro")) {
    alert("کلاس intro وجود دارد");
  } else {
    alert("کلاس intro وجود ندارد");
  }
});

نکات عیب‌یابی و بهترین روش‌ها

🧷

بررسی selector

مطمئن شوید selector عنصر یا عناصر مورد نظر را پیدا می‌کند.

🔠

تطبیق نام کلاس

املای نام و بزرگی یا کوچکی حروف را با HTML تطبیق دهید.

⏱️

زمان اجرای کد

بررسی را پس از آماده شدن عنصر یا در رویداد لازم اجرا کنید.

🛠️ چند بررسی ساده

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

جدول راهنمای انتخاب متد

نیاز شما	متد پیشنهادی	دلیل انتخاب
فقط بررسی وجود کلاس	`hasClass()`	مقدار درست یا نادرست برمی‌گرداند و کلاس را تغییر نمی‌دهد.
افزودن کلاس	`addClass()`	کلاس مورد نظر را به عنصر اضافه می‌کند.
حذف کلاس	`removeClass()`	کلاس انتخاب‌شده را از عنصر حذف می‌کند.
جابه‌جایی وضعیت کلاس	`toggleClass()`	وجود کلاس را تغییر می‌دهد و آن را اضافه یا حذف می‌کند.
بررسی کلاس در جاوااسکریپت معمولی	`classList.contains()`	بدون استفاده از jQuery وضعیت کلاس یک عنصر را بررسی می‌کند.

جمع‌بندی

⭐ انتخاب درست و ساده

متد hasClass در jQuery راهی خوانا برای بررسی وجود کلاس CSS است و مقدار بولی برمی‌گرداند، بدون اینکه کلاس را تغییر دهد. نام کلاس را بدون نقطه وارد کنید، هنگام انتخاب چند عنصر نتیجه را درست تفسیر کنید و بررسی وضعیت را در زمان مناسب انجام دهید. برای افزودن، حذف یا جابه‌جایی کلاس نیز از متدهای متناسب استفاده کنید. این دقت، کدهای تعاملی را قابل فهم‌تر و نگهداری آن‌ها را آسان‌تر می‌کند؛ چه در یک تمرین ساده و چه هنگام توسعه طراحی سایت.

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

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

این متد بررسی می‌کند که عنصر یا مجموعه عناصر انتخاب‌شده کلاس مشخصی دارند یا نه. اگر کلاس پیدا شود، مقدار true و در غیر این صورت false برمی‌گرداند.

آیا باید نام کلاس را با نقطه بنویسیم؟

خیر. نام کلاس را بدون نقطه وارد کنید؛ برای مثال hasClass("intro") درست است، اما hasClass(".intro") نادرست است.

hasClass روی چند عنصر چه نتیجه‌ای می‌دهد؟

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

آیا hasClass کلاس عنصر را تغییر می‌دهد؟

خیر. این متد فقط وضعیت کلاس را می‌خواند. برای افزودن، حذف یا تغییر وضعیت کلاس به ترتیب از addClass()، removeClass() یا toggleClass() استفاده کنید.

جایگزین hasClass در جاوااسکریپت معمولی چیست؟

برای بررسی کلاس یک عنصر در جاوااسکریپت معمولی می‌توانید از element.classList.contains("نام‌کلاس") استفاده کنید. این روش به jQuery نیاز ندارد.

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