Jquery ile Click ve Hide Olayları


Bu makalemizde Jquery kullanımına başlıyoruz. Daha önceki örneklerimizde JavaScript anlatmıştınız bu Jquery de nereden çıktı, diyebilirsiniz. Aslında Jquery de bir JavaScript kütüphanesidir. Jquery ile daha az kod yazıp, JavaScript ile aynı işlemleri yapabilirsiniz. Zaten Jquery "Az kodla çok iş" sloganı ile geniş kitleler tarafından kabul görmüştür. IBM, Google, Netflix gibi birçok şirket Jquery kodlarını kendi web sitelerinde ve uygulamalarında ilk kullananlardandır. JQuery kütüphanesi sürekli güncellendiğinden de web tarayıcılarla uyumludur. 

CDN olarak bir site linki verip html head kısmında tanımlayabilirsiniz. Örneğin;

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

Ya da jquery.com adresine gidip, jquery.js kodunu bilgisayarınıza indirip, projelerinizde kullanabilirsiniz. 


Jquery kodları aşağıdaki gibi bir blok içine yazılır. $ ile başlanması bu kodların jquery kodları olarak yorumlanması içindir. Jquery kodları sayfa tamamen yüklendikten sonra çağrıldığından bir çok JavaScript hatası da önlenir. Örneğin daha oluşturulmamış bir resmi, boyutlandırmak isterseniz JavaScript'de hata alırsınız, oysa Jquery kodları zaten sayfa yüklenmesi tamamlandıktan sonra çalıştığından herhangi bir hata mesajı almazsınız.

 $(document).ready(function(){
 
 // Kodlar buraya
 
    });


Şimdi aşağıdaki gibi bir uygulama yapalım. İki tane 200px genişliğinde ve uzunluğuna div şeklimiz olsun, Takvim gizle butonuna tıklayınca kırmızı div, Haber gizle butonuna tıklayınca da mavi div gizlensin.

Aşağıda uygulamamızın tamamı yer almaktadır. Çok az CSS bildiğinizi farz ederek CSS kodlarını anlatmıyorum.

<html>
<head>
<meta charset="utf-8">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<style>
.takvim{
   width:200px;
   height:200px;
   background-color:red;
   float:left;
   margin:10px;
}

.haber{
    width:200px;
   height:200px;
   background-color:blue;
   float:left;
   margin:10px;
}
</style>
 
<script>
   $(document).ready(function(){
     $("button").click(function(){
         $(".takvim").hide();
     });
 
   $("#btnHaber").click(function() {
$(".haber").hide();
       });
 
    });
 
 
</script>
</head>
<body>

<div class="takvim">
<p>Takvim burada.. </p>
</div>
 
<div class="haber">
<p>Haber burada.. </p>
</div>
<br>
 
<button> Takvim Gizle</button>
<input type="button" id="btnHaber" value="Haber Gizle" />
 
</body>
</html>

Bu bölümde anlatacaklarımız bu kadar, başka örneklerde görüşmek üzere,

Oğuzhan TAŞ
Mayıs, 2015
 
Bookmark and Share
Dil Değiştir(Change Language)
Kategoriler
Kütüphane Programı
En çok Okunan 18 Makale