Makale Özeti

Merhaba arkadaşlar bu makalemizle birlikte JQuery konusuna beraberce değineceğiz. Sırasıyla; •JQuery nedir? •Nasıl kullanacağız? •Örneklerle inceleyelim?

Makale

Merhaba arkadaşlar bu makalemizle birlikte JQuery konusuna beraberce değineceğiz.

Sırasıyla;
• JQuery nedir?
• Nasıl kullanacağız?
• Örneklerle inceleyelim?

Hadi daha fazla lafı uzatmadan JQuery'e başlayalım.

JQuery Nedir?

jQuery hem javaScript hem ajax hem de efekt kütüphanesi olarak kullanılabilen bir framework’dür. 2006′nın Ocak ayında bir javaScript gurusu olan John Resig tarafından duyurulmuş. Şu anda ise 15 kişilik bir ekip tarafından gelişimi sürdürülüyor. Lisans konusuna da kısaca değinmek gerekirse, MIT veya GPL lisansının şartlarına uyduğunuz sürece kendi uygulamalarınızda kullanabiliyorsunuz.
Bu konuda jQuery’nin resmi web sitesi olan www.jquery.com‘dan daha fazla bilgi alabilirsiniz. Hem bu web sitesinden jQuery ile ilgili dokümantasyona, eğitsellere, eklentilere ve sorularınızı yazabileceğiniz foruma da ulaşabilirsiniz.
jQuery çok geniş bir kullanıcı kitlesine sahiptir. Bunlardan da biraz örnek vermek istiyorum. Sosyal haber sitesi Digg, açık kaynak kodlu projelere ev sahipliği yapan SourceForge, blog sitelerini analiz eden Technorati, RSS kaynaklarımızı yönettiğimiz FeedBurner ve birçoğumuzun kullandığı blog yazılımı WordPress bu örneklerden yalnızca birkaçıdır. Daha fazlası için jQuery Kullanan Siteler sayfasına bakabilirsiniz.

Nasıl Kullanacağız?

Öncelikle JQuery kullanmak için sitesinden JQuery kütüphanesini indiriyoruz.
İndirilen *.js uzantılı dosyayı projemize ekliyoruz.
Daha sonrasında projemize aşağıdaki kod kısmını ekliyoruz.

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

 

Örnek bir html dosyası ile nasıl bir yol izleyeceğimizi ele alalım...

 

 <html>

  <head>

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

    <script type="text/javascript">

//Kodumuzu buraya yazacağız...

    </script>

  </head>

  <body>

    <a href="http://www.volkankorkmaz.com/">jQuery ve Ben</a>

  </body>

  </html>


Döküman Hazır Olduğunda Başlatma Kodu

Site tam yüklenmeden sitenin üzerindeki linklere tıklarken sitedeki resimlerin ,bannerların vs. nesnelerin yüklenmesi beklenir ve ondan sonra sayfaya yönlenme işlemi gerçekleşir. Burada kullanıcıları bilgilendirmek için aşağıdaki kodu kullanabilirsiniz:

        $(document).ready(function() {

            $("a").click(function(event) {

                alert("Simdi Yonlendiriliyorsunuz...");

            });

        });


Bu kodu kısaca yorumlarsak ki çok uzun da yorumla yapılmaz :) document yüklendiği zaman a tag'inin click etiketi görevini yapıyor ve siteden yönlendirilirken , kullanıcıya uyarı mesajı verdiriyoruz.

CSS Classlarını Ekleme ya da Kaldırma

Şimdi de tag'lere class atama ve kaldırma olayını inceleyeceğiz.
Öncelikle bir css hazırlıyoruz.

    <style type="text/css">

    a.test { font-weight: bold; }

 </style>


Şimdi de JQuery ile Classımızı ekliyoruz.
$("a").addClass("test");

Gördüğünüz gibi bu kadar basit... Kaldırması da bu kadar kolay :)
$("a").removeClass("test");

Not : Birden fazla class eklemesi yapılabilir. Eklerken dikkatli olun..

Özel Efektler

Tabii javascript ile verdiğimiz özel efektlerin yeteneklerini JQuery ile de kullanabiliyoruz.
Ufak bir özel efekt yazalım. a elementine tıklayınca yavaşca kapatalım.

        $("a").click(function(event) {

            event.preventDefault();

            $(this).hide("slow");

        });


Zincirleme ( Magic of JQuery )

JQuery'nin en sevdiğim özelliklerinden bir tanesi de zincirleme özelliği. Bir elemente arka arkaya yapılmasını istediklerini söyleyebiliyoruz. Bunu bir örnekle inceleyelim.

$("a").addClass("test").show().html("foo");

Class ekledik ve yönlenceği sayfayı belirttik :)

Sonuç

Bu makalemizde JQuery 'e başlangıç yaptık ve bundan sonrasında JQuery özelliklerini ve örneklerini inceliyor olacağız.

Volkan KORKMAZ
Microsoft Certified Business Management Solutions Specialist
volkankorkmaz@gmail.com
http://www.volkankorkmaz.net

Kaynak
Jquery.com
Eburhan.com