jQuery attr Kullanımı

Yazıda HTML elemanlarına ait özelliklerin değerini almak ve değiştirmek için kullanılan attr metodu kullanımı çeşitli örneklerle anlatılmıştır.

HTML elemanlarına çeşitli öznitelik ekleyerek nesneye yeni özellikler kazandırılır.

Sayfaya bağlantı vermek için kullanılan a etiketinin href özniteliği metne tıklandığında gideceği adresi belirtmek için kullanılır.

jQuery ile HTML elemanlarına ait öznitelik değerini almak veya değiştirmek için attr metodu kullanılır.

<a href="https://www.yusufsezer.com.tr" title="Yusuf SEZER" id="baglanti">Siteye git</a>

Siteye git metnine tıklandığında hangi adrese gideceğini bulmak için href özniteliğini attr metodu ile alabiliriz.

<script>
"use strict";
  $(function() {
      let adres = $("#baglanti").attr("href");
      alert("Bağlantı adresi : " + adres);
  });
</script>

NOT: jQuery kütüphanesi eklendiği varsayılmıştır.

Örnekte id değeri baglanti olan etiket seçilmiş attr metodu ile href öznitelik değeri alınmıştır.

Etiketin title özniteliği alınmak istenirse attr parametresine title yazılması yeterli olacaktır.

Öznitelik değerini değiştirmek için attr metodunun ikinci parametresine özniteliğin alacağı değeri yazmamız yeterli olacaktır.

<input type="text" value="" id="giris" />
<input type="button" value="Değiştir" id="degistir" />

Değiştir butonuna tıklandığında id değeri giris olan HTML elamanının value değerini değiştirelim.

<script>
"use strict";
  $(function() {
    $("#degistir").on("click", function() {
      $("#giris").attr("value", "Merhaba jQuery");
    });
  });
</script>

Örnekte id değeri degistir olan etikete tıklandığında id değeri giris olan etiketin value değeri Merhaba jQuery olacaktır.

Birden fazla öznitelik eklemek ve değiştirmek için öznitelikler nesne olarak {} yazılır.

<script>
"use strict";
  $(function() {
    $("#degistir").on("click", function() {
      $("#giris").attr({
        value: "Merhaba jQuery",
        disabled: true
      });
    });
  });
</script>

Örnekte seçilen elemanın value özniteliği değiştirilmiş ve disabled özniteliği eklenmiştir.

jQuery attr metodu ile ilgili basit bir şifre göster uygulaması yapalım.

<label for="adi">Adınız : </label>
<input type="text" name="adi" />
<label for="sifre">Şifreniz : </label>
<input type="password" id="sifre" value="Şifreniz" />
<input type="submit" value="Gönder" />

Kullanıcı, adı ve şifresi ile giriş yapacağı bir form uygulamasında, şifre yazmaya başladığında şifre alanının type özniteliğini text yaparak kullanıcının şifreyi görerek girmesini sağlayalım.

Şifreyi girdikten sonra type alanını tekrar password olarak değiştirerek girilen şifrenin görünürlüğünü kaldıralım.

<script>
"use strict";
  $(function() {
    $("#sifre").on("focus", function() {
      $(this).attr("type", "text");
    });

    $("#sifre").on("blur", function() {
      $(this).attr("type", "password");
    });
  });
</script>

Hayırlı günler dilerim.