العمل على CSS لـ jQuery

جزء مهم جدًا من jQuery هو إمكانية التلاعب بDOM.

يقدم jQuery طرقًا فعالة لتحكم في أنماط العناصر.

في هذا الفصل سنوضح كيفية إضافة أو حذف فئات CSS في DOM.

تحكم jQuery في CSS

باستخدام jQuery، يمكننا بسهولة التلاعب بالأنماط العناصر.

لدينا مجموعة من الطرق في jQuery تستخدم لتحكم CSS:

• addClass()

• removeClass()

• toggleClass()

• css()

سأقوم بشرح كيفية استخدام كل من هذه الطرق.

طريقة jQuery addClass()

jQuery addClass()يتم إضافة اسم فئة واحدة أو أكثر إلى العنصر المحدد.

في المثال التالي يتم إضافة اسم فئة إلى العنصر الأول من عناصر <p>:

$("button").click(function(){
　　$("p:first").addClass("highlight");
});

يمكن إضافة أكثر من فئة واحدة إلى العنصر المحدد في مرة واحدة (مفصولة بالفراغات)، مثلما هو موضح أدناه:

$("button").click(function(){
　　$("p:first").addClass("highlight　big");
});

طريقة jQuery removeClass()

jQuery removeClass()يتم حذف اسم فئة واحدة أو أكثر من العنصر المحدد.

في المثال التالي يتم حذف فئة واحدة من جميع عناصر <p>:

$("button").click(function(){
　　$("p").removeClass("highlight");
});

في مرة واحدة يمكن حذف أكثر من فئة واحدة من مجموعة العناصر المحددة (مفصولة بالفراغات)، مثلما هو موضح أدناه:

$("button").click(function(){
　　$("p").removeClass("highlight　big");
});

إذا لم يتم تحديد اسم الصفحة في المعامل، يتم حذف جميع الأسماء.

$("button").click(function(){
　　$("p").removeClass();
});

طريقة toggleClass() لـ jQuery

jQuery toggleClass()تتبدل الطريقة بين إضافة وازالة اسم الصفحة لكل عنصر مختار.

في المثال التالي، يتم التبديل بين إضافة وازالة اسم الصفحة "anotherClass" لكل عنصر <p>:

$("button").click(function(){
　　$("p").toggleClass("anotherClass");
});

يستخدم هذا الطريقة لتحقق من اسم الصفحة المحددة لكل عنصر:

• إذا كان هناك غياب في اسم الصفحة، يتم إضافتها

• إذا تم تعيين اسم الصفحة، يتم حذفها

طريقة css() لـ jQuery

jQuery css()يستخدم الطريقة للحصول أو تعيين صفة أو عدة صفات نمطية لإحداثيات العنصر المحدد.

jQuery css()سيتم شرح الطريقة في الفصل التالي.

مرجع CSS لـ jQuery

للحصول على مرجع كامل لطرق CSS، يرجى زيارةمرجع HTML / CSS لـ jQuery.