1. jQuerry Nedir?
jQuery, John Resig tarafından 2006 yılında geliştirilmiş ve şu an geniş bir jQuery ekibi tarafından gelişimi
sürdürülen bir açık kaynak javascript kütüphanesidir.
jQuery en popüler çapraz-paltform JavaScript kütüphanesidir. Ya da farklı bir JavaScript
Framework'üdür. İstemci taraflı dinamik programlama yapmasını kolaylaştırmak ve standartlaştırmak için
tasarlanmış ve tamamen Javascriptdili ile geliştirilmiştir. HTML5, CSS, Microsoft Visual Studio, asp.net, mvc, ajax
ve efekt gibi yerlerde de jQuery desteği vardır. jQuery yoğun olarak animasyonlarda kullanılır. Flash'ın alternatifi
olarak kullanılan bu teknoloji ile foto galeri, tab menü, sayfa geçişleri, slâyt gibi birçok işlem yapılmaktadır.
jQuery boyutu ufak ve işlevi çok olduğundan ayrıca hazır eklentileri de ç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 sosyal ağı Facebook jQuery teknolojisi de kullanmaktadır. Jquery'nin site ya da uygulama içerisinde
sağladığı başlıca yararları şunlardır;
Nesne seçimlerini ve etkilenmelerini hızlandırır.
Html içinde animasyon yapımını kolaylaştırır.
Css ile birlikte kusursuz çalışır.
jQuery kütüphanesi kullanılarak geliştirilen jqueryui gibi daha gelişmiş ara yüzleri ve araçları daha kolay
kullanabilmemize imkân veren ek kütüphanelerde mevcuttur.
Kullanımı gitgide yaygınlaşan bu teknolojinin bu kadar çok sevilmesinin belki de en büyük
sebepleri, hız, performans, kullanım kolaylığı ve kodları inanılmaz şekilde kısaltmasıdır. Hatta bu durum
JQuery’nin sloganını oluşturmaktadır: Az yaz, çok iş…
jQuery kullanan bazı siteler; Sosyal haber sitesi Digg, açık kaynak kodlu projelere ev sahipliği yapan
SourceForge, blog sitelerini analiz eden Technorati, RSS kaynaklarımızı yönettiğimiz FeedBurner ve
birçoğumuzun kullandığı blog yazılımı WordPress.
jQuery ve Seo
Flash kullananlar bilirler,websiteleri için flash kullanmak SEOaçısından pek istenilen bir durum değildir.
Çünkü flash objesinin içeriği google için değerli değildir. JQuery’de ise durum biraz farklıdır. JQuery bir javascript
kütüphanesi olduğundan, okunamayan içerik durumu söz konusu değildir. Yani işin özü, JQuery tamamen SEO
uyumlu bir teknolojidir.
JQuery Nasıl Kullanılır?
JQuery sadece 1 dosyadan oluşan .js uzantılı bir dosyadır. Sürekli güncellenen bu dosyayı JQuery nin
resmi sitesinden indirebilirsiniz.İndirme işleminden sonra artık dosyayı kendi sayfanıza entegre etmeye gelmiştir.
jQuery ile çalışırken ilk olarak jQuery kütüphanesini sayfaya tanıtmalıyız. Bu işlem genellikle sayfanın
head tagları arasında gerçekleşmektedir. Entegre işleminde indirdiğiniz dosyanın yolunu göstermelisiniz.
<script type="text/javascript" src="latest-jquery.js"></script>
Şimdi birkaç jQuery örneğine göz atalım:
2. 1)Butona tıklayarak hide() metodu ile <p> olarak tanımlanan öğeleri gizleyelim.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
3. 2) Butona tıklayarak hide() metodu ile id=”test” olarak tanımlanan öğeleri
gizleyelim.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
4. 3) Butona tıklayarak hide() metodu ile tipi ne olursa olsun “class=test” olarak
tanımlanan nesneleri gizleyelim.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
</script>
</head>
<body>
<h2 class="test">This is a heading</h2>
<p class="test">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
5. 4) Butona tıklayarak hide() metodu ile tıklanılan butonun kendini gizleyelim.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
6. 5)Herhangi bir nesneye tıklayarak hide() ve click() metodları ile o nesneyi
gizleyelim.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>
7. 6) Herhangi bir nesneye tıklayarak hide() ve dblclick() metodları ile o nesneyi
gizleyelim.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you double-click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>
8. 7) Bir nesnenin üstüne geldiğimizde mouseenter() metodu ile uyarı verdirelim.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
});
</script>
</head>
<body>
<p id="p1">Enter this paragraph.</p>
</body>
</html>
9. 8) Bir nesnenin üstünden ayrıldığımızda mouseleave() metodu ile uyarı
verdirelim.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});
});
</script>
</head>
<body>
<p id="p1">This is a paragraph.</p>
</body>
</html>
10. 9) Bir nesnenin üstüne gelindiği zaman hover() metodu uyarı veren ve
ayrılırken uyarı verdirelim.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
});
</script>
</head>
<body>
<p id="p1">This is a paragraph.</p>
</body>
</html>
12. 11) Bir nesneye tıklanıldığı zaman o nesneyi hide() metodu ile gizleyelim.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>
13. 12) Hide butonuna tıkladığımız zaman hide() metodu ile nesneleri gizleyen
show butonuna tıkladığımız zaman show() metodu ile nesleri gösterelim.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>
14. 13) toggle() metodu ile nesneleri hem gizleyelim hem de gösterelim.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<button>Toggle</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>
</html>
17. 16)Bir nesneye tıklayarak slideToggle() metodu ile bir pencereyi açıp
kapatalım.
<!DOCTYPE html>
<html>
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11
.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
<style>
#panel,#flip {
padding:5px;
text-align: center;
background-color:#e5eecc;
border: solid 1px#c3c3c3;
}
#panel {
padding:50px;
display:none;
}
</style>
</head>
<body>
<div id="flip">Click to slide the panel down or
up</div>
<div id="panel">Hello world!</div>
</body>
</html>
18. 17) Butona tıkladığımızda animate() komutu ile bir nesneyi kapatıp açalım.
<!DOCTYPE html>
<html>
<head>
<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position,and cannotbe moved. To manipulate the position,
remember to firstsetthe CSS position property of the elementto relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>
19. 18) Butona tıkladığımızda birden fazla animasyon yaptıralım.
<!DOCTYPE html>
<html>
<head>
<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div = $("div");
div.animate({height:'300px', opacity: '0.4'}, "slow");
div.animate({width:'300px', opacity: '0.8'}, "slow");
div.animate({height:'100px', opacity: '0.4'}, "slow");
div.animate({width:'100px', opacity: '0.8'}, "slow");
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position,and cannotbe moved. To manipulate the position,
remember to firstsetthe CSS position property of the elementto relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>
20. 19) Bir nesneye tıklayarak bir pencereyi açalım aynı zamanda o pencereyi
açarken durduralım.
<!DOCTYPE html>
<html>
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11
.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown(5000);
});
$("#stop").click(function(){
$("#panel").stop();
});
});
</script>
<style>
#panel,#flip {
padding:5px;
font-size: 18px;
text-align: center;
background-color:#555;
color: white;
border: solid 1px#666;
border-radius:3px;
}
#panel {
padding:50px;
display:none;
}
</style>
</head>
<body>
<button id="stop">Stop sliding</button>
<div id="flip">Click to slide down panel</div>
<div id="panel">Hello world!</div>
</body>
</html>
