در بخش های اول و دوم جی کوئری(jQuery) معرفی شد و روش استفاده از جی کوئری(jQuery) آموزش داده شد.در بخش سوم یادگرفتید چگونه جلوه های ویژه به عناصر صفحه وی با جی کوئری(jQuery) اضافه کنید و نیز در این بخش یاد می گیرید چگونه با جی کوئری(jQuery) استایل شیت ها(CSS ) را برای اجزای صفحه تنظیم کنید و یا با جی کوئری(jQuery) تنظیمات استایل شیت را از اجزای صفحه پس بگیرید.
گرفتن و تنظیم کلاس های CSS
با استفاده از jQuery دستکاری و جابجایی کلاس های عناصر راحت است
دستکاری CSS
jQuery چندین متد برای دستکاری CSS دارد. در اینجا متدهای زیربررسی می شود:
- addClass()
اضافه کردن کلاس به عناصر انتخاب شده
- removeClass()
برداشتن یک یا چند کلاس از عناصر انتخاب شده
- toggleClass()
افزودن/برداشتن کلاس ها از عناصر انتخاب شده
- css()
مقداردهی یا برگرداندن مقدار خصوصیت استایل
مثال هایی از استایل شیت
استایل شیت زیر برای همه مثال های این بخش استفاده خواهد شد:
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
متد addClass()
مثال زیر نشان می دهد که چگونه خصوصیات کلاس را به عناصر مختلف اضافه کنیم. البته که می توانید موقع افزودن کلاس چندین عنصر را انتخاب کنید:
مثال
$(“h1,h2,p”).addClass(“blue”);
$(“div”).addClass(“important”);
});
شما همچنین می توانید چندین کلاس را در داخل متد addClass() تعیین کنید:
مثال
$(“#div1”).addClass(“important blue”);
});
متد removeClass()
مثال زیر نشاند می دهد که چگونه یک خاصیت کلاس مشخص را از عناصر مختلف برمی داریم
مثال
$(“h1,h2,p”).removeClass(“blue”);
});
متد toggleClass()
مثال زیر نشان می دهد که از تابع toggleClass() به چه صورت استفاده می کنی. این متد بین افزودن/برداشتن کلاس ها از عناصر انتخاب شده جابجا می کند:
مثال
$(“h1,h2,p”).toggleClass(“blue”);
});
متد css()
متد css() خصوصیات استایل عناصر انتخاب شده را مقداردهی کرده یا مقدار آنها را برمی گرداند.
برای برگرداندن مقدار یک خاصیت CSS مشخص، گرامر زیر را استفاده کنید:
css(“propertyname“);
مثال زیر مقدار خاصیت background-color از اولین عنصر تطبیق یافته را برمی گردند:
مثال
$(“p”).css(“background-color”);
برای مقداردهی خصوصیت CSS مشخصی از عناصر، گرامر زیر را استفاده می کنیم:
css(“propertyname“,”value“);
مثال زیر خاصیت background-color را برای همه عناصر تطبیق یافته مقدار می دهد:
مثال
$(“p”).css(“background-color”,”yellow”);
برای مقداردهی چند خاصیت CSS ، گرامر زیر را استفاده کنید:
css({“propertyname“:”value“,”propertyname“:”value“,…});
مثال زیر خاصیت های background-color و font-size را برای همه عناصر تطبیق یافته مقداردهی خواهد کرد:
مثال
$(“p”).css({“background-color”:”yellow”,”font-size”:”200%”});