jQuery’e Giriş

Selam arkadaşlar,

jQuery’den kısaca bahsetmiştim , şimdi ise size bir web projesinde çok sıkça karşılaştığımız işlemleri jquery ile nasıl yapabiliriz onu inceleyeceğiz.

Bir div içerisinde çeşitli nesnelerimiz nesnelerimiz olsun , şöyle ki :

Kod:

Sayfama Hoşgeldiniz

      Mennan Sevim

     Kod yazmayı seviyorum

Burcunuz nedir ?

    •            

    • Balık
    • Kova
    • Koç
    • Aslan          
    • Akrep

Hangi takımlısınız ?                                                      

Sigara kullanıyor musunuz ?                                                       

                   Tıkla                  

 

Html’imizi yukarıdaki gibi oluşturduk şimdi biraz jquery yazalım…

Kodlarımızı sayfadaki nesneler yüklendiği zaman çalıştıracağımız için document ready içerisine yerleştiriyoruz.

   $(document).ready(function () {
     // Kodumuzu bu alana yazacağız
   });

jQuery ile nesneleri tiplerine göre seçebilirsiniz.Sayfamızdaki h1 nesneleri için generic birkaç kod yazalım.

  
 // css
 $('h1').css("color", "green");

 $('h1').css("text-decoration", "underline");

 $('h1').css("background-color", "Blue");

 //operations
 // başlığın içeriğini sıfırlayalım
 $('h1').text("");

 // başlığın içeriğini değiştirelim
 $('h1').text("Sayfama Hepiniz Hoşgeldiniz");

// Attiributes
// başlığa attr ekle
$('h1').attr("title", "Karşılama Yazısı");

// başlığa tıklandığında
$('h1').click(function () {
   alert($(this).text());
});

Bu örneklerden sonra diğer html nesnelerini üzerinde nasıl işlem yapabileceğimize bir bakalım

Nesnere verdiğimiz id’ler , name’ler , type’lar attr veya class üzerinden , yani birçok özelliğine göre
yakalayabiliriz.

Nesneleri ID ve ClassName’e göre yakalama/seçme

// nesnemiz aşağıdaki p tagı olsun

Kod yazmayı seviyorum

// ID’yi temsil eden “#” + ID ile bu işlemi gerçekleştiriyoruz. var Intro = $(‘#testIntro’); // ya da // Classı temsil eden “.” + ClassName ile bu işlemi gerçekleştiriyoruz. var Intro = $(‘.cssIntro’); // yakaladıktan sonra bu nesne üzerinde istediğiniz işlemleri gerçekleştirebilirsiniz. Intro.css(“color”, “Red”); // gibi

Aşağıdaki karma örnekleri daha da ilerletip basit ve hızlı bir yoldan html nesnelerinizi yönetebilirsiniz.

        // id'si test ile başlayanları seçelim
        $("[id^='test']").css("text-decoration", "underline");

        // ul içersindeki li textlerine kendi title'larını verelim
        $('ul[id="ulChoose"] li').hover(function () { $(this).attr('title', $(this).text()); });

        // Dropdownbox nesnesinin değişme olayını tetikletelim
        $('#dpChooseTeam').change(function () {
            // btnShow butonunun valusuna seçilen nesnenin text'ini atayalım
            $('#btnShow').val($(this).find("option:selected").text());
        });

        // butona basıldığında seçili takımı ekrana bastıralım
        $('#btnShow').click(function () {
            alert($(this).find("option:selected").text() + " seçili");
        });

        // Sigara içermisiniz checkboxına tıkladğımızda checked olma durumunu ekrana bastıralım
        $('#chkDoYouSmoke').click(function () {
            alert($(this).attr("checked"));
        });
        
        // Checkbox'ın seçili olma/olmama durumunu buton ile set edelim
        $("#btnSmoke").click(function () {
            var chkDoYouSmoke= $('#chkDoYouSmoke');
            chkDoYouSmoke.attr('checked', !$checkbox.is(':checked'));
        });

        // nesne gizleme/gösterme
        $('h1').hide();
        $('h1').show();

        // clickme nesnesine tıklandığında resme animasyon ekleyelim
        $('#clickme').click(function () {
            $('#book').toggle('slow', function () {
                // Animasyon gerçekleşiyor...
            });
        });
 

jQuery’e basit bir giriş yaptık ayrıntılı incelemek için : jQuery Examples

Leave a reply:

Your email address will not be published.