با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش jQuery ، را دنبال می کنند. در بخش های قبل، چگونگی دسترسی و دستکاری عناصر HTML به همراه محتوای آنها را در jQuery، بررسی کردیم. اکنون قصد داریم به موضوع کار با محتوا و ویژگی های CSS در jQuery یا دستیابی و تغییر دادن ویژگی ها و خواص css در jQuery ، بپردازیم.
جلسات قبل از این بخش را، به مباحث دستکاری عناصر html و محتوای آنها با استفاده از توابع jQuery، اختصاص داده بودیم. و موضوعاتی از جمله افزودن عناصر html در jQuery ، را برای آشنایی با روشهای اضافه کردن عناصر html و همچنین حذف عناصر html در jQuery را برای آشنایی با توابع حذف عناصر html در jQuery، را ارائه کردیم.
در حال حاضر ، به موضوع دستیابی و تغییر دادن ویژگی ها و خواص css در jQuery ، می پردازیم.
در jQuery ، روشهای ساده ای برای دستیابی به محتوای کدها و ویژگی های css ، وجود دارد.
jQuery ، چند تابع را برای دستکاری ویژگی ها و خواص css، ارائه کرده است:
ما از مثال کد css زیر در تمام مثال های این بخش، استفاده می کنیم:
1 2 3 4 5 6 7 8 | .important { font-weight: bold; font-size: xx-large; } .blue { color: blue; } |
در مثال زیر نحوه ی افزودن کلاس به عناصر html، مختلف ، نشان داده شده است. البته شما می توانید، چندین عنصر را هنگام افزودن کلاس ، انتخاب کنید:
1 2 3 4 | $("button").click(function(){ $("h1, h2, p").addClass("blue"); $("div").addClass("important"); }); |
مثال ۲:
1 2 3 | $("button").click(function(){ $("#div1").addClass("important blue"); }); |
در این مثال ، چگونگی حذف کلاس ، از عناصر html مختلف، نشان داده شده است:
1 2 3 | $("button").click(function(){ $("h1, h2, p").removeClass("blue"); }); |
از این تابع برای سوئیچ و تغییر وضعیت بین توابع ()addClass و ()removeClass ، استفاده می شود.
مثال:
1 2 3 | $("button").click(function(){ $("h1, h2, p").toggleClass("blue"); }); |
خب در این بخش با چگونگی دستیابی و دستکاری ویژگی ها و خواص css در jQuery ، و توابع جدیدی در این زمینه آشنا شدید. امیدواریم که از مبحث دستیابی و تغییر دادن ویژگی ها و خواص css در jQuery ، به خوبی استفاده کرده باشید.