دستکاری ظاهر عناصر در jQuery
با jQuery به آسانی می توانید ظاهر عناصر (CSS) را دستکاری کنید.
دستکاری ظاهر عناصر HTML
ما در اینجا به چهار متد که در jQuery برای دستکاری ظاهر عناصر استفاده می شود، اشاره خواهیم کرد:
- ()addClass - اضافه کردن یک یا چند کلاس به عنصر/عناصر انتخاب شده
- ()removeClass - حذف کردن یک یا چند کلاس از عنصر/عناصر انتخاب شده
- ()toggleClass - حرکت بین متدهای ()addClass و ()removeClass
- ()css - تنظیم یک خصوصیت CSS یا برگرداندن مقدار آن
در تمام مثال های این صفحه، کلاس های "important" و "blue" استفاده خواهد شد:
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
متد ()addClass در jQuery
متد ()addClass، برای اضافه کردن یک یا چند کلاس به عنصر/عناصر انتخاب شده استفاده می شود.
در مثال زیر، چگونگی اضافه کردن کلاس به عناصر نشان داده شده است، البته زمان اضافه کردن می توانید چندین عنصر را انتخاب کنید:
مثال (دستکاری ظاهر عناصر در jQuery)
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});
شما همچنین می توانید در متد ()addClass، چندین کلاس را مشخص نمایید:
مثال (دستکاری ظاهر عناصر در jQuery)
$("#div1").addClass("important blue");
});
متد ()removeClass در jQuery
متد ()removeClass، برای حذف یک یا چند کلاس از عنصر/عناصر انتخاب شده استفاده می شود.
در مثال زیر، چگونگی حذف کلاس از عناصر نشان داده شده است:
مثال (دستکاری ظاهر عناصر در jQuery)
$("h1,h2,p").removeClass("blue");
});
متد ()toggleClass در jQuery
متد ()toggleClass، برای حرکت بین متدهای ()addClass و ()removeClass استفاده می شود.
در مثال زیر، چگونگی استفاده از متد ()toggleClass نشان داده شده است:
مثال (دستکاری ظاهر عناصر در jQuery)
$("h1,h2,p").toggleClass("blue");
});
متد ()css در jQuery
متد ()css، در مطلب بعدی توضیح داده خواهد شد.
jQuery CSS Reference
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 21137
دیدگاه‌ها
در مورد کدهای زیر میشود توضیح دهید؟ $(function () {
$(".panel-headi ng").click(func tion () {
$(this).next(). toggle(500);
});
});
برای آشنایی با متد next به لینک زیر مراجعه فرمایید:
www.beyamooz.com/jquery/360-jquery-reff/3324-next
وقتی با jquery یا java script این تغییرات رو اعمال کردیم میتونیم به وسیله php این تغیرات رو به سرور ارسال کنیم که همیشگی شه؟ مطمئن هستم که این کار نشد نداره ولی اگه یه راهنمایی بکنید که چجوری میشه این کارو کرد ممنون میشم :)
صورت مسئله:
تصور کنید سایتی داریم که هر کاربر می تواند اندازه فونت (font-size)دلخو اهش را تنظیم کرده و در مراجعات بعدی اندازه تنظیم شده برای وی در نظر گرفته شود...!
نیازمندی ها:
1- به محلی برای ذخیره کردن تنظیمات دلخواه هر کاربر (preference) نیاز است. که این فضا می تواند یا فضای کوکی های مرورگر کاربر باشد و یا در پایگاه داده در جدول preference ذخیره شود.
2- در سایت باید قسمتی با عنوان ترجیحات (preference) در نظر بگیریم و مواردی مانند font-size و font-family و ... از کاربر دریافت شود.
3- حالا که تنظیمات دلخواه کاربر را از طریق پایگاه داده یا کوکی ها دریافت کردیم، باید بنحوی آنها را در فایل CSS اعمال کنیم. مثلاً برای مورد font-size به صورت زیر عمل کنیم:p
{
...
font-size: <?php echo $font-size; ?>
...
}
اما سوالی که مطرح می شود، این است که چطور در فایل CSS می توان از کدهای PHP استفاده نمود...! برای جواب به این سوال به لینک زیر مراجعه کنید:
code.tutsplus.com/articles/supercharge-your-css-with-php-under-the-hood--net-6409
ممنون بابت توضیح کامل