ETİKETLER

web-programlama

İÇERİK TÜRLERİ

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:

text(), html() ve val() Metotları İçin Bir Geriçağırma (callback) Fonksiyonu

Önceki eğitimde bahsettiğimiz üç jQuery metodu, text(), html() ve val() aynı zamanda bir geriçağırma fonksiyonuyla da kullanılabilir. Geriçağırma fonksiyonunun iki parametresi vardır:

  1. Seçilen eleman listesinde o andaki aktif elemanın indisi
  2. Özgün (eski) değer.

Aşağıdaki örnek, kod text() ve html() fonksiyonlarının bir geriçağırma fonksiyonuyla nasıl kullanılacağını 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:

attr() Fonksiyonu - Vasıflara Erişme

jQuery'nin attr() metodu sayesinde vasıf değerlerine erişebilirsiniz. Aşağıdaki örnekte href vasfının değerine nasıl erişilebileceği gösterilmiştir.:

$("button").click(function(){
  alert($("#w3s").attr("href"));
});

attr() fonksiyonu örnek HTML kodu:

İç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 - DOM Manipülasyonu

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

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 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 stop() Metodu

jQuery stop() metodu, bir animasyon ya da efekti tamamlanmadan önce durdurur.

Yazılış biçimi:

$(selector).stop(stopAll,goToEnd);

Kullanımı isteğe bağlı olan stopAll parametresi, animasyon kuyruğunun temizlenip temizlenmeyeceğini belirler. Öntanımlı değer false'tur; bunun anlamı sadece aktif animasyonun durdurulacağıdır. Daha sonra kuyruktaki animasyonlar icra edilebilir. Kullanımı isteğe bağlı olan gotoEnd parametresi de mevcut animasyonun hemen tamamlanıp tamamlanmayacağını belirler. Öntanımlı değer false'tur.

jQuery Efekt Tablosu

Aşağıdaki tablo, animasyon efektleri üretmek için kullanılabilecek jQuery metodlarının bir listesini sunuyor:

Abone ol web-programlama