[JS]Jquery İle Birkaç Örnek Yapalım

Jquery ile birkaç örnek yapalım bakalım.
öncelikle şurdan kütüphaneyi indirmekle başlayalım.
indirdiğimiz kütüphaneyi şu şekilde çağıralım;
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
 artık jquey kütüphanemiz html dosyamızın içinde.
başlayalım: HTML kodlarımızı yani <body></body> tagının içine birkaç html kodu yazalım;
<a href="#">Link</a>
<p class="deneme">Bu Bir Yazıdır</p>
 Ardından HTML kodlarının altına yine body tagının içine jquery kodlarını yazalım

<script type="text/javascript">
    //javascript kodları buraya
</script>
Şimdi Java script kodlarını yazmaya başlayalım

$(document).ready(function(){

//jquery
})
Jquery  Scriptimiz şö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() olan yeri toggle() olarak değiştirdiğimizde ise yazı kayarak kapanıp açılacaktır.toggle() komutunun içine 'slow' ,'normal', 'fast' yazabiliriz bunlarda hızını belirtmemizi sağlar.Örnek Yapalım.

$('p.deneme').toggle('fast')
gibi.

Animasyonun aşağıdan yukarıya olması için,
$(‘p.test’).slideDown(); //veya
$(‘p.test’).slideUp(); //veya
$(‘p.test’).slideToggle()İ //kullanırız.
 Animasyonun Transparan bir şekilde görünmesi içinde

$(‘p.test’).fadeIn(); // ve

$(‘p.test’).fadeOut(); //kullanabiliriz.
Bu işlemleri linkinclick() olayına yazmıştık. Eğer linkin üzerine fareyi getirdiğimizde bu olayların olmasını istiyorsak mouseover() fonksiyonunu kullanabiliriz. Örnek;


$('a').mouseover(function(){
    $('p.test').hide();
})
fare üzerinden gittiğinden olayların olması için mouseout fonksiyonunu kullanırız.Örnek;
$(‘a’).mouseover(function(){
    $('p.test').html('fare linkin üzerinde');
}).mouseout(function(){
    $('p').html('fare linkin üzerinde değil.')
})

Seçiciler Hakkında Biraz Bilgi İyidir. 

$(‘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.