Bu metodla seçtiğimiz nesnenin özniteliklerine ulaşabilir, özelliğini değiştirebiliriz.
Örneğin nesnemizi resim olarak kabul edelim .Resmin başlığı,genişliği,yüksekliği özniteliği olur.
Ve attr() fonksiyonu bu gibi özelliklere ulaşmayı sağlar.
***Örnek Kod:***
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body>
<img src="prag.jpg" alt="" width="284" height="213" alt="" title="Gökyüzü" >
<br>
<button>attr</button>
<script>
$(document).ready(function(){
$("button").click(function(){
$("img").attr("width","500");
});
});
</script>
</body>
</html>
**Kodun Açıklaması:**
prag adlı resmin yükseklik ve genişliği img tagı içinde verildi.
$("img").attr("width","500");
img nesnesinin genişliğini attr ile 500 yapıyoruz.Resmin genişliğine ulaştık,varolan değeride değiştirebiliriz.
**Ekran alıntısı**
2) addClas() metodu:
Seçtiğimiz nesneye daha önceden tanımlı bir sınıf atar.
***Örnek Kod ***
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<style>
.a
{
font-size:150%;
color:red;
}
</style>
</head>
<body>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p:first").addClass("a");
});
});
</script>
<h1>ilk</h1>
<p>addClass la değisen</p>
<p>son</p>
<button>addClass</button>
</body>
</html>
***Kodun Açıklaması****
<style> tagında a sınıfı tanımlanıyor.size 150 ,renk kırmızı
$("button").click(function(){ // butona tıklandığında
$("p:first").addClass("a");// nesneye a sınıfının özellikleri atanır.
***Ekran Alıntısı***
Butona tıklanınca;
3) removeClass() metodu:
Seçilen nesnenin stil sınıfını kaldırır.
***Örnek Kod***
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<style >
.a
{
font-size:150%;
color:blue;
}
</style>
</head>
<body>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").removeClass("a");
});
});
</script>
<h1>ilk başlık</h1>
<p class="a">removeClass la özelliği geri alınacak</p>
<button>removeClass</button>
</body>
</html>
***Kodun Açıklaması***
<style > tagı içinde a sınıfının stil özellikleri tanımlanıyor.
$("button").click(function(){ // butona tıklandığında
$("p").removeClass("a");// a sınıfına ait stil sınıfını kaldır.
***Ekran Alıntısı***
Butona tıklanınca;
4) css() metodu:Seçilen nesnenin css özelliklerini değiştirmeye yarar.
*** Örnek Kod***
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
$("button").click(function(){
alert("text-decoration " + $("p").css("text-decoration"));
});
});
</script>
<h2>Sayfa css bilgisi veriyor</h2>
<h3><p style="text-decoration:underline">Baslık1</p></h3>
<button>css</button>
</body>
</html>
***Kodun Açıklaması***
alert metoduyla ,kullanıcıya uyarı mesajı veriliyor.
$("p").css("text-decoration")// seçilen nesnenin css metouyla le bir css özelliğine ulaşılıyor.
Burda yazı stili olan text-decoration hakkında bilgi veriliyor.
***Ekran Alıntısı***
Butona tıklandığında;
5) remove() metodu :
Seçilen nesneyi tamamen kaldırır.
***Örnek Kod****
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").remove();
});
});
</script>
<h1><p>Remove la kaldırılacak başlık</p></h1>
<button>remove</button>
</body>
</html>
***Kodun Açıklaması***
$("button").click(function(){/// butona tıklandığında
$("p").remove();///////seçilen nesneyi tamamen kaldır.
***Ekran Alıntısı***
6) append() metodu :
Nesnenin sonuna yeni nesne (html tagı veya resim gibi) eklemeyi sağlar.
***Örnek Kod***
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").append(" <b>sona eklendi</b>.");
});
$("#btn2").click(function(){
$("ol").append("<li>listede sona ekli</li>");
});
});
</script>
<p>Donanım</p>
<p>Yazılım</p>
<ol>
<li>java</li>
<li>JQuery</li>
<li>C#</li>
</ol>
<button id="btn1">yana ekle</button>
<button id="btn2">listeye ekle</button>
</body>
</html>
***Kodun Açıklaması***
$("#btn1").click(function(){
$("p").append(" <b>sona eklendi</b>.");
});///// buton1 e tıklandığında secili nesnenin sonuna , append metoduyla kalın yazı şeklinde
"sona eklendi" yaz.
***Ekran Alıntısı***
$("#btn2").click(function(){
$("ol").append("<li>listede sona ekli</li>");
}); // buton2 ye tıklandığında sıralı listenin sonuna ekle. *** Ekran Alıntısı***
Nesnenin önüne yeni nesne ,eleman (resim gibi) eklemeyi sağlar.
***Örnek Kod***
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").prepend("<b>Öne ekle</b>. ");
});
$("#btn2").click(function(){
$("ol").prepend("<li>listenin önüne ekle</li>");
});
});
</script>
<p>prependle önüne nesne eklenecek baslık</p>
<ol>
<li>Listem 1</li>
<li>Listem 2</li>
<li>Listem 3</li>
</ol>
<button id="btn1">yana ekle</button>
<button id="btn2">listeye ekle</button>
</body>
</html>
***Kod Açıklaması***
$("#btn1").click(function(){
$("p").prepend("<b>Öne ekle</b>. ");
});////////////buton1 e tıklandığında,prepend metoduyla,kalın yazıyla "öne ekle" yazısını nesnenin önüne ekle.
***Ekran Alıntısı***
$("#btn2").click(function(){
$("ol").prepend("<li>listenin önüne ekle</li>");
});
});/////// listeye ekle ye tıklanınca,listenin önüne ekle.
***Ekran Alıntısı***
8) html () metodu:
Html içeriğini görüntülemeye ve değiştirmeye yarar.
***Örnek Kod***
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").html("html le degisen baslık <i>Yeni italik baslık</i>");
});
});
</script>
<button>html</button>
<p>Değişecek başlık</p>
</body>
</html>
***Kodun Açıklaması***
$("button").click(function(){
$("p").html("html le degisen baslık <i>Yeni italik baslık</i>");//// butona tıklandığında, nesnenin
içeriğini görüntüler.
***Ekran Alıntısı***
Butona tıklandığında;
Seçilen nesneni bir value değeri varsa bu değeri almaya ve değiştirmeye yarar.
!!!!! <a>, <span>,<div> le val() metodunu kullanamayız.!!!!!!
***Örnek Kod***
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
$("button").click(function(){
$("input:text").val("abcddd");
});
});
</script>
<p>isim: <input type="text" name="user"></p>
<button>val</button>
</body>
</html>
***Ekran Alıntısı***
10) hasClass () metodu:
Seçilen nesne üzerinde belirtilen sınıf var mı yok mu kontrolünü yapar.
***Örnek Kod***
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<style >
.a
{
font-size:150%;
color:green;
}
</style>
</head>
<body>
<script>
$(document).ready(function(){
$("button").click(function(){
alert($("p").hasClass("a"));
});
});
</script>
<h1>Baslık1</h1>
<p class="a">Baslık2</p>
<button>hasClass</button>
</body>
</html>
***Kodun Açıklaması***
$("button").click(function(){
alert($("p").hasClass("a"));////butona tıklandığında secilen p nesnesini sınıf kontrolü hasClass metoduyla
yapılıyor. alert metoduylada kullanıcıya uyarı mesajı veriliyor. nesne üzerinde sınıf varsa "true" ,aksi takdirde
"false" değeri döndürülüyor.
***Ekran Alıntısı***
Butona tıklandığında şekildeki gibi mesaj geliyor.
Burdan nesne üzerinde sınıf olduğu "true" ile belirtiliyor.
Örneğin kod kısmında sınıfı değiştirirsek;
<h1>Baslık1</h1>
<p class="b">Baslık2</p>///// sınıfı artık "b" olarak tanımladık.şimdi çalıştırdığmızda;
<button>hasClass</button>//////şekildeki ekranı görüyoruz.
nesne üzerinde o sınıfın olmadığı anlaşılır.
Hiç yorum yok:
Yorum Gönder