27.05.2013

Webmaster Dersleri-Jquery Dersleri 3

Jquery Each Fonksiyonu

İnternet sayfalarında Jquery kullanılarak yapılan kodlamalarda zaman zaman, seçtiğimiz etiketlerin tümünde uygulanacak fonksiyonlar kullanmaya ihtiyaç duyarız. Each() fonksiyonunun da işlevi budur.

Örneğin bir sayfadaki tüm linkleri bularak linklerin yeni bir sayfada açılmasını sağlayacak target=”_blank” özelliğinin eklenmesi işlemi, each fonksiyonu ile kolaylıkla hazırlanabilir.

Yazım şekli ise aşağıdaki gibidir:

('secim').each

Jquery Anonim Fonksiyonları

Anonim fonksiyonlar (anonymous functions), temelde birer fonksiyon olsalar da, fonksiyon ismi almamaları sebebiyle anonim olarak adlandırılmışlardır.

Örnek Jquery Anonim Fonksiyonu

function () {

//programlama kodları

}

Fonksiyon isimleri olmadığı için, anonim fonksiyonların tek başlarına çağırılması mümkün değildir. Ancak anonim bir jquery fonksiyonunun, standart bir fonksiyonun argümanı olarak kullanılması ile birlikte bize olağanüstü avantajlar sağlarlar.

$('secim').each(function() {

// programlama kodları

});

Yukarıdaki örnekte kırmızı ile işaretlediğim kısım bir anonim fonksiyon, kalan siyah kısım ise standart fonksiyondur.

Örnek olarak bir sayfadaki tüm resimlerin bulunmasını ve bulunduğunda bize bildirim yapılmasını sağlayan Jquery programı için, anonim fonksiyonlara ihtiyaç duyarız.

$('img').each(function() {

alert('resim buldum');

});

Yukarıdaki örnek kodlar çalıştığında, sayfadaki her resim etiketi bulunduğunda “resim buldum” uyarısı verecektir.

Sıklıkla kullandığımız document.ready fonksiyonları da aslında birer anonim fonksiyon içerirler. Daha yakından incelersek:

$(document).ready(function() {

// programlama kodları

});

Jquery this Anahtar Sözcüğü

Jquery’de each() fonksiyonunu kullanırken, döngü içerisindeki tüm elementlerin özelliklerine erişme ihtiyacı duyarız. Örneğin sayfadaki a etiketinin href özelliğini öğrenmek için a etiketinin özelliklerine erişebiliyor olmamız gerekir. This anahtar sözcüğü ile bir anonim fonksiyonu çağırmış olan elemente erişim sağlamamız mümkündür. Döngünün her dönüşünde ise this anahtar sözcüğünün işaret ettiği element de döngüyle birlikte değişecektir. $(this) seçimi ile kullanabileceğimiz this anahtar sözcüğü kullanılarak, sayfa içerisine bağlantılar adlı bir div ekleyelim ve aşağıdaki kodları çalıştıralım.

$('a[href^=http://]').each(function() {

var baglanti = $(this).attr('href');

$('#baglantilar').append('<li>' + baglanti + '</li>');

});

Yukarıdaki örmekte, http ile başlayarak sayfa dışı bağlantı olduğunu anladığımız tüm linkler , baglantilar adını verdiğimiz div içerisine append yöntemi kullanılarak (her yeni birim sona eklenerek) girilmektedir.

Webmaster Dersleri-Jquery Dersleri 3
Bu makalenin telif hakkı ve tüm sorumlulukları yazara ait olup, şikayetler için lütfen bizimle iletişime geçiniz.
URL:
Etiketler:

Bu makale 3043 kez okundu

27.05.2013 tarihinde yazıldı
Reitix

Yorumlar

  • lazo
    21.07.2018

    wordpress'te jquery kodunda dolar işareti kullandığınızda hata alırsınız, hatayı düzeltmek için dolar simgesi yerine jQuery yazmanız yeterli oluyor

  • ytuncel
    08.02.2016

    size angular.js desem de artık jquery ile falan uğraşmasanız?

  • mahir
    04.11.2014

    each fonksiyonu özellikle hayat kurtarır, this anahtar sözcüğü ise fonksiyonu çağıran elemanı ifade ederek kurtarılmış ömrümüzü daha da uzatır

  • marmaramus
    27.10.2014

    Hiç bir zaman anlayamayacağım bu bilgisayar dilinden. anlayanlara da gıpta ile bakıyorum .

Bu yazıya siz de yorum yapabilirsiniz

İnternet sitemizdeki deneyiminizi iyileştirmek için çerezler kullanıyoruz. Bu siteye giriş yaparak çerez kullanımını kabul etmiş sayılıyorsunuz. Daha fazla bilgi.