Bu Yazımda JQuery’e giriş yapıp birkaç örnek ile açıklamaya çalıştım

JQuery’e Başlarken

JQuery  “The Write Less, Do More” Sloganı ile başlamış bir JavaScript(JS) kütüphanesidir. JQuery JS ile program yazımını kolaylaştırır ve JQuery öğrenmesi JS’e göre çok daha hızlı ve kolay bir script yazım dilidir.

Bu Yazıda JQuery’e bir giriş yapacağız. Bu yazı ve JQuery ile ilgilenmeden önce JS bilginizin ve html bilginizin en az temel düzeyde olması gerektiğini belirtmemiz gerekiyor. JQuery başlı başına bir kitapla dahi anlatılmayacak kadar çok fonksiyon olan büyük bir kütüphane olsa da bu yazıda giriş yapmaya çalışacağız.

Not: Normal Şartlarda JQuery’i en iyi şekilde kullanmak için CSS bilmenizde gerekmektedir. Ama konu içinde yeri geldiği ve gerektiği kadar CSS’e de değineceğim için temel gereklilikler kısmında şimdilik yer almıyor.

Bu Yazı http://www.w3schools.com sitesindeki JQuery sayfasındaki konu başlıkları ile aynı sırada konu başlıkları ve ilgili sitedeki örneklerden yararlanarak hazırlanmıştır.

Hemen Yazımızın başında belirtmemiz gereken bir diğer husus, JQuery ile ilgili doc-resource babında bulabileceğiniz en geniş kaynak yine kendi sitesi olan http://docs.jquery.com/Main_Page adresinde mevcuttur.

Temel Birkaç Terminoloji

Bu Yazıda sıkça kullanacağımız birkaç terminolojiyi belirtmek istiyorum.

Script: Kendi başına bir program olmayan, programların içinde belli görevleri yapan kod parçacıkları.
Head: Html’de her sayfanın en üstünde buluncan script’leri yazdığımız sayfa ismi yazım dili gibi özellikleri içeren bölüm.
Body: Html’de kullanıcı sayfayı açtığında(çağırdığında) kullanıcının gördüğü bölüm.
Event: Bir butona tıklandığında bir fonksiyonun çağırılıp ilgili fonksiyon işleminin çağırılmasına denir. Her zaman butona basmaya gerek yoktur. Fare işaretçisinin hareketleri bile event olabilir.
JS Kütüphanesi: Java Script’tin metotları vardır bu metotları çağırdığımızda, örneğin uzunluk bulma metodunu; kelimenin uzunluğunu verir, belli bir işlem yapar. Bu metotların (fonksiyonların) toplandığı-sıralandığı-barındırıldığı tümleşik dosyalara kütüphane denir.
Syntax: Sözdizimi kuralları, yani belli bir formatı olan tümleşik kelimeler. Örnek olarak; bir programın isim,soyad,yas gibi belli bir sıralaması ile kayıt kabul etmesi gibi.

JQuery Ne Yapar?

JS ile dinamik web sayfaları oluşturabilir, sayfayı yenilemeden(Klasik get-post olmaksızın) fonksiyonlar gibi işlem yaparak sayfalarımızın işlem kabiliyetini ve arka planda yapılan işleri kolaylaştıran-arttıran bir script’tir. JQuery bir JS kütüphanesidir. Ama Hazır JS komutları ve yapısından ötürü tarayıcı ve nerdeyse platform bağımsız diyebileceğimiz bir kütüphaneye dönüşmüştür. JQuery ile birlikte Html-CSS-JS Effect – Dom- Ajax kullanabilir. Bu konular hepsi bu yazıda yer alamayacak olsa da, çoğu ingilizce dilinde olmak üzere internette araştırma yapabileceğiniz birçok kaynak mevcuttur.

JQuery’i Sayfamıza Eklemek

Bir JS Kütüphanesi olması hasebi ile standart JS Kütüphanesi eklermiş gibi ekliyoruz. Yani;

<head>
<script type=”text/javascript” src=”jquery.js”></script>
</head>

Veya

<head>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”></script&gt;
</head>

İşlemi işimizi görecektir.

Not: Her sayfanın head tag’ları içine eklemeyi unutmayın.

İlk JQuery Fonksiyonumuz – Örnek

Fonksiyonumuzda amaç body tagları içerisinde bulunan 3 adet cümlemizde; hangi cümlenin üstüne tıklanırsa o cümlenin yok olması. JQuery’nin genel olarak ne yapıldığı anlaşılması için bu örneği verdim, yazının ilerleyen kısımlarında ayrıntılı olarak açıklanacaktır.

