<head>
<title>odev</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body> //Buton isimleri belirlendi.
<button class="btn1">Hide</button>
<button class="btn2">Show</button>
<button class="btn3">Fade out</button>
<button class="btn4">Fade in</button>
<button class="btn5">Fade to</button>
<button class="btn6">Slide up</button>
<button class="btn7">Slide down</button>
<button class="btn8">Animate</button>
<button class="btn9">Each</button>
<button class="btn10">For</button>
<button class="btn11">Size</button>
<ul> //Komutlara uyacak olan bilgiler
<li>Gamze</li>
<li>ZIRH</li>
<li>Staj</li>
</ul>
<script>
$(".btn1").click(function(){
$("li").hide('slow'); // Tıklanınca ekrandan sil
});
$(".btn2").click(function(){
$("li").show('slow'); // Tıklanınca ekrana getir
});
$(".btn3").click(function(){
$("li").fadeOut('slow'); // Tıklanınca yavaşça kaybet
});
$(".btn4").click(function(){
$("li").fadeIn('slow'); // Tıklanınca yavaşça getir
});
$(".btn5").click(function(){
$("li").fadeTo("slow",0.4); // Tıklanınca 0.4 oranında soluklaştır
});
$(".btn6").click(function(){
$("li").slideUp(); // Tıklanınca yukarı doğru kaybet
});
$(".btn7").click(function(){
$("li").slideDown(); // Tıklanınca aşağı doğru geri getir
});
$(".btn8").click(function(){
$("li").animate({width:'400px',height:'300px'}); // Tıklanınca stil,görünüm vb değiştir
});
$(".btn9").click(function(){
$("li").each(function(){
alert($(this).text()) // Tıklanınca her birini alarm şeklinde getir(döngü)
});
});
$(".btn10").click(function(){
for(i=1;i<=3;i++)
{
document.write("<h"+i+">Gamze"+i);
document.write("</h"+i+">") // Tıklanınca döngü ile 3 adet Gamze yazısı getir
}
});
$(".btn11").click(function(){
alert($("li").size()); // Tıklanınca ekranda bulunanların sayısı
});
</script>
</body>
</html>
Hiç yorum yok:
Yorum Gönder