jQuery CSS Class ve Mouse Event İşlemleri

jQuery Traversing / DOM Insertion, Around ile başlangıcını yaptığım jQuery yazı serisi ile ilgili olarak üzerinde çalıştığım mini bir çalışmadan yola çıkarak css işlemleri ile devam etmeye karar verdim. Asıl amacım, ilgili aşamalar üzerinden tamamlanmış bir çalışmaya dair bir kaynakça sağlamak olduğu için uygulamadaki işlemlere referans olacak bir örnek üzerinden açıklamalarda bulunacağım.

jQuery CSS Class İşlemleri

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

E-Posta Bültenine Kayıt Olmak İster misin?

E-posta listesine katılarak yeni yazılardan haberdar olabilirsin.

.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-blue isimli class’ı da .removeClass() ile kaldırıyoruz. Diğer örnekler için 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. Yukarıda yer alan örneğin dışında ek bilgiler ve alternatif kullanım işlemleri için jQuery .mouseup() ve .mousedown() sayfalarını inceleyebilirsiniz.

.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. Örnek kullanım için yukarıdaki kodları inceleyebilir veya jQuery sayfasındaki örneklerden faydalanabilirsiniz.

.mousemove()

Alternatif olarak .on(‘mousemove’) ve .trigger(‘mousemove’) gibi kullanımlara sahip metod 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. Detaylı bilgi ve ayrıntılı işlemler için jQuery sayfasını inceleyebilirsiniz.

.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() metodunu kullanılabiliyor olsa da sıklıkla tercih edilen jQuery metodları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 metodlarla 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 sayfalarını, yine bu alan içerisinde yer alan nth-of-type ve calc() kullanımlarına dair farklı örnekleri inceleyebilirsiniz. Ruby arayüz motoru olarak yine Slim ve Jade ile ilgili detaylı bilgiyi ilgili web sitesi üzerinden görüntüleyebilirsiniz.

Ek olarak metod anlatımları ile ilgili farklı anlatımlar ve ilişkili diğer metodlar için aşağıdaki bağlantıları ziyaret edebilirsiniz.

  1. Cem Demir: Jquery ve Olaylar
  2. Mehmet Tamtürk: Bind, Live, Unbind, Die Nedir?
  3. Ulvi Ercan: jQuery ve Olaylar (Events)

Leave a Reply