Head Kodumuz:

<head><script type=”text/javascript” src=”jquery.js”></script>

<script type=”text/javascript”>

$(document).ready(function(){

$(“p”).click(function(){

$(this).hide();

});

});</script> </head>

Kırmızı: Üste İfade Ettiğimiz gibi jquery.js’i sayfamıza import ediyoruz.
Mavi:document(sayfamız) hazır olduğunda fonksiyonu çağırıyoruz
Turuncu: Hangi p’ye basılma fonksiyonu ekliyorum
Yeşil: p’yi this ile alıp hide komutu ile kaldırıyorum.

Not: $ işareti JQuery işaretimizdir, yani JQuery değişkeni oluşturur veya JQuery değişkini haline getirir.

Body;

<body><p>Eğer Bana Tıklarsan Kaybolurum.</p>

<p>Bana Tıklarsan da kaybolurum!</p>

<p>Bana Tıklarsan da!</p>

</body>

Gördüğünüz gibi JQuery’de event(olay işlem) için buton’a ihtiyacımız yok, tag’lar ile her şeye event atayabiliriz, o event’a script’in içinde istediğimizi yapabilir, değiştirebilir düzeltebilir çalıştırabiliriz.

Jquery Syntax, Örnekler ve Uygulamalar

Basit Olarak Syntax: “$(selector).action()” dur
Bir “(selector)” ismi selector yani (“p”) gibi olan HTML elemanı arıyor.
Bir jQuery “action()” eleman(lar) üzerinde işlem yapmak için hazır bir fonksiyon

1)      $(this).hide() à O an script’e gelen elemanı yok eder.

2)      $(“#test”).hide() à O an script’e gelen ve id’si test olan elemanı  yok eder

3)      $(“p”).hide() à O an script’e gelen tüm p tag’ına sahip olan elemanları yok eder.

4)      $(“.test”).hide() à O an class’ı test olan tüm elemanları yok eder.

JQuery Element

