نمادها

شما اینجا هستید

آموزش کلاس نویسی Css در جیکوئری

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

آموزش کلاس نویسی Css در جیکوئری نحوه وارد کردن استایل در جیکوئری را به شما یاد می دهد

سلام برنامه در آموزشی نحوه نوشتن css در جیکوئری را به شما یاد داد

در این آموزش نحوه اضافه کردن فایل css به جیکوئری را آموزش می دهیم

فرض کنید شما css را از قبل نوشتید و می خواهید بر روی المان های خود آن را قرار دهید

در این آموزش یاد می گیرید که چطور استایلی از css اضافه و یا حذف کنید

 

دستور addClass 

به کمک دستور addClass میتوانید یک یا چند کلاس را به css خود اضافه کنید. روش کار به این شکل است.
شما استایلی را در css خود اضافه می کنید و سپس آن را به کمک جیکوئری به html خود اضافه می کنید.
اگر بخواهیم به صورت عملی این کار را انجام دهیم مثال زیر مورد مناسبی است.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h1, h2, p").addClass("blue");
    $("div").addClass("important");
  });
});
</script>
<style>
.important {
  font-weight: bold;
  font-size: xx-large;
}

.blue {
  color: blue;
}
</style>
</head>
<body>

<h1>سرتیتر ۱</h1>
<h2>سرتیتر۲</h2>

<p>پاراگراف اول</p>
<p>پاراگراف دوم</p>

<div>متن با کلاس important</div><br>

<button>اضافه کردن استایل ها توسط جیکوئری</button>

</body>
</html>

در قطعه کد بالا ما در css کلاس important را تعریف کردیم و به آن استایل های فونت ضخیم و سایز بزرگ را دادیم.
هم چنین کلاس blue را نیز تعریف کردیم و به آن استایل رنگ فونت آبی را دادیم.
در body خود تگ های h1 و h2 و p و div را تعریف کردیم.
در جیکوئری گفتیم اگر روی دکمه button کلیک شد h1 و h2 و p کلاس blue را بگیرند و رنگشان آبی شود.
div کلاس important را بگیرد و فونتش بزرگ شود.

 

دستور removeClass

با دستور removeclass بر خلاف دستور addclass عمل میکند.
به این صورت که اگر کلاسی با استایلی خاص به تگی داده شده باشد می توانید آن را حذف کرد.
اگر بخواهیم به صورت عملی این کار را انجام دهیم مثال زیر مورد مناسبی است.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h1, h2, p").removeClass("blue");
  });
});
</script>
<style>
.important {
  font-weight: bold;
  font-size: xx-large;
}

.blue {
  color: blue;
}
</style>
</head>
<body>

<h1 class="blue">سرتیتر ۱</h1>
<h2 class="blue">سرتیتر ۲</h2>

<p class="blue">یک پاراگراف</p>
<p>یک پاراگراف دیگر</p>

<button>پاک کردن استایل ها</button>

</body>
</html>

در کد بالا ما کلاس blue را از تگ های p و h1 و h2 حذف کردیم

 

دستور toggleClass

به کمک این دستور میتوانید هم removeclass انجام دهید و هم addclass را.
به این صورت که هربار روی دکمه کلیک کنید یکی از دستورات را اجرا میکند.
اصطلاحا toggle را کلید ۲ وضعیته مینامند.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h1, h2, p").toggleClass("blue");
  });
});
</script>
<style>
.blue {
  color: blue;
}
</style>
</head>
<body>

<h1>سرتیتر ۱</h1>
<h2>سرتیتر ۲</h2>

<p>این یک پاراگراف است</p>
<p>این یک پاراگراف دیگر است</p>

<button>کلاس ۲ وضعیته</button>

</body>
</html>

از آنجایی که این آموزش تصویری است از توضیحات اضافه پرهیز می کنیم

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

اگر این مطلب آموزنده بود به ما امتیاز دهید

میانگین امتیاز / 5. تعداد آرا:

اولین کسی باشید که رای میدهید


این مجموعه فایل rar است که برای باز کردن آن نیاز به نرم افزار Winrar می باشد

دانلود آموزش کلاس نویسی Css در جیکوئری و سورس کد ها : نوع فایل:rar/video/code حجم فایل:23.32 مگابایت

بعد از اکسترکت (extract) کردن فایل ها آن را با یک پلیر تصویری ببینید

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.