jQuery küçük ancak çok yetenekli bir javascript kütüphanesidir. Web uygulamaları geliştirirken javascript ile yaptığımız standart işleri (DOM üzerinde gezinme, nesneleri kullanmak değiştirmek, eventları kullanmak gibi) uzun ve tekrar eden javascript kodları yazmak yerine bu kütüphaneyi kullanarak yapabiliriz.

DOM üzerinde gezinmek dediğimde kasdettiğim doğrudan javascript ile document.getElementById methodu ile yapabildiğimiz doküman üzerinde ki nesnelerimize erişmekten bahsediyorum.

Sadece bununla da kalmayıp jQuery pluginleri ile (örneğin thickbox kendi sitemde resimlerin üzerine tıklayınca büyük şekilde görüntülenmesi için bu plugini kullanıyorum. ilgili yazım)

Özetle, jQuery küçük ve dom nesnelerine erişim ve müdahale etmek için yetenekli javascript kütüphanesidir. Microsoft tarafından desteklenmeye başlamıştır ve ASP.NET MVC projelerinde dahili olarak gelmektedir.

jQuery üzerine çok fazla kelam etmektense hızla kod örneklerine geçelim ve ellerimizi bu işe bulaştıralım.

jQuery.com adresinden jquery kütüphanesine erişebilirsiniz. Kütüphane deyince gözünüzde büyütmeyin bildiğiniz .js dosyası. Makaleyi yazdığım sıradaki son sürümü 1.3.2.

Sayfaya eklemek için aşağıdaki şekilde indirdiğiniz js dosyasını kullanabilirsiniz. İndirip içinde neler olduğunu incelemek isteyenler jquery-1.3.2.js dosyasını (sitede ki development seçeneği ile) indirebilirsiniz. Ancak production ortamında kesinlikle minified sürümünü (jquery-1.3.2.min.js) kullanın boyutu daha küçüktür istemciye daha hızlı transfer edilir.

  <script type="text/javascript" src="jquery-1.3.2.min.js"></script> 

jQuery kütüphanesi kabul görmüş bir kaç javascript kütüphanesinden birisidir. Bu sebeple bir çok sitede kullanılıyordur. Eğer gerçekleştirdiğiniz uygulama internet üzerinde çalışacak ise (intranet uygulamalarında değil) CDN (Content Delivery Network) denilen hizmetleri kullanmanız yerinde olacaktır. Zira aynı CDN i kullanan bir siteyi daha önce ziyaret etmiş bir kullanıcı jquery.js dosyasını zaten browser cacheinde tuttuğu için sizin sitenize girdiğinde, kullanıcının browseri jquery.js dosyasını bir daha download etmeyecektir.

Google CDN'den kullanmak için;

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 

Microsoft CDN'den kullanmak için; (Microsoft'un CDN hizmeti için anons yazısını okumak için tıklayınız.)

  <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js" type="text/javascript"></script> 

Aşağıdaki resimde iki farklı firebug ekran görüntüsü bulunmaktadır. Birincisi kendi web sunucumda host ettiğim jquery dosyasının yer aldığı sayfaya gelen ilk isteğimde sunucudan gelen HTTP sonuç kodu 200 yani dosya var demiş ve dosyayı istemciye (kullanıcı browseri) transfer etmiştir.

İkinci ekran görüntüsünde ise yukarıdaki kod parçasında gösterdiğim gibi Google CDN'den eklediğim jquery dosyasını içeren sayfaya gelen ilk isteğimde HTPP sonuç kodu olarak 304 dönüyor yani not-modified yani daha önce girdiğim bir web sitesi (tabiki google cdn i kullanan) sebebiyle cachelenmiş olan jquery dosyasını tekrar transfer etmiyor browserım ve cachlediği dosyayı (jqeury-1.3.2.min.js) kullanıyor.


jQuery document.ready eventi html dökümanında tamamen yüklenmesiyle tetiklenir (window load gibi düşünebilirsiniz.).

