سبد (0)

تبلیغات

دستکاری ظاهر عناصر در jQuery

با jQuery به آسانی می توانید ظاهر عناصر (CSS) را دستکاری کنید.


دستکاری ظاهر عناصر HTML

ما در اینجا به چهار متد که در jQuery برای دستکاری ظاهر عناصر استفاده می شود، اشاره خواهیم کرد:

  • ()addClass - اضافه کردن یک یا چند کلاس به عنصر/عناصر انتخاب شده
  • ()removeClass - حذف کردن یک یا چند کلاس از عنصر/عناصر انتخاب شده
  • ()toggleClass - حرکت بین متدهای ()addClass و ()removeClass
  • ()css - تنظیم یک خصوصیت CSS یا برگرداندن مقدار آن 

در تمام مثال های این صفحه، کلاس های "important" و "blue" استفاده خواهد شد:

.important
{
font-weight:bold;
font-size:xx-large;
}

.blue
{
color:blue;
}

متد ()addClass در jQuery

متد ()addClass، برای اضافه کردن یک یا چند کلاس به عنصر/عناصر انتخاب شده استفاده می شود.

در مثال زیر، چگونگی اضافه کردن کلاس به عناصر نشان داده شده است، البته زمان اضافه کردن می توانید چندین عنصر را انتخاب کنید:

مثال (دستکاری ظاهر عناصر در jQuery)

$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});
خودتان امتحان کنید »

شما همچنین می توانید در متد ()addClass، چندین کلاس را مشخص نمایید:

مثال (دستکاری ظاهر عناصر در jQuery)

$("button").click(function(){
  $("#div1").addClass("important blue");
});
خودتان امتحان کنید »

متد ()removeClass در jQuery

متد ()removeClass، برای حذف یک یا چند کلاس از عنصر/عناصر انتخاب شده استفاده می شود.

در مثال زیر، چگونگی حذف کلاس از عناصر نشان داده شده است:

مثال (دستکاری ظاهر عناصر در jQuery)

$("button").click(function(){
  $("h1,h2,p").removeClass("blue");
});
خودتان امتحان کنید »

متد ()toggleClass در jQuery

متد ()toggleClass، برای حرکت بین متدهای ()addClass و ()removeClass استفاده می شود.

در مثال زیر، چگونگی استفاده از متد ()toggleClass نشان داده شده است:

مثال (دستکاری ظاهر عناصر در jQuery)

$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
});
خودتان امتحان کنید »

متد ()css در jQuery

متد ()css، در مطلب بعدی توضیح داده خواهد شد.

jQuery CSS Reference

For a complete overview of all jQuery CSS methods, please go to our jQuery HTML/CSS Reference.

دیدگاه‌ها  

+2 # amirkian 1394-05-21 16:50
در مورد کدهای زیر میشود توضیح دهید؟ $(function () {
$(".panel-headi ng").click(func tion () {
$(this).next(). toggle(500);
});
});
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # امیر پهلوان صادق 1394-05-21 20:11
برای آشنایی با متد next به لینک زیر مراجعه فرمایید:
www.beyamooz.com/jquery/360-jquery-reff/3324-next
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # میلاد نظری 1393-11-29 00:05
وقتی با jquery یا java script این تغییرات رو اعمال کردیم میتونیم به وسیله php این تغیرات رو به سرور ارسال کنیم که همیشگی شه؟ مطمئن هستم که این کار نشد نداره ولی اگه یه راهنمایی بکنید که چجوری میشه این کارو کرد ممنون میشم :)
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # امیر پهلوان صادق 1393-11-29 08:17
صورت مسئله:
تصور کنید سایتی داریم که هر کاربر می تواند اندازه فونت (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
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # میلاد نظری 1393-11-29 16:47
ممنون بابت توضیح کامل
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی