jQuery CSS (jQuery CSS)
با «jQuery CSS» استایل ها را سریع عوض می کنی. «استایل (Style)» یعنی ظاهر عنصر؛ مثل نمایش، اندازه فونت، رنگ. البته با جاوااسکریپت استاندارد هم می شود. اما jQuery کوتاه تر است و خواناتر.
jQuery در برابر JavaScript استاندارد
jQuery برای ساده سازی تغییرات DOM ساخته شد. اما از ES5 به بعد، کارهای ساده با چند خط ونیلا هم ممکن است. با این حال، برای شروع، jQuery حس «سریع و راحت» می دهد.
نکته: اگر با jQuery HTML و jQuery انتخابگرها آشنا باشی، این بخش خیلی روان می شود.
مخفی کردن عنصر (Hide)
نمایش عنصر را صفر کن. «display:none» یعنی عنصر از صفحه پنهان می شود.
myElement.hide();
myElement.style.display = "none";
نمایش عنصر (Show)
عنصر را دوباره نشان بده. مقدار خالی، استایل پیش فرض را برمی گرداند.
myElement.show();
myElement.style.display = "";
تعیین استایل با css()
اندازه فونت را تغییر بده. «css()» یک ویژگی را مستقیم تنظیم می کند.
$("#demo").css("font-size", "35px");
document.getElementById("demo").style.fontSize = "35px";
گام های عملی
- عنصر هدفت را با انتخابگر پیدا کن.
- می خواهی پنهان شود یا نشان داده شود؟
- اگر پنهان: hide یا display:none را بزن.
- اگر نمایش: show یا display:"" را بزن.
- برای استایل ها از css یا style استفاده کن.
جمع بندی سریع
- jQuery CSS کوتاه و خواناست.
- hide و show نمایش را کنترل می کنند.
- css ویژگی ها را سریع تنظیم می کند.
- ونیلا JS هم کار را انجام می دهد.
هشدار: تغییر مستقیم استایل زیاد، کد را شلوغ می کند. بهتر است کلاس بدهی و با CSS مدیریت کنی.