سلام برنامه در خدمت شماست با آموزش کار با CSS در جیکوئری
آموزش کار با CSS در جیکوئری این امکان را می دهد که تمام دستورات css را پیاده سازی کنید
به واسطه دستور Css شما می توانید css را در جیکوئری پیاده سازی کنید
فرم کلی این دستور برای تک property به صورت زیر
css(“propertyname”,”value”);
و برای بیش از یک property به شکل زیر است
css({“propertyname”:”value”,”propertyname”:”value”,…});
برای کد های بالا اگر بخواهیم مثالی بزنیم کد زیر میتواند مثال مناسبی باشد
<!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(){
$("p").css({"background-color": "yellow", "font-size": "200%"});
});
});
</script>
</head>
<body>
<h2>این یک سرتیتر است.</h2>
<p style="background-color:#ff0000">این یک پاراگراف است.</p>
<p style="background-color:#00ff00">این یک پاراگراف است.</p>
<p style="background-color:#0000ff">این یک پاراگراف است.</p>
<p>این یک پاراگراف است.</p>
<button>اجرای استایل با جیکوئری</button>
</body>
</html>
در کد بالا ما توسط css داخلی به هر تگ p یک رنگ بکگراند دادیم.و تگ h2 و تگ p را یدون استایل گذاشتیم.
در حالت پیفرض استایل های داخلی یا اصطلاحا خطی اجرا میشوند.
حال ما میخواهیم استایل هایی به کمک دستور css در جیکوئری ایجاد کنیم.
طبق کد بالا ما دکمه ای ساختیم تا با کلیک روی آن شما تغییرات کدهای دستور css در جیکوئری را ببینید.
به کمک دستور css ما به تگ های p خود استایل های زیر را دادیم:
- بکگراند رنگ زرد
- و اندازه فونت ۲۰۰% که همان اندازه ۲ برابر حالت فعلی می باشد.
شما با کلیک روی دکمه “اجرای استایل با جیکوئری” میتوانید css جیکوئری را اجرا کنید.
لازم به ذکر است که اگر درجایی استایل های جیکوئری نوشته شوند به استایل های معمولی اولویت اجرایی دارند.
از آنجایی که این آموزش تصویری است از توضیحات اضافه پرهیز می کنیم
شما می توانید ویدیو این آموزش را همراه با سورس کد آن از باکس دانلود موجود در زیر همین پست دریافت نمایید
آموزش شناخت و نمایش ابعاد در جیکوئری
آموزش کلاس نویسی Css در جیکوئری
آموزش زیر مجموعه در جیکوئری (Descendants)
آموزش دستور Remove و Empty در جیکوئری
آموزش filtering در جیکوئری