کلاس‌های Get و Set

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Jquery-menu.png
موارد آموزشی
۱خانه
۲مقدمه
۳شروع کار
۴دستور زبان
۵انتخابگرها (Selectors)
۶رویدادها
جلوه‌ها در jQuery
۱نمایش دادن / پنهان کردن
۲محو شدن
۳اسلاید
۴متحرک ساختن
۵stop()
۶فراخوانی (Callback)
۷زنجیره‌سازی (Chaining)
HTML در jQuery
۱Get
۲Set
۳اضافه‌کردن (Add)
۴حذف‌کردن
۵کلاس‌های CSS
۶css()
۷ابعاد
پیمودن در jQuery
۱پیمودن (Traversing)
۲اجداد
۳نسل‌ها
۴برادرها (Siblings)
۵فیلترکردن
AJAX در jQuery
۱مقدمهٔ AJAX
۲بارگذاری
۳Get/Post
متفرقه‌های jQuery
۱noConflict()
۲فیلترها
مثال‌ها
۱مثال‌ها
مرجع‌ها

با jQuery، تغییر استایل عنصرها آسان است.

تغییر CSS در jQuery

jQuery متدهای زیادی برای دستکاری CSS دارد. در ادامه به این متدها می‌پردازیم:[۱]

  • addClass() - یک یا چند کلاس را به عنصرهای انتخاب شده اضافه می‌کند
  • removeClass() - یک یا چند کلاس را از عنصرهای انتخاب شده حذف می‌کند
  • toggleClass() - بین اضافه‌کردن/حذف کلاس‌ها از عنصرهای انتخاب شده تغییر وضعیت می‌دهد
  • css() - ویژگی استایل را تنظیم می‌کند یا برمی‌گرداند

برگه استایل (به انگلیسی: Stylesheet) مثال

برگه استایل زیر برای همه مثال‌های این صفحه استفاده می‌شود:

.important {
  font-weight: bold;
  font-size: xx-large;
}

.blue {
  color: blue;
}


متد addClass() در jQuery

مثال زیر نحوه اضافه‌کردن ویژگی‌های کلاس به عنصرهای مختلف را نشان می‌دهد. البته می‌توانید چند عنصر را هنگام اضافه‌کردن کلاس انتخاب کنید:

مثال
1 $("button").click(function(){
2   $("h1, h2, p").addClass("blue");
3   $("div").addClass("important");
4 });

همچنین می‌توانید چند کلاس را داخل متد addClass() مشخص کنید:

مثال
1 $("button").click(function(){
2   $("#div1").addClass("important blue");
3 });

متد removeClass() در jQuery

مثال زیر نحوه حذف کردن یک کلاس ویژگی خاص را از عنصرهای مختلف نشان می‌دهد:

مثال
1 $("button").click(function(){
2   $("h1, h2, p").removeClass("blue");
3 });

متد toggleClass() در jQuery

مثال زیر نحوه استفاده از متد toggleClass() در jQuery را نشان می‌دهد. این متد بین اضافه‌کردن/حذف کلاس‌ها را عنصرهای انتخاب شده تغییر وضعیت می‌دهد:

مثال
1 $("button").click(function(){
2   $("h1, h2, p").toggleClass("blue");
3 });

متد css() در jQuery

متد css() در بخش بعدی توضیح داده خواهد شد.

تمرین‌های jQuery

مرجع jQuery HTML

برای مرور کامل همه متدهای jQuery HTML، لطفاً به مرجع جی کوئری HTML/CSS مراجعه کنید.


منابع آموزشی