JQuerye Giriş
JQuery, Sihirli dolar ($)işağreti ve operasyonlar zinciridir. Aslında Javascript ve CSS bilginiz varsa çok hoşunuza gidebilir.
JQuery Öğrenmeye başlamadan önce şunları biliyor olmalısınız:
- HTML
- CSS
- JavaScript
JQuery Nedir?
jQuery hafif sklet bir "az kodla, çok iş yap" mantığında JavaScript komutlarından oluşan kütüphanedir.
JQuerynin amacı JavaScript'i siteniz üzerinde daha basitçe kullanmanızı sağlamaktır.
jQuery kütüphanesi aşağıdaki özellikleri içerir.
- HTML/DOM değişikliği
- CSS değişikliği
- HTML olay metotları
- Efektler ve Animasyonlar
- AJAX
- Web sayfası Araçları
JQuery'i Web Sitenize Eklemek İçin:
Bir çok yolla JQueryi web sitenize eklebilirsiniz. Örneğin
- jQuery kütüphanesini jQuery.com dan indirip web sitenizde kullanarak
- jQueryi CDN adresinden sitenize dahil ederek, örneğin Google gibi bir adresten.
Web Sitenize entegre ederek:
<script src="jquery-1.10.2.min.js"></script>
</head>
CDN olarak:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
Temel Kullanım:
$(seçiçi).eylem()
- $ işağreti kodun jQuery kodu olduğunu tanımlar
- (seçici) to "üzerinde işlem yapılacak" HTML elemanı veya elemanlarını belirler.
- jQuery eylem() seçilen eleman veya nesneler üzerinde uygulanacak eylem. Örneğin kabolma, hareket etme, soluklaştırma gibi...
Sihirli dolar ($) işağreti ve operasyonlar zinciri:
JQuery de dolar ($) işağreti en güçlü karakter yada semboldür. Bir $() şeklindeki fonksiyon normal olarak birbirini takip eden nesneler zincirine ait operasyonları döndürür.
- class adı test olan DIVleri yakala
- bu DIVler içerisine class adı quote olan P yani paragraf taglarını ekle
- bu P tagları içerisine şu metni ekle "a little test"
- ve bu DIVi ön tanımlı fonksiyon olan fadeOut ile işle
Burada iki temel kural var : $() ve zincirlenebilirlik
Seçiciler
1. CSS Seçicileri:
class name i note olan tüm P taglarını döndürmek için:
Tüm id si note olan P taglarını döndürmek için:
Input taglarından parametre name göre seçim yapmak için
Select taglarından parametre name e göre seçim değerini almak için
Üzerinde fonksiyon uygulanan elemanı seçmek için
JQuery seçicilerini bir dizinin elemanlarını yakalarken kombinasyonlarla kullanmak çok zevklidir. Ancak biz bu elemanları birer birer nasıl yakaladığını bilirsek, bu elemanlar üzerinde işlem yapmak daha iyi olacaktır.
Örneğin aşağıdaki örnekte P tagına ait tüm ID leri listemek için for...loop ve size() komutunu kullanıyoruz.
alert('benim ID ' + $('p')[i].id);
}
Elemanın kendisine direk erişim için each() komutunu isimsiz bir fonksiyon parametresi olarak grup içindeki her bir elemente erişmek için kullanıyoruz, burada elemanın kendisine erişmek için this kelimesini kullanıyoruz.
alert('benim ID ' + this.id)
});
Büyük ihtimalle tahmin etmişsinizdir. Birinci attr() komutu name parametresi ile belirlenen değere erişmek için, ikinci attr() komutu name parametresine ek olarak value ile belirtilen değeri atar.
Söyle bir örnek verirsek:
Yukardaki gibi bir HTML kodu için aşağıdaki JQuery komutu TITLE parametresi test olan, IDsi p1 olan tüm P taglarının TITLE değerini "more than a test" e çevirir.
Css Stili: CSS ile Süslemek veya CSS Süsünü Çıkartmak:
$('p.notes').removeClass('highlight');
Yukardaki birinci örnekte sayfadaki class değeri notes olan P taglarının class değeri class="notes, highlight" yapılıyor.
Yukardaki ikinci örnekte sayfadaki class değeri notes olan P taglarının class değeri class="highlight" yapılıyor. Yani notes CSS tanımlaması kaldırılıyor.
CSS stil değişimlerinin hepsini sevmeyiz, ekleme ve çıkarma, anahtarlama veya kapatma. toggleClass komutu bunun için var. toggleClass ile belirtilen CSS classı bir elemanda varsa siler yoksa ekler. Bir anlamda tersini alır.
Yukardaki örmekte class name değeri note olan tüm P taglarının CSS içeriği style="background-color:yellow" yapılıyor
Aşağıdaki örnekte class="note" olan P tagına ait genişlik ve yükseklik değeri değiştiriliyor.
Moden DOM web programlamasında, web sayfaları bir eleman hiyeraşisinden oluşurlar. Elemanların değişimi stillerinve pozisyonların değişiminden oluşur. Neredeyse her şeyi içerir, içerik ekleme çıkartma, ek yapma, alt tagları (child) silme, tag içerisine ekleme yapma, kopyalama gibi. Herşey mümkün, peki nasıl?
Aşağıdaki komut ise seçili elaman içerisine eklenen HTML tagları gibidir, innerHTML ile bir elemana değer eklemek gibi düşünün. content herhangi bir değişken ismi.
Aşağıdaki komut HTML taglarından arındılmış text içeriğini geriye döndürür:
Şimdi bir örnekle öğrenmeye çalışalım
<tbody>
<tr>
<td>test 1</td>
<td>item 1</td>
</tr>
</tbody>
</table>
Aşağıdaki kod TABLE tagları içerisinden ID si table1 olan HTML tagının içerisindeki tüm HTML taglarını döndürür.
Aşağıdaki kod ise TABLE tagları içerisinden ID si table1 olan HTML tagının içerisindeki HTML tagları dışındaki metinleri döndürür. Sonuç test1item1 olacaktır.
if(buttonGroup[i].checked){
//get value here
}
}
Şimdi aynı Seçimi JQuery ile yapalım:
Unutmayın JQuery komutları her zaman çoklu görev (multitask) lidir. Bunun yanı sıra bu komutlar daha fazla sayıda zincirle birbirine bağlanırlar.
val(values) komutu ilgili bir uygulama. Tek seferde seçilen bir eleman grubuna ait her bir eleman için geçerli değerleri ayarlayabilirsiniz.
Aşağıdaki kodu bir düşünün derim:
Yukardaki komut tüm onay kutularını (checkbox) veya radyo dügmelerini (radio boxes) kontrol ederek dizi ile belirtilen degerlerlere (red, blue, orange) uyanları geriye döndürür.
Aşağıdaki kod herşeyi ait olduğu nesnenin sonuna yapıştırır.
Aşağıdaki kod "something" içeriğini ait olduğunu nesneden öncesine yollayıp yapıştırır.
Aşağıdaki kod "something" içeriğini ait olduğunu nesneden sonraki tüm elmanlara yollayıp yapıştırır.
Wraplamadan önceki kod:
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
JQuery Kodundan sonraki durum:
<div class="new">
<div class="inner">Hello</div>
</div>
<div class="new">
<div class="inner">Goodbye</div>
</div>
</div>
Madalyonun öbür yüzü, bazen biz bu durumları kaldırmak isteyebiliriz.
Klonlama işlemini clone() ile yapıyoruz, eğer klonu her hangi bir yere taşımak isterseniz, zincileme komutlarını kullanabilirsiniz, örneğin appendTo, insertBefore, before, after...
Aşağıdaki komula IMG taglarından ID si cloneme olanı çoğaltıyoruz ve DIV taglarından ID si gallary olan elemana bu klonlanan kod eklenecek.
Şimdiye kadar elemanları seçmeyi ve elemanlar üzerinde işlem yapmayı inceledik, şimdi biraz aksiyon zamanı (olay işleme). Eylemler, reaksiyonlar, Etkileşimleri öğrendiklerimiz aracılığıyla birbirine bağlayalım ve oynuyalım.
JQuery bizi Browserların olaylara (event) farklı bakışından korur. JQuery aynı zamanda bize olayların bağlılığını ve bir çok olay dinleyisine bağlılıktan kurtarır. Bazı olaylar (blur, change, click, focus, keydown...). Biz bu olayların özelliklerinede erişebiliriz, mesala keyCode, pageX, pageY, screenY, shiftKey, target gibi...
Bir image üzerine tıklandığında oluşacak bir etkileşim örnegi:
$('img#clickme').bind('click', function(evt) {
alert('you click me');
})
})
$('img').bind('click', function(evt) {
alert('My id = ' + this.id);
})
})
.bind('click', function(event) {
alert('My id = ' + this.id);
})
.bind('click', function(event) {
alert('My source = ' + this.src);
})
.bind('click', function(event) {
alert('My position = ' + event.pageX+ ' '+event.pageY);
});
unbind(event)
Örnegin:
$('img#clickMe').click() // this fakes a click action from the image whose id = clickMe
$('img#submit').trigger('submit')
})
$('img#submit').submit(function(){
alert('All right. Submited');
});
function(event) {
$(event.target).css('background-color', 'red');
},
function(event) {
$(event.target).css('background-color', 'green');
}
);
function() {
$(this).attr('src', 'star.jpg');
},
function() {
$(this).attr('src', 'star.gif');
}
);
- http://dotnetslackers.com/Community/blogs/xun/archive/2008/09/26/jquery-the-very-very-basics-lesson-1.aspx
- http://dotnetslackers.com/Community/blogs/xun/archive/2008/09/26/jquery-the-very-very-basics-lesson-2.aspx
- http://dotnetslackers.com/Community/blogs/xun/archive/2008/09/26/jquery-the-very-very-basics-lesson-3.aspx
- http://dotnetslackers.com/Community/blogs/xun/archive/2008/09/26/jquery-the-very-very-basics-lesson-4.aspx
