JQuery Nedir ve Ne İşe Yarar?

Adı : JQuery Nedir ve Ne İşe Yarar?

JQuery, web sayfalarına dinamik özellikler eklemek için kullanılan bir JavaScript kütüphanesidir. JQuery, web geliştiricilerinin web sayfalarında görsel efektler, animasyonlar, kullanıcı etkileşimi ve daha birçok özellik eklemelerine yardımcı olur. JQuery, JavaScript'in zorluklarını ortadan kaldırarak geliştiricilerin web sayfası oluşturmasını daha kolay ve hızlı hale getirir.
JQuery, kod yazımını basitleştirerek, daha kısa ve okunaklı kod yazmanızı sağlar. Bu sayede web sayfaları daha hızlı yüklenir ve performans artar. Ayrıca JQuery, çeşitli web tarayıcıları üzerinde sorunsuz çalışabilir ve bu sayede tarayıcı uyumluluğu sorunlarının üstesinden gelir.
JQuery ile neler yapılabilir?
1. Görsel efektler: JQuery, web sayfalarına hareketli resim ya da animasyon ekleyebilirsiniz. Kullanılan efektler arasında, farklı hızlarda kayan, renk değiştiren, sadece belirli bir hareketi takip eden nesneler, “parlak noktalar” gibi birçok farklı efekt bulunur.
2. Form kontrolleri: jQuery, web formunda kullanılan butonları, menüleri, check box, radio button, select option ve tablar gibi form araçlarına işlevsellik eklemek mümkündür.
3. Kullanıcı etkileşimi: Kullanıcılar sayfanızda tıklama, taşıma veya başka bir etkileşimde bulunduklarında, JQuery bu etkileşimleri algılayıp cevap verebilir. Örneğin, bir görüntü açıldığında veya kaybolduğunda belirli bir bölgede açılan veya kaybolan bir yazı oluşturabilirsiniz.
4. Sayfa içi navigasyon: jQuery, sayfa içinde dinamik navigasyon, sayfa gezinme, menüler ve daha birçok özellikler eklemek için kullanılabilir.
5. AJAX: AJAX bir HTTP isteğini web sayfası üzerinde yapılan (sayfa yenilenmeden) uygulamalarını mümkün kılan bir teknolojidir. Bu teknoloji, dinamik olarak ana sayfa, veritabanından veri çekmek veya yüklemek adına harika bir yöntemdir. Ve jQuery de bu teknolojiyi kullanmamıza yardımcı olur.
Örnekler
1. JQuery ile Menü Oluşturma : JQuery ile menü oluşturmayı en basit şekilde anlatacağım. Öncelikle, menünüzde yer alacak olan elemanları HTML listeler içerisinde saklamak en doğru yöntemdir.
```
HTML:
-------

• Menu Item 1


• Menu Item 2


• Menu Item 3

```

```
CSS:
-----
#menu { width: 160px; }
#menu li a { display:block; color:#000; background-color:#EEE; padding:5px 10px; text-decoration:none; }
#menu li a:hover { background-color:#369; color:#FFF; }
```
```
JQuery:
--------
$(document).ready(function(){
// Hide all submenus
$('#menu ul').hide();
// Show the active menu
$('li.current').parent().show();
// Add the sliding effect to the submenu
$('#menu li a').click(function(){
var checkElement = $(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
return false;
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#menu ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
});
});
```
2. JQuery ile Etkileşimli Bir Fotoraf Galerisi: JQuery ile fotoğraf galerisi oluşturmak da oldukça kolaydır. Aşağıdaki örnekte, HTML'de bir liste halinde görüntüleri ekleme ve daha sonra JQuery'in kodunu apply etmesi gerekiyor.
```
HTML:
-----

```
```
CSS:
----
#gallery ul { list-style:none; margin:0; padding:0; }
#gallery ul li { display:inline; }
#gallery ul img {
width: 100%;
height: auto;
}
```
```
Jquery:
--------
$(document).ready(function(){
// Variables
var showImage = $('#gallery .show-image');
var thumbList = $('#gallery .thumb-list ul');
// Load first image
showImage.load(thumbList.find('a:first').attr('href'));
// Set active class to first thumb
thumbList.find('li:first').addClass('active');
// On click
thumbList.find('a').click(function(e){
e.preventDefault();
var selectedImage = $(this).attr('href');
$(this).parent().addClass('active').siblings().removeClass('active');
showImage.hide().load(selectedImage).fadeIn('slow');
});
})
```
Sık Sorulan Sorular
Q: JQuery neden bu kadar popüler?
A: JQuery, web geliştiricilerinin işlerini daha kolay hale getirdiği için popülerdir. JQuery, işlerin yapımını kolaylaştırdığı ve sayfa yüklenme hızını artırdığı için popülerdir.
Q: JQuery öğrenmek ne kadar zor?
A: JQuery, JavaScript ağırlıklı bir kütüphane olduğu için HTML, CSS ve JavaScript bilgisi olan birisine kolay gelir.
Q: JQuery, sadece belirli bir web tarayıcısı üzerinde çalışır mı?
A: Hayır, JQuery, tüm modern web tarayıcılarında sorunsuz çalışır.
Q: Bir web sayfasında birden çok JQuery kütüphanesi kullanılabilir mi?
A: Hayır, bir sayfada birden fazla JQuery kütüphanesi kullanmak, çakışmalara neden olarak sayfada çalışmayı durduracaktır.