jQuery İle Elementlerin ve Özniteliklerin İçeriklerini Almak

jQuery ile elementlerin ve inputların değerlerine ulaşmak için 3 metot bulunmaktadır. Bazı olaylarda elementlerin içeriğindeki verilere göre işlem yapmamız gerekebilir. Mesela benim sıklıkla kullandığım veri düzenleme ve silme işlemlerinde sileceğim verinin idsini genellikle hidden bir inputa koyarım ve oradan çekerim. Bunun gibi örnekler çoğaltılabilir.

jQuery DOM Manipülasyonu

JQuery'nin en önemli özelliği, DOM'u manipüle edebilmesidir.

Dom nedir diye soracak olusanız açılımı şu şekildedir.

DOM = Document Object Model

DOM Document Object Model kelimesinin kısaltılmasından gelir ve Türkçe karşılığı Belge Nesne Modelidir.

Jquery text Metodunun Kullanımı

text metodu şu işe yarar. Seçtiğimiz elementin içerisindeki metni alabiliriz veya ona metin ekleyebiliriz.

Örnek kullanımı aşağıdaki gibidir.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    alert("Text: " + $("#test").text());
  }); 
});
</script>
</head>
<body>
<p id="test">Bu basit bir paragraf</p>
<button id="btn1">Metni Göster</button>
</body>
</html>

Metni göster butonuna tıkladığınızda alert olarak karşınıza bu basit bir paragraf yazısı çıkacaktır.

jQuery Val Metodu Kullanımı

jQuery val metodu ise form elemanlarının değerine ulaşmamızı ve değerlerini değiştirmemizi sağlar. Temel kullanımı şu şekildedir.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
    alert($('#metin').val());
  }); 
});
</script>
</head>
<body>
<input type="text" name="" id="metin" value="zafer">
<button id="btn1">Metni Göster</button>
</body>
</html>

jQuery html Metodunun Kullanımı

Html metodu ise bir elementin içerisinde var olan tüm değerleri getirir. Html öğeleri de dahil.

Temel kullanımı şu şekildedir.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
    alert($('p').html());
  }); 
});
</script>
</head>
<body>
<p>
  <div></div>
</p>
<button id="btn1">İçeriğe Bak</button>
</body>
</html>

jQuery attr Metodu Kullanımı

jQuery'de özniteliklerin değerini almak için attr metodu kullanılır. Öznitelikler elementin kapama parantezinden önce yazılan kısımlarıdır. Mesela href,id,class birer özniteliktir.

Temel Kullanımı Şu şekildedir.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert($("#kodlamaklazim").attr("href"));
  });
});
</script>
</head>
<body>
<p><a href="https://www.w3schools.com" id="kodlamaklazim">kodlamaklazim.com</a></p>
<button>Href attributesinin değerini göster</button>
</body>
</html>



YAZAR HAKKINDA

26 Yaşında. Araştırmayı seven, bir şeyler öğretmeye meraklı bir Bilgisayar Mühendisi

0 YORUM

Bu konuya henüz yorum yapılmamış

Yorum Yap

@COPYRIGHT KodlamakLazım Tüm Hakları Saklıdır.