Bu yazımızda jQuery’de get() metodunun ne işe yaradığını ve nasıl kullanabileceğimizi öğreneceğiz.
get() metodu ile istediğimiz bir Html öğesini seçip, o öğe ile ilgili bilgilere ulaşabiliriz.
⇒ Şimdi 1 button etiketi, 3 p etiketi ve 1 h3 etiketi yazalım.
⇒ Butona tıklandığında işlemlerimizi başlatalım.
⇒ get() metoduna parametre olarak 1 değerini verelim. Böylece index numarası 1 olan p etiketini seçmiş olacağız.
⇒ Seçmiş olduğumuz bu p etiketinin bazı özelliklerine ulaşabiliriz. Örnek olması adına biz nodeName ve innerHTML özelliklerine erişip istediğimiz bilgileri elde edelim.
⇒ Elde ettiğimiz bu bilgileri de h3 etiketinin içerisine yazdıralım.
Html Kodları
|
1 2 3 4 5 6 7 8 9 10 11 |
<button id="get">index'i 1 olan p etiketinin bilgilerini getir</button> <p>Lorem ipsum dolor sit amet. (index 0)</p> <p>Lorem ipsum dolor. (index 1)</p> <p>Lorem ipsum dolor sit. (index 2)</p> <h3></h3> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> |
Css Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<style> button { padding: 10px; background-color: cornflowerblue; color: #fff; border: none; cursor: pointer; font-size: 16px; } </style> |
jQuery Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script> $(document).ready(function() { $("#get").click(function() { var item = $("p").get(1); $("h3").html("nodeName : " + item.nodeName + "<br>" + "innerHtml : " + item.innerHTML); }); }); </script> |
Butona tıklayarak örneğimizi inceleyebilirsiniz.
Umarım sizin için faydalı bir yazı olmuştur.
Şu yazılar da ilginizi çekebilir.
jQuery fadeOut(), fadeIn(), fadeToggle(), fadeTo() Metodları ve Kullanımları
jQuery addClass(), removeClass(), toggleClass() Metodları ve Kullanımları
Yeni bir yazımda görüşmek üzere.
 Metodu ve Kullanımı){kind=link}