javaScript kütüphaneleri kendilerine çok sağlam bir yer edindiler. Gerek kod yazma sürecini azaltmaları, gerek tarayıcı farklılıklarından doğan pek çok sorunla boğuşmamızı engellemeleri ve nesne tabanlı yapıları itibariyle javaScript kütüphaneleri çabuk benimsendiler. Prototype.js‘nin tetiklediği bu süreçte yüzlerce javaScript kütüphanesi duyuruldu. Dolayısıyla bunların arasından bir seçim yapmak gerekiyor. Bugüne kadar benim seçimim Prototype.js idi ama artık çok daha isabetli bir seçim olduğuna inandığım jQuery ile yoluma devam ediyorum.

 

jQuery nedir ve kimler tarafından kullanılıyor?

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.

 

jQuery’yi nasıl indireceğim ve kullanacağım?

jQuery, sıkıştırılmış ve sıkıştırılmamış olmak üzere iki farklı şekilde dağıtılmaktadır. Sıkıştırılmamış sürümü yaklaşık olarak 61 KB iken, sıkıştırılmış sürümü ise yaklaşık 21 KB. Gördüğünüz gibi dosya boyutları hem javaScript, hem ajax, hem de efekt kütüphanesi için yeterince hafif. Eğer ki jQuery’yi oluşturan kodlara bakmak ve kodlar üzerinde değişiklik yapmak gibi bir düşünceniz yoksa her zaman için sıkıştırılmış sürümünü indirmenizi tavsiye ediyorum.

 

Eğer indirdiyseniz artık sıra onu kullanmaya gelmiş demektir. jQuery tek bir dosyadan oluşuyor. Bu dosyayı da web sayfanıza aşağıdaki örnekte olduğu gibi dâhil etmelisiniz. Web sayfanıza dahil ettikten sonra artık jQuery’nin bizlere sunmuş olduğu özellikleri kullanmaya başlayabilirsiniz. Özellik demişken şimdi de jQuery’nin özelliklerine kısaca göz atalım

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

jQuery’nin birkaç özelliği

Basit kullanım: Gerçekten jQuery’nin son derece basit bir kullanımı var. Yapmak istediğiniz pek çok işlemi çoğu zaman “tek bir satırda” halledebiliyorsunuz. Örneğin web sayfanızdaki bütün div etiketlerini $('div') kodu ile yakalayabiliyorsunuz. Yok ben sadece class özniteliği “baslik” olan div etiketlerini yakalayacağım derseniz $('div.baslik') kodunu kullanmanız yetiyor. Yani jQuery’nin sloganında da yazdığı gibi: “daha az yazın, daha fazlasını yapın”

 

Zincirlenebilirlik: jQuery’nin Sihri (The Magic of jQuery) olarak isimlendirilmiş bu özellik sayesinde çok kısa kodlar yazabilirsiniz. jQuery içerisindeki methodları birbirine zincirleyerek tek satırda birden fazla işlemi yapabilirsiniz. Örneğin şöyle bir kod ile web sayfanızdaki tüm linkleri önce yakalarsınız, sonra bir class ataması yaparsınız ve son olarak da onclick olayına bir fonksiyon eklersiniz:

$('a').addClass('deneme').click(fonksiyon);

 

Eklentiler: jQuery’nin bir başka mükemmel özelliği de eklentileridir. Eklentileri, belli görevleri yapan ve jQuery kütüphanesi üzerinden geliştirilmiş kod parçacıkları olarak tanımlayabiliriz. Örneğin web sitenizde “sekme (tab) menüler” kullanmak isterseniz Tabs eklentisi, web sayfanıza bir mp3 player yerleştirmek isterseniz jMP3 eklentisi ya da bir dosya yükleme uygulaması sunmak isterseniz jqUploader eklentisi ihtiyacınızı karşılamaya hazırdır. Buna benzer yüzlerce jQuery eklentisi vardır ve vakti geldikçe de bu konuda tanıtımlar yapacağım

 

Uyumluluk: jQuery, şu anda en çok kullanılan web tarayıcılarında çalışabilmektedir. Internet Explorer 6.0+, Firefox 1.5+, Safari 2.0+ ve Opera 9.0+ ile sorunsuzca jQuery kullanabilirsiniz. Bunun haricinde Prototype.js gibi başka kütüphaneler ile birlikte de uyum içerisinde kullanabilirsiniz. Bu konuda jQuery’yi Diğer Kütüphaneler ile Birlikte Kullanmak sayfası size yardımcı olacaktır.

 

