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>KopyalaSitemizde 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>KopyalaMicrosoft'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>KopyalaGoogle 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>KopyalaJQuery 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>KopyalaBir 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..
