jQuery 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.
jQuery'nin resmi sitesinden jQuery dosyasını indirip web sitemize yükleyebiliriz.jQuary boyutu ufak ve işlevi çok olduğundan ayrıca hazır etiketleride çok olduğundan çok yaygındır.2006 yılından beri kullanılan jQuery 2012 yılına kadar inanılmaz bir kullanım artışı göstermiştir.Bugün dünyanın en büyük paylaşım sitesi Facebook jQuery teknolojisi de kullanmaktadır.jQuery kütüphanesi kullanılarak geliştirilen jqueryui gibi daha gelişmiş arayüzleri ve araçları daha kolay kullanabilmemize imkan veren ek kütüphanelerde mevcuttur.
jQuery.html
<html>
<head>
<title>JQERY</title>
<style>
div { background:#def3ca; margin:3px; width:80px; display:none; float:left; text-align:center; }
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<button id="show">Show</button>
<button id="hide">Hide</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>
<button id="size">Size</button>
<button id="for">For</button>
<div id="div1" style="width:80px;height:40px;background-color:red;">Hakkinda</div>
<div id="div2" style="width:80px;height:40px;background-color:green;">Ana Sayfam</div>
<div id="div3" style="width:80px;height:40px;background-color:blue;">Resimler</div>
<div id="div4" style="width:80px;height:40px;background-color:yellow;">Arkadaslar</div>
<script>
//show kullanımı
$("#show").click(function () {
$("div").first().show("fast", function showNext() {
$(this).next("div").show("fast", showNext); });
});
//fadeOut kullanımı
$("#fadeOut").click(function () {
$("div").first().fadeOut("fast", function showNext() {
$(this).next("div").fadeOut("fast", showNext); });
});
//fadeIn kullanımı
$("#fadeIn").click(function () {
$("div").first().fadeIn("fast", function showNext() {
$(this).next("div").fadeIn("fast", showNext); });
});
//fadeTo kullanımı
$("#fadeTo").click(function () {
$("#div1").fadeTo("slow",0.5);
$("#div2").fadeTo("slow",0.5);
$("#div3").fadeTo("slow",0.5);
$("#div4").fadeTo("slow",0.5);
});
//slideUp kullanımı
$("#slideUp").click(function () {
$("#div1").slideUp("slow");
$("#div2").slideUp("slow");
$("#div3").slideUp("slow");
$("#div4").slideUp("slow");
});
//slideDown kullanımı
$("#slideDown").click(function () {
$("#div1").slideDown("slow");
$("#div2").slideDown("slow");
$("#div3").slideDown("slow");
$("#div4").slideDown("slow");
});
//hide kullanımı
$("#hide").click(function () {
$("div").hide(1000);});
//animate kullanımı
$("#animate").click(function(){
$('#div1').animate({'width': '200px'}, 500);
$('#div2').animate({'width': '200px'}, 500);
$('#div3').animate({'width': '200px'}, 500);
$('#div4').animate({'width': '200px'}, 500);
})
//each kullanımı
$("#each").click(function(){
$("div").each(function(index,domEla){
$(domEla).css("backgroundColor","red");
if($(this).is("#div3")){
alert(index+1);
return false;
}
});
});
//size kullanımı
$("#size").click(function(){
var sayi=$('div').size();
alert(sayi);
});
//for kullanımı
$("#for").click(function(){
for(i=1;i<=6;i++)
{
document.write("<h"+i+">Baslik"+i);
document.write("</h"+i+">")
}
});
</script>
</body>
</html>
show: Show metodu, kapalı bir şeyi göstermeye yarar.Show button'una tıklandığında ekran görüntüsü aşağıda gösterilmiştir.
hide: Hide metodu,açık bir şeyi göstermemeye yarar.Hide button'una tıklandığında ekran görüntüsü aşağıda gösterilmiştir.
fadeIn:FadeIn metodu,kapalı bir şeyi show'dan farklı bir efekt' te göstermeye yarıyor. FadeIn button'una tıklandığında ekran görüntüsü aşağıda gösterilmiştir.
fadeOut: FadeOut metodu,açık bir şeyi hide'den farklı bir efekt'te kaybetmeye yarıyor. FadeOut button'una tıklandığında ekran görüntüsü aşağıda gösterilmiştir.
fadeTo: FadeTo görünen bir şeyi saydamlaştırıyor. FadeTo button'una tıklandığında ekran görüntüsü aşağıda gösterilmiştir.
slideUp: SlideUp yukarı doğru görünmez yapıyor. SlideUp button'una tıklandığında ekran görüntüsü aşağıda gösterilmiştir.
slideDown: SlideDown aşağı doğru görünür yapıyor. SlideDown button'una tıklandığında ekran görüntüsü aşağıda gösterilmiştir.
animate:Animate yana doğru genişletiyor. Animate button'una tıklandığında ekran görüntüsü aşağıda gösterilmiştir.
each: Each for döngüsü gibi bir döngüdür.İstenilen yere kadar yapmak istediğimiz şeyi yapar.Each button'una tıklandığında ekran görüntüsü aşağıda gösterilmiştir.
size: Size yapılan bir işlemin kaç defa yapıldığını veriyor yani sayısını verir. Size button'una tıklandığında ekran görüntüsü aşağıda gösterilmiştir. Örn: Burada div lerin sayısını vermiş.
for: For,başlangıç ve bitişi olan , belirli aralıklarla işlem yapan bir döngüdür. For button'una tıklandığında ekran görüntüsü aşağıda gösterilmiştir.
Hiç yorum yok:
Yorum Gönder