با عزض سلام خدمت شمادوستای عزیز وگرامی .در این قسمت به آموزش خواندن و تنظیم کلاس های CSS با جی کوئری میپردازیم ،
خواندن و تنظیم کلاس های CSS
همان طور که attribute ها و محتوای المان های سند HTML را ویرایش کردیم، به همان راحتی هم می توانیم کلاس های CSS المان ها را دستکاری کنیم. jQuery این زمینه را برای شما فراهم می کند تا به راحتی خصیصه ی style المان ها را با استفاده از متد css() و با ارائه ی چندین متد دیگر، کلاس های یک المان را ویرایش نمایید.
ویرایش را از خصیصه ی class المان های HTML آغاز می کنیم. خصیصه ی class تا چندین اسم کلاس می گیرد که ممکن است به کلاس CSS تعریف شده در صفحه ی سبک دهی (Stylesheet) جاری اشاره داشته یا نداشته باشد. غالبا همین طور است، اما گاهی فقط اسم کلاس به المان های خود تخصیص می دهیم تا با استفاده از جی کوئری بتوانیم (بر اساس اسم کلاس) به المان مورد نظر دسترسی داشته باشیم. به عبارتی دیگر با کد جی کوئری به راحتی می توان یک المان را بر اساس اسم کلاس آن انتخاب نموده و به آن دسترسی پیدا کرد.
به منظور تست، چندین انتخابگر ساده ی CSS در Stylesheet خود تعریف کرده ایم:
.bold {
font-weight: bold;
}
.blue {
color: blue;
}
در اینجا سه متد بسیار پرکاربرد که با کلاس کار می کنند را معرفی می کنیم:
۱٫ hasClass(): بررسی می کند آیا المان یا المان های مورد نظر کلاس مشخصی (با classname مشخص) را دارند یا خیر. اسم کلاس را به عنوان پارامتر به این متد پاس می دهیم.
۲٫ addClass(): یک کلاس معین را به المان مورد نظر تخصیص می دهد.
۳٫ removeClass(): کلاس مورد نظر را از المان انتخابی حذف می کند، در واقع اسم کلاس که به عنوان پارامتر به متد ارسال شده را از المان انتخاب شده حذف می نماید.
نمونه یک
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
function ToggleClass(sender) {
if ($(sender).hasClass(“bold”))
$(sender).removeClass(“bold”);
else
$(sender).addClass(“bold”);
}
در مثال فوق، به مجرد اینکه که کاربر بر روی لینک کلیک می کند، خود لینک (this) را به عنوان پارامتر به متد toggleClass() ارسال می کنیم. در آن، بررسی می کنیم آیا sender دارای کلاسی به نام bold هست یا خیر و در صورت وجود کلاسی با این نام آن را حذف می کنیم، در غیر این صورت آن را به المان مورد نظر اضافه می کنیم. این عملیات بطور مرتب انجام می شود. تیم جی کوئری برای اینکه کاربران مجبور به نوشتن چندین خط کد جهت اجرای همین عملیات ساده نباشند، متد بسیار کارآمد toggleClass() را پیاده سازی می کند.
می توان چندین المان را انتخاب کرده و چندین کلاس را به طور همزمان به آن اضافه کرده یا از آن حذف نمود.مثال:
نمونه دو
?
۱
۲
۳
۴
۵
۶
$(function () {
$(“#divTestArea1 span, #divTestArea1 b”).addClass(“blue”);
$(“#divTestArea1 div”).addClass(“bold blue”);
});
در ابتدا، تگ های span و b را انتخاب می کنیم و سپس یک کلاس به آن اضافه می نماییم و آن کلاسی با نام blue می باشد. در گام بعدی، تگ div را انتخاب می کنیم و به آن دو کلاس که توسط space از هم جدا شده اند، تخصیص می دهیم: کلاس های bold و blue.
در شرح متد removeClass نیز باید بگوییم که به همین صورت عمل می کند. نام کلاس ها را به عنوان پارامتر به متد نام برده پاس می دهیم، سپس آن ها را داخل پرانتز متد با خط فاصله از هم جدا می نماییم. حال کلاس های مد نظر از المان دلخواه حذف می گردند.
