jQuery CSS Class ve Mouse Event İşlemleri

jQuery CSS Class İşlemleri

O halde, Attributes¹ > Manipulation² > Class Attribute³ | CSS⁴ kategorisi altında tanımlanan özellikler üzerinden adım adım ilerleyelim.

.addClass() ve .removeClass()

Spesifik olarak tanımlanan ve bu tanımlama ile eşleşen alanlara CSS sınıfı (class) eklememize imkan veren .addClass içerisinde boşluk kullanarak birden fazla tanımlama yapabiliriz, fonksiyonlarla işlemler yürütebiliriz. Ancak, unutmamak gerekir ki, .addClass kullanarak var olan tanımlı bir class üzerinde işlem yapabilmemiz mümkün değildir. .removeClass() ise yine .addClass() için geçerli olduğu gibi eşleşen alanlardan belirtilen css sınıfını kaldırmamıza olanak sağlıyor. Yine, benzer şekilde var olan bir class içeriğinde değişiklikler yapmamıza imkan vermiyor.

Yukarıdaki örnekte gördüğünüz üzere mouse ile #vertical-box id’li box üzerine geldiğimizde box-red isimli class’ımızı ekliyoruz. Bu aşamada öncesinde bulunan box-blueisimli class’ı da .removeClass() ile kaldırıyoruz. Diğer örnekler için ilgili jQuery sayfasını⁵ inceleyebilirsiniz.

.toggleClass()

Bir üst özellik olan addClass ve removeClass’ın sahip olduğu yapıları doğrudan sunan .toggleClass() ile uygulamak mümkün. Buna ek olarak, koşullar üzerinden de farklı düzenlemeler gerçekleştirebilirsiniz. Örnek olarak yukarıdaki kullanımları ve jQuery sayfasını⁶ inceleyebilirsiniz.

jQuery Mouse Event İşlemleri

.mouseup() ve .mousedown()

.mouseup(), .on(‘mouseup’) ve .trigger(‘mouseup’) gibi kullanımları da olan, temel olarak mouse’un tanımlı bir element/alan üzerine gelmesi ve tıklaması (ilk tıklama durumu down, tıklama işleminin sonlanması up olarak ifade edilir) ile işlem yürütür. .mousedown() ise .on(‘mousedown’) ve .trigger(‘mousedown’) gibi kullanımlara sahip ve mouse click işleminin sonlanması durumunda aktifleşerek işlem yürütmeye olanak sağlamakta.

.mouseover() ve .mouseout()

.mouseover(), mouse ile belirli bir alan ile konum ilişkisi kurulduğunda işleme başlar. .on(‘mouseover’) ve .trigger(‘mouseover’) biçiminde de gerçekleştirilebilen işlemler ile ilgili yukarıdaki örneği inceleyebilirsiniz. Ek olarak, .mouseover() / .mouseout() ile .mouseenter() / .mouseleave() arasındaki katman farkı bulunmaktadır. .mouseover() katmanları (outer / inner) ayrı ayrı değerlendirirken .mouseenter() bir sınır özelliği göstererek ana katmanın kendisini değerlendirmektedir.

.mouseenter() ve .mouseleave()

.mouseenter() ve .mouseleave(), .mouseover() ve .mouseout()’dan farklı olarak, tanımlı alan ile ilişkili olarak gerçekleştirilen temasın kendisini baz almakta. Böylelikle belirlenen alanın en dışta yer alacağını düşünürsek inner temaslarında herhangi bir ayrım söz konusu olmayacaktır.

.mousemove()

Alternatif olarak .on(‘mousemove’) ve .trigger(‘mousemove’) gibi kullanımlara sahip metot ile mouse’un eşleşen alan ile temasını sıfır noktası sol-üst olacak şekilde X ve Y koordinatları üzerinden öğrenmemiz mümkün. Yine yukarıda yer alan örnek içerisindeki kodları inceleyerek işlemler hakkında ön bilgi edinebilirsiniz.

.trigger()

Belirlenen tüm elementlere bağlı olarak uygulanan ilgili elemente daha önceden tanımlanmış işlemleri tetikler / yürütür. Örnek kullanım için yukarıdaki örneği inceleyebilirsiniz.

.bind()

Her ne kadar duruma göre yerine .on() metotunu kullanılabiliyor olsa da sıklıkla tercih edilen jQuery metotlarından biri olan .bind() ile herhangi bir nesneye etkinlik (click, keydown, mouseenter, hover…) ve birden fazla işlem atamak için kullanılır. Örnek kullanım için yukarıdaki örneği inceleyebilirsiniz⁷.

.hover()

İlişkilendirildiği element ile ilişkili olarak element üzerine mouse ile gelmesi ve mouse’un ilgili element üzerinden ayrılması olaylarını kontrol etmekte kullanılır. Yukarıda bahsi geçen metotlarla ilişkili olarak tercih edilebilmektedir.

.toggle()

İlişkilendirilmiş element ile ilgili olarak her bir tıklamada sırasıyla belirtilen fonksiyonların yürütülmesini gerçekleştirir.

Örnekler Hakkında

Farkındalık yaratabilmek adına örnek alanları içerisinde standart kullanımlara ek olarak, mümkün olduğunca basit ve anlaşılır şekillerde arayüz motorları ve css yazım stilleri gibi alternatif kullanımlar tercih ettim. Konu ile ilgili detaylı örnekler için CSS bölümü ile ilişkili olarak SCSS ve LESS kaynaklarını, yine bu alan içerisinde yer alan nth-of-type⁸ ve calc()⁹ kullanımlarına dair farklı örnekleri inceleyebilirsiniz.