jQuery Giriş JQuery tüm tarayıcılarda çalışır mı? Web Sayfamıza nasıl ekleriz? Google veya Microsoft gibi dağıtım ağlarında barındırılan jQuery kullanmanın avantajı nedir? kodların yazılma şekli
UYARI: İnternet bir özgürlük ortamı, evet fakat her site gibi bu site de yayınına devam edebilmesi için reklam almak zorunda, ama büyük ihtimalle siz de reklam görmekten sıkıldığınız için AdBlock veya benzeri bir programı kurdunuz. Bu durum anlaşılır bir durum birçok kişi bunu yapıyor, fakat bu yapıldığı zaman da siteler masraflarını karşılayamadıkları için kapanmak zorunda kalıyor. Sitemiz AdBlock kullanan birini "Sen siteye girme" kardeşim diye engellemiyor çünkü özgürlük bunu gerektiriyor, siteyi seven zaten AdBlock'u kapatıp desteğini gösterir buna gerek yok, bu yüzden sitede özgürce dolaşacak sadece her dolaştığınız sayfalarda bu uyarı bulunacaktır....
Logo
mobilmenu
RenkliKodlar
jQuery GiriÅŸ

jQuery GiriÅŸ


JQuery bir javaScript kütüphanesidir, javaScript programlamasını büyük ölçüde basitleÅŸtirir, öğrenmesi kolaydır bu kütüphane sayasinde birsürü satır içine yazdığımız javaScript kodlarını çok basit deyimlerle tamamlar geri kalan iÅŸlemi kütüphaneye bırakırız bu sayede almamız muhtemel bir sürü tarayıcı hatalarından kurtuluruz çünkü kütüphanenin bize sunduÄŸu kodlar tarayıcı farklılığı için kütüphane tarafından tarayıcıya göre yorumlanır, ayrıca, AJAX Ã§aÄŸrıları ve DOM deÄŸiÅŸtirme gibi karmaşık ÅŸeyleri JavaScript'ten daha basit ÅŸekilde kullanıma sunar.

JQuery'ın amacı, JavaScript'i web sitenizde daha kolay kullanılır hale getirmektir, JQuery kullanmaya baÅŸlamadan önce HTMLCSSJavaScript bilgisine sahip olmanız gerekir Web'deki büyük ÅŸirketlerin birçoÄŸu jQuery'yi kullanır Google, Microsoft, facebook, Twiter v.s.

JQuery tüm tarayıcılarda çalışır mı?


JQuery ekibi çapraz tarayıcı sorunları hakkında her ÅŸeyi düşünmüş ve bu bilgiyi jQuery kitaplığına yazmışlardır. JQuery, Internet Explorer 6 da dahil olmak üzere tüm büyük tarayıcılarda aynı ÅŸekilde sorunsuz çalışır.

JQuery Web Sayfamıza nasıl ekleriz?


JQuery kütüphanesini jQuery.com'dan indirebilir veya JQuery'yi Google gibi bir  CDN'den (içerik dağıtım ağı) dahil edebiliriz, indirilebilir olarak iki farklı sürüm bulunur.

Üretim sürümü - sıkıştırılmış olduÄŸundan sayfaların daha hızlı yüklenmesini saÄŸlar web siteniz içindir.
GeliÅŸtirme sürümü - Bu test ve geliÅŸtirme içindir (sıkıştırılmamış ve okunabilir) localde kullanabilir geliÅŸtirebilirsiniz sayfaların yüklenmesinde gecikmelere neden olabilir sitenizde kullanmayın.
JQuery kütüphanesi bir JavaScript dosyasıdır ve HTML içine <script> etiketiyle dahil edilir (<script> etiketi <head> bölümünde olmalıdır) query.com dan indirilen dosyanın site dosyaların ana dizinde olan js klasörü içine atarsak kullanımı aÅŸağıdaki gibidir.
<head>
<script src="/js/jquery-3.1.1.min.js"></script>
</head>Kopyala

Sitemizde bu dosyayı tutmak yerine içerik dağıtım ağı Google CDN'den alabiliriz, kullanımı aşağıdaki şekilde olacaktır.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>Kopyala


Microsoft'ta jQuery'ı barındırır Microsoft CDN'den alabiliriz, kullanımı da aşağıdaki şekilde olacaktır.
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
</head>Kopyala

Google veya Microsoft'ta barındırılan jQuery kullanmanın avantajı nedir?


