Yeni Başlayanlar İçin jQuery – Bölüm 1

jQuery Ne Ki?

jQuery bir javascript çatısıtır. Yani yazdığınız her şey javascript’ten ibarettir. Bildiğiniz üzere javascript yazımı oldukça karışık. Bu karışıklık ta geliştiricileri javascript’ten uzaklaştırıyordu taki; jQuery,Mootools,Script.aculo.us,Ext js gibi çatılar çoğalana kadar. Bu çatılar sayesinde, javascript yeniden ayağa kalktı ve yaygınlığını artırdı. jQuery’de yukarıda bahsettiğim çatılar arasında en yaygın olanıdır. Yazımı en basit olanı,geliştirilmesi en kolay olanı…

Hadi Başlayalım

jQuery ile çalışmak için öncelikle jQuery’yi sayfanıza çağırmalısınız. Örnek:

 


<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//jQuery kodları buraya.
//Javascript olay temelinde çalışır. Yani Javascript ile bir işlemin yapılması için bir olay gerçekleşmesi gerekir.
//Yukarıdaki $(func.. ile başlayan kısımla "sayfa hazır olduğunda" şu işlemleri (süslü parantez içindeki) yap demiş olduk.
})
</script> //... sayfanın devamı

jQuery Seçici

jQuery’nin en güzel yanlarının başında harika seçiciler gelir. Aslında bu seçiciler jQuery’nin de değil, “Sizzle Selector Engine”’nin seçicileri. Bu seçici motoru sayesinde, Css seçici kodlarıyla dökümandaki her nesneyi kolaylıkla seçebilirsiniz.
$ : Bu işaret bir jQuery nesnesidir.
$(‘#id’): Parantez içine yazdığımız seçici kodlar bize her türden elemanı seçmeyi sağlıyor.

Örnek Kullanımlar:

$(‘.class’) : “class” isimli class’ı taşyan elemanları seçer
$(‘.class > #id’) : “class” ismini taşıyan class’ların içindeki id değeri  “id” olan elemanları seçer
$(‘img’): Tüm img etiketlerini seçer
Fazlası: http://api.jquery.com/category/selectors/

DOM Dediğin Nedir Gülüm?

DOM (Document Object Model) bir standarttır. Bu sayede belgedeki her şeyi, birer nesne olarak yakalayabilirsiniz.

jQuery ile DOM İşlemleri

Dom fonksiyonları sayesinde belgedeki her elemana erişebilir ve müdahale edebilirsiniz. eBurhan’dan alıntılayarak jQuery’deki bi’kaç dom fonksiyonundan bahsedeceğim:

Foksiyonlarımız: html(),text(), replaceWith()

html(): Bir elemanın içeriğini html etiketleriyle beraber döndürür. Parantez içine yeni değer yazarsanız, içeriğe o değeri atar.
text(): Bir elamanın metin içeriğini döndürür. Parantez içine yeni değer yazarsanız, içeriğe o değeri atar.
replaceWith():  Bir elemanı yeni ekleyeceğiniz elemanla değiştirir.

Örnek Kullanımlar

$(‘#paragraf’).html(‘AA paragraf değişti’) :  Paragrafın içeriğini “AA paragraf değişti” olarak değiştirir.
$(‘#paragraf’).text(‘Yeni metin’): Paragrafın metnini “Yeni metin“ olarak değiştirir.
$(‘#paragraf’).replaceWith(‘&lt;a href=””&gt;link&lt;/a&gt;’): Paragrafı “a” elemanı ile değiştirir.

Ajax mı, o da ne ki?

Ajax,  sayfa yenilenmeden “http” isteği yapabilmeyi ve sonuçları yakalayabilmeyi sağlar.
Genel çalışma şekli: Açık bir sayfa “xmlHttpRequest” nesnesi aracılığıyla bir sayfaya istekte bulunur. Sayfa da bu isteği gerçekleştirir. İstek yapılan sayfa ekrana bi’şey yazarsa, javascript bunu yakalar. Böylece sayfa yenilenmeden başka bir sayfada işlem yapılmış, sonuç alınmış olunur. Yani  Ajax…

jQuery’de Ajax

jQuery’yi diğer çatıların üstüne çıkaran en önemli fonksiyonudur ajax fonksiyonu. Kullanımını görünce hak vereceksiniz.

$.ajax({
type: ‘GET’, //İstek gönderme türüdür. POST veya GET olabilir. POST tercih edilmeli
url: ‘sayfa.php’, //İstek gönderilecek sayfadır.
data: veri, //Gönderilecek verilerdir. Bir formdan gönderme yapıyorsanız, serialize() fonksiyonu ile formu formatlamanız gerekir.
success: function(t){
//İstek tamamlandığında yapılacak işlemler burada yer alır. Yukarıda gördüğünüz atamayla istek sonucunu “t” değişkenine atamış olduk.
},
error: function(e){
//İşlem esnasında hata olduğunda yapılacak  işlemdir. Yukardıda gördüğünüz atamayla “e” değişkenine oluşan hata mesajını atadık.
}

})

Sonraki bölümde görüşmek üzere…

3 thoughts on “Yeni Başlayanlar İçin jQuery – Bölüm 1

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir