Jquery ve Niteleyiciler (Attributes)

Jquery ve seçiciler konusunda her elementin niteleyicilerinin, yani sıfatlarının olduğundan bahsetmiştim. Bu yazımda Jquery kütüphanesinde bu niteleyiciler için özel olarak oluşturulmuş fonksiyonlardan bahsetmeye çalışacağım. Hadi başlayalım…

attr() Fonksiyonu

Bu fonksiyon ile bir elementin herhangi bir niteleyicisinin değerine ulaşabiliyoruz. Bir örnek üzerinden gidecek olursak ;

<a href="#" title="Bilişim">Cem Demir</a>

Bu link üzerinde çeşitli işlemler yapalım.

$("a").attr("title")

Yukarıdaki ifade ile geriye “Bilişim” değerini döndürmüş oluyoruz.

“Bilişim” olan title niteleyicisinin değerini “Teknoloji” olarak değiştirelim ;

$("a").attr("title","Teknoloji")

Ayrıca çoklu niteleyici (multiple) değiştirme yapalım ;

$("a").attr({
   title = "Bilişim ve Teknoloji",
   href = "http://www.cemdemir.net"
})

Bunların dışında removeAttr fonksiyonu ile bir elementin herhangi bir niteleyicisinin değerini silebiliyoruz.

$("a").removeAttr("title")

val() Fonksiyonu

Seçilen elementin value niteleyicisi üzerinde işlem yapmamızı sağlar.

<input type="text" value="Mail Adresinizi Yazınız..." />

Bu input elementi üzerinde value değerini yani “Mail Adresinizi Yazınız…” stringini geri döndürelim ;

$("input").val()

Şimdi de bu elementin value değerini “Ad Soyad Giriniz…” olarak değiştirelim ;

$("input").val("Ad Soyad Giriniz...")

addClass() Fonksiyonu

Bu fonksiyon ile herhangi bir elemente daha önceden yaratılmış bir sınıfı ekleyebiliyoruz.

Mesela sayfanızdaki <p> elementlerinin sadece birincisine “myClass” adlı sınıfı ekleyelim ;

$("p:first").addClass("myClass")

addClass fonksiyonu ile ters şekilde çalışan removeClass fonksiyonu ile ise elementten sınıf silebiliyoruz.

$("p:first").removeClass("myClass")

Bu iki fonksiyonu birarada kullanmanız da mümkün, ayrıca içlerine birden fazla sınıf yazmanız da mümkün ;

$("p:first").removeClass("myClass").addClass("yourClass herClass")

Sınıf ekleme ve silme ile ilgili somut bir örnek yapalım ;

$(function(){
   $("a.maviYap").click(function(){
      $("p").removeClass("kirmizi").addClass("mavi");
   });
   $("a.kirmiziYap").click(function(){
      $("p").removeClass("mavi").addClass("kirmizi");
   });
});

Sonucu görmek için buraya bakabilirsiniz, ayrıca buradan indirebilirsiniz.

toggleClass Fonksiyonu

Bu fonksiyon gerçekten çok yararlı bir fonksiyon, sınıf ekleme ve silme işlemlerini aynı fonksiyon bloğu içerisinde yapabiliyor.

$(function(){
   $("a").click(function(){
      $("p").toggleClass("kirmizi");
   });
});

Bu fonksiyonda önce kirmizi adlı fonksiyon <p> elementine ekleniyor, ardından siliniyor ve bu işlem istenilen sayıda tekrarlanıyor. Sonuca buradan bakabilir, buradan da indirip inceleyebilirsiniz.

html() Fonksiyonu

Bu fonksiyon istenilen-seçilen elementin içeriği üzerinde işlem yapmaktadır.

<p>Biraz paragraf, biraz da erik</p>

Elimizde yukarıdaki gibi bir HTML kodu olduğunu varsayalım ve elementin içeriğini geri döndürelim ;

$("p").html()

Tabii elementin içeriğini değiştirmeniz de mümkündür ;

$("p").html("İçeriği değiştirdim, artık erik yok kiraz var, üzgünüm...")

Benim anlatacağım niteleyici fonksiyonlar bu kadardı. Bu fonksiyonların dışında başka niteleyici fonksiyonlar da bulunmaktadır fakat fazla önemli olduğunu düşünmüyorum, eğer bakmak isterseniz sizi buraya alayım.

Yazı biraz uzun olmuş olabilir fakat gereksiz yere birşeyler yazdığımı düşünmüyorum. Umarım sizi sıkmamışımdır… :)

Benzer Yazılar

Yorumlar

Yorum Yazın

Su elementleri kullanabilirsiniz : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Arama
RSS
Beni yukari isinla