Bu event ile jQuery ile register olmak istediğiniz diğer nesnelerin eventlerına kaydolabilirsiniz, dokumanda istediğiniz manipulasyonları yapabilirsiniz. Hızlı bir giriş yapmak için önce eventi nasıl kullanacağımızı görelim.

  <script type="text/javascript"> 

  
    $(document).ready(function(){ 

  
    alert('jQuery document ready eventınden merhaba'); 

  
    }); 

  
</script> 

jQuery document ready olayını gösterir bu olay için çalışacak kod bloğunu bir function olarak tanımladık, function içinde sadece alert ile ekranda standart javascript mesaj kutusu ile bir mesaj gösteriyoruz.

Yukarıda ki yazım şeklini daha kısa şekilde de yazabiliriz. jQuery function'ı olarak bilinen $ işaretine selector (selector kavramında daha sonra sıkça bahsedeceğiz.) olarak document'i vermeden de ready eventinde çalışacak function'ı belirleyebiliriz.

  $(function(){ 

  
  alert('jQuery document ready eventınden merhaba'); 

  
}); 

jQuery ile DOM nesnelerine erişmek $ (jQuery function)'a selector verilir. Selector olarak çeşitli filtrelemeler içeren komplex ifadeler kullanılabilir. (Tüm referans listesine jquery.com'da api documentationdan ulaşabilirsiniz.) Selector olarak bir DOM nesnesi, nesne adı adı, nesne id si de verilebilir.

jQuery function ($ işareti) a bir selector verilip geriye nesne ya da nesneleri döndüğünde yine bir jQuery objesi olarak döner. Yani doğrudan DOM nesnesini dönmez. Bu sayede Fluent Interface denilen tasarım kalıbı da desteklenmiş olur. jQuery nesnesi üzerinden esas nesnesi almak için get methodu kullanılır.

Aşağıda ki şekilde bir HTML dokumanı oluşuralım ve üzerinde işlemler yapalım.

     <form id="form1" runat="server"> 


    <div> 


        Email : 


        <input class="formInputStyle" type="text" name="txtEmail" id="txtEmail" /> 


    </div> 


    <div> 


        <input class="formButtonStyle" type="button" name="btnGonder" id="btnGonder" value="Gönder" /> 


    </div> 


    </form> 

Örnekleri yapmak için şöyle bir senaryomuz olsun; kullanıcı email adresi alanına herhangi bir şey girene kadar Gönder butonu disabled olsun. txtEmail alanına bir giriş yapıldığında Gönder butonu enable olsun.

Öncelikle email input nasıl seçeceğimize bakalım.

jQuery selector olarak bir element adını alırsa (input, div, span, form, ve diğer tüm html elementleri) sayfada ki tüm elementleri seçer ve geriye döner.
Selector bir veya birden fazla nesneyi seçmiş olsun farketmez jQuery selectordan geriye array olara jQuery objectleri döner.

Bu durumda $("input") ile sayfada ki tüm inputları seçebildiğimiz anlamış oluyoruz. Aşağsıdaki kodu çalıştırdığımız sayfadaki input elementi sayısı kadar input elementi döndürdüğünüz göreceğiz. (Eğer bir asp.net webforms sayfasında test ediyorsanız bir tane de hidden input olan viewstate inputu eklendiği için sayısı 1 fazla göreceksiniz tabiki.)

    $(function(){ 


           alert($("input").length); 


    }); 

Disable etmek için html de bildiğiniz gibi input elementinin disabled adında bir attribute'u olması gerekir. Bunu eklemek için jQuery nesnesi üzerinde yer alan attr methodunu kullanacağız attr birinci parametre olarak attribute adını ikinci parametre olarak ise o attribute'a verilecek değeri alır.

