==>hide(): HTML elementlerini gizlemeye yarayan komut.
==>show(): Gizlenmiş HTML elementlerini gösteren komut.
==>fadeIn(): HTML elementlerinin görüntülenmesini sağlar.
==>fadeOut(): HTML elementlerinin kaybolmasını sağlar.
==>fadeTo(): HTML elementlerinin saydamlığını değiştirir.
==>slideDown(): HTML elementlerinin kapanmasını sağlar.
==>slideUp(): HTML elementlerinin açılmasını sağlar.
==>animate():Tüm sayısal CSS komutları ile animasyon oluşturmamızı sağlar.
==>each(): jQuery nesnesi üzerinde iteratif (döngüsel) işlemleri gerçekleştirmek adına kullanılan bir fonksiyondur
==>for():Jquery de döngü oluşturmayı sağlar.
==>size():Seçilen HTML elementinin sayısını verir.
<html>
<head>
<title>5 Eylül </title>
<script src="http:\\code.jquery.com/jquery-1.10.1.min.js"></script>
<style>
.hide{background:pink;color:white}
.show{background:#103;color:white}
.fadeout{background:green;color:white}
.fadein{background:orange;color:white}
.fadeto{background:blue;color:white}
.slideup{background:#222;color:white}
.slidedown{background:#DA0;color:white;}
.each{background:#A67009; color:white;}
.size{background:#567000; color:white;}
.animate{background:#102F93; color:white;}
.for{background:#F02093; color:white;}
.yazi{ color:red; text-align:center; cursor:pointer;font-weight:bolder; width:300px; }
</style>
</head>
<body bgcolor="007fff">
<center>
<button class="hide" id="hide" >Hide</button><br><br>
<button class= "show " id="show" >Show</button><br><br>
<button class="fadeout" id="fadeout"> fadeOut</button><br><br>
<button class="fadein" id="fadein" >fadeIn</button><br><br>
<button class="fadeto" id="fadeto">fadeTo</button><br><br>
<button class="slideup" id="slideup" >SlideUp</button><br><br>
<button class="slidedown"id="slidedown" >SlideDown</button><br><br>
<button class="each"id="each" >Each</button><br><br>
<button class="size" id="size" >Size</button><br><br>
<button class="animate" id="animate" >Animate</button><br><br>
<button class="for" id="for" >For</button><br><br>
<div class='resim2'><img src=" resim2.jpg" border="2" width="300" height="300" ></div>
<label class='yazi'>each ile rengi siyaha değişecek yazı </label>
</center>
<script>
$('#hide').click(function(){
$('div.resim2').hide();
});
$('#show').click(function(){
$('div.resim2').show();
});
$('#fadeout').click(function(){
$('div.resim2').fadeOut('slow');
});
$('#fadein').click(function(){
$('div.resim2').fadeIn('slow');
});
$('#fadeto').click(function(){
$('div.resim2').fadeTo('slow',0.7);
});
$('#slideup').click(function(){
$('div.resim2').slideUp();
});
$('#slidedown').click(function(){
$('div.resim2').slideDown();
});
$('#size').click(function(){
var say=$('button').size();
alert(say);
});
$('#each').click(function () {
$( 'label.yazi' ).each(function (i) {
if ( this.style.color!= "white" ) {
this.style.color = "black";
} else {
this.style.color = "orange";
}
});
});
$('#animate').click(function(){
$('div').animate({
width: '50px',
height: '50px'})
});
$("#for").click(function()
{
for(i=1;i<4;i++)
{
document.write("<h"+i+">for"+i);
document.write("</h"+i+">")
}
});
</script>
</body>
</html>
Hiç yorum yok:
Yorum Gönder