jQuery'e Giriş

16.06.2012Okunma Sayısı: 6398Kategori: JQuery

jQuery, basitçe Javascript’in derlenip kullanımı basite indirgenmiş bir kütüphanesidir. Web uygulamaları geliştirirken Javascript ile yapılan işlemleri jQuery kütüphanesi ile de gerçekleştirebiliriz.

jQuery’e başlarken öncelikle jQuery’nin resmi web sayfasından son versiyonunu indirebilirsiniz. jQuery’nin şu anki versiyonu 1.5.1’dir. Download sayfasına geldiğinizde iki adet indirme linki göreceksiniz : jquery-1.5.1.min.js ve jquery-1.5.1.js . İlki kütüphanenin sıkıştırılmış hali, ikincisi ise yazılım geliştiriciler için daha elverişli olan açıklamalı ve anlaşılır şekilde kodlanmış olan versiyonudur.

jQuery’nin son versiyonunu indirdikten sonra ilk uygulamamızı gerçekleştirebiliriz. Bunun için Visual Studio, Dreamviewer, Notepad, Notepad++ vb. HTML editörleri kullanabilirsiniz. Bu uygulamamızda HTML elemanlarına nasıl erişebileceğimizi inceleyelim. Öncelikle ID’sini bildiğimiz bir elemana nasıl ulaşabiliriz bakalım.

 
<html>
            <head>
                        <title>Ilk jQuery Ornegi</title>
                        <script src="jquery-1.5.1.js"></script>
                        <script type="text/javascript">
                                   $(document).ready(
                                               function(){
                                                           $("#button1").click(
                                                                       function(){
                                                                                  alert('Merhaba Dünya');
                                                                       }
                                                           );
                                               });
                        </script>
            </head>
            <body>
                        <button id="button1">Tıkla</button>
            </body>
</html>

<html>
            <head>
                        <title>Ilk jQuery Ornegi</title>
                        <script src="jquery-1.5.1.js"></script>
                        <script type="text/javascript">
                                   $(document).ready(
                                               function(){
                                                           $("#button1").click(
                                                                       function(){
                                                                                  alert('Merhaba Dünya');
                                                                       }
                                                           );
                                               });
                        </script>
            </head>
            <body>
                        <button id="button1">Tıkla</button>
            </body>
</html>

Öncelikle, HTML dosyamızla aynı klasör içinde bulunan jquery-1.5.1.js dosyasını sayfamıza referans olarak gösterdik.
$(document).ready(handler); fonksiyonu ile sayfa yüklemesi sırasında yapılan işlemler belirtilmektedir.
$(“#button1”).click(handler); fonksiyonunda ID’si “button1” olan elemana click event’ı ekleme işlemi gerçekleştmektedir.
alert(‘Merhaba Dünya’); fonskyionunda ise ekranda “Merhaba Dünya” mesajı görünecektir.

ID’sini bildiğimiz HTML elemanlarına ulaşabildik. Peki ID’sini bilmediğimiz HTML elemanlarına nasıl ulaşacağız? Şimdi bu konuyla ilgili örnek uygulamamızı inceleyelim

 
<html>
            <head>
                        <title>İkinci jQuery Ornegi</title>
                        <script src="jquery-1.5.1.js"></script>
                        <script type="text/javascript">
                                   $(document).ready(
                                               function(){
                                                           $("button:first").click(
                                                                       function(){
                                                                                  alert('İlk Butonu Tıkladınız');
                                                                       }
                                                           );
                                                           $("button:eq(1)").click(
                                                                       function(){
                                                                                  alert('İkinci Butonu Tıkladınız');
                                                                       }
                                                           );
                                                           $("button:last").click(
                                                                       function(){
                                                                                  alert('Son Butonu Tıkladınız');
                                                                       }
                                                           );
                                               });
                        </script>
            </head>
            <body>
                        <button>1. Buton</button>
                        <button>2. Buton</button>
                        <button>3. Buton</button>
            </body>
</html>

<html>
            <head>
                        <title>İkinci jQuery Ornegi</title>
                        <script src="jquery-1.5.1.js"></script>
                        <script type="text/javascript">
                                   $(document).ready(
                                               function(){
                                                           $("button:first").click(
                                                                       function(){
                                                                                  alert('İlk Butonu Tıkladınız');
                                                                       }
                                                           );
                                                           $("button:eq(1)").click(
                                                                       function(){
                                                                                  alert('İkinci Butonu Tıkladınız');
                                                                       }
                                                           );
                                                           $("button:last").click(
                                                                       function(){
                                                                                  alert('Son Butonu Tıkladınız');
                                                                       }
                                                           );
                                               });
                        </script>
            </head>
            <body>
                        <button>1. Buton</button>
                        <button>2. Buton</button>
                        <button>3. Buton</button>
            </body>
</html>

Burada dikkat etmemiz gereken ilk nokta, butonların tanımlayıcı herhangi bir belirleyici özelliğinin olmamasıdır.

jQuery kodumuzu incelersek,

$(“button:first”).click(handler) tanımlaması ile sayfada bulunan butonlardan ilkine click event’ı oluşturur ve tıklandığında “İlk Butona Tıkladınız” uyarısını vermesi sağlanır.Bunun yerine $(“buton:eq(0)”) da yazabiliriz.
$(“button:eq(1)”).click(handler) tanımlaması ile sayfada bulunan butonlardan ikincisine click event’ı oluşturur ve tıklandığında “İkinci Butona Tıkladınız” uyarısını vermesi sağlanır.
$(“button:last”).click(handler) tanımlaması ile sayfada bulunan butonlardan sonuncusuna click event’ı oluşturur ve tıklandığında “Son Butona Tıkladınız” uyarısını vermesi sağlanır.

Veysel Uğur KIZMAZ

Bilgisayar Mühendisi

veysel@ugurkizmaz.com