Yukarıdaki kod parçacasını çalıştırdığımızda sayfada ki tüm inputların disable olduğunu göreceğiz. Ancak istediğimiz bu değildi. Sadece txtEmail inputunun disable olmasını istiyoruz. Bunu sadece örnek olarak ekledim. Hemen ihtiyacımız olan kod parçasına geçelim.

    $(function(){ 


           //alert($('#btnGonder').length); 


           $('#btnGonder').attr('disabled', true); 


    }); 

Yukarıdaki satırda yorum satırı olarak duran satırı çalıştırdığımızda bir sayısını göreceğiz. Zira # öncekini ekleyip bir DOM elementinin id'sini verdiğimizde sadece o elemeti seçer. attr method ile disabled özelliğini true değeri ile eklediğimiz btnGonder kontrolünun sayfa yüklendiğinde disabled duruma geçtiğini görüyoruz.

Ya disable etmek istediğimiz birden fazla input element olsaydı bunların id lerini tek tek yazarak erişmekten başka bir çözüm, bir ortak nokta bulmamız gerekirdi, ortak nokta olarak css stil sınıflarını kullanabiliriz.

Verdiğim ilk html dokumanında inputlar için seçilmiş formButtonStyle adında bir css sınıfı olduğunu görüyoruz. Bu tamamen benim kendi belirlediğim şekilde verdiğim bir isim.

$(function(){ 
  
           //alert($('.formInputStyle').length); 

  
         $('.formButtonStyle').attr('disabled', true);        
}); 

  

Yukarıda gözüktüğü gibi html elementilerinin class özelliği ile belirlenmiş olan css sınıf adlarına göre seçilebilmesi için sınıf adı önüne . karakteri konarak seçim yaptırılabilir. Bu durumda sayfada bu css sınıfını kullanan kaç tane dom element var ise jquery tarafından seçilecek ve ilgili attribute değeri verilecektir.

Ayrıca Gönder butonuna $(':button') şeklinde de erişebilirsiniz. Bu şekilde sayfada ki tüm button tipinde ki input elementlerine erişebilirsiniz.

jQuery selectors dokumantasyonu için tıklayınız. Bu sayfada tüm seçim yöntemlerini örnekleri ile beraber görebilirsiniz.

Gönder butonunu disable edebilmek için farklı şekillerde erişim sağladık ve disable ettik. Şimdi ise bu butonu email alanna herhangi bir veri girişi yapıldığında aktif hale getirelim. Yani txtEmail alanına bir giriş yapıldığında çalışacak bir method ile txtEmail değerine bakıp butonu disable edelim ya da enable edelim.

    $(function(){ 


           $('#btnGonder').attr('disabled', true); 


        
           $('#txtEmail').keyup(function(){ 


            if ($('#txtEmail').val().trim()==""){ 


                 $('#btnGonder').attr('disabled', true); 


            }else{ 


             $('#btnGonder').removeAttr('disabled'); 


            } 


           }); 


    }); 

İlk satır disable etmek için kullandığımız satır, devamında ise txtEmail elementinin keyup eventinde çalışacak functionı belirliyoruz. Dikkat ederseniz ana jQuery document ready functionı içinde başka bir eventda çalışacak bir function daha oluşturuyoruz. jQuery documentationdan bind() methodu inceleyerek bu eventi nasıl document ready dışında tanımlanmış bir function ile ilişkilendirebileceğinizi görebilirsiniz. Burada ise val() ile txtEmail in değerini alıyoruz. trim() ile başında sonunda olabilecek boşluk karakterlerini atıyoruz ve kalan değer boş bir string ifadesi ilse tekrar disable ettiğimiz kodu çalıştırıyoruz. Aksi halde yani txtEmail alanı dolu ise removeAttr ile btnGonder üzerinde ki disable attribute'unu silerek butonu enable ediyoruz.


http://docs.jquery.com adresinden jQuery dokumantasyonuna erişebilrisiniz.

Bu giriş yazısından sonra, jQuery ile ilgili pratik kullanıma yönelik yazılarıma devam etmeyi planlıyorum.

Umarım birilerine faydalı olur, geri bildirim ve sorularınız için iletişim formunu kullanabilirsiniz.