jQuery ile Birkaç Basit Örnek
Burada yapacağımız örneklerin demosunu şuradan inceleyebilir, kaynak kodlarını da şuradan indirebilirsiniz.
jQuery bilinen en popüler Javascript kütüphanelerinden biridir. Javascripti daha zevkli bir hale getirdiğini rahatça söyleyebiliriz. jQuery öğrenmek isteyenler için burada ufak tefek örnekler yapacağız. Javascript kodlarını <script> taglarının arasına yazıyoruz.
<script type="text/javascript">
//javascript kodları buraya
</script>
Önce jquery kütüphanesini şuradan indirip sayfamızda şu şekilde çağırıyoruz.
<script type="text/javascript" src="jquery-1.3.2.min.js"></scritpt>
Ardından jquery kodlarını da $(document).ready fonksiyonu içine yazıyoruz.
$(document).ready(function(){
//jquery
})
Önce seçiciler hakkında biraz temel bilgi sahibi olalım:
$(’a') ifadesi sayfa üzerindeki tüm linkleri yani <a> taglarını belirtir.
$(’a.test’) ifadesi sınıfı test olan linkleri belirtir yani <a class=”test”> tagı
$(’div’) ifadesi tüm divleri belirtir
$(’#sayfa’) id değeri saya olan divi belirtir yani <div id=”sayfa”>
$(’#sayfa a.test’) ifadesi de sayfa divinin içinde olan ve sınıfı test olan linki belirtir yani <div id=”sayfa”><a href=”#”>Test</a></div> ifadesindeki linki belirtir.
Html kodlarımız şu şekilde olsun:
<a href="#">Link 1</a> <p>Linke tıklayınca bu yazı kaybolacak.</p
jquery scriptimiz de şöyle olsun:
$(document).ready(function(){
$('a').click(function(){
$('p.test').hide();
})
});
$(’a').click() olayının içindeki fonksiyon, tıklandığında oluşacak olan olaydır. Biz burada <p> tagı olan bölümü hide() fonksiyonuyla gizliyoruz.
hide() yerine toggle() yazdığımızda ise linke tıkladıkça yazı gidip gelecek.
Eğer yazının bir animasyon şeklinde bu fonksiyonun içine ‘slow’, ‘normal’ veya ‘fast’ parametrelerini ekleriz.
$(‘p.test’).toggle(‘fast’)
Şeklinde yazarız.
Animasyonun aşağıdan yukarı olması için
$(‘p.test’).slideDown(); //veya $(‘p.test’).slideUp(); //veya $(‘p.test’).slideToggle()İ //kullanırız.
Animasyonun transparan bir şekilde başlayıp görünmesi için de
$(‘p.test’).fadeIn(); // ve $(‘p.test’).fadeOut(); //kullanabiliriz.
Bu işlemleri linkin click() olayına yazmıştık. Eğer linkin üzerine fareyi getirdiğimizde bu olayların olmasını istiyorsak mouseover() fonksiyonunu kullanabilirz.
$('a').mouseover(function(){
$('p.test').hide();
})
Fare üzerinden gittiğinde ise mouseout() fonksiyonu oluşur.
$(‘a’).mouseover(function(){
$('p.test').html('fare linkin üzerinde');
}).mouseout(function(){
$('p').html('fare linkin üzerinde değil.')
})
Burada kullandığımız html() fonksiyonu ile seçicinin içeriğini belirtiriz.
Mesela
$(‘a’).html(‘<a href=”#”>bu bir linktir</a>’)
Komutunu yazdığımızda sayfadaki tüm linklerin ‘<a href=”#”>bu bir linktir</a>’ olacaktır.
Bir de animate() fonksiyonunu kullanalım. animate() fonksiyonu içerisinde belirtilen parametrelere göre seçicide belirtilen süre içerisinde animasyon oluşturur. Eğer parametremiz ‘width’ ve değeri 200 ise seçicinin genişliğini bir süre zarfı içerisinde 200 yapar.
$(‘p’).animate({width:’200’},’slow’)
Animate fonksiyonu içerisine birden fazla parametre girebiliriz.
$(‘p’).animate({width:’200’,height:’150’},’slow’)
Kullanacağımız diğer bir fonksiyon ise css() fonksiyonun belirtilen seçicinin css’ini verdiğimiz parametreler olarak değiştirir. Şöyle kullanabiliriz:
$(‘a.kirmizi’).css({‘padding’:5,’backgroundColor’:’#f00’})
Bu komut ile kirmizi sınıfına sahip olan tüm linklerin padding değeri 5px olup arka plan rengi kırmızı olacaktır.
