آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش خواندن و تنظیم کلاس های CSS با جی کوئری

دوره های مرتبط با این مقاله

خواندن و تنظیم کلاس های CSS

همان طور که attribute ها و محتوای المان های سند HTML را ویرایش کردیم، به همان راحتی هم می توانیم کلاس های CSS المان ها را دستکاری کنیم. jQuery این زمینه را برای شما فراهم می کند تا به راحتی خصیصه ی style المان ها را با استفاده از متد css() و با ارائه ی چندین متد دیگر، کلاس های یک المان را ویرایش نمایید.
ویرایش را از خصیصه ی class المان های HTML آغاز می کنیم. خصیصه ی class تا چندین اسم کلاس می گیرد که ممکن است به کلاس CSS تعریف شده در صفحه ی سبک دهی (Stylesheet) جاری اشاره داشته یا نداشته باشد. غالبا همین طور است، اما گاهی فقط اسم کلاس به المان های خود تخصیص می دهیم تا با استفاده از جی کوئری بتوانیم (بر اساس اسم کلاس) به المان مورد نظر دسترسی داشته باشیم. به عبارتی دیگر با کد جی کوئری به راحتی می توان یک المان را بر اساس اسم کلاس آن انتخاب نموده و به آن دسترسی پیدا کرد.
به منظور تست، چندین انتخابگر ساده ی CSS در Stylesheet خود تعریف کرده ایم:


       
.bold {
           font-weight: bold;
       }
       .blue {
           color: blue;
       }

در اینجا سه متد بسیار پرکاربرد که با کلاس کار می کنند را معرفی می کنیم:


  1. hasClass(): بررسی می کند آیا المان یا المان های مورد نظر کلاس مشخصی (با classname مشخص) را دارند یا خیر. اسم کلاس را به عنوان پارامتر به این متد پاس می دهیم.
  2. addClass(): یک کلاس معین را به المان مورد نظر تخصیص می دهد.
  3. removeClass(): کلاس مورد نظر را از المان انتخابی حذف می کند، در واقع اسم کلاس که به عنوان پارامتر به متد ارسال شده را از المان انتخاب شده حذف می نماید.

نمونه یک

    Toggle class
    
امتحان کنید

در مثال فوق، به مجرد اینکه که کاربر بر روی لینک کلیک می کند، خود لینک (this) را به عنوان پارامتر به متد toggleClass() ارسال می کنیم. در آن، بررسی می کنیم آیا sender دارای کلاسی به نام bold هست یا خیر و در صورت وجود کلاسی با این نام آن را حذف می کنیم، در غیر این صورت آن را به المان مورد نظر اضافه می کنیم. این عملیات بطور مرتب انجام می شود. تیم جی کوئری برای اینکه کاربران مجبور به نوشتن چندین خط کد جهت اجرای همین عملیات ساده نباشند، متد بسیار کارآمد toggleClass() را پیاده سازی می کند.


Toggle classa>

می توان چندین المان را انتخاب کرده و چندین کلاس را به طور همزمان به آن اضافه کرده یا از آن حذف نمود.


مثال:

در ابتدا، تگ های span و b را انتخاب می کنیم و سپس یک کلاس به آن اضافه می نماییم و آن کلاسی با نام blue می باشد. در گام بعدی، تگ div را انتخاب می کنیم و به آن دو کلاس که توسط space از هم جدا شده اند، تخصیص می دهیم: کلاس های bold و blue.
در شرح متد removeClass نیز باید بگوییم که به همین صورت عمل می کند. نام کلاس ها را به عنوان پارامتر به متد نام برده پاس می دهیم، سپس آن ها را داخل پرانتز متد با خط فاصله از هم جدا می نماییم. حال کلاس های مد نظر از المان دلخواه حذف می گردند.


امیدواریم که این مطلب در مورد آموزش Jquery و JavaScript برایتان مفید و مناسب بوده باشد.
در صورت داشتن هر گونه سوال، پیشنهاد و یا انتقاد حتماً از قسمت نظرات در پایین صفحه آن را برای ما ارسال کنید.

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

از اینجا بهترین کتابهای برنامه نویسی را دریافت کنید : کتاب های آموزش برنامه نویسی


کلیه حقوق مادی و معنوی این مقاله متعلق به آموزشگاه تحلیل داده می باشد و هر گونه استفاده غیر قانونی از آن پیگرد قانونی دارد.

  • 1451
  •    1236
  • تاریخ ارسال :   1395/01/16

دانلود PDF دانلود سورس کد دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .