jQuery popüler bir JavaScript kütüphanesidir. 2006 yılında, John Resig tarafından geliştiricilerin web sitelerde JavaScript kullanımını kolaylaştırma amacıyla yaratılmıştır.11 Mart 2020Internet Explorer 6 ve diğer tarayıcı uyumsuzlukları için çözümler getiren jquery ile çalışmak artık oldukça kolaylaştı. Peki jquery nedir? Jquery bizi uzun kod satırlarından kurtaran artık hemen hemen her sitede kullanılan bir tekniktir. Özellikle Google’ın robotlarının Ajax siteleri taraması da yaygınlaşma sebebidir.
JQuery, HTML/CSS gibi tekniklerle tamamlayamadığımız, özellikle kullanıcılara daha iyi bir deneyim yaşatmak için oldukça kullanışlı bir yardımcı dildir.
Ana yapısı javascript olsa da jquery kütüphanesine ihtiyaç duyar.
Jquery Nasıl Öğrenilir?
Javascript kodlarını kısaltması ve yapısının kolaylığı ile öğrenmek o kadar da zor değil. Biraz yazılım altyapınız olması yeterli olacaktır.
Bol bol pratik yapın
Önemli olan bol bol pratik yapıp teknikleri öğrenmek. Yapıyı kurduktan sonra yapıyı kendi istediğiniz şekilde yazabilirsiniz.
Nasıl çalıştığını anlayın
JQuery kütüphanesi basit ve kolay bir yapıya sahiptir.
İşte bir Örnek:
$(secici).islemYap();
JQuery operatör için $ işaretini kullanır. Parantez içinde secici olan kısım ise class veya id’dir. islemYap() ise yaptırmak istediğiniz işlemdir.
jQuery kütüphanesi aşağıdaki özelliklere sahiptir:
• HTML/DOM nesnelerinin işlenmesi
• CSS işlemleri
• HTML olay metotları
• Çeşitli efektler (etkiler) ve canlandırmalar (animasyon)
• AJAX
• Hizmet programları
jQuery komut örnekleri
$(this).hide() – O anda aktif olan elemanı gizler (görünmez hale getirir).
$("p").hide() – Bütün paragraf elemanlarını (<p>) gizler.
$(".txt").hide() - class="txt" olan bütün elemanları gizler.
$("#test").hide() - id="test" olan elemanları gizler.
jQuery, HTML elemanını seçme ifadelerinde CSS yazılış biçimlerini kullanır. jQuery içinde HTML eleman seçicileri en önemli bileşenlerden biridir. Eleman seçiciler, HTML elemanlarını seçme ve bunların üzerinde çeşitli işlemler gerçekleştirme imkanı sağlar.
jQuery, HTML elemanları seçmek ya da bulmak için aşağıdaki bilgileri kullanır:
• Elemanın ID'si
• Elemanın sınıfı (class)
• Elemanın tipi
• Elemanın vasıfları (attribute)
• Elemanın vasıf değerleri
• ve bunlara benzer diğer bilgiler
Genellikle jQuery'nin seçicileri CSS'e dayanır; kendisine özgü birkaç seçici de mevcuttur.
jQuery'de bütün seçiciler, bir dolar işaretiyle başlar ve parantezler içindeki ifade ile devam eder: $()
jquery
Eleman seçimi
jQuery eleman seçicisi, elemanları adına göre seçer. Eğer kod içindeki bütün paragraf elemanlarını (<p>) seçmek istiyorsanız aşağıdaki ifadeyi kullanmalısınız:
$("p")
Bir düğmeye tıklayınca tüm paragrafları görünmez hale getirelim:
$(document).ready(function(){ $("button").click(function(){ $("p").hide(); });});
#id seçicisi
jQuery #id seçicisi, HTML tag'ının id özelliğini kullanarak belirlenen bir elemanı seçer. Sayfa içinde id unique (tek) olmalıdır:
$("#test")
Kullanıcı bir düğmeye tıklayınca id="t1" olan elemanın gizlenmesi
$(document).ready(function(){ $("button1").click(function(){ $("#t1").hide();});});
Sınıf seçicisi
jQuery sınıf seçicisi belirli bir sınıf elemanlarını sınıf adı ile bulur. Belirli bir sınıfın elemanlarını bulmak için, sınıf adından önce bir nokta sembolü yerleştirmek gerekir:
$(".sali")
