{"id":109,"date":"2018-06-19T06:37:10","date_gmt":"2018-06-19T06:37:10","guid":{"rendered":"http:\/\/www.eyurtsever.com\/?p=109"},"modified":"7835-06-19T06:37:10","modified_gmt":"7835-06-19T06:37:10","slug":"jquery-nedir-nasil-kullanilir","status":"publish","type":"post","link":"https:\/\/www.eyurtsever.com\/index.php\/jquery-nedir-nasil-kullanilir","title":{"rendered":"Jquery Nedir? Nas\u0131l Kullan\u0131l\u0131r?"},"content":{"rendered":"

javaScript k\u00fct\u00fcphaneleri kendilerine \u00e7ok sa\u011flam bir yer edindiler. Gerek kod yazma s\u00fcrecini azaltmalar\u0131, gerek taray\u0131c\u0131 farkl\u0131l\u0131klar\u0131ndan do\u011fan pek \u00e7ok sorunla bo\u011fu\u015fmam\u0131z\u0131 engellemeleri ve nesne tabanl\u0131 yap\u0131lar\u0131 itibariyle javaScript k\u00fct\u00fcphaneleri \u00e7abuk benimsendiler. Prototype.js\u2018nin tetikledi\u011fi bu s\u00fcre\u00e7te y\u00fczlerce javaScript k\u00fct\u00fcphanesi duyuruldu. Dolay\u0131s\u0131yla bunlar\u0131n aras\u0131ndan bir se\u00e7im yapmak gerekiyor. Bug\u00fcne kadar benim se\u00e7imim Prototype.js idi ama art\u0131k \u00e7ok daha isabetli bir se\u00e7im oldu\u011funa inand\u0131\u011f\u0131m jQuery<\/a> ile yoluma devam ediyorum.
\n
\n<\/p>\n

jQuery nedir ve kimler taraf\u0131ndan kullan\u0131l\u0131yor?<\/h3>\n
jQuery hem javaScript hem ajax hem de efekt k\u00fct\u00fcphanesi olarak kullan\u0131labilen bir framework\u2019d\u00fcr. 2006\u2032n\u0131n Ocak ay\u0131nda bir javaScript gurusu olan John Resig<\/a> taraf\u0131ndan duyurulmu\u015f. \u015fu anda ise 15 ki\u015filik bir ekip taraf\u0131ndan geli\u015fimi s\u00fcrd\u00fcr\u00fcl\u00fcyor. Lisans konusuna da k\u0131saca de\u011finmek gerekirse, MIT<\/a> veya GPL<\/a> lisans\u0131n\u0131n \u015fartlar\u0131na uydu\u011funuz s\u00fcrece kendi uygulamalar\u0131n\u0131zda kullanabiliyorsunuz. Bu konuda jQuery\u2019nin resmi web sitesi olan www.jquery.com<\/a>\u2018dan daha fazla bilgi alabilirsiniz. Hem bu web sitesinden jQuery ile ilgili dok\u00fcmantasyona, e\u011fitsellere, eklentilere ve sorular\u0131n\u0131z\u0131 yazabilece\u011finiz foruma da ula\u015fabilirsiniz.
\njQuery \u00e7ok geni\u015f bir kullan\u0131c\u0131 kitlesine sahiptir. Bunlardan da biraz \u00f6rnek vermek istiyorum. Sosyal haber sitesi Digg<\/a>, a\u00e7\u0131k kaynak kodlu projelere ev sahipli\u011fi yapan SourceForge<\/a>, blog sitelerini analiz eden Technorati<\/a>, RSS kaynaklar\u0131m\u0131z\u0131 y\u00f6netti\u011fimiz FeedBurner<\/a> ve bir\u00e7o\u011fumuzun kulland\u0131\u011f\u0131 blog yaz\u0131l\u0131m\u0131 WordPress<\/a> bu \u00f6rneklerden yaln\u0131zca birka\u00e7\u0131d\u0131r. Daha fazlas\u0131 i\u00e7in jQuery Kullanan Siteler<\/a> sayfas\u0131na bakabilirsiniz.
\n <\/p>\n

jQuery\u2019yi nas\u0131l indirece\u011fim ve kullanaca\u011f\u0131m?<\/h3>\n

jQuery, s\u0131k\u0131\u015ft\u0131r\u0131lm\u0131\u015f<\/a> ve s\u0131k\u0131\u015ft\u0131r\u0131lmam\u0131\u015f<\/a> olmak \u00fczere iki farkl\u0131 \u015fekilde da\u011f\u0131t\u0131lmaktad\u0131r. S\u0131k\u0131\u015ft\u0131r\u0131lmam\u0131\u015f s\u00fcr\u00fcm\u00fc yakla\u015f\u0131k olarak 61 KB iken, s\u0131k\u0131\u015ft\u0131r\u0131lm\u0131\u015f s\u00fcr\u00fcm\u00fc ise yakla\u015f\u0131k 21 KB. G\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi dosya boyutlar\u0131 hem javaScript, hem ajax, hem de efekt k\u00fct\u00fcphanesi i\u00e7in yeterince hafif. E\u011fer ki jQuery\u2019yi olu\u015fturan kodlara bakmak ve kodlar \u00fczerinde de\u011fi\u015fiklik yapmak gibi bir d\u00fc\u015f\u00fcnceniz yoksa her zaman i\u00e7in s\u0131k\u0131\u015ft\u0131r\u0131lm\u0131\u015f s\u00fcr\u00fcm\u00fcn\u00fc indirmenizi tavsiye ediyorum.
\n
\nE\u011fer indirdiyseniz art\u0131k s\u0131ra onu kullanmaya gelmi\u015f demektir. jQuery tek bir dosyadan olu\u015fuyor. Bu dosyay\u0131 da web sayfan\u0131za a\u015fa\u011f\u0131daki \u00f6rnekte oldu\u011fu gibi d\u00e2hil etmelisiniz. Web sayfan\u0131za dahil ettikten sonra art\u0131k jQuery\u2019nin bizlere sunmu\u015f oldu\u011fu \u00f6zellikleri kullanmaya ba\u015flayabilirsiniz. \u00d6zellik demi\u015fken \u015fimdi de jQuery\u2019nin \u00f6zelliklerine k\u0131saca g\u00f6z atal\u0131m<\/p>\n

 <script type=\"text\/javascript\" src=\"jquery-latest.js\"><\/script>\n<\/pre>\n<\/h3>\njQuery\u2019nin birka\u00e7 \u00f6zelli\u011fi<\/h3>\nBasit kullan\u0131m:<\/strong> Ger\u00e7ekten jQuery\u2019nin son derece  basit bir kullan\u0131m\u0131 var. Yapmak istedi\u011finiz pek \u00e7ok i\u015flemi \u00e7o\u011fu zaman  \u201ctek bir sat\u0131rda\u201d halledebiliyorsunuz. \u00d6rne\u011fin web sayfan\u0131zdaki b\u00fct\u00fcn div<\/code> etiketlerini $('div')<\/code> kodu ile  yakalayabiliyorsunuz. Yok ben sadece class<\/code> \u00f6zniteli\u011fi \u201cbaslik\u201d olan div<\/code> etiketlerini yakalayaca\u011f\u0131m derseniz $('div.baslik')<\/code> kodunu kullanman\u0131z yetiyor. Yani jQuery\u2019nin slogan\u0131nda da yazd\u0131\u011f\u0131 gibi: \u201cdaha az yaz\u0131n, daha fazlas\u0131n\u0131 yap\u0131n\u201d
\n 
\nZincirlenebilirlik:<\/strong> jQuery\u2019nin Sihri (The Magic of jQuery)<\/em> olarak isimlendirilmi\u015f bu \u00f6zellik sayesinde \u00e7ok k\u0131sa kodlar  yazabilirsiniz. jQuery i\u00e7erisindeki methodlar\u0131 birbirine zincirleyerek  tek sat\u0131rda birden fazla i\u015flemi yapabilirsiniz. \u00d6rne\u011fin \u015f\u00f6yle bir kod  ile web sayfan\u0131zdaki t\u00fcm linkleri \u00f6nce yakalars\u0131n\u0131z, sonra bir class<\/code> atamas\u0131 yapars\u0131n\u0131z ve son olarak da onclick<\/code> olay\u0131na bir fonksiyon eklersiniz:<\/p>\n$('a').addClass('deneme').click(fonksiyon);\n<\/pre>\n 
\nEklentiler:<\/strong> jQuery\u2019nin bir ba\u015fka m\u00fckemmel \u00f6zelli\u011fi  de eklentileridir. Eklentileri, belli g\u00f6revleri yapan ve jQuery  k\u00fct\u00fcphanesi \u00fczerinden geli\u015ftirilmi\u015f kod par\u00e7ac\u0131klar\u0131 olarak  tan\u0131mlayabiliriz. \u00d6rne\u011fin web sitenizde \u201csekme (tab) men\u00fcler\u201d kullanmak  isterseniz Tabs eklentisi, web sayfan\u0131za bir mp3 player yerle\u015ftirmek  isterseniz jMP3<\/a> eklentisi ya da bir dosya y\u00fckleme uygulamas\u0131 sunmak isterseniz jqUploader<\/a> eklentisi ihtiyac\u0131n\u0131z\u0131 kar\u015f\u0131lamaya haz\u0131rd\u0131r. Buna benzer y\u00fczlerce  jQuery eklentisi vard\u0131r ve vakti geldik\u00e7e de bu konuda tan\u0131t\u0131mlar  yapaca\u011f\u0131m
\n 
\nUyumluluk:<\/strong> jQuery, \u015fu anda en \u00e7ok kullan\u0131lan web  taray\u0131c\u0131lar\u0131nda \u00e7al\u0131\u015fabilmektedir. Internet Explorer 6.0+, Firefox 1.5+,  Safari 2.0+ ve Opera 9.0+ ile sorunsuzca jQuery kullanabilirsiniz.  Bunun haricinde Prototype.js gibi ba\u015fka k\u00fct\u00fcphaneler ile birlikte de  uyum i\u00e7erisinde kullanabilirsiniz. Bu konuda jQuery\u2019yi Di\u011fer K\u00fct\u00fcphaneler ile Birlikte Kullanmak<\/a> sayfas\u0131 size yard\u0131mc\u0131 olacakt\u0131r.
\n 
\nEfektler:<\/strong> jQuery, script.aculo.us<\/a> gibi tamamen bir efekt k\u00fct\u00fcphanesi olmamas\u0131na ra\u011fmen yine de s\u0131k  kullan\u0131lan efektleri sunuyor. \u00d6rne\u011fin fadeOut efekti sayesinde bir  nesnenin g\u00f6r\u00fcn\u00fcrl\u00fc\u011f\u00fcn\u00fc yava\u015f yava\u015f azalt\u0131rken, show efekti sayesinde  daha \u00f6nceden gizlenmi\u015f bir nesneyi g\u00f6r\u00fcn\u00fcr k\u0131labiliyorsunuz. En \u00f6nemlisi  de bu efektleri kullanmak \u00e7ok basittir. Alttaki \u00f6rnek kodda, \u201chide\u201d  efektini kullanarak \u201cmyDiv\u201d isimli nesneyi yava\u015f\u00e7a gizlemi\u015f oluyoruz.<\/p>\n
$(\"#myDiv\").hide(\"slow\");<\/pre>\n 
\nAJAX:<\/strong> jQuery di\u011fer konularda oldu\u011fu gibi AJAX  konusunda da kullan\u0131c\u0131lar\u0131na kolayl\u0131klar sa\u011fl\u0131yor. B\u00f6ylece web  sayfan\u0131z\u0131n tamam\u0131 y\u00fcklenmeden, ba\u015fka bir web sayfas\u0131 ile etkile\u015fime  ge\u00e7ebiliyorsunuz. AJAX i\u015flemi ba\u015flamadan \u00f6nce veya bittikten sonra bir  olay\u0131 tetiklemek, sunucudan gelen veri t\u00fcr\u00fcne g\u00f6re (xml<\/abbr>, json<\/abbr>)  i\u015flem yapmak, belli zaman aral\u0131klar\u0131nda tekrar tekrar istekler yollamak  v.s. jQuery ile yapabileceklerinizin k\u00fc\u00e7\u00fck bir b\u00f6l\u00fcm\u00fc. \u00d6rne\u011fin alttaki  \u00f6rnek kod ile AJAX kullanarak form.php<\/em> dosyas\u0131na Erhan<\/em> ve 23<\/em> verilerini post<\/em> etmi\u015f oluyoruz.<\/p>\n$.ajax({\n        type: \"POST\",\n        url: \"form.php\",\n        data: \"isim=Erhan&yas=23\"\n});\n<\/pre>\nBu da basitle\u015ftirilmi\u015f ve kolayla\u015ft\u0131r\u0131lm\u0131\u015f versiyonu:<\/p>\n$.post( \"form.php\", {isim:\"Erhan\", yas:\"23\"} );<\/pre>\n<\/h3>\nSonu\u00e7\u2026<\/h3>\nEvet, basite indirgeyerek jQuery k\u00fct\u00fcphanesinden bahsetmeye \u00e7al\u0131\u015ft\u0131m.  Bundan b\u00f6yle jQuery ile ilgili haberleri, kaynaklar\u0131, \u00f6rnek kodlar\u0131 ve  kullan\u0131\u015fl\u0131 eklentileri payla\u015fmaya gayret g\u00f6sterece\u011fim. Bu sayede T\u00fcrk\u00e7e  i\u00e7eri\u011fe de bir katk\u0131m olaca\u011f\u0131n\u0131 d\u00fc\u015f\u00fcn\u00fcyorum. Zira jQuery ile ilgili  maalesef kendi dilimizde do\u011fru d\u00fczg\u00fcn bir kaynak bulunmuyor. Kendi web  sitem haricinde bir de javam.org<\/a> sitesinde de jQuery ile ilgili birka\u00e7 yaz\u0131 bulabilirsiniz. E\u011fer sizin de  bildi\u011finiz ba\u015fka T\u00fcrk\u00e7e jQuery yaz\u0131lar\u0131 varsa l\u00fctfen yorum k\u0131sm\u0131nda  belirtiniz
\n 
\nKaynak : eburhan.com<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
javaScript k\u00fct\u00fcphaneleri kendilerine \u00e7ok sa\u011flam bir yer edindiler. Gerek kod yazma s\u00fcrecini azaltmalar\u0131, gerek taray\u0131c\u0131 farkl\u0131l\u0131klar\u0131ndan do\u011fan pek \u00e7ok sorunla bo\u011fu\u015fmam\u0131z\u0131 engellemeleri ve nesne tabanl\u0131 yap\u0131lar\u0131 itibariyle javaScript k\u00fct\u00fcphaneleri \u00e7abuk benimsendiler. Prototype.js\u2018nin tetikledi\u011fi bu s\u00fcre\u00e7te y\u00fczlerce javaScript k\u00fct\u00fcphanesi duyuruldu. Dolay\u0131s\u0131yla bunlar\u0131n aras\u0131ndan bir se\u00e7im yapmak gerekiyor. Bug\u00fcne kadar benim se\u00e7imim Prototype.js idi ama art\u0131k \u00e7ok […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[9,13],"tags":[177,185,186,189,218],"_links":{"self":[{"href":"https:\/\/www.eyurtsever.com\/index.php\/wp-json\/wp\/v2\/posts\/109"}],"collection":[{"href":"https:\/\/www.eyurtsever.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.eyurtsever.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.eyurtsever.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.eyurtsever.com\/index.php\/wp-json\/wp\/v2\/comments?post=109"}],"version-history":[{"count":0,"href":"https:\/\/www.eyurtsever.com\/index.php\/wp-json\/wp\/v2\/posts\/109\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.eyurtsever.com\/index.php\/wp-json\/wp\/v2\/media?parent=109"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.eyurtsever.com\/index.php\/wp-json\/wp\/v2\/categories?post=109"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.eyurtsever.com\/index.php\/wp-json\/wp\/v2\/tags?post=109"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}