$(“p”) Tüm <p> elemanları seçer.
$(“p.intro”)   class=”intro” olan tüm <p> elemanları seçer.
$(“p#demo”)id=”demo” olan tüm <p> elemanları seçer.

JQuery Öznitelik Seçiciler

$(“[href]”) Özniteiliğinde bir “href” olan tüm elemanları seçer.
$(“[href=’#’]”) Özniteiliğinde ki href “#” eşit ise seçer
$(“[href!=’#’]”) Özniteiliğinde ki href “#” eşit değilse ise seçer
$(“[href$=’.jpg’]”) Özniteiliğinde ki href “.jpg” ile biten tüm elemanları seçer

JQuery CSS Seçiciler

P elementlerinin arka planını sarı yapan kod:

$(“p”).css(“background-color”,”yellow”);

Diğer Örnekler

Syntax Açıklama
$(this) Şuan seçili HTML elemanı.
$(“p”) Tüm <p> elemanları.
$(“p.intro”) class=”intro” olan tüm  <p> elemanları.
$(“p#intro”) id=”intro” olan tüm <p> elemanları.
$(“p#intro:first”) id=”intro” olan ilk <p> elemanı
$(“.intro”) class=”intro” olan tüm elemanı.
$(“#intro”) id=”intro” olan ilk eleman.
$(“ul li:first”) Her <ul>’deki ilk <li> elemanı.
$(“[href$=’.jpg’]”) “href” özniteliği .jpg ile biten tüm elemanlar.
$(“div#intro .head”) <div> in içinde id=”intro” ve class=”head” olan tüm elemanlar.

 

JQuery Olay Fonksiyonları

Bu fonksiyonlar C’nin functionu Java’nın methodu gibi çalışır, parametre alır işlem yapar.

Aşağıdaki Kodda button isimli elemente click yani basma durumunda bir fonksiyon atadık

$(“button”).click(function() {..ve kodlar… } )

Üsteki fonksiyonda ve kodlar yazan yere alttaki kod yazılırsa <p> </p> elementi altında olan her şeyi yok eder.

$(“p”).hide();

JQuery Event-Olayları

Event Method Description
$(document).ready(function) Sayfa Hazır olduğunu yani tamamen yüklendiğini kontrol eder.
$(selector).click(function) Selector’e basma durumunda işlem yapar
$(selector).dblclick(function) Selector’e iki tıklama yapıldığında işlem yapar
$(selector).focus(function) Selector seçildiğinde fonksiyon çalışır.
$(selector).mouseover(function) Mause selector’un üstüne geldiğinde işlem yapar

Tüm Event-Olayları Öğrenmek için http://www.w3schools.com/jquery/jquery_ref_events.asp adresini kullanabilirsiniz.

JQuery Efektleri

Şuana kadar yaptıklarımızı somut biryerde kullanamamış veya çok örneklendirememiş olduğumdan dolayı çokda zevkli gelmesede işin zevkli kısımlarına başlıyoruz.

Bu konuda ilgileneceğimiz 6 ana efekt vardır. Bunlar .Hide, Show, Toggle, Slide, Fade, and Animate

Hide; 2 farklı Hide vardır biri konumuzun en başındaki ilk örnekte kullandığımız direk html elemanını yok eden efekt ve altta örneğini verdiğimiz yavaş yavaş yok eden örnek;

$(document).ready(function(){$(“.ex .hide”).click(function(){

$(this).parents(“.ex”).hide(“slow”);

});

});

Eğer bir bilgisayar olsak ve üsteki script kodunu okusan satır satır şöyle derdi

1)      Sayfa hazırsa başlat

2)      Sonu “.ex” div kodunun içinde sonu “.hide” ye basıldığında

3)      Bu elemanın(hide) parenti sonu “.ex” olan elemanı(tüm div) yavaşca yok et

Body;

<div><button >Hide me</button>

<p>Contact: Marie Bertrand<br />

265, Boulevard Charonne<br />

Paris</p>

</div>

Not: slow yerine fast yada milisaniye cinsinden değer yazabilirdiniz.

Slide Toggle: Bu örnekde panel açma ve kaptmayı yapacağız.

$(document).ready(function(){$(“.flip”).click(function(){

$(“.panel”).slideToggle(“slow”);

});

});

Eğer bir bilgisayar olsak ve üsteki script kodunu okusan satır satır şöyle derdi

1)      Doküman Hazırsa Başlat

2)      İsmi .flip ile biten elemana tıklandığında

3)      İsmi .panel ile biten elemanı slideToogle metodu ile yavaşca işlem yap.(açık ise kapat, kapalı ise aç)

Body;

<div><p>Çünkü bu Çok değerli, Biz JQuery’i hızlıca öğreniyoruz.</p>

<p>W3Schools ‘den alınan bu aktivide çok yararlı. </p>

</div>

<p> Paneli Göster/Gizle </p>

Örneğin Ekran Görüntüsü


Not: Sadece kapatmak için $(“.panel”).slideDown();
Sadece açmak için   $(“.panel”).slideUp() ‘ı kullanabilirsiniz

Aktivitenin Tam Kaynak Kodlarını http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_slide_toggle adresinden ulaşabilirsiniz

Fade: Seçilen Nesneyi Saydamlaştırır

$(document).ready(function(){$(“button”).click(function(){

$(“div”).fadeTo(“slow”,0.35); //0.35 saydamlık derecesidir

});

});

Body;

<div style=”background:yellow;width:300px;height:300px”><button>Click to Fade</button>

Animate: JQuery ile bir karenin büyümesi küçülmesi ile ilgili animasyon örneğimiz aşağıda verilmiştir. (height: Yükseklik, width: boy)

$(document).ready(function(){$(“button”).click(function(){

$(“div”).animate({height:300},”slow”);

$(“div”).animate({width:300},”slow”);

$(“div”).animate({height:100},”slow”);

$(“div”).animate({width:100},”slow”);

});

});

Not:  $(“div”).fadeOut(4000); nesneyi yok eder “fade in” ise görünür hale getirir.

Not. Tüm Efektler için http://www.w3schools.com/jquery/jquery_ref_effects.asp adresini kullanabilrisiniz.

JQuery CallBack Fonksiyonu

Alt alta yazdığınız aynı script içindeki 2 kod’da üstündeki belli bir zamanda yapılıyor olsada hemen alttakinide başlatacak ve böylece eventler karışacak, bunu engellemek için JQuery üsteki işlem bittiğinde alttaki işleme geçen bir sistem yapmış böylece karışıklıkları önlüyor.

Karışıklıklı Hali;

$(document).ready(function(){$(“button”).click(function(){

$(“p”).hide(1000);

alert(“The paragraph is now hidden”);

});

});

Düzenlenmiş Hali;

$(document).ready(function(){$(“button”).click(function(){

$(“p”).hide(1000,function(){

alert(“The paragraph is now hidden”);

});

});

});

JQuery HTML İçerik

$(document).ready(function(){$(“button”).click(function(){

$(“p”).html(“<b>Fu Yazılım Kulübü</b> “);

});

});

Eğer bir bilgisayar olsak ve üsteki script kodunu okusan satır satır şöyle derdi;

1)      Sayfa hazırsa başla

2)      Buton’un click olayını yakala

3)      Tag’i p olanları html olarak “Fu Yazılım Kulübü” Yap ve koyu olsun

