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ş | 01 Aralık 2016

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 HTML, CSS, JavaScript 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ı:


Yorum yazılmamış!



Bağlan