Bu yazımızda jQuery attr() ve removeAttr() metodlarının ne işe yaradığını ve nasıl kullanabileceğimizi öğreneceğiz.
attr() metodu ile seçmiş olduğumuz bir Html etiketinin niteliklerinden birinin değerini alabilir veya bu niteliğe bir değer verebiliriz.
removeAttr() metodu ile seçmiş olduğumuz bir Html etiketinin niteliklerinden istediğimiz birini silebiliriz.
Şöyle bir uygulama yapalım:
⇒ 1 p etiketi yazalım ve style niteliğine bazı Css özellikleri ekleyelim.
⇒ 1 a etiketi yazalım ve href niteliğine “https://www.google.com.tr/” yazalım.
⇒ Son olarak 3 buton oluşturalım.
⇒ Birinci butona tıklandığında attr() metodu ile a etiketinin href niteliğinin değerini alert mesajı ile gösterelim.
⇒ İkinci butona tıklandığında attr() metodu ile a etiketinin href niteliğinin değerini “https://www.yandex.com.tr/” ile değiştirelim.
⇒ Üçüncü butona tıklandığında removeAttr() metodu ile p etiketinin style niteliğini silelim.
Html Kodları
|
1 2 3 4 5 6 7 8 9 |
<button id="attr-get">a etiketinin href degerini goster</button> <button id="attr-set">a etiketinin href degerini degistir</button> <button id="remove-attr">p etiketinin style niteligini sil</button> <p style="font-size: 24px;color:blueviolet;font-weight: bold">Lorem ipsum dolor.</p> <a href="https://www.google.com.tr/">Google</a> |
Css Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<style> body { margin: 20px; font-size: 18px; } button { padding: 10px; margin-right: 8px; margin-bottom: 15px; background-color: tomato; color: #fff; border: none; cursor: pointer; font-size: 16px; } a { font-size: 22px; } </style> |
jQuery Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function() { $("#attr-get").click(function() { var href = $("a").attr("href"); alert(href); }); $("#attr-set").click(function() { $("a").attr("href", "https://www.yandex.com.tr/"); }); $("#remove-attr").click(function() { $("p").removeAttr("style"); }); }); </script> |
Butonlara tıklarken tarayıcınızda sağ tıklayıp incele derseniz Html etiketleri üzerindeki değişiklikleri inceleyerek daha iyi anlayabilirsiniz.
attr() metodu ile bir niteliğe birden fazla değer eklemek isterseniz şu şekilde yapabilirsiniz:
Örneğin id’si link olan bir a etiketinin href niteliğinin değerine, “https://www.google.com/” ve title niteliğinin değerine “Google” verelim.
|
1 2 3 4 5 6 |
$("#link").attr({ "href" : "https://www.google.com/", "title" : "Google" }); |
Umarım “jQuery attr(), removeAttr() Metodları ve Kullanımları” başlıklı yazım sizin için faydalı olmuştur.
Şu yazılar da ilginizi çekebilir.
jQuery remove() Metodu ve Kullanımı
jQuery css() Metodu ve Kullanımı
Yeni bir yazımda görüşmek üzere.
, removeAttr() Metodları ve Kullanımları){kind=link}