Body;

<body><h2>Bu bir Başlık </h2>

<p>Bu bir paragraf</p>

<p>Bu Başka bir paragraf.</p>

<button>Bana Tıkla </button></body>

Sayfamızın İlk hali

Bu bir Başlık
Bu bir paragraf
Bu Başka bir paragraf.

Tıklandıktan Sorna

Bu bir Baslik
Fu Yazılım Kulübü
Fu Yazılım Kulübü

Not:  Eğer .html yerine .text koysa idik text olarak algılar ve <b> kodunu işleme koymadan o da text’miş gibi gönderirdi.

Not2: $(“p”).append(” Fu Yazılım Kulübü”); //Mevcut Text’in sonuna ekler

$(selector).after(content) // içeriği  sonrasında yeni bir satır olarak ekler

$(selector).before(content) //içeriği öncesinde yeni bir satır olarak ekler.

JQuery ile CSS Uygulamaları

Bu maddeyi anlamak için CSS bilgisine ihtiyacınız olacaktır.

3 farklı türde CSS atama işlemleri yapılıyor

  • css(name) – Belli bir değerdeki CSS’i geri dönderir
  • css(name,value) –CSS’e özellik veya değer ekler
  • css({properties}) – CSS’e birden çok değer ve özellik ekler

ÖRNEK

$(“p”).css(“background-color”,”yellow”);

Bu örnekte ismi p olan elementin css özelliğinden arkaplanını sarı yapıyoruz.

Script;

$(document).ready(function(){$(“button”).click(function(){

$(“p”).css(“background-color”,”yellow”);

});

});

Body;

<body><h2>Bu bir Başlık </h2>

<p>Bu bir paragraf</p>

<p>Bu Başka bir paragraf.</p>

<button>Bana Tıkla </button></body>

Diğer CSS Örnekleri

$(“#div1”).height(“200px”); // Yüksekliği 200 piksel yapar
$(“#div2”).width(“300px”); //genişliği 300 piksel yapar

Not: Tüm CSS metodlarına http://www.w3schools.com/jquery/jquery_ref_css.asp adresinden ulaşabilirsiniz.

NOT: AJAX – JQuery ilişkisine önemli ajax bilgisi gerektiği için bu makalede giriş yapmadık W3school’un internet sitesinden bakabilirsiniz.

TEST

1)      Hang işaret Jquery kullanılıcağı zaman JQuery’nin kısaltamsıdır
a)      $
b)      ?
c)      ½

2)      $(“div”) selector’u ne anlama gelir?
a)   İlk Div elemanı

b)   Tüm div elemanları

3)      JQuery Kullanıcı tarafındamı Server Tarafında mı çalıştırılan bir scripttir?
a)      Kullanıcı
b)      Server

4 ) p elementine arka plan eklemek için hangisi doğru koddur?
a) $(“p”).manipulate(“background-color”,”red”);
b) $(“p”).layout(“background-color”,”red”);
c) $(“p”).style(“background-color”,”red”);
d) $(“p”).css(“background-color”,”red”);

5)Aşağıdakilerden hangi JQuery metodu gizleme işlemini yapar
a) display(none)
b) visible(false)
c) hidden()
d) hide

6)Aşağıdaki Cümlelerden hangisi Doğrudur?
a) JQuery Kullanmak için herhangi bir şeye ihtiyacını yoktur, Çoğu Web Tarayıısı halihazırda JQuery kütüphanelerini derleyebiliyor
b) JQuery kullanmak için jquery.com’daki kütüphaneleri satın almanız gerekir
c) JQuery kullanmak için Google’daki JQuery’i refet etmek gerekir.
7)bu selector ne anlama gelir $(“div#intro .head”).
a) id=”intro” ve class=”head” olan tüm div elemanları
b) herhangi bir div elementinin içinde id=”head” ve class=”intro” olan ilk eleman
c) id=intro ve class=”head” olan tüm elementler.

8)Aşağıdakilerden Hangisi doğrudur
a) JQuery bir JavaScript kütüphanesidir
b) JQuery bir JSON kütüphanesidir

Testin Orjinali: http://www.w3schools.com/quiztest/quiztest.asp?qtest=jQuery

Cevap Anahtarı: 1)a,2)b,3)a, 4)d,5)d,6)a, 7) a,8)a

Bu yazıda http://www.w3school.com adresinde ki JQuery makalelerinden yararlanılmıştır.

Reklamlar