در خدمت شما هستیم با آموزش کلاس نویسی 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>
از آنجایی که این آموزش تصویری است از توضیحات اضافه پرهیز می کنیم
شما می توانید ویدیو این آموزش را همراه با سورس کد آن از باکس دانلود موجود در زیر همین پست دریافت نمایید
آموزش کار با CSS در جیکوئری
آموزش شناخت و نمایش ابعاد در جیکوئری
آموزش زیر مجموعه در جیکوئری (Descendants)
آموزش دستور Remove و Empty در جیکوئری
آموزش filtering در جیکوئری