Kirli Kirpi Blog

Bize, sektöre ve hayata dair söylemek istediklerimiz var. Peki siz bunları dinlemek ve okumak ister misiniz?

jQuery’i Tanıyalım
jquery

jQuery Nedir?

Sayfa üzerindeki kontrollerin birçoğunu kullanıcı tarafında yapmamızı kolaylaştıran, ajax ile sayfa yenilenmeden içeriği güncellememize olanak tanıyan, CSS animasyonları ile sunumu görselleştirmemize yarayan ve DOM yönetimini önemli ölçüde kolaylaştıran jQuery; 2005 yılından beri geliştirilen “açık kaynak kodlu” bir JavaScript kütüphanesidir.

Az yer kaplaması (32kb) ve kullanımının çok basit olması nedeniyle dünya üzerinde en çok kullanılan JavaScript kütüphanelerinin başını çekmektedir.

jQuery Nasıl Kullanılır?

jQuery’i kullanmak için jQuery dosyalarından birini (jquery.js veya jquery.min.js) sayfamıza eklemeliyiz. Dosyamızı sayfaya eklemeyi öğrenmeden önce, dosyalarının farklarını öğrenelim.

jquery.js ile jquery.min.js arasındaki fark nedir?

Kullanım açısından jquery.js ile jquery.min.js arasında bir fark yoktur. jquery.js dosyası, jQuery kodlarının tamamını olduğu gibi içinde barındıran, boyutu jquey.min.js‘ye göre daha büyük dosyadır. Boyutu küçük olan jquery.min.js ise jquery.js‘nin sıkıştırılmış halidir. Web sayfasının performansı açısından jquery.min.js‘yi kullanmanız önerilir.

jQuery dosyamızı yerel sunucudan sayfamıza eklemek

Kendi (yerel) sunucumuzda barınan jQuery dosyasını sayfamıza aşağıdaki kod ile ekleyebiliriz.

<script type="text/javascript" src="jquery.min.js"></script>

jQuery dosyamızı CDN ile sayfamıza eklemek

CDN (Content Distribution Network), statik içerikleri barındırmaya yarayan bir çeşit depolama alanıdır. Site yüklenirken bu dosyaları kendi (yerel) sunucumuzdan çağırmak yerine başka bir sunucudan çağırırız. Bunun ne gibi avantajları vardır?

  1. CDN’lerin birçok yerde sunucuları vardır. Siteyi ziyaret eden kullanıcı farklı bir ülkeden giriyorsa, dosyamız girdiği ülkedeki sunucudan yüklenir ve sitemiz dünyanın her yerinde aynı hızla yüklenir.
  2. Web tarayıcılarının farklı sunuculardan paralel download yapmasına olanak sağlar. Bu sayede sayfanın yüklenme hızı artar.

jQuery dosyasını Google CDN kullanarak sayfamıza aşağıdaki kod ile ekleyebiliriz.

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

CDN’de hata oldu, jQuery dosyamız yüklenemedi

CDN’de hata oldu veya local’de bir site kodluyoruz, internetimiz yok. jQuery dosyamız sayfamıza yüklenmiyor. Bu durumda ne yapmalıyız? İzleyeceğimiz yol çok basit.

  1. CDN ile jQuery dosyamızı sayfamıza ekleyeceğiz.
  2. jQuery sayfaya yüklenmiş mi yüklenmemiş mi kontrol edeceğiz.
  3. Eğer yüklenmemişse jQuery dosyasını yerel (local) sunucumuzdan çağıracağız.
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript">window.jQuery || document.write('<script src="jquery.min.js"><\/script>')</script>

Yazım Kuralları

jQuery kütüphanesiyle kod yazarken komutlarımızın başına $ veya jQuery ifadelerinden birini koymalıyız. Bu kodlar bizim jQuery kütüphanesinde iş yapacağımız anlamına gelir. jQuery yazım şekli basittir. Genel komutlarda önce jQuery kütüphanesinde iş yapacağımızı söyleriz, sonrasında element’imizi seçeriz, sonuna metodumuzu yazarak komutumuzu bitiririz. Mesela:

$("#kirlikirpi").fadeIn();

dipnot: jQuery bir JavaScript kütüphanesi olduğu için JavaScript yazım kuralları, jQuery için de geçerlidir. Bu nedenle komutlarımızı ; (noktalı virgül) ile bitirmeliyiz.

Örnek jQuery satırı:

jQuery("#kirlikirpi").html("Hello World!");

Aynı işlevi gören başka bir jQuery satırı:

$("#kirlikirpi").html("Hello World!");

Fonksiyon Yazım Kuralları

