Kayıt Ol

Giriş

Şifremi Kaybettim

Lost your password? Please enter your email address. You will receive a link and will create a new password via email.

Jquery css metodları ve kullanımı

Belgemizdeki elementleri sunmak için kullandığımız CSS sınıfları üzerinde işlem yapan jquery metotları şunlardır;

addClass(“sınıf-adı”) : Bir sınıfa ait CSS kurallarını belge içinde istenilen elemente atamak için kullanılır.

removeClass(“sınıf-adı”) : Element yada elementlerin sahip olduğu CSS sınıfını kaldırır.

toggleClass(“sınıf-adı”) : Bir sınıfın var olup olmadığını sınar. Sınama sonucunda sınıf var ise siler yok ise ekler. addClass ve removeClass metotlarının birleşimi gibi düşünülebilir.

hasClass(“sınıf-adı”) : Elementlerin bağlı olduğu sınıfın varlığını araştırmak için kullanılan metotdur. Sınıf var ise True (1) yok ise False (0) değeri döndürür. Şart cümlelerinizin şartı olarak kullanabilirsiniz.


1. addClass() ve removeClass() metotları

İlk olarak üzerinde çalışacağımız dökumanıblogları arasında oluşturalım. Yazdığım örnekte en üstteki ve ortadaki div için sinif1 sınıfı tanımlandı. alt div için herhangi bir sınıf tanımı yapılmadı.

Daha sonra ekleme ve kaldırma yapacağımız CSS sınıflarımızı yazalım.

Bu sınıflarıetikerleri arasına yazalım. Dilerseniz ayrı bir stil dosyası oluşturup sayfanıza dahil edebilirsiniz. Daha sonra jquery kütüphanemizi yineetiketleri arasında sayfaya dahil edelim. Kütüphaneyi nasıl sayfaya dahil edeceğinizi bilmiyorsanız Jquery kütüphanesini sayfaya dahil etme yazımızı inceleyebilirsiniz.

Artık istediğimiz HTML etiketindeki sınıfı kaldırabilir yada sınıf ekleyebiliriz. Bu kodu yineetikerleri arasında kütüphane ekleme işleminden sonra yazalım. Sırasıyla;

id’si ust olan element seçildi click() olayında sinif1 sınıfı kaldırıldı ve sinif2 sınıfı eklendi.
id’si orta olan elemntin click() olayında sınıfı kaldırıldı
id’si alt olan elemente sınıf ataması yapılmamıştı click() olayında sinif2 atandı.

Uygulamanın çalışır halini görmek için tıklayınız.
2. hasClass() metotu

Aynı içeriği hasClass() metotunu kullanarak eğer id’ si seçilen elementin ait olduğu sınıf “sinif1″ ise sinif1′i kaldırıp sinif2 yapan, ait olduğu sınıf “sinif2″ ise sinif2 sınıfını kaldırıp sinif1′ i ekleyen uygulamayı yazalım. Aynı işlemi diğer elementlerede uygulayalım.

Uygulamanın çalışır halini görmek için tıklayınız.

3. toggleClass() metotu

hasClass() ile yaptığımız uygulama toggleClass() ile daha kısa bir şekilde gerçekleştirilebilir. toggleClass() özelliği gereği belirttiğiniz sınıf ile elementin sınıfını değiştirir. Sınıflar aynı ise sınıfı kaldırılır.

Uygulamanın çalışır halini görmek için tıklayınız.

 

Yazar Hakkında

Leave a reply

Captcha Captcha güncellemek için resime tıkla

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">