<head>
<title>odev</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<style>
.stil
{
font-size:150%;
color:red;
}
</style>
</head>
<body>
<button class="btn1">attr</button> // bir görüntünün özelliklerini değiştir
<button class="btn2">addClass</button> //sınıf adı ekleyerek herhangi bir elementin stilini değiştir
<button class="btn3">removeClass</button> //eklenen stili kaldır
<button class="btn4">css</button> // ögelerin özelliklerini değiştir
<button class="btn5">remove</button> // eleman kaldır
<button class="btn6">append</button> // elemanların sonuna içerik ekle
<button class="btn7">prepend</button> // elemanların başına içerik ekle
<button class="btn8">html</button> // elemanların içeriğini değiştir
<button class="btn9">val</button> // alanın değerini değiştir
<button class="btn10">hasCalass</button> // stil adında sınıf olup olmadığını kontrol et
<ul>
<li>Gamze</li>
<li>ZIRH</li>
<li>Staj</li>
</ul>
<img src="Chrysanthemum.jpg" width="284" height="213">
<p> Isim: <input type="text" name="degistir"></p>
<script>
$(".btn1").click(function(){
$("img").attr("width","500");
});
$(".btn2").click(function(){
$("li:first").addClass("stil");
});
$(".btn3").click(function(){
$("li").removeClass("stil");
});
$(".btn4").click(function(){
$("li").css({"background-color":"yellow","font-size":"200%"});
});
$(".btn5").click(function(){
$("li").remove();
});
$(".btn6").click(function(){
$("ul").append("<li>Odev</li>");
});
$(".btn7").click(function(){
$("ul").prepend("<li>Odev</li>");
});
$(".btn8").click(function(){
$("li").html("Icerik Degisti");
});
$(".btn9").click(function(){
$("input:text").val("GAMZE ZIRH");
});
$(".btn10").click(function(){
alert($("li").hasClass("stil"));
});
</script>
</body>
</html>
İlk görünüm;
removeClass("stil") ile uygulanan değişiklik geri getirilir.
Hiç yorum yok:
Yorum Gönder