{"id":31302,"date":"2021-06-21T17:44:00","date_gmt":"2021-06-21T14:44:00","guid":{"rendered":"https:\/\/www.natro.com\/blog\/?p=31302"},"modified":"2021-07-02T10:31:39","modified_gmt":"2021-07-02T07:31:39","slug":"jquery-nedir-jquery-ne-ise-yarar","status":"publish","type":"post","link":"https:\/\/www.natro.com\/blog\/jquery-nedir-jquery-ne-ise-yarar\/","title":{"rendered":"jQuery Nedir, jQuery Ne \u0130\u015fe Yarar?"},"content":{"rendered":"\n

Web sitesi<\/strong><\/a> tasar\u0131m\u0131n\u0131n vazge\u00e7ilmez par\u00e7alar\u0131ndan birisi olan jQuery, JavaScript dilinin d\u00fcnya \u00fczerindeki en yayg\u0131n k\u00fct\u00fcphanesi konumundad\u0131r. Bu \u00f6zelli\u011fi ile her seviyedeki yaz\u0131l\u0131mc\u0131n\u0131n ilgisini \u00e7ekmekte ve giderek artan bir \u015fekilde kullan\u0131lmaktad\u0131r. <\/p>\n\n\n\n

\"\"
jQuery Nedir, jQuery Ne \u0130\u015fe Yarar?<\/figcaption><\/figure>\n\n\n\n

Sa\u011flad\u0131\u011f\u0131 fayda ve kolayl\u0131klar bak\u0131m\u0131ndan kimsenin itiraz edemeyece\u011fi bir noktada bulunan jQuery i\u00e7in net bir tan\u0131mlama yapmak \u00e7ok kolay de\u011fildir. Fakat yine de \u201cjQuery nedir?\u201d sorusuna verilecek en net ve en kestirme cevap, \u201c2006 y\u0131l\u0131nda John Resig taraf\u0131ndan geli\u015ftirilen jQuery i\u00e7in d\u00fcnyan\u0131n en \u00e7ok kullan\u0131lan JavaScript k\u00fct\u00fcphanesidir\u201d demek m\u00fcmk\u00fcn. Di\u011ferleri ile k\u0131yasland\u0131\u011f\u0131nda zor bir dil olarak kabul edilen JavaScript dilini kullanmay\u0131 kolay hale getiren bu platform sayesinde internet \u00fczerindeki pek \u00e7ok i\u015f art\u0131k \u00e7ok pratik bir \u015fekilde yapabilirsiniz.<\/p>\n\n\n\n

K\u00fct\u00fcphane i\u00e7erisinde bulunan paketler ile neredeyse her t\u00fcrden beklentiye cevap verebilecek \u00e7\u00f6z\u00fcmler kolay ve verimli bir \u015fekilde \u00fcretilebilmektedir. Bu nedenle jQuery i\u00e7in uzun kod sat\u0131rlar\u0131ndan kurtaran bir mucize ifadesini kullanmak m\u00fcmk\u00fcnd\u00fcr. Daha k\u0131sa yaz\u0131l\u0131m ve daha hafif bir kod dizilimi ile sistemsel y\u00fck\u00fc azalan web siteleri, Google nezdinde daha itibarl\u0131 hale gelmekte ve SEO a\u00e7\u0131s\u0131ndan hat\u0131r\u0131 say\u0131l\u0131r avantajlar elde etmektedir. Bu da her seviyedeki yaz\u0131l\u0131mc\u0131 i\u00e7in jQuery k\u00fct\u00fcphanesini vazge\u00e7ilmez k\u0131lmaktad\u0131r.<\/p>\n\n\n\n

\"\"
jQuery Nedir, jQuery Ne \u0130\u015fe Yarar?<\/em><\/figcaption><\/figure>\n\n\n\n

jQuery \u00d6zellikleri Nelerdir?<\/span><\/h2>\n\n\n\n

\u201cjQuery nedir?\u201d sorusunun ard\u0131ndan genellikle \u201cjQuery\u2019nin \u00f6zellikleri nelerdir?\u201d sorusu gelir. Bu anlamda, JQuery\u2019nin t\u00fcm platformlarda ve taray\u0131c\u0131larda sorunsuz \u00e7al\u0131\u015fan bir yaz\u0131l\u0131m oldu\u011funa \u00f6zel bir vurgu yapmak gerekir. Bunun yan\u0131 s\u0131ra az kodla \u00e7ok \u015fey yapabilmeye imk\u00e2n vermesi de son derece \u00f6nemlidir. Taray\u0131c\u0131lar aras\u0131ndaki farklarda hatalar\u0131 otomatik olarak d\u00fczeltebilmektedir.\u00a0jQuery, Chrome, Firefox, Safari, MS Edge, IE, Android ve iOS gibi \u00e7ok kullan\u0131lan taray\u0131c\u0131lar\u0131n her birinde ayn\u0131 standartta \u00e7al\u0131\u015f\u0131r.<\/p>\n\n\n\n

Flash gibi di\u011fer unsurlar ile k\u0131yasland\u0131\u011f\u0131nda \u00e7ok daha fazla kabul g\u00f6rd\u00fc\u011f\u00fc ve SEO a\u00e7\u0131s\u0131ndan net olarak daha avantajl\u0131 oldu\u011fu bir ger\u00e7ektir. JavaScript ile yaz\u0131lmak istenen bir kodu \u00e7ok daha az kod sat\u0131r\u0131yla \u00e7\u00f6zmesi hem yaz\u0131l\u0131mc\u0131ya kolayl\u0131k sa\u011flamakta hem de \u00e7\u0131kt\u0131n\u0131n daha h\u0131zl\u0131 ve stabil \u00e7al\u0131\u015fmas\u0131 sonucunu do\u011furmaktad\u0131r. B\u00fct\u00fcn bunlar\u0131n bir getirisi olarak tam anlam\u0131yla kullan\u0131c\u0131 dostu bir platform \u00f6zelli\u011fi ta\u015f\u0131d\u0131\u011f\u0131 s\u00f6ylenebilir.<\/p>\n\n\n\n

jQuery\u2019nin a\u00e7\u0131k kaynakl\u0131 ve \u00fccretsiz olmas\u0131 bile son derece de\u011ferli iken, sa\u011flad\u0131\u011f\u0131 di\u011fer kullan\u0131m kolayl\u0131klar\u0131 pop\u00fclaritesini s\u00fcrekli artt\u0131rmaktad\u0131r. Ayr\u0131ca yayg\u0131n bir kullan\u0131c\u0131 a\u011f\u0131na sahip olmas\u0131 e\u011fitim ve destek kaynaklar\u0131n\u0131n bollu\u011fu sonucunu do\u011furmaktad\u0131r.<\/p>\n\n\n\n

JavaScript ve jQuery Aras\u0131ndaki Fark Nedir?<\/span><\/h2>\n\n\n\n

\u201cJavaScript ve jQuery aras\u0131ndaki fark nedir?\u201d sorusunu cevaplamak i\u00e7in \u00f6ncelikle bu iki unsurun ayr\u0131 ayr\u0131 tan\u0131m\u0131na bakmak gerekir. JavaScript, taray\u0131c\u0131n\u0131n programlama dili olarak bilinmekle birlikte son zamanlarda sunucu taraf\u0131nda da kullan\u0131m alan\u0131 edinmi\u015f durumdad\u0131r. Genel olarak bir kullan\u0131c\u0131 girdisi olu\u015fumu esnas\u0131nda tepki vermek \u00fczere planlanm\u0131\u015f, interaktif ve dinamik yap\u0131lar\u0131n arka plan\u0131ndaki ba\u015f akt\u00f6rd\u00fcr.<\/p>\n\n\n\n

jQuery ise bir JavaScript k\u00fct\u00fcphanesidir ve paketlenmi\u015f bir JavaScript koleksiyonu olarak tan\u0131mlanabilir. JavaScript ile \u00e7ok say\u0131da komut sat\u0131r\u0131 ile yaz\u0131labilecek i\u015flemleri, \u00f6nceden yaz\u0131lm\u0131\u015f ve paketlenmi\u015f kodlar sayesinde son derece basit bir \u015fekilde \u00e7\u00f6zebilmektedir.<\/p>\n\n\n\n

\"\"
jQuery Nedir, jQuery Ne \u0130\u015fe Yarar?<\/em><\/figcaption><\/figure>\n\n\n\n

jQuery\u2019nin Avantajlar\u0131 Nelerdir?<\/span><\/h2>\n\n\n\n

JavaScript ile yaz\u0131lan kodlar\u0131n zorlu\u011fu ve uzunlu\u011fu g\u00f6z \u00f6n\u00fcne al\u0131nd\u0131\u011f\u0131nda jQuery ile yaz\u0131lan kodlar \u00e7ok daha kolay, k\u0131sa ve hafif olarak nitelenebilir. jQuery ile yaz\u0131lan uygulamalar k\u00fc\u00e7\u00fck boyutlu oldu\u011fundan h\u0131zl\u0131 \u00e7al\u0131\u015fmakta ve b\u00f6ylelikle pek \u00e7ok avantaj elde edilmektedir. A\u00e7\u0131k kaynak kodlu olmas\u0131 ise s\u00fcrekli geli\u015fim ve \u00fccretsiz kullan\u0131ma a\u00e7\u0131k pek \u00e7ok eklentiye kolayl\u0131kla eri\u015fim anlam\u0131 ta\u015f\u0131maktad\u0131r.<\/p>\n\n\n\n

jQuery\u2019nin farkl\u0131 taray\u0131c\u0131larda sorunsuz \u00e7al\u0131\u015fmas\u0131n\u0131n kar\u015f\u0131l\u0131\u011f\u0131 olan Cross Browser Deste\u011fi, onun \u00e7ok tercih edilmesinin en \u00f6nemli s\u0131rlar\u0131ndan birisidir. Az kodla fazlas\u0131n\u0131 ba\u015farmak gibi bir mottoya sahip olan jQuery, son derece kolay bir \u00f6\u011frenme s\u00fcreci ile \u00f6ne \u00e7\u0131kmaktad\u0131r.<\/p>\n\n\n\n

HTML\/DOM manip\u00fclasyonu, CSS manip\u00fclasyonu, AJAX, animasyon ve efekt, event olu\u015fturma gibi pek \u00e7ok \u00f6zelli\u011fi bir arada sa\u011flamas\u0131, jQuery\u2019nin \u00f6nemli avantajlar\u0131 listesine eklenebilir.<\/p>\n\n\n\n

Bunlar\u0131n yan\u0131 s\u0131ra element se\u00e7iminin kolayl\u0131\u011f\u0131, \u00f6zelle\u015ftirebilme se\u00e7eneklerinin \u00e7oklu\u011fu gibi ba\u015fka avantajlar\u0131 da bulunmaktad\u0131r.<\/p>\n\n\n\n

jQuery Nas\u0131l Kullan\u0131l\u0131r?<\/span><\/h2>\n\n\n\n

jQuery\u2019nin bir JavaScript k\u00fct\u00fcphanesi oldu\u011funu s\u00f6ylemi\u015ftik. Dolay\u0131s\u0131yla jQuery kullan\u0131m\u0131 i\u00e7in temel d\u00fczeyde de olsa JavaScript bilgisi gerekli olmaktad\u0131r. Bu bilgi \u015fart olmamakla birlikte bilenlerin daha avantajl\u0131 olaca\u011f\u0131 a\u00e7\u0131kt\u0131r. Ayr\u0131ca s\u00f6z konusu k\u00fct\u00fcphanenin kod d\u00fczenine a\u015fina olmak da yine asgari d\u00fczeydeki gereklilikler aras\u0131nda say\u0131labilir. \u00d6zellikle slider animasyonlar\u0131 ve g\u00f6rsel efektlerin olu\u015fturulmas\u0131nda jQuery son derece elveri\u015fli bir ortam sa\u011flar.<\/p>\n\n\n\n

https:\/\/jquery.com\/download\/<\/a> sayfas\u0131ndan dosyay\u0131 indirmek kullan\u0131m i\u00e7in at\u0131lacak ilk ad\u0131md\u0131r. S\u0131k\u0131\u015ft\u0131r\u0131lm\u0131\u015f formattaki paketlerden istenenler kullan\u0131labilir veya s\u0131k\u0131\u015ft\u0131r\u0131lm\u0131\u015f klas\u00f6rler a\u00e7\u0131larak i\u00e7erisinde istenen de\u011fi\u015fiklikler yap\u0131labilir. Bu \u015fekilde jQuery ile a\u00e7\u0131l\u0131r men\u00fcler, animasyon ve efektler ile g\u00fc\u00e7lendirilmi\u015f sayfalar ve y\u00fcksek kaliteli slaytlar haz\u0131rlanabilir. Haz\u0131rlanan bu sayfalar hem en \u00fcst seviyede g\u00f6rsellik sa\u011flar hem de sistem y\u00fck\u00fcn\u00fc artt\u0131rmadan kolayca her taray\u0131c\u0131da a\u00e7\u0131l\u0131r.<\/p>\n\n\n\n

Bu ama\u00e7la i\u015fe ba\u015flarken yap\u0131lmas\u0131 gereken \u015fey \u201cjs\u201d adl\u0131 bir klas\u00f6r a\u00e7makt\u0131r. T\u00fcm jQuery dosyalar\u0131 burada yer al\u0131r. Ard\u0131ndan JQuery include ana dosyas\u0131 indirilir ve \u201cjs\u201d klas\u00f6r\u00fcne yerle\u015ftirilir. Yine ayn\u0131 klas\u00f6r i\u00e7erisine geli\u015ftiricinin atayaca\u011f\u0131 isimle \u201ceklenti.js\u201d dosyas\u0131 olu\u015fturulur. Geli\u015ftirici taraf\u0131ndan yap\u0131lmak istenen t\u00fcm i\u015flemler ve testler tamamlan\u0131r. Ard\u0131ndan ilgili dosya web sayfas\u0131nda CSS kodlar\u0131n\u0131n alt\u0131na veya \u201cbody\u201d kapan\u0131\u015f etiketinin \u00fcst\u00fcne yerle\u015ftirilir.<\/p>\n\n\n\n

Pop\u00fcler jQuery Eklentileri<\/span><\/h2>\n\n\n\n

jQuery s\u00f6z konusu oldu\u011funda elbette somut \u00f6rneklerden s\u00f6z etmemek olmaz. jQuery ile haz\u0131rlanan \u00e7ok say\u0131da eklenti olmakla birlikte aralar\u0131nda en \u00e7ok dikkat \u00e7eken ve en pop\u00fcler olanlar\u0131na a\u015fa\u011f\u0131da yer verilmi\u015ftir. Elbette pek \u00e7ok ba\u015fka eklenti de vard\u0131r ve ki\u015fiden ki\u015fiye de\u011fi\u015fen be\u011feni d\u00fczeyleri olmas\u0131 muhtemeldir. Bu sebeple a\u015fa\u011f\u0131daki \u00f6rneklere sadece ipucu olarak bakmak yerinde olacakt\u0131r.<\/p>\n\n\n\n

Round Slider<\/strong><\/p>\n\n\n\n

En pop\u00fcler jQuery eklentilerinin ba\u015f\u0131nda gelir. Sayfa y\u00fckleme s\u00fcre\u00e7lerini dairesel g\u00f6rsel \u00f6gelerle g\u00f6sterme konusunda son derece ba\u015far\u0131l\u0131d\u0131r. \u0130stendi\u011finde renk, fig\u00fcr ve i\u00e7erisindeki yaz\u0131 tipleri de\u011fi\u015ftirilebilmektedir.<\/p>\n\n\n\n

JinvertScrol<\/strong>l<\/p>\n\n\n\n

Bu eklenti arac\u0131l\u0131\u011f\u0131yla Web sayfalar\u0131ndaki yaz\u0131lara yatay kayd\u0131rma \u00f6zelli\u011fi kazand\u0131rmak m\u00fcmk\u00fcnd\u00fcr.<\/p>\n\n\n\n

Slinky<\/strong><\/p>\n\n\n\n

Bu eklenti web sayfalar\u0131n\u0131n alt b\u00f6l\u00fcm\u00fcnde men\u00fc olu\u015fturabilmeye imkan verir.<\/p>\n\n\n\n

TwentyTwenty<\/strong><\/p>\n\n\n\n

\u0130ki g\u00f6rsel aras\u0131nda mukayese yapmay\u0131 sa\u011flayan olduk\u00e7a ba\u015far\u0131l\u0131 ve yayg\u0131n bir eklentidir.<\/p>\n\n\n\n

Readable<\/strong><\/p>\n\n\n\n

Bir metin i\u00e7inde dikkat \u00e7ekmesi istenen kelimeler veya kelime gruplar\u0131na vurgu yapmaya yarayan bir dizi \u00f6zellik sunar.<\/p>\n\n\n\n

NanoGallery<\/strong><\/p>\n\n\n\n

Slaytlar\u0131n daha d\u00fczg\u00fcn ve d\u00fczenli klas\u00f6rler halinde sergilenmesini sa\u011flar.<\/p>\n\n\n\n

Avgrund Modal<\/strong><\/p>\n\n\n\n

Pop-up a\u00e7\u0131ld\u0131\u011f\u0131nda daha dikkat \u00e7ekici olmas\u0131 i\u00e7in arkas\u0131nda kalan ekran b\u00f6l\u00fcmlerini daha gri ve soluk hale getiren kullan\u0131\u015fl\u0131 bir eklentidir.<\/p>\n\n\n\n

Typeahead.js<\/strong><\/p>\n\n\n\n

Web sayfas\u0131n\u0131n arama \u00e7ubu\u011funa yaz\u0131lmaya ba\u015fland\u0131\u011f\u0131nda uygun arama \u00f6nerileri getiren bir eklentidir.<\/p>\n\n\n\n

Lettering.js<\/strong><\/p>\n\n\n\n

Haz\u0131rlam\u0131\u015f oldu\u011funuz metinde veya ba\u015fl\u0131ktaki her bir karaktere farkl\u0131 renk veya yaz\u0131 tipi atayabilmeyi sa\u011flayan olduk\u00e7a e\u011flenceli bir eklentidir.<\/p>\n\n\n\n

ImageLoader<\/strong><\/p>\n\n\n\n

Son derece enteresan bir g\u00f6r\u00fcnt\u00fc y\u00fckleyicisinin sizin i\u00e7in tasarlad\u0131\u011f\u0131 s\u00fcrprizlere haz\u0131rl\u0131kl\u0131 olman\u0131z\u0131 \u00f6neriyoruz.<\/p>\n\n\n\n

Swipebox<\/strong> Swipebox eklentisi asl\u0131nda tam anlam\u0131yla mobil uyumlu bir jQuery resim galerisidir. Ak\u0131ll\u0131 telefonlar ve tabletler i\u00e7in y\u00fcksek duyarl\u0131\u011fa sahip son derece kullan\u0131\u015fl\u0131 bir g\u00f6rsel \u015f\u00f6lene haz\u0131rl\u0131kl\u0131 olman\u0131z\u0131 \u00f6neriyoruz.<\/p>\n","protected":false},"excerpt":{"rendered":"Web sitesi tasar\u0131m\u0131n\u0131n vazge\u00e7ilmez par\u00e7alar\u0131ndan birisi olan jQuery, JavaScript dilinin d\u00fcnya \u00fczerindeki en yayg\u0131n k\u00fct\u00fcphanesi konumundad\u0131r. Bu \u00f6zelli\u011fi…\n","protected":false},"author":7,"featured_media":31307,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[1331,1330],"class_list":{"0":"post-31302","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-genel","8":"tag-jquery-ne-ise-yarar","9":"tag-jquery-nedir"},"_links":{"self":[{"href":"https:\/\/www.natro.com\/blog\/wp-json\/wp\/v2\/posts\/31302","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.natro.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.natro.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.natro.com\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.natro.com\/blog\/wp-json\/wp\/v2\/comments?post=31302"}],"version-history":[{"count":0,"href":"https:\/\/www.natro.com\/blog\/wp-json\/wp\/v2\/posts\/31302\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.natro.com\/blog\/wp-json\/wp\/v2\/media\/31307"}],"wp:attachment":[{"href":"https:\/\/www.natro.com\/blog\/wp-json\/wp\/v2\/media?parent=31302"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.natro.com\/blog\/wp-json\/wp\/v2\/categories?post=31302"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.natro.com\/blog\/wp-json\/wp\/v2\/tags?post=31302"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}