Birden fazla fonksiyon yazma yöntemi vardır. Basitten karışığa doğru birkaç örnekle fonksiyon yazmayı göstereceğim.

Örnek fonksiyon yazımı 1:

function kirlikirpi() {
    // işlemler
};

Kullanımı: kirlikirpi();

Örnek fonksiyon yazımı 2:

$.kirlikirpi= function() {
    // işlemler
};

Kullanımı: $.kirlikirpi();

Örnek fonksiyon yazımı 3:

$.kirlikirpi= {
    carp: function() {
        // işlemler
    },

    bol: function() {
        // işlemler
    },

    topla: function() {
        // işlemler
    },

    cikar: function() {
        // işlemler
    }
};

Kullanımı: $.kirlikirpi.bol();

Seçiciler

jQuery ile bir şeyleri seçip, onların üstünde oynayabilirsiniz. Seçiciler çok basittir, sadece $(seçici); şeklinde yazarak kullanabilirsiniz.

ID ve Class Seçicileri

Sayfa üzerinde id’si kirlikirpi olan ilk element:

$("#kirlikirpi");

Sayfa üzerinde class’ı kirlikirpi olan element’ler:

$(".kirlikirpi");

Sayfa üzerinde class’ı kirlikirpi veya foo olan element’ler:

$(".kirlikirpi, .foo");

Nitelik Seçicileri

Bir element’e ait name, value, type, id, class gibi değerlere göre işlem yapmamızı sağlayan nitelik seçicilerinin örneklerini aşağıda bulabilirsiniz.

Sayfa üzerinde type’ı text olan input’lar:

$("input[type='text']");

Sayfa üzerinde href’i wm olan a’lar:

$("a[href='wm']");

Sıralama Seçicileri

Bu başlığı nasıl isimlendireceğimi çok düşündüm. Sıralama Seçicileri, bir element’in sırasına göre işlem yapmanızı sağlar. Seçici isimleri :first, :last, :odd, :even, :eq(index) gibi devam edebilir.

Sayfa üzerindeki ilk ul:

$("ul:first");

Sayfa üzerindeki son ul:

$("ul:last");

Tek sayılı li’ler (1-3-5-7-9):

$("ul li:odd");

Çift sayılı li’ler (2-4-6-8):

$("ul li:even");

Sayfa üzerindeki 3. (üçüncü) ul:

$("ul:eq(2)");

dipnot: :eq kullanırken saymaya 0 (sıfır) sayısından başlamayı unutmayınız.

Seçiciler konumun sonuna geldim. Daha fazla seçiciyi ve daha çok örneği Kaynaklar’da linkini paylaştığım w3schools sayfasından bulabilirsiniz.

Toparla

Bu yazıda jQuery’i tanıdık, jQuery ile kod yazımı hakkında fikir sahibi olduk, seçicilerle nasıl işlem yapacağımızı öğrendik. Önümüzdeki yazıda birlikte metodları öğreneceğiz. Bu arada Kaynaklar bölümüne yazıda kullandıklarım dışında faydalı gördüğüm diğer linkleri de paylaştım. Onları da inceleyip daha fazla bilgi sahibi olabilirsiniz. Görüşmek üzere.

Kaynaklar

http://jquery.com
http://jqfundamentals.com/chapter/jquery-basics
http://w3schools.com/jquery/jquery_ref_selectors.asp

Paylaşmak istediklerinizi bize gönderin

  • çok dindar 1i
    12 Ağustos 2013 13:55

    çok güzel bir yazı, teşekkürler

  • 12 Ağustos 2013 13:57

    Eline sağlık Aziz, gayet güzel bir yazı olmuş. Devamını bekliyoruz :)

  • Tayfun Başoğlu
    12 Ağustos 2013 14:32

    Güzel bir yazı olmuş.Eline sağlık.

  • 12 Ağustos 2013 14:39

    Yazı cok iyi ve anlaşılır Aziz, benim gibi javascripte merak salmıs arkadaslar icin faydalı olacaktır :)

  • Berk
    13 Ağustos 2013 20:19

    Yeni başlayanların işine yarayacak cinsten, ellerine sağlık Aziz. Devamını bekliyoruz..

  • 04 Eylül 2013 13:15

    […] en çok kullanılan JavaScript kütüphanelerinden biri olan jQuery’i bu yazımda birlikte tanımıştık. jQuery özellikle ön yüz geliştiriren kişiler için ciddi bir […]

  • Necmettin.karakaya@gmail.com
    06 Kasım 2013 19:59

    try.jquery.com saglam kaynakdir fikir edinmek isteyen arkadaslar icin