JQuery Nedir ?
Jquery bir javascript kütüphanesidir. Ya da bir javascript frameworküdür diyebiliriz. Daha çok sayfalardaki animasyonlar için Flash alternatifi olarak kullanılan bu teknoloji ile, slaytlar, foto galeriler, tab menüler yapmak oldukça kolaydır.
JQuery ve CSS’in içiçe kullanılır.Bu iki dil sanki birbirleri için yaratılmış. Öyle ki CSS ile yaptığınız statik siteleri, JQuery ile bir adım ileri götürerek görsel açıdan zengin, animasyonlu bir site haline getirebilirsiniz.
JQuery artık birçok sitede kullanılmaya başlandı. WordPress buna en basit ve çarpıcı örnektir. 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, fazlasını yap…
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.
<script type="text/javascript" src="latest-jquery.js"></script>
Entegre işleminde indirdiğiniz dosyanın yolunu göstermelisiniz.Kodu Çalıştırmak
Çoğu Javascript programcısının yaptığı ilk şey aşağıdakine benzer bir kodu programına eklemektir:
1
| window.onload = function(){ alert("hosgeldiniz"); } |
Bu iki problemi aşmak için ise jQuery basit bir komuta sahip, bu komutla document statüsü kontrol ediliyor, kod dosya kullanılmaya uygun olana kadar bekliyor, bu ayrıca ready event olarak da biliniyor.
1
2
3
| $(document).ready(function(){ // Kodunuz buraya }); |
1
2
3
4
5
| $(document).ready(function(){ $("a").click(function(event){ alert("Ziyaret ettiğiniz için teşekkürler!!"); }); }); |
Click ve çoğu event‘de olduğu gibi event.preventDefault() ile öntanımlı davranışı engelleyen bir handler ekleyebilirsiniz.
1
2
3
4
5
6
| $(document).ready(function(){ $("a").click(function(event){ alert("Gördüğünüz gibi bağlantı artık sizi Alastyr.com'a yönlendirmiyor. "); event.preventDefault(); }); }); |
Komple Örnek
Komple HTML dosyasının nasıl olacağına dair bir örnek aşağıda verildi. Lütfen Google CDN‘e giden bağlantıların jQuery core dosyasını yüklediğine dikkat edin.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery demo</title> </head> <body> <a href="http://www.alastyr.com/">Alastyr</a> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <script> $(document).ready(function(){ $("a").click(function(event){ alert("Gördüğünüz gibi bağlantı sizi artık Alastyr.com'a yönlendirmiyor."); event.preventDefault(); }); }); </script> </body> </html> |
HTML Class Ekleme ve Silme
Önemli: jQuery örneklerimizin geri kalanı yukarıda belirtilen ready eventi içerisine eklenecektir. İsterseniz tekrar Sayfa Yüklendiğinde Kodu Çalıştırmak bölümüne göz atabilirsiniz.
Bir diğer yaygın iş ise class ekleyip silme işlemidir.İlk olarak dosyanızın <head> bölümüne biraz stil ekleyin, aşağıdaki gibi:
1
2
3
| <style> a.test { font-weight: bold; } </style> |
1
| $("a").addClass("test"); |
1
| $("a").removeClass("test"); |
Özel Efektler
jQuery işinize yarayabilecek birkaç tane yararlı efekte olanak sağlıyor. Test etmek için daha önce eklemiş olduğunuz click’de aşağıdaki değişikliği yapın:
1
2
3
4
| $("a").click(function(event){ event.preventDefault(); $(this).hide("slow"); }); |
Jquery Event .click()
Javascript deki .bind('click', handler) ve .trigger('click') yerine kullanılır. Belirlenen öğenin fare (mouse) ile tıklanıp bırakılması eylemini yakalar ve ona göre işlem yapar. Herhangi bir html öğesi ile bu olay tetiklenebilir.Örneğin basitçe sadece bir öğenin otomatik olarak tıklanmasını sağlayabilir.
$('#button').click();Ya da bu tıklanma olayını başka bir tıklanma ile tetikleyebilirsiniz:
$('#start').click(function(){Başka bir bütün örnek görmek gerekirse:
$('#button').click();
});
<!DOCTYPE html><html><head><style>p { color:red; margin:5px; cursor:pointer; }</style><script src="http://code.jquery.com/jquery-latest.js"></script></head><body><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p><script>$("p").click(function () {$(this).slideUp();});</script></body></html>jQuery .Hover Kullanımı
Herhangi bir nesnenin fare ile üzerine gelme ve üzerinden ayrılma (over / out) işlemi için jQuery’de bu api kullanılabilir. Bu işlem için farklı api’lerde mevcuttur.
Gayet açık bir kullanım şekli mevcut. Bunun yanında sadece fare gelince şeklinde de kullanılabilir. Bunun için de;
$("#nesne").hover(function() {// fare gelince (over) yapılacaklar..},function() {// fare gidince (out) yapılacaklar..});
$("nesne").hover(function() {// fare gelince (over) işlemi yap ve bitir..});jQuery .attr Kullanımı
Herhangi bir nesnenin (tag) alt özelliği üzerinde oynama yapmak için kullanılan jQuery api’sidir.
Örneklerde de gördüğünüz gibi tagların alt özelliklerini değiştirmeye yarıyor.
$('#resim').attr('src','/resimler/menu-on.png');..veya..$('#nesne a').attr('href','/yeni-link.html');..veya..$('button').attr('disabled','disabled');
JQUERY KODLARI
<html>
<head>
<title> 4 Eylul</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<style>
.ezgi{padding:100px 500px;display:block;background:Yellow;}
</style>
</head>
<body>
<a href="#" class="ezgi">Bilgisayar Muhendisligi</a>
Sayfanin Icerigi
<script>
$("a.ezgi").click(function(){
alert("uyarı onaylandı.")
});
</script>
</body>
</html>
<html>
<head>
<title> 4 Eylul</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<style>
.ezgi{padding:100px 500px;display:block;background:Yellow;}
</style>
</head>
<body>
<a href="#" class="ezgi">Bilgisayar Muhendisligi</a>
Sayfanin Icerigi
<script>
$("a.ezgi").hover(function(){
alert("uyarı onaylandı.")
});
</script>
</body>
</html>
Hiç yorum yok:
Yorum Gönder