Birçok kullanıcı zaten baÅŸka bir siteyi ziyaret ederken jQuery'yi Google'dan veya Microsoft'tan indirmiÅŸtir. Sonuç olarak, sitenizi ziyaret ettiklerinde önbellekten yüklenecektir, bu daha hızlı yükleme ve trafikten tasarruf saÄŸlar. Hem çoÄŸu dağıtım ağı, bir kullanıcı bir dosyayı istediÄŸinde dosyanın kendisine en yakın sunucudan servis eder ve hızlı yüklemesine neden olur.

jQuery kodların yazılma şekli


jQuery kodların yazımında aynen JavaScript gibi davranın ordaki birçok kural burda da aynen geçerlidir örnek olması açısından kısa birkaç açıklama yapalım, kodları uygulayarak kullanırsanız anlamanız çok daha kolay olacaktır.

$(document).ready(function(){  sayfa hazır olduÄŸunda, kısaca HTML kodlarımız içine müdahale edeceÄŸimiz için jQuery (tarayıcı HTML kodları) yorumladıktan sonra aktif olsun demiÅŸ oluruz bunu aynen JavaScript'teki function deneme() { olduÄŸunu düşünün sadece JavaScript'te function'u sadece } ile kapatırken burada }); ile kapatırız nedeni javaScript'te function'dan öne bir kod bulunmaz ken burada $(document).ready( bulunması ve bunun da kapatılması gerektiÄŸi içindir.

Örnekler


<script>
$(document).ready(function(){
   // jQuery kodlarını yazacağımız yer...
});
</script>Kopyala

JQuery sözdizimi, HTML etiketleri seçmek ve etiketler üzerinde bazı iÅŸlemleri gerçekleÅŸtirmek için özel olarak hazırlanmıştır. $(seçim veya seçenek).eylem() ÅŸeklinde kullanırız.
<script>
$(document).ready(function(){
  $("div").click(function(){
     $(this).hide();
  });
});
</script>
<div>1. divi gizlemek için tıklayın!</div>
<div>2. divi gizlemek için tıklayın!</div>
<div>3. divi gizlemek için tıklayın!</div>Kopyala

Üstteki kodlar tarayıcı sayfayı yorumladıktan sonra hangi div Ã¼zerine tıklanırsa o div etiketini gizleyecektir bunu butona tıklayınca da yaptırmanın yolları vardır, eÄŸer $(this).hide(); yerine $("div").hide(); kullansaydık sayfa içinde ki tüm div'ler hangisine tıklanırsa tıklansın gizlenecekti.
Direk HTML etiketine mudahale edebildiÄŸimiz gibi bu etiketlerin id'sine veya class'ına da mudahale edebiliriz bu ÅŸekil kullanımı eÄŸer id'sine mudahale ile olacaksa $("#idAdı") class'ına mudahale ile olacaksa $(".classAdı") ÅŸeklinde yapılır, örnekler aÅŸağıda verilmiÅŸtir
<script>
$(document).ready(function(){
  $(".birinciDiv").click(function(){ //birinciDiv class'ına tıklandı ise.
     $(this).hide(); //this ile bulunduÄŸumuz div belirlenir ve gizlenmesi garçekleÅŸir.
  });


  $("#ikinciDiv").click(function(){ //ikinciDiv id'sine tıklandı ise.
     $(this).hide(); //this ile bulunduÄŸumuz div belirlenir ve gizlenmesi garçekleÅŸir.
  });


  $(".DigerDivSekli").click(function(){ //DigerDivSekli class'ına tıklandı ise.
     $("#BaskaBirDiv").hide(); //BaskaBirDiv id'sine mudahale eder ve gizlenmesi garçekleÅŸir.
  });
});
</script>
<div class="birinciDiv">1. birinciDiv kendini gizler!</div>
<div id="ikinciDiv">2. ikinciDiv kendini gizler!</div>
<div class="DigerDivSekli">3. DigerDivSekli BaskaBirDivi gizler!</div>
<div id="BaskaBirDiv">4. DigerDivSekli tıklanınca gizlenir!</div>Kopyala

Bir etikete, class'a ve id'e müdahaleyi anladınız sanırım eylemlere gelince sadece hide() ile sınırlı deÄŸil elbette fakat bunlar farklı konu ve anlatımlar gerektiriyor, öyle sanıyorum ki bundan sonraki JavaScript ihtiyaçlarınızda jQuery sizin için vazgeçilmez olacak..

Herkese Hatasız kodlamalar..

jQuery Giriş Yorumları:


Bu yazıya henüz yorum yazılmamış!



BaÄŸlan

Yorumunuza cevap yazilmasi durumunda bildiri almak istiyor musunuz?