Sanırım sadece yazı değil, yanında videolar ile anlatımlarımda olacak.

jQuery dökümanları ile paralel olarak yazmaya çalısacağım ancak içerisinde atlayacağım alanlar olacak. Orta hatta ortanın üstü bir jQuery bilgisine sahip olmanızı sağlayana kadar yazmaya çalışacağım. Bu bağlamda ilk yazımız jQuery’nin en güzel özelliklerinden olan each olacak.

each :

Temelde olsa yazılım bilginiz var ise zaten bu özelliğin ne işe yaradığını çoktan anlamışsınızdır. Foreach’in jQuery versiyonuda diyebiliriz.

Peki ne iş yapar bu each?

Belirlediğiniz seçicilerden oluşan bir dizideki elemanların içerisinde teker teker dönmemizi sağlar. Örnekleyerek devam edersek sanırım daha rahat anlaşılabilir.

Bir sayfamız var, içerisindeki tüm inputları seçeceğiz ve each ile bunların kenar çizgilerini kırmızı yapacağız.

Seçici Kodlar :

    function sec(){
        $('input').each(function(){
	        this.style.border = "solid 1px #cc0000";
        });
    }

Sayfanın örneğine buradan ulaşabilirsiniz.

İyide bunu zaten daha kısa bir kod ile yapabiliriz neden bu yolu seçtik şeklinde sorabilirsiniz. Bu örnek için aslında each’i kullanmanın bir anlamı yok. Bu örnekte each ile tüm öğeleri seçebildiğimizi görmüş olduk. Eğer sayfadaki “seç” butonuna tıklarsanız kendiside dahil tüm inputları seçtiğini göreceksiniz. Each’in bize yararını anlamak için bir sonraki örneğimize geçelim.

Bu örneğimizdeki inputlarımızın 3 farklı yazı rengi bulunmaktadır. Biz bunlardan siyah olanlarının mavi olmasını istiyoruz. Bunun için tüm inputları öncelikle each ile bir diziye alacağız ve daha sonrada yazı renklerini kontrol edip siyah olanları mavi yapacağız.

Seçici Kodlar :

    function sec(){
        $('input').each(function(){
            var yaziRengi = this.style.color; //yazi rengini alıyoruz
            if(yaziRengi == "black"){ //yazı rengi siyahmı kontrol ediyoruz
	            this.style.color = "blue"; //siyah olanları mavi olarak atıyoruz
            }
        });
    }

Sayfanın örneğine buradan ulaşabilirsiniz.

Bu örnek ile aklınızda birşeylerin oluştuğuna inanıyorum.

Each’i amacına uygun nasıl kullanacağımıza geldik. Bir formumuz olduğunu düşünelim ve biz bu formda hiçbir alanın boş bırakılmamasını istiyoruz. Form submit edildiğinde boş alan varmı yokmu kontrol edelim. Eğer boş alanlar var ise kenarlık ve arkaplan renklerini değiştirelim.

Seçici Kodlar :

function sec(){
    $('input').each(function(){ //tüm inputları bir diziye atıyoruz

    //inputun değerini alıyoruz ve değerdeki boşluları siliyoruz
    //burada boşluk silmemiz normal değeri etkilemeyeceği gibi
    //gibi boş veri kontrolünü sağlayacaktır.
	if(this.type=="text"){//tipi text olan inputları seçiyoruz
        var inputValue = this.value.replace(" ","");

            if(inputValue == ""){//eğer değer boş ise
                $(this).css({"border":"solid 1px #c00","background-color":"#c00","color":"#fff"});
            //üzerinde işlem yaptığımız inputun stilini değiştiriyoruz.
            }
            else //eğer veri boş değil ise daha önceden kontrolde boş gelme ihtimaline karşın
            //input'un şeklini eski hale getiriyoruz.
            {
                $(this).css({"border":"solid 1px #000","background-color":"#fff","color":"#000"});
            }
        });
    }
}

Sayfanın örneğine buradan ulaşabilirsiniz.

Yukarıdaki örnekleri jQuery’nin seçicileri ile daha kısa bir şekilde yapmamızda mümkün ancak konumuz each olduğu için uzunda olsa biz bu yolu tercih ettik. Çünkü seçiciler sayesinde elde edemeyeceğimiz veriler aracılığı ile çok daha etkili çözümler üretebileceğimizi ileride göreceksiniz.

Yukarıda çok kısa bir şekilde yaptığımız işlemleri jQuerysiz yapsak emin olun çok daha uzun sürecekti.

Sorularınız için sağdaki iletişimin altındaki soru sor ile bana iletebilirsiniz.

Zincirleme derken neden bahsediyorum ;

Bir divimiz var ve biz bunu önce genişlemesini sonrada yüksekliğinin değişmesini istiyoruz. İşte burada jQuery’nin en sevdiğim özelliklerinden birisi olan zincirleme devreye giriyor.

Önce javascript kodlarımızı yazalım :

function func1(id)
{
  //id'sini parametre olarak gönderdiğimiz elementin
  //önce genişliği ile sonrada arkaplan rengi ile oynuyoruz
  $('#'+id).animate({width:500},250).animate({height:500},250);
  //zincirleme animasyonlarda bir işlem bittikten sonra
  //diğeri başlar
}

HTML kodlarımız :

<input onclick="func1('div1')" type="button" value="oynat" id="genislet" />
<br />
<div style="width:100px;height:100px;background:#f00;display:block;" id="div1"></div>

Örneğimize buradan ulaşabilirsiniz.

