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
47 yorum
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…
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
çok sağolun sonucunu en kısa zamanda size bildireceğim…
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…
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.
Enver bey merhaba ben Codecanyon’dan http://codecanyon.net/item/jquery-image-gallery-slideshow-with-mousepan/310165 bu eklentiyi aldım aslında ben bunu normal wordpress eklentisi sanarak aldım jquery hakkında hiç bir bilgim yok bunu siteme nasıl yükleyeceğim hakkında yardımcı olacak bir bilgi ararken sizin sitenize denk geldim eklentiyi yazan arkadaşa dedimki birader bu sattığın kursana.. benim saatim 150 dolar dedi 🙂 yardımcı olursanız çok minnettar olurum
İnternette arama yaparsanı binlerce ücretsiz jquery slider var. yada wordpress de kullanacaksanız, wp admin paneli eklenti yükleme bölümünde slider diye arama yaparsanız yüzlerce bulabilirsiniz. Kolay gelsin.
Ö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…
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.
Elinize sağlık. Güzel bir yazı olmuş.
hocam ben bir ilanverme sitesi actım üyelerin ilan verirken resim yüklemeleri cok uzun sürüyor mesela üye 10 adet resim yüklemeye calısıyor 10 dakika bekliyor temanın kullandıgı html multiple upload ben bunu jquery upload yapmak istiyorum fakat nasıl yapmam gerektiği konusunda bir fikrim yok jquery upload scripti nin kodlarını nereye nasıl eklemeliyim..
Yüklenme süresinin uzun olması resim boyutlarıyla alakalı olabilir. Yüksek boyutlu resim yüklenmeye çalışılıyor olabilir. Tavsiyem limit belirleyin. Örnek: 500kb üstü resim yüklenemesin vs.
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.
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.
İyi günler.Bir konuda yardımınızı rica ediyorum.Sitem için bir hava durumu scripti indirdim.Ancak bu scripti kendime göre nasıl düzenleyeceğimi bilemiyorum.(Renk,font…)
Nasıl bir yol izlemem gerekir.
script’in stil dosyası(css) ile oynarsanız istediğiniz değişiklikleri yapabilirsiniz.
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?
Demek istediğinizi tam olarak anlayamadım. Kendi yazdığınız kodu lisanslamak mı istiyorsunuz?
arkadaşlar web sayfasını pdf e çeviren bir program yazmam lazım jquery kullanarak nasıl yapabilirim yardımlarınız için şimdiden teşekkürler
http://www.eyurtsever.com/index.php/jquery-ile-pdf-goruntuleme-eklentileri
Merhaba, ben kısa süre önce aşağı yukarı bütün javascript konularını gördüm temel bir bilgi ve mantık edindim şimdi jquery öğreniyorum sormak istediğim, web sitesi tasarlarken sadece jquery kullanarak projemizi tamamlayabilir miyiz (Tabi backend kısmından bahsetmiyorum) yani illa ki bi noktada orjinal javascript kodlarına ihtiyacımız olacak mı?
Hiç javascript kullanmadan da website yapabilirsiniz. Javascript kullanarak daha modern tasarımlar ve haraketli nesneler yapabililirsiniz.
dediklerinizi uygulayacağım yardımınız için çok teşekkür ederim .
Enver Bey Merhaba
Ben bir sayfa içerisindeki dataTable a veri yükleyip buradan jquey ile ekleme çıkarma yapmak istiyorum.
Veya select2 ye veri tabanından daha önce kaydettiğim bilgileri Edit sayfasına yüklemek istiyorum.
Bunu nasıl yapabilirim.
Java Spring ve thymeleaf kullanıyorum…
Editable datatable diye google’da arama yaparsanız, sanırım sorununuzu çözersiniz. İyi çalışmalar
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?
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.
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,
Google da jquery validation diye arama yaparsanız bulabilirsiniz.
Hocam kodlar uzerınde degısıklık yapmak derken ne kastettiniz Mesela .hide yerine .gizle yapabilir miyiz ya da addClass ı sınıf ekle diye?
Değişiklik yapacağınız yerler kullandığınız class ve id ler.
Örnek : $('#sizinidiniz').hide();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
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.
merhabalar benim sitemde index.php 11 adet js var bu biraz sitenin acilisini kasiyor.
bu 11 js tek bir src veya bir kodlan cagirmamiz mumkun degimidir?
js dosyalarını sıkıştırabilirsiniz. Bu sayede boyutlarında ciddi küçülme olacaktır. Örnek online sıkıştırma sitesi : http://jscompress.com/
verdınız orneklerın ekran cıktıları olsa ve daha buyuk ornekler olsa daha ıyı olurdu…
Merabalar. JQuery hakkında pek bilgim yok . Bana 30 sayfalık JQuery i anlatan bir döküman lazım . Yardımcı olabilir misiniz ?
Jquery anlatan kitaplar mevcut. Örneğin : http://www.hepsiburada.com/liste/search.aspx?sText=jquery burada var. Yada internetten pdf dökümanları araştırabilirsiniz.
Teşekkürler söz uçar yazı kalır yıllar sonra da olsa insanlar okuyup bu kadar açıklayıcı bilgilere ulaşabiliyor gerçekten birkaç siteye baktım sizin kadar öğretici bir şekilde anlatım bulamadım.
Güzel bi paylaşım olmuş. Elinize sağlık.
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/
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.
Iyi aksamalar hocam, pek bilgim yok sayilir head taglari arasina kodlari dahil ettikten sonra body arasina ne yazacagiz yada ne gelmeli tesekkurler
kullanmak istediğiniz uygulamanın örnek kodları vardır zaten. Head tagları arasına ne geleceği, body tagları arasına ne yazılacağı örneklendirilmiştir.
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
ö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.
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