jQuery Temelleri - Bölüm 2

Merhaba arkadaşlar öncelikle İlk bölümü şu linkten inceleyebilirsiniz. jQuery Temelleri - Bölüm 1

$.each

.each her programlama dilinden bildiğimiz foreach methodur. Seçtiğimiz elementlerin içinde sırayla dönmemizi sağlar..

$( 'ul li' ).each(function( index, element) {

  // this: dönülen index'teki element

  // index: dönülen index

  // element: dönülen index'teki element " this ile aynıdır. "

});

Zincir method yapısı
jQuery ile bir elementi seçtikten sonra istediğimiz sayıda method ekleyebiliriz.
$(".kodstrap div").find('a').css({"color":"red","text-decoration":"underline"});
Burada yaptığımız .kodstrap class'ı altındaki div'lerin içinde .find() methodu ile tüm <a> taglerini bul sonra bunların renkleri kırmızı yap ve yazı tipini altı çizili yap dedik.

Seçilen elementleri filtrelemek
filtreleme işlemi için 3 method kullanıcaz
.filter() - filter bildiğimiz filtre demek.
.not() - sahip olmayanlar
.has() - sahip olanlar
var seciliAnchors= $( '.herhangibirclass a' );

// secili anchor'lardan class'ı kodstrap olanları filtreledik.

var withkod= seciliAnchors.filter( '.kodstrap' );

// secili anchor'lardan class'ı kodstrap olmayanları filtreledik.

var notwidthkod= seciliAnchors.not( '.kodstrap' );

//secili anchor'lardan içinde p etiketi olanları filtreledik.

var hasP = seciliAnchors.has( 'p' );

Seçili elemente bağlı elementleri seçmek

//Sayfadaki tüm elementleri seçiyor

var listeElementleri= $( 'li' );

// listeElementleri ile aynı seviyedeki üst satırda seçilenlerin dışındakileri seçer.

var disindakiler= listeElementleri.siblings();

// Seçili elementlerden sonra gelen elementleri seçer

var sonrakiler= listeElementleri.next();

//seçili elementleri bir üst seviyesindeki elementi seçer (Aile seçici)

var aile= listeElementleri.parent();

//seçili elementleri alt elementlerini seçer. (Çocuk seçici )

var cocuklar = listeElementleri.children();

// seçili elementler altındaki tüm li elementlerini seçer.

var tumli= listeElementleri.find( 'li' );

// kodstrap class'ına sahip aile elementlerini seçer

var sahipclasslar= listeElementleri.parents( '.kodstrap' );

3. makalede görüşmek üzere..

İyi Kodlar!