Staj Bilgileri: JQERY,HTML,CSS

JQERY:

JQERY bir javascript kütüphanesidir.Ya da farklı bir JavaScript Framework'üdür denebilir. jQuery yoğun olarak animasyonlarda kullanılır. Flash'ın alternatifi olarak kullanılan bu teknoloji ile Flash galeri, Tab menü, Sayfa geçişleri gibi birçok işlem yapılmaktadır.

ÖRNEK KOD:

<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<style>
* {margin:0; padding:0;}
ul{width:950px; text-align:center;}
ul li{float:left;background:red; display:inline-block; margin: 5px; position:relative;}
</style>
</head>
<body>

<ul >
<li><a href="#" >ANASAYFA</a></li>
<li><a href="#" >HAKKIMDA</a></li>
<li><a href="#" >ILETISIM</a></li>
<li><a href="#" >URUNLER</a></li>
<li><a href="#" >HABERLER</a></li>
</ul>
<ul class="sirala">
<li><a href="#" >ANASAYFA</a></li>
<li><a href="#" >HAKKIMDA</a></li>
<li><a href="#" >ILETISIM</a></li>
<li><a href="#" >URUNLER</a></li>
<li><a href="#" >HABERLER</a></li>
</ul>
<button id="hide" >HIDE</button>
<button id="show">SHOW</button>
<button id="fadeout">FADEOUT</button>
<button id="fadein">FADEIN</button>
<button id="fadeto">FADETO</button>
<button id="slideup">SLIDEUP</button>
<button id="slidedown">SLIDEDOWN</button>
<button id="animate">ANIMATE</button>
<button id="each">EACH</button>
<script>
$('#hide').click(function(){
$('a').hide();
})
$('#show').click(function(){
$('a').show();
})
$('#fadeout').click(function(){
$('a').fadeOut('slow') ;
});
$('#fadein').click(function(){
$('a').fadeIn('slow') ;
});
$('#fadeto').click(function(){
$('a').fadeTo('slow') ;
});
$('#slideup').click(function(){
$('a').slideUp('slow') ;
});
$('#slidedown').click(function(){
$('a').slideDown('slow') ;
});
$('#animate').click(function(){
$('a').animate({
width: "70%", opacity: 0.4, marginLeft: "0.6in", fontSize: "1em", borderWidth: "5px" }, 1000 );
});
$('#each').click(function(){
$('li').each(function(index,element){
$(element).text("sirala"+index);
$(element).css("background-color","red");
});
});
var sayi=$('li').size(); alert(sayi);
</script>

</body>
</html>

EKRAN ÇIKTISI: