jQuery Temelleri - Bölüm 1

$.each

" /> jQuery Temelleri - Bölüm 1

$.each

" />

jQuery Temelleri - Bölüm 2

JQuery Basics - Part 2
22:16 Okunma: 3601

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!