Zincirleme, sadece animasyonlar arasında bir hiyerarşi sağlamaktadır. Yani animateden sonra bir css kodu yazarsanız bu animasyon başladığı anda gerçekleşecektir.

Temel olarak anlatmamız gerekenleri bitirdiğimize göre örneklerimizi komplike hale getirelim.

4 tane resim içeren bir animasyon hazırlayalım. Başlangıçta hepsinin eni ve boyu eşit görünecek. Normal boyutları farklı resimler seçecez ve tıkladığımız resim orjinal boyutuna gelecek. Öncelikle resimler için google’dan “cat” diye arama yapıp 4 tane resim seçeyim

Resimlerimizi yan yana sıralıyoruz ve basit bir css uyguluyoruz. CSS’imizin amacı, tüm resimleri aynı boyutlardaki divlerin içerisine yerleştirerek farklı boyutlardaki resimlerin görüntüyü bozmasını engelliyoruz.

Öncelikle HTML kodlarımızı yazalım :

<div style="margin-left: 30%; margin-top: 150px;">
    <div class="resim"><img src="http://www.arastiralim.net/wp-content/uploads/2008/02/lady-cat.jpg" /></div>
    <div class="resim"><img src="http://www.plasticbamboo.com/wp/wp-content/uploads/hello-kitty-cat.jpg" /></div>
    <div class="resim"><img src="http://www.fulyavet.com/images/cat17.jpg" /></div>
    <div class="resim"><img src="http://asymptotia.com/wp-images/2006/12/copy_cat_copies.jpg" /></div>
</div>

CSS kodlarımız :

.resim{
    height:90px;
    float:left;
    margin:0px 10px;
    width:100px;
    overflow:hidden;
}

HTML ve CSS kodlarımızı tamamladığımıza göre jQuery kodlarımızı yazmaya başlayabiliriz.

Sayfamız yüklendiği zaman $(document).ready() ile tüm resimlerimizin orjinal boyutlarını alıp rel‘e atıyoruz. Tıklandığı zaman resmimizin boyutunu alabilmek için en kısa yöntem bence. Boyutları gerekli yere atadıktan sonra tüm resimlerimizin genişliğini 100 yapıyoruz. Yükseklikte genişliğe orantılı olarak otomatikmen değişiyor. Resimlerden herhangibirisine tıklandığı zaman yapılacak işlemleri belirliyoruz. Aşağıda zaten kodların içinde açıklamaları var ancak ben burada “each“den bahsetmek istiyorum ;

 $('div.resim>img').each(function(){
$(this).attr('rel',$(this).width());
});

satırları ile class’ı resim olan divlerin içerisindeki tüm resimleri “each” yardımı ile tek tek dönüyoruz. Yani hazır bir array‘i yine hazır bir şekilde tek tek elemanlarına ayırıyoruz. Özellikle id ve class gibi seçivilerimizin olmadığı durumlarda bir üst seçiciye bağlı olarak işlem yapmamızı kolaylaştırır(programcılar için çok tanıdıktır zaten). Bu kod satırlarındaki üst seçicimi “div.resim“.

En son olarak javascript kodlarımızı yazıyoruz :

$('div.resim>img').each(function(){
    //each ile tüm resimlerimizin orjinal genişliğini tektek
    //rel özelliğine(attribute) atıyoruz
    $(this).attr('rel',$(this).width());
    //tıklandığı zamanda buradan aldığımız değer ile
    //genişlik ve yüksekliğini ayarlıyoruz
});
//genişlik alma işlemimiz bittikten sonra tüm resimlerin
//genişliğini 100px'e getiriyoruz
$('div.resim>img').width(100);
//galerimizdeki bir resime tıklandığı zaman
//yapacağı işlemlere geçelim
$('div.resim>img').click(function(){
//öncelikle açık olan resim için tüm resimleri sıfırlıyoruz
$('div.resim>img')
.animate({width:100},250)//animate ile genişliğini 100px'e çekiyoruz
//css özelliklerinide ilk haline getirmemiz gerekiyor
.css({'z-index':'1','position':'static','margin-left':'0px','margin-top':'0px'});
//ilk başta atadığımız rel değer ile animasyon sonunda
//resmimizin geleceği genişliği alıyoruz
var w = $(this).attr('rel');
//bulunduğu yeri ortalaması için biraz sola kaydırmak
//gerekeceğinden marginlerden 20 genişlikten dolayıda
//100 geliyor toplam genişlikten 120 çıkartıp
//2 ye bölerek ne kadar sola kayacağını hesaplıyoruz
var mL = (w-120)/2;
//basit ancak önemli bir kontrol ekliyoruz
//eğer resim küçük ise büyütme işlemlerini yap diyoruz
//isterseniz bu satıları kaldırarak farkı görebilirsiniz
if($(this).width() == 100)
{
    //öncelikle resmimizin positionunu absolute yaparak divin
    //css>overflow özelliğini ezmesini sağlıyoruz
    //daha sonra z-index'ini 5 yaparak diğer resimlerin üzerine alıyoruz
    //ve animasyonumuz ile estetik bir şekilde genişlik,
    //marginTop ve marginLeft'i ile oynuyoruz
    $(this)
    .css({"position":"absolute","z-index":"5"})
    .animate({width:w,marginTop:'-10%',marginLeft:'-'+mL},250);
    //ve bu basit resim galerimiz böylece sona eriyor
}
});

Bu örneğimizede buradan ulaşabilirsiniz.