ETİKETLER

web-programlama

İÇERİK TÜRLERİ
İÇERİK TÜRLERİ

jQuery fadeOut() Metodu

fadeOut() metodu, görünür bir elemanı görünmez hale getirir.

Yazılış biçimi:

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

Kullanımı isteğe bağlı olan hız parametresi, gizleme/görüntüleme hızını belirler ve birimi "slow" (yavaş), "fast" (hızlı) ya da milisaniye türündedir. Kullanımı gene isteğe bağlı olan "geriçağır" parametresi ise, gizleme olayı tamamlandığı zaman çalıştırılacak bir fonksiyondur.

Aşağıda, örnek bir HTML5 kodunu inceleyebilirsiniz:

jQuery fadeIn() Metodu

jQuery fadein() metodu ile gizlenmiş bir elemanı görünür hale getirebilirsiniz.

Yazılış biçimi:

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

Kullanımı isteğe bağlı olan hız parametresi, gizleme/görüntüleme hızını belirler ve "slow" (yavaş), "fast" (hızlı) ya da milisaniye cinsinden bir değer olabilir. Kullanımı yine isteğe bağlı olan "geriçağır" parametresi ise, hide() ya da show() metotları tamamlandığı zaman icra edilecek bir fonksiyondur.

fadeIn() örnek HTML5 kodunu aşağıda inceleyelim:

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 toggle() Fonksiyonu

jQuery ile toggle() metodunu kullanarak, hide() ve show() metotları arasında geçişler sağlayabilirsiniz; böylece seçilen eleman bir görüntülenir bir gizlenir ve bu geçişler devam eder.

Örneğimizi hep birlikte inceleyelim:

$("button").click(function(){
  $("p").toggle();
});

 

Yazılış biçimi

$(seçici).toggle(hız,geriçağır);

Parametrelerin anlamı ve işlevi yukarıda açıklandığı gibidir.

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();
});

 

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:

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>

 

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.

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 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.

 

Abone ol web-programlama