Efektler: jQuery, script.aculo.us gibi tamamen bir efekt kütüphanesi olmamasına rağmen yine de sık kullanılan efektleri sunuyor. Örneğin fadeOut efekti sayesinde bir nesnenin görünürlüğünü yavaş yavaş azaltırken, show efekti sayesinde daha önceden gizlenmiş bir nesneyi görünür kılabiliyorsunuz. En önemlisi de bu efektleri kullanmak çok basittir. Alttaki örnek kodda, “hide” efektini kullanarak “myDiv” isimli nesneyi yavaşça gizlemiş oluyoruz.

$("#myDiv").hide("slow");

 

AJAX: jQuery diğer konularda olduğu gibi AJAX konusunda da kullanıcılarına kolaylıklar sağlıyor. Böylece web sayfanızın tamamı yüklenmeden, başka bir web sayfası ile etkileşime geçebiliyorsunuz. AJAX işlemi başlamadan önce veya bittikten sonra bir olayı tetiklemek, sunucudan gelen veri türüne göre (xml, json) işlem yapmak, belli zaman aralıklarında tekrar tekrar istekler yollamak v.s. jQuery ile yapabileceklerinizin küçük bir bölümü. Örneğin alttaki örnek kod ile AJAX kullanarak form.php dosyasına Erhan ve 23 verilerini post etmiş oluyoruz.

$.ajax({
        type: "POST",
        url: "form.php",
        data: "isim=Erhan&yas=23"
});

Bu da basitleştirilmiş ve kolaylaştırılmış versiyonu:

$.post( "form.php", {isim:"Erhan", yas:"23"} );

Sonuç…

Evet, basite indirgeyerek jQuery kütüphanesinden bahsetmeye çalıştım. Bundan böyle jQuery ile ilgili haberleri, kaynakları, örnek kodları ve kullanışlı eklentileri paylaşmaya gayret göstereceğim. Bu sayede Türkçe içeriğe de bir katkım olacağını düşünüyorum. Zira jQuery ile ilgili maalesef kendi dilimizde doğru düzgün bir kaynak bulunmuyor. Kendi web sitem haricinde bir de javam.org sitesinde de jQuery ile ilgili birkaç yazı bulabilirsiniz. Eğer sizin de bildiğiniz başka Türkçe jQuery yazıları varsa lütfen yorum kısmında belirtiniz

 

Kaynak : eburhan.com

13.579 okunma


(24) (33) (51)
108 oy


Yazar : Enver Yurtsever

Web Developer & Designer

