کلاس های CSS (CSS Classes)
در طراحی وب، کلاس های CSS مثل برچسب روی دفترها هستند. با کلاس های CSS در jQuery می توانی این برچسب ها را خیلی سریع اضافه، حذف یا جابه جا کنی و ظاهر صفحه را عوض کنی.
متدهای مهم کلاس های CSS در jQuery
در jQuery چند متد مهم برای کار با کلاس های CSS داریم. هر متد شبیه یک دکمه روی بازی است که ظاهر المنت ها را تغییر می دهد.
- addClass() برای اضافه کردن یک یا چند کلاس.
- removeClass() برای حذف یک یا چند کلاس.
- toggleClass() برای جابه جایی بین اضافه و حذف کلاس.
- css() برای تنظیم یا خواندن استایل مستقیم روی المنت.
نمونه استایل برای کلاس های CSS
در مثال های این صفحه دو کلاس داریم: important و blue. این کلاس ها اندازه و رنگ متن را تغییر می دهند.
.important
{
font-weight: bold;
font-size: xx-large;
}
.blue
{
color: blue;
}
نکته: با چند کلاس می توانی ترکیبی از استایل ها بسازی؛ دقیقا مثل این که یک برچسب برای "مهم" و یکی برای "آبی" روی یک دفتر بزنی.
اضافه کردن کلاس های CSS با addClass()
متد addClass() کلاس جدید را به المنت ها وصل می کند. مثل این است که یک برچسب رنگی به چند دفتر هم زمان بچسبانی.
$("button").click(function()
{
$("h1, h2, p").addClass("blue");
$("div").addClass("important");
});
در این مثال، با کلیک روی دکمه، همه h1، h2 و p آبی می شوند و همه divها مهم و درشت نمایش داده می شوند.
می توانی چند کلاس را هم زمان روی یک المنت بگذاری. کافی است نام کلاس ها را با فاصله کنار هم بنویسی.
$("button").click(function()
{
$("#div1").addClass("important blue");
});
اینجا div با id برابر div1 هم بزرگ و بولد می شود هم رنگ آبی می گیرد؛ دو برچسب هم زمان روی یک جعبه.
حذف کلاس های CSS با removeClass()
متد removeClass() کلاس ها را از روی المنت برمی دارد. این کار مثل کندن برچسب از روی دفتر است؛ خود دفتر سر جایش می ماند.
$("button").click(function()
{
$("h1, h2, p").removeClass("blue");
});
در این مثال، با کلیک روی دکمه، کلاس blue از همه h1، h2 و p حذف می شود و رنگشان به حالت عادی برمی گردد.
جابه جایی بین کلاس ها با toggleClass()
متد toggleClass() هر بار که صدا زده شود، اگر کلاس وجود داشته باشد آن را حذف می کند و اگر نباشد آن را اضافه می کند.
$("button").click(function()
{
$("h1, h2, p").toggleClass("blue");
});
هر بار روی دکمه کلیک کنی، کلاس blue برای h1، h2 و p روشن و خاموش می شود؛ مثل زدن کلید چراغ در اتاق.
نگاهی کوتاه به متد css()
متد css() برای تنظیم مستقیم ویژگی های استایل استفاده می شود. مثلا می توانی رنگ یا اندازه فونت را بدون کلاس عوض کنی. این متد در فصل بعدی کامل تر توضیح داده می شود و بهتر است همراه با کلاس های CSS در jQuery تمرین شود.
گام های تمرینی برای کلاس های CSS (CSS Classes)
- یک پاراگراف ساده بساز و یک دکمه کنار آن قرار بده.
- با addClass() کلاس important را وقتی روی دکمه کلیک می کنی اضافه کن.
- کد را تغییر بده تا با removeClass() کلاس را دوباره برداری.
- کد را به toggleClass() تبدیل کن تا هر کلیک بین اضافه و حذف جابه جا شود.
- برای درک بهتر، فصل های حذف محتوا (Remove) و CSS در jQuery را هم مرور کن.
جمع بندی سریع
- addClass() برای چسباندن یک یا چند کلاس به المنت ها است.
- removeClass() کلاس های قبلی را از روی المنت پاک می کند.
- toggleClass() بین داشتن و نداشتن یک کلاس سوییچ می کند.
- ترکیب چند کلاس، استایل های پیچیده و قشنگ می سازد.
- برای استایل های لحظه ای، متد css() کنار کلاس های CSS در jQuery خیلی کاربردی است.