[COLOR=#000000][COLOR=#B22222][COLOR=#000000]
jQuery yıllar önce bu slogan ile başladı ve şimdi yazılımcılar arasında vazgeçilmez bir yere sahip. Hatta kendi sitesinde kullanan bazı şirketlerden bahsetmiş. WordPress, IBM gibi herkesin bildiği şirketlerde jQuery’i kullanıyor
Google gibi devler ise jQuery’i CDN gibi özellikleriyle destekliyor.
jQuery Nedir ?
Work diyebiliriz. Javascript zor bir dildir ve syntaxını öğrenmek uzun zaman alır. Ancak jQuery bu işi okadar kolaya indirmiş ki hız, kolaylık, cross-browser, performans bir kütüphanede olabilecek hemen hemen her özellik bulunmaktadır.
Önceden sitemizde bir animasyon yapmak için flash kullanmak zorunlu gibi birşeydi çünkü Javascript ile jQuery’nin yaptığı işleri yapmak yerine yazılımı bırakmak daha cazip gelebilirdi.
– jQuery nasıl kullanılır?
jQuery hazırda kullanılabilecek yüzlerce fonksiyonu var. jQuery API Docs bölümünde kullanabileceğiniz (açıklamalı ve örnekli) bütün fonksiyonlar var. Hatta ingilizceniz var ise jQuery Learning Center, jQuery için bulunmaz bir nimettir.
İngilizcesi olmayan yada Türkçeyi daha iyi anlayan arkadaşlar için bu makalemizde jQuery’e küçük bir giriş yapacağız.
– jQuery Kütüphanesini Sayfamıza Dahil Etmek
Öncelikle jQuery nimetlerinden faydalanmak için jQuery kütüphanesini sayfamızda çağırmalıyız. jQuery’nin şuanda 2 adet versiyonu bulunmaktadır.
– jQuery 1.x ve 2.x arasında ne fark vardır?
1.x ve 2.x arasında hiçbir fonksiyon farkı yoktur. Sadece 2.x versiyonları Internet Explorer 6, 7, ve 8 sürümlerini desteklemezler. Eğer sitenizi IE 6, 7 veya 8 kullanıcıları için kodlamadıysanız 2.x versiyonunu seçiyoruz. Desteklemesini istiyorsanız 1.x versiyonunu seçiyoruz.
Tabi birde 1.x Compressed, 1.x UnCompressed, 2.x Compressed ve 2.x UnCompressed sürümleri mevcut. Compressed olanlar sıkıştırılmış, Uncompressed olanlar sıkıştırılmamış yani daha büyük yer kaplayan JS dosyalarıdır.
Benim tavsiyem Compressed sürümlerini kullanmanız.
– İndirme ve sayfaya dahil etmek.
Ben örneklerimde 1.x versiyonunu kullanacağım. Günümüzde hala IE6 kullananlar olduğunu hesaba katarsak 1.x faydalı bir seçim olacaktır. jQuery kütüphanesini 2 farklı yöntem ile sayfamıza dahil edebiliriz.
1- JS dosyasını indirerek localde sayfaya dahil etmek
2- CDN hizmetlerini kullanarak sayfaya dahil etmek (önerilen)
Ben ikinci adımdaki özelliği kullanarak sayfama dahil edeceğim. Daha fazla seçenek için jQuery Download bölümüne göz atabilirsiniz.
Google CDN kullanarak jQuery kütüphanesini kullanacağımız dosyamızın tam yolu şudur;
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
– Başlıyoruz.
Öncelikle bolum1.html adında bir html sayfamız olsun.
<html>
<head>
<title>Hascoder</title>
</head
<body>
</bodytitle>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
</body>
</html>
Şimdi bu dersimizde basit özelliklerden başlayacağız. Bir linkimiz olsun ve ona tıklandığında bir uyarı kutusu çıkartalım.
<html>
<head>
<title>Hascoder</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<a href="">Bana Tıkla!</a>
</body>
</html>
Linkimizi koyduk. Şimdi sıra geldi jQuery kodumuzu yazmaya. Sayfamızın içinde <script> tagı açarak jQuery kodumuzu yazmaya başlıyoruz.
<html>
<head>
<title>Hascoder</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(********).ready(function(){
$('a').click(function(){
alert('Linke tıklandı.');
return false;
});
});
</script>
</head>
<body>
<a href="">Bana Tıkla!</a>
</body>
</html>
Bu kodumuz ile linke tıklandığın “Linkle Tıklandı” diye bir uyarı kutusu çıkartıyoruz. Şimdi kodları size tek tek açıklayayım.
2- $(‘a’) burada sayfadaki tüm “a” elementlerini seçtik. Zaten bir tane a elementi olduğu için sorun olmadı. İlerde “jQuery ve Seçiciler” isimli bir makalemde seçiciler ile ilgili daha detaylı bilgi vereceğim.
3- .click() buradaki click seçiciye tıklandığın da bir event çalıştırır. Yani burada “a” elementine tıkladığında şunları şunları çalıştır tarzında diyebiliyoruz ki zaten function(){} içinde de görebileceğiniz gibi “tıklandığında uyarısı kutusu çıkar” diyebildik.
4- alert() javascript öğrenilirken ilk karşımıza gelen fonksiyonlardan birisidir. Tarayıcıda bir uyarı kutusu çıkartır. Detaylı bilgi isterseniz w3 sitesinde Window alert() Method isimli bölümü okuyabilirsiniz.
5- return false burada return false kullanmamızın sebebi linkle tıkladığında “herhangi bir işlem yapma!” demek içindir. Burada return false kullanmasaydık linke tıkladıkdan sonra başka bir sayfaya gidecekti (genel linkler için böyle, şuanki durumda olduğu sayfayı yenileyecek). Genelde linklerin istem dışı hareket etmesini istemeyiz.
Alıntı ile Cevapla