“Jquery Nedir? Nasıl Kullanılır?” için 27 Yorum

  1. mehmet küçükkalem diyor ki:

    jquery nin wordpressle kullanıldığını biliyoruz ancak hazır bazı jquery kodlarını wordpress siteye nasıl entegre edebilirz?Bu kodları nereye veya index.php ,header.php gibi uygun olan bir sayfaya mı kopyalayacağız?Şimdidedn Teşekküreler?

    • Enver Yurtsever diyor ki:

      Jquery sadece wordpressle kullanılan bir dil değildir. Tüm yazılım dillerine yardımcı olarak kullanılabilir. Burada önemli olan sizin jquery ile ne yapmaya çalıştığınız. Jquery’nin ana dosyasını indirip sayfanızın tagları arasına entegre ettikten sonra, jquery kodlarını o sayfada kullanabilirsiniz.

  2. mehmet küçükkalem diyor ki:

    Eğer mümkünse jquerynin wordpress e entegresine bir örnek verseniz veya yayınlasanız olur mu.Çünkü bu konuda biraz acemiyim :) Kullanmak istediğim jquery kodları menü biçimi ve anasayfaya yerleştirilmiş slide show la alakalı.Eğer kavrayabilirsem başka yerlerde de kullanabilirim.yardımlarınız için teşekkür ederim…

    • Enver Yurtsever diyor ki:

      Kullanmak istediğiniz jquery slider yada menünün jquery dosyalarını sitenizin dosyalarının olduğu yere atın. Daha sonra temanızın header.php dosyasını açıp tagları arasına attığınız dosyaları include edin.

      örnek :
      < script type="text/javascript" src="js/jquery-1.6.1.js" >< /script >
      < script type="text/javascript" src="js/slider.js" >< /script >
      < link href="Css/slider.css" rel="stylesheet" type="text/css" " / >
      (sistem html kodları engellediği için boşluk bırakak yazdım)

      daha sonra sliderı koymak istediğiniz dosyayı açın ve sliderin kodlarını oraya yapıştırın. Tabi bunu kendi temanıza göre düzenlemek durumundasınız. Biraz uğraşırsanız yapacağınızı düşünüyorum.

      Takıldığınız yer olursa bana tekrardan sorabilirsiniz. Kolay gelsin

  3. mehmet diyor ki:

    Daha önceki yazınızı ders vs işlerim dolayısıylabiraz geç uygulamaya koyuldum header le alakalı olan elimdeki jquery menü için header a belirttiğiniz entegre kodunu yazdım ancak daha sonra “sliderı koymak istediğiniz dosyayı açın ve sliderin kodlarını oraya yapıştırın” sözünüzü uygulayamadım çünkü jquery menünün javascript kodlarını nereye yapıştıracağım konusunda bilgim yok bazı sitelerde jquery kodlarındaki $ yerine Jquery yazın diyor ama bu kodları functions.php ye mi yoksa header a mı yazmam lazım ayrıca menü veya slider la alakası olmayan jquery leri nereye yazmalıyımBütün bu soruları cevaplarsanız size minnettar kalırım ramazan da bol bol dua ederim :)
    teşekkürler…

    • Enver Yurtsever diyor ki:

      eğer slider veya menu tüm sayfalarda gözükecek ise , jquery kodlarını tüm sayfalara include olan yere yapıştırman daha mantıklı olur. header.php tüm sayfalarda olacağı için header.php içinde < head > tagları arasına sapıştırmalısın. menu veya html kodlarını da menunun veya sliderın gözükmesini istediğin yere koyman yeterli.

      Slider ile alakalı olmayan veya olan tüm jqueryleri header.php de head tagları arasına koyabilirsin. Ama tüm sayfalarda gözükmeyecek olan jquery kodlarını sadece ilgili sayfaya koyarsan daha iyi olur. Eğer tüm sayfalarda entegreli şekilde olursa sayfa yavaşlayabilir.

  4. Ayşe Öztürk diyor ki:

    Merabalar. JQuery hakkında pek bilgim yok . Bana 30 sayfalık JQuery i anlatan bir döküman lazım . Yardımcı olabilir misiniz ?

  5. sibel şahin diyor ki:

    Öncelikle merhabalar ben bu jquery kodlarını dreamweawer da kullanabilir miyim eğer kullancaksam bu nasıl olmalı jquery hakkında pek bilgim yok beni bilgilendirirseniz çok sevinirm şimdiden tesekkürler…

    • Enver Yurtsever diyor ki:

      Jquery’nin kullanım alanı çok fazla. Jquery ile ne yapmak istediğinizi söylerseniz yardımcı olabilirim. Örneğin slider , açılir menü, kayan yazı vs. birçok yerde kullanılabilir. Jquery yi istediğiniz editorde kullanabilirsiniz. Dreamweaver , frontpage , visual studio hatta notepad bile kullanabilirsiniz.

  6. figan diyor ki:

    merhaba.ben siteme little boxes menu koymaya çalışıyorum.indirdiğim rar dosyasının içinden çıkan index html yi ftp nin neresine ve nasıl atacağım.lütfen yardımcı olun,günlerdir bununla uğraşıyorum.css ler tamam images de tamam. ama bu index html olmuyor.sitem smf ve bunu portala koymak istiyorum.

    http://tympanus.net/Tutorials/LittleBoxesMenu/

    • Enver Yurtsever diyor ki:

      indirdiğiniz dosyaları direkt ftp ye atarsanız çalışmaz. index.html dosyasında örnek vardır. O örneğe göre kodları sitenize uyarlamanız gerekiyor. js ve css dosyalarını direkt atabilirsiniz. Fakat index.html dosyasındaki örnekler gibi kendi sitenize uyarlamanız gerekir.

  7. Elif Karaca diyor ki:

    merhabalar .yazınızı okudum .jquery’nin visual studio’da kullanılıldığını yazmışsınız.benim yaptığım bir sitede jquery kodları ile sitedeki buton v.b şeylere efektler vermem gerekiyor.jquery hakkında bir bilgim yok.bu konuda yardımcı olursanız çok memnun olurum.şimdiden teşekkürler.

    • Enver Yurtsever diyor ki:

      google’da jquery buton effect diye aratırsanız yüzlerce örnek çıkacaktır. İçlerinden beğendiğinizi indirip kendi sitenize göre uyarlayın.
      Kolay gelsin.

  8. Elif Karaca diyor ki:

    dediklerinizi uygulayacağım yardımınız için çok teşekkür ederim .

  9. Serdar diyor ki:

    Hocam emeğinize sağlık.
    Genellikle bu tip bir girişten sonra hemen arkasından bir soru sorulması elzemdir.
    Ben de kuralı bozmuyorum.
    ———–
    DW CS5 ile çalışma yapıyorum
    Yan yana 3 div ekledim [#sol-#orta-#sağ]
    Solda ki div içine li ile alt alta liste oluşturdum.
    Sol listede ki her satıra link verdim,
    herhangi bir tıkladığımda ortada ki #orta div in içine açılacak “aaa.asp” oluşturdum.
    Target i belirtemedim ve new page olarak açıyor #orta div in içinde açmıyor.
    Eğer başarırsam #orta div e aldığım bilgiye de link verip newpage unsuru olmadan aynı sayfa içinde #sağ div içinde açacağım.
    Bu olayı jquery ile yapmam gerekirse hangi jquery kütüphanesini nasıl include edeceğim?
    Önerileriniz için şimdiden teşekkür ederim.
    Syg.
    Serdar

    • Enver Yurtsever diyor ki:

      öncelikle ana jquery kütüphanesini en üste yerleştirin.

      daha sonra jquery post ile istediğiniz div in içine içeriği çekebilirsiniz.

      soldaki li’lerdeki id yi jquery ile post ederek içeriği çağırıp div in içine çekebilirsiniz.

      http://www.kadinportalim.com/burcgoster.php?id=koc
      Şurdaki örnekte burçları çekiyor. Aynı mantık ile başka bir sayfadan içerik id yardımıyla içeriği çekebilirsiniz.

      kolay gelsin.

      • Serdar diyor ki:

        Hocam siz Jquery dediniz ve ilk dinamo hareketini verdiniz.
        Bende bu işlemi elimi kolumu sallayarak nasıl yaparım diye araştırırken WYSIWYG Web Builder’ e rastladım.
        Her şeyi kendi hallediyor ve build ediyor.
        inline frame olarak JQuery sorgularını kendisi atama olarak yapıyor.
        Çok teşekkür ederim.

        Syg.
        Serdar

  10. ibrahim diyor ki:

    Meraba hocam yaptıklarınız cok güzel. elimde bi takvim var jquery kodlanmıs fakat bu takvimi wp de nasıl aktif edebilirim

    • Enver Yurtsever diyor ki:

      Merhaba, wordpress için birçok takvim eklentisi bulabilirsiniz. Sıfırdan yapmanıza gerek yok. Ama kendiniz eklenti yapmak istiyorsanız. wp için eklenti nasıl yapılır araştırabilirsiniz.

      kolay gelsin.

  11. Yıldız diyor ki:

    Elinize sağlık. Güzel bir yazı olmuş.

  12. Yusuf Yavaş diyor ki:

    iyi günler. peki jquery ile yazdığımız bir kodun lisansını alabilir miyiz ? mesela sen siteleri için eklenti yapıyoruz jquery ile bunun lisansını alabilir miyim?

  13. Örümcek Adam diyor ki:

    Güzel bi paylaşım olmuş. Elinize sağlık.

  14. fatih ünlü diyor ki:

    merhaba,
    bir konuda yardıma ihtiyacım var, yardımcı olabilirseniz sevinirim.
    Bir adet formum var, javascript kodları ile bazı özellikleri kontrol ediyor ve uyarı vermesi gereken yerde
    if (document.online_kayit.refakatci.checked!=true && document.online_kayit.digerkatilimci1.checked!=true)
    {
    alert (“Lütfen Refakatçi veya Diğer Katılımcı Bilgilerini Doldurunuz.”);
    document.online_kayit.refakatci.focus();
    }

    şeeklinde uyarimi verdirebiliyorum. Sadece bu bölümü, alert uyarısını jqueri görseli olarak nasıl uyarı verdirebilirim? herhangi bir click vs. yok tamamen gerçekleşen şarta göre çalışıyor.

    siteler baktım bir kaç bi şey denemedim ama beceremedim? yardımcı olacak arkadaşlar varmıdır?

    teşekkürler,

Jquery Nedir? Nasıl Kullanılır? Yazısı için Yorum Yapabilirsiniz

Code Psn Gratuit