302: JQuery Web programlama eğitimimizin orta seviyesinde, JQuery öğreniyoruz.

Tüm Eğitimleri Aldın mı? Kendini sınamanın tam zamanı

Haydi Sınava Gir

jQuery Nedir?

Bu sorunun cevabı epey basittir; jQuery artık pek de yeni sayılamayacak bir web teknolojisidir. JavaScript kütüphanelerinden oluşur. Bunlar sayesinde JavaScript'te programlama epey kolaylaşır. Öğrenimi kolaydır. jQuery kütüphanesini öğrenip kullanabilmek için ön koşul olarak,

  • HTML
  • CSS
  • JavaScript

Konularında en azından temel bir bilginizin olması gerekir.

jQuery'nin İnternet'ten İndirilmesi

http://jQuery.com/download adresinden kullandığınız işletim sistemine uygun olan (Windows, Linux, Mac OS vb) bir sürümünü indiriniz. Bu andan itibaren jQuery kütüphanelerini HTML5 kodu içinde kullanabilirsiniz.

jQuery kütüphanesi, tek bir JavaScript dosyasıdır ve bu dosyaya <script> tagı ile aşağıdaki gibi referans verebilirsiniz:

<head>
<script src="jQuery-1.10.1.min.js"></script>
</head>

 

jQuery Yazılış Biçimi

jQuery komutlarının işlevini en etkin biçimde şöyle anlatabiliriz:

"HTML elemanlarını seç (select-query); onların üzerinde eylemler (actions) uygula!"

Buna göre jQuery'nin komutlarının temel yazılış biçimi:

$(HTML elemanını seç-Select).eylem_uygula(action)()

Burada $ işareti ile başlamak, ifadenin bir jQuery ifadesi olduğunu belirtir.

 

Belge Hazır Olayı (Document Ready Event)

Vereceğimiz bütün örneklerde, bütün jQuery metotları, bir belge hazır metodu içine yerleştirilmiştir. Bu metodun yazılış biçimi aşağıdaki gibidir:

$(document).ready(function(){
   // jQuery metotları
});

Böyle yapılmasının en önemli sebebi, herhangi bir jQuery kodunun belgenin yüklenmesi sonuçlanmadan çalıştırılmasını önlemektir (ready-hazır).

Eğer bu kurala uyulmazsa oluşabilecek bazı negatif durumlar aşağıda verilmiştir:

jQuery HTML Eleman Seçicileri (Selectors)

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.

Ayrı Bir Dosyadaki Fonksiyonlar

Eğer web siteniz çok sayıda sayfa içeriyorsa, jQuery fonksiyonlarını kolaylıkla çalıştırmak için ayrı bir dosyada saklamanız tavsiye edilir. Bu dosyanın uzantısı .js olacaktır.

Aşağıdaki örnekte, jQuery fonksiyonları myJS adlı dosyada saklanmıştır ve oraya erişerek kullanılmaktadır:

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jQuery/1.11.1/jQuery.min.js">
</script>
<script src="myJS.js"></script>
</head>

 

Olay (Event)

Web sayfasının cevap verebileceği bütün farklı ziyaretçi eylemleri olay olarak tanımlanır. Bir olay, herhangi bir şey oluştuğu zaman, belirli bir hareketi temsil eder.

Örnekler:

  • Fareyi bir eleman üzerinde hareket ettirmek
  • Bir radyo butonu seçmek
  • Bir elemana tıklamak

Aşağıdaki tabloda pek yaygın kullanılan DOM (Document Object Model) olaylarını görüyorsunuz:

jQuery Efektleri - Hide ve Show (Gizle ve Göster)

jQuery, hide() ve show() metotları ile HTML elemanlarını gizleyebilir ya da görüntüleyebilir.

 

jQuery hide() ve show()

jQuery, hide() ve show() metotları ile HTML elemanlarını gizlemek ya da görüntülemek mümkündür:

$("#hide").click(function(){
  $("p").hide();
});
$("#show").click(function(){
  $("p").show();
});

 

jQuery Görüntüleme / Kaldırma Yöntemleri

jQuery ile bir elemanın görünürlüğünü azaltabilir, yok edebilir ve tekrar eski görünümüne geri döndürebilirsiniz. jQuery'de bu amaçla kullanılabilecek metotlar aşağıda listelenmiştir:

  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo()

jQuery Efektleri - Kaydırma (Sliding)

jQuery kaydırma metotları yardımı ile elemanları yukarı ve aşağıya doğru kaydırabilirsiniz.

jQuery aşağıdaki kaydırma metotlarına sahiptir:

  • slideDown()
  • slideUp()
  • slideToggle()

jQuery Efektleri - Animasyon (Animate)

jQuery animate() metodu, kullanıcının kendi animasyonlarını sağlamasına olanak verir.

Yazılış biçimi:

$(seçici).animate({parametreler},hız,geriçağırma);

Kullanımı zorunlu olan parametreler, anime edilecek CSS özelliklerini tanımlar. Kullanımı isteğe bağlı olan hız parametresi, efektin süresini belirler; "slow" (yavaş), "fast" (hızlı) ya da milisaniye değerlerinden birini alır. Yine kullanımı isteğe bağlı olan geriçağırma (callback) parametresi, animasyon tamamlandıktan sonra çalıştırılacak bir fonksiyondur.

jQuery Callback Fonksiyonları

Bir geriçağırma (callback) fonksiyonu, mevcut efekt %100 tamamlandıktan sonra icra edilen bir fonksiyondur. JavaScript deyimleri satır satır icra edilir. Bununla beraber, kodun bir sonraki satırı efekt sona ermeden icra edilebilir; bu da hatalar oluşturur. Bunu önlemek için bir geriçağırma fonksiyonu oluşturabilirsiniz. Bir geriçağırma fonksiyonu mevcut efekt bittikten sonra icra edilir.

Geriçağırma fonksiyonunun yazılış biçimi,

$(seçici).hide(hız,geriçağırma);

şeklindedir.

jQuery - Zincirleme İşlem (Chaining)

Şu ana kadar jQuery deyimlerini belli bir anda bir tane olarak çalıştırdığını söylüyorduk (biri diğerinden sonra). Bununla birlikte, zincirleme adı verilen bir teknik mevcuttur; bu teknik sayesinde çok sayıda jQuery komutu, biri diğerini izler biçimde, aynı eleman üzerinde icra edilebilir. Bir zincir oluşturmak için, bir eylem bir önceki eyleme eklenir.

Aşağıdaki örnekte, css(), slideUp() ve slideDown() metotları bir zincir oluşturmaktadır. p1 elemanı önce kırmızıya dönüyor, sonra yukarıya ve daha sonra da aşağıya hareket ediyor:

JQuery - DOM Manipülasyonu

jQuery'nin en önemli özelliklerinden biri, DOM (Document Object Model) elemanlarını işleyebilme yeteneğidir.

İçeriğe Erişme - text(), html(), and val()

Üç adet basit fakat çok faydalı metot sayesinde jQuery, DOM elemanlarını manipüle edebilir:

  • text() – seçilen elemanların metin içeriklerine atama yapar veya onlara erişerek işlem yapar.
  • html() – HTML işaretçileri de dâhil, seçilen elemanların içeriğini atar ya da onlara erişir.
  • val() – Form alanlarının değerine erişir veya onlara atama yapar.

Aşağıdaki örnek, içeriklere text() ve html() metotları ile nasıl erişileceğini gösteriyor:

jQuery - HTML Elemanlarına İçerik ve Vasıf Atama

İçerik almakta (get) kullandığımız üç metodu şimdi de içerik atamak (set) için kullanacağız:

  • text() – seçilen elemanların metin içeriklerine atama yapar veya onlara erişerek işlem yapar.
  • html() – HTML işaretçileri de dâhil, seçilen elemanların içeriğini atar ya da onlara erişir.
  • val() – Form alanlarının değerine erişir veya onlara atama yapar.

Aşağıdaki örnek bu metotların atama işleminde nasıl kullanılacağını gösteriyor:

Vasıf (Attribute) Atama - attr() Metodu

jQuery attr() metodu HTML elemanlarının vasıflarına atama yapmak ya da değerlerini değiştirmek için kullanılır. Aşağıdaki örnek, href özelliğinin bir bağlantıdaki değerinin bu yolla nasıl değiştirileceğini gösteriyor:

$("button").click(function(){
  $("#gy").attr("href","http://www.gelecegiyazanlar.org");
});

attr() metodu çok sayıda vasıf değerini aynı anda atamanızı da sağlar. Aşağıdaki örnek href ve title vasıflarının aynı anda nasıl atanacağını gösteriyor:

jQuery Elemanlar Ekleme

jQuery ile kolayca yeni HTML elemanları ya da içerikleri ekleyebilirsiniz.

Yeni HTML içeriği eklemek amacı ile kullanılabilecek dört jQuery metodu aşağıda verilmiştir:

  • append() – içeriği seçilen elemanların sonuna ekler.
  • prepend() – içeriği seçilen elemanların başına ekler.
  • after() – içeriği seçilen elemanlardan sonra ekler.
  • before() - içeriği seçilen elemanlardan önce ekler.

jQuery Silme Metotları

jQuery metotları ile HTML elemanlarını silmek de mümkündür. Eleman ve içerikleri silmek için esasen iki farklı jQuery metodu mevcuttur:

  • remove() – seçilen elemanı ve varsa çocuk elemanları siler.
  • empty() – seçilen elemanın çocuklarını siler.

jQuery CSS Sınıflarına Erişim ve Değişiklik

jQuery ile CSS elemanlarını manipüle etmek son derecede kolaydır. jQuery'nin, CSS manipülasyonu için birçok metodu vardır:

  • addClass() – Seçilen elemanlara bir ya da daha fazla sınıf ekler.
  • removeClass() - Seçilen elemanlardan bir ya da daha fazla sınıfı siler.
  • toggleClass() – Seçilen elemanlara sınıf ekleme/silme işlemlerini peş peşe yapar.
  • css() – Stil özelliklerine erişir ya da atama yapar.

Aşağıdaki stil sayfası bu bölümdeki örneklerde kullanılacaktır:

jQuery css() Metodu

css() metodu seçilen elemanlar için bir ya da daha fazla stil özelliğine erişir ya da bunlar üzerinde değişiklik yapar.

 

Bir CSS özelliğine erişmek

Belirli bir CSS özelliğine erişmek için aşağıdaki yazılış biçimini kullanınız:

css("özellik adı");

Aşağıdaki Örnekte ilk uyuşan elemanın zemin rengi gönderilmektedir:

$("p").css("background-color");