Bölüm 6 JQuery

JQuery JavaScript Kütüphanesi

JQuery bir JavaScript fonksiyonlar kütüphanesidir. Nasıl bildiğimiz kütüphane de birçok kitap varsa , JQuery kütüphanesinde de birçok yararlı fonksiyon vardır. Bu bölümde jQuery kütüphanesini kullanarak animasyonlar yapmasını, elemanları görünür-görünmez yapmasını, fade ile yumuşak görünüm geçişlerini, eleman şeffaflıklarını değiştirmeyi, eleman üzerinde birden fazla aksiyonun zincirleme yapılmasını, eleman üzerine mouse gelince-gidince veya tıklanınca gibi olacak olayların tanımlamasını, class değerini değiştirerek eleman stili değiştirmeyi vs. birçok eğlenceli şeyi öğreneceğiz.

Bu bölüm sonunda etkileşimli web sayfalarının nasıl yapıldığına dair çok önemli bilgiler edineceksiniz.

JQuery Sayfaya Nasıl Eklenir?

Aynı Bootstrap CSS kütüphanesini eklerken yaptığımız gibi JQuery kütüphanesini de web sayfamıza eklerken 2 yöntem var.

https://jquery.com adresinden indirip lokal klasördeki dosya olarak kullamak.
CDN server üzerinden referans vererek sayfamıza dahil etmek.

Siteden lokale indiriken kullnamanız için sitesinde "download" linkine tıkladığınızda size indirilebilir dosya seçenekleri gösterilir. Hızlı çalışması bakımından sıkıştırılmış (compressed) versiyonu indirmeniz iyi olacaktır. İndirme linkine tıkladığınızda eğer indirme klasör seçim penceresi otomatik açılmadan tarayıcınızda dosyayı direk gösterirse, (adres barda https://code.jquery.com/jquery-3.7.1.min.js gibi bir şey yazıp sayfada bir sürü kod görünürse) sayfa üzerinde sağ tıklayıp "farklı kaydet" seçeneği ile dosyayı web sitenizin scripts klasörü içine indirebilirsiniz.

Başka versiyonlar indirmek isterseniz ya da başka web geliştirme ortamlarında nasıl kullanılacağını merak ederseniz "download" sayfasında bir çok yararlı bilgi bulunuyor. JQuery kütüphanesini bir CDN server üzerinden sayfanıza nasıl dahil edeceğimiz de yine burada gösteriliyor. Örneğin jsDelivr server'larından kullanmak için:

<script 
    src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js">
</script>

kodunu sayfanızın <head> kısmına eklemeniz gerekiyor. Denemelerimizi gerçekleştirmek üzere deneme web sitemizin olduğu klasöre jquery.html adında bir yeni dosya ekleyelim.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script 
        src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js">
    </script>
</head>
<body>
    <script>
        $(document).ready(function(){
            alert("jQuery Yüklendi. - " + jQuery.fn.jquery)
        })
    </script>
</body>
</html>

Eğer lokalde indirdiğimiz dosyayı kullanmak istersek <script> elemanımız şöyle olmalı:

    <script 
        src="scripts/jquery-3.7.1.min.js">
    </script>

Aşağıda <body> kısmı içindeki <script> elemanı içinde ise yüklemenin gerçekleşmiş olduğunu test etmek için küçük bir jQuery program var. Bu kod sayfa ilk yüklendiğinde bir popup mesaj penceresi açarak yüklü olan jQuery versiyonunu bildiriyor. Eğer sayfamızı tarayıcıda açarsak şuna benzer bir mesaj çıkmalı:

Kodu biraz açıklamak gerekirse bu kodda jQuery'nin en yaygın kullanım tekniklerinden biri yer alıyor.

$(document).ready(function(){
    // Sayfa yüklenince yapılacak işler
})

Burada $(document) ifadesi bir jQuery HTML eleman seçim ifadesi. $(document) seçimiyle jQuery o anda içinde bulunduğumuz web sayfasını (dökümanını) seçiyor ve bize bir jQuery nesnesi olarak veriyor. Örneğin $("h1") ifadesi bize sayfamızdaki <h1> elemanlarını seçer vs. document kelimesi özel bir değişkendir ve tüm sayfayı ifade eder.

Daha sonra $(document) nesnesinin .ready() metodu çağrılıyor. .ready() metodu sayfamız (document nesnesi) tamamen tarayıcıya yüklendiğinde çalışacak bir fonksiyon bildirme imkanı veriyor. Yani sayfadaki tüm HTML elemanlar yüklendiğinde artık jQuery kullanarak bu elemanlar üzerinde manipülasyonlar yapabiliriz demektir.

.ready() metodu parametresinde ise bir JavaScript fonksiyon tanımlaması yapılıyor, diğer kodlardan ayırırsak bu fonksiyon tanımı şöyle:

function(){
    alert("jQuery Yüklendi. - " + jQuery.fn.jquery)
}

Bu bir fonksiyon tanımı, daha önceden JavaScript bölümünden biliyoruz ki fonksiyonlar tanımlanınca çalışmaz, çağrıldıklarında çalışır. Bu fonksiyonu biz kod ile çağırmıyoruz, .ready() metoduna parametre olarak verdiğimiz için bu fonksiyonu .ready() metodu çağıracak. .ready() metodu bir olay işleme metodudur ve "döküman hazır" olayı oluşunca parametresinde tanımı verilen fonksiyonu çalışsın diye tarayıcımızın JavaScript işleyen kımına bildirir. Ne zaman ki döküman tamamen yüklenmiş olur, tarayıcımız bu verilen fonksiyonu otomatik olarak çalıştırır.

Fonksiyonun yaptığı iş ise oldukça basit, bir popup mesaj açıp bize "JQuery Yüklendi" mesajı ve yanında da yüklenmiş olan JQuery kütüphanesi versiyon numarasını veriyor. jQuery.fn.jquery ifadesini tabi ki JQuery dökümanlarından buldum, bu bize versiyon numarasını veren jQuery değişkeninin adı. $.fn.jquery de yazılabilir , çünkü jQuery kütüphanesi için $ ve jQuery kelimeleri aynı nesneyi ifade ediyor.

JQuery'de Seçici Deyimler

JQuery seçiciler (selectors) en önemli kütüphane yapılarıdır. JQuery seçiciler ile manipüle etmek istediğimiz HTML elemanlarını bulur ve seçeriz. JQuery seçicilerin gruplandırması şöyle:

Eleman Seçiciler
ID Seçiciler
Class Seçiciler
Herşeyin Seçilmesi
This Kelimesi
İlk Eleman Seçici

JQuery seçiciler ifade edilirken $(" ") şeklinde bir $ işareti ve arkasından parantez içinde tırnak içine yazılan Seçici Kelimeler ile ifade edilirler. $(document) ifadesinde tırnak kullanmadık çünkü document kelimesinin jQuery'de özel bir anlamı var, burada anlatacaklarımızla karışmasın. Denemeler yapmak için web sayfamızın kodunu şöyle düzenleyelim:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery Denemeler</title>
    <script src="scripts/jquery-3.7.1.min.js"></script>
    <style>
        h2 { color: blue; }
        #heading { color: green; }
        .para { color: red; }
        button { background-color: red; color: white;
            padding: 5px 20px; border-radius: 10px;}
    </style>
</head>
<body>
    <h1 id="heading">Bu En Büyük Başlık Tag'i</h1>
    <h2>Bu İkinci Büyüklükte Başlık</h2>
    <h2>Bir Diğer Başlık</h2>
    <p class="para">Bu bir paragraf</p>
    <p class="para">Bu diğer bir paragraf</p>
    <button>Tıkla</button>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                // Buton tıklandı
            });
        });
    </script>
</body>
</html>

Bu En Büyük Başlık Tag'i

Bu İkinci Büyüklükte Başlık

Bir Diğer Başlık

Bu bir paragraf

Bu diğer bir paragraf

Aşağıda <script> tag içinde butona tıklanınca çalışacak olan fonksiyonun tanımını yapıyoruz. Bunu yaparken de aslında bir eleman seçici kullanıyoruz, $("button") seçicisi sayfadaki button elemanları seçer. Sayfada bir tanecik button elemanı olduğu içinde tanımlanan fonksiyon o butonun .click() olayında (yani elemana tıklanınca) çalışacak olan kod olur. Şimdi butona tıklanınca değişik elemanları seçerek bazı manipülasyonlar deneyelim.

    $("button").click(function(){
        $("h2").hide();
    });

Bu En Büyük Başlık Tag'i

Bu İkinci Büyüklükte Başlık

Bir Diğer Başlık

Bu bir paragraf

Bu diğer bir paragraf

İlk denmemiz bir eleman seçici ve sayfadaki <h2> elemanları seçerek onlara .hide() metodunu uyguluyor. Seçici olan $("h2") sayfadan birden fazla eleman seçtiği için .hide() metodu her birine tek tek uygulanır ve onları görünmez yapar. Aslında elemanlar sayfa kodundan silinmezler, geliştirici araçlarında bakarsanız h2 elemanların hala orada olduğunu ama style: "display: none;" stili verilerek görünmez yapıldığını göreceksiniz. Şimdi de ID seçicisi deneyelim.

    $("button").click(function(){
        $("#heading").hide();
    });

Bu En Büyük Başlık Tag'i

Bu İkinci Büyüklükte Başlık

Bir Diğer Başlık

Bu bir paragraf

Bu diğer bir paragraf

Aynı CSS kuralı yazarken yaptığımız gibi bir elemanı ID değerine göre belirtmek için ID değerinin başına # işareti ekliyoruz. $("#heading") seçicisi HTML elemanlar içinde ID değeri "heading" olan elemanı seçer ve bize getirir. Daha önce de belirtmiştik sayfa kodunuzda ID değeri aynı olan birden fazla eleman olmamalı, ID değeri tek bir elemana özel olmalı. Eğer birden fazla elemana aynı ID değerini verip jQuery ile ID seçcici kullanırsanız size sadece ilk bulduğu elemanı getirir, çünkü ID değeri biricik olmalıdır. Şimdi de class seçicisi deneyelim.

    $("button").click(function(){
        $(".para").hide();
    });

Bu En Büyük Başlık Tag'i

Bu İkinci Büyüklükte Başlık

Bir Diğer Başlık

Bu bir paragraf

Bu diğer bir paragraf

Gördüğünüz üzere burada da aynı CSS gibi class değeri başına nokta işareti konarak ifade ediliyor. $(".para") seçicisi class değeri para olan 2 paragrafı seçer ve arkasından .hide() ile elemanları görünmez yapar. Birden çok eleman seçilirse .hide() metodu her birine tek tek uygulanır. Her şeyi seçen seçici ile devam edelim.

    $("button").click(function(){
        $("*").hide();
    });

Bu En Büyük Başlık Tag'i

Bu İkinci Büyüklükte Başlık

Bir Diğer Başlık

Bu bir paragraf

Bu diğer bir paragraf

Aslında bu kod biraz komik olur, butona tıklayınca sayfadaki <body>, <head> ve hatta <html> elemanı bile görünmez yapılır. Butonun kendi bile yok olur. Bu seçici aslında bir kısmı görünmez yapmak amacıyla kullanılabilir. Mesela gizli class değerine sahip bir <div class="gizli"> elemanının tüm içeriğini seçmek istesek $(".gizli *") seçicisi kullanılır. Bu şekilde arada boşluk vererek dıştaki eleman ve içteki eleman seçicinin yazılması da aynı CSS seçicileri gibi yapılır. Sırada ilk elemanın seçilmesi var.

    $("button").click(function(){
        $("p:first").hide();
    });

Bu En Büyük Başlık Tag'i

Bu İkinci Büyüklükte Başlık

Bir Diğer Başlık

Bu bir paragraf

Bu diğer bir paragraf

p:first ile aranan yerdeki yukarıdan aşağıya sıralanmış <p> elemanları içinde ilk başta olanı seçilerek geri döner. Buna benzer bir çok ilginç seçiciyi JQuery Selectors dökümanında bulabilirsiniz. Sırada this kelimesi var.

    $("button").click(function(){
        $(this).hide();
    });

Bu En Büyük Başlık Tag'i

Bu İkinci Büyüklükte Başlık

Bir Diğer Başlık

Bu bir paragraf

Bu diğer bir paragraf

$(this) seçicisi o anda kodun uygulandığı elemanın kendisini seçer. Bu örnekte kod button elemanının tıklanma olayının içinde olduğuna göre this kelimesi butonun kendisini ifade eder. Bu durumda tıklanınca butonun kendisi görünmez olur. this kelimesi de jQuery'de özel bir anlam taşır ve tırnak kullanmadan $(this) şeklinde ifade edilir.

Olay İşleyiciler

Jquery olay işleyicileri kullanıcının web sayfasında yaptığı etkileşimlere cevap vermek için yazılan fonksiyonlardır. Gerçekleşen bu etkileşimlere programcılıkta olay adı verilir. Bir butona tıklamak, mouse'u bir elemanın üzerine getirmek, elemanın üzerinden çıkarmak, bir girdi ktusuna değer yazarak değerini değiştirmek, bir elemanın sayfaya konduğu an gibi bir çok olay örnek verilebilir. Etkileşimli bir web sayfası demek aslında tamamen bu olayların karşılığında çalışacak fonksiyonları tanımlamakla olur. Hatta programcılıkta buna "olay güdümlü programlama" şeklinde özel bir isim verilir.

hover ve click olaylarını test etmek için sayfamıza bir renkli bölge koyalım.

   <p>Aşağıdaki renkli bölge içinde ve dışında mouse hareket ettirin
      ve bölgeye tıklayın </p>
   <div><h2>click ve hover olayları</h2></div>
   <style>
      div {
         width: 250px;  height: 150px;
         background-color: blue;
         color: white;
         padding: 15px;
      }
   </style>

İlk olayımız hover olayı, yani eleman üzerinde mouse hareket etmesi olayı. hover olayının iki parçası var ilki mouse işaretçisinin eleman üzerine girmesi ve ikincisi işaretçinin eleman üzerinden çıkması. .hover() metodu ile bu iki olayın fonksiyon tanımlarını girerek sisteme hover olayı karşısında neler olmasını istediğimizi bildiririz.

eleman.hover(hover_in, hover_out);

.hover() metodunun ilk parametresi mouse elemanın üzerine geldiğinde çalışacak fonksiyonun tanımı, ikincisi ise mouse üzerinden ayrılınca çalışacak fonksiyon tanımı. Buna göre elemanı renklendirme üzerine bir kod yazalım.

   <script>
      $(document).ready(function(){
         $("div").hover(
            function(){
               $(this).css( {"background-color": "red"} );
            },
            function(){
               $(this).css( {"background-color": "blue"} );
            }
         );
      });
   </script>

Aşağıdaki renkli bölge içinde ve dışında mouse hareket ettirin ve bölgeye tıklayın

click ve hover olayları

Gördüğünüz üzere .hover() metodu parametre bloğunun içinde 2 tane fonksiyon tanımı yaptık. Mouse girince arka renk kırmızı, çıkınca mavi olacak şekiilde eleman CSS değerlerini değiştirdik. .css() metodu bir elemanın stil değerlerini vermek için kullanılır. Parametresinde bir JavaScript nesne olarak { key: value, key: value } şeklinde stil kuralları girilir.

Metod parametresinde birçok fonksiyon tanımlama kodu girmek görünümü karıştırıyor derseniz fonksiyonları önceden tanımlayıp parametrelere isimlerini de verebilirsiniz.

   <script>
      function hover_in() {
         $(this).css( {"background-color": "red"} );
      }
      function hover_out() {
         $(this).css( {"background-color": "blue"} );
      }
      $(document).ready(function(){
         $("div").hover(hover_in, hover_out);
      });
   </script>

Çok dikkat edilmesi gereken nokta fonksiyonların sadece isimlerini parametreye yazıyoruz, hover_in() gibi parantezlerle birlikte girersek o anda fonksiyonu çalıştırır ve fonksiyondan dönen değeri parametreye girer. Halbuki biz fonksiyon tanımının kendisinin parametrede olmasını istiyoruz, bu yüzden sadece adını parantezler olmadan giriyoruz.

Daha önce örneklerini yaptığımız click (tıklanma) olay işleyicisini de kodumuza ekleyelim.

   <script>
      function hover_in() {
         $(this).css( {"background-color": "red"} );
      }
      function hover_out() {
         $(this).css( {"background-color": "blue"} );
      }
      $(document).ready(function(){
         $("div").hover(hover_in, hover_out);
         $("div").click(function(){
            $(this).css( {"background-color": "lime"} );
         });
      });
   </script>

Aşağıdaki renkli bölge içinde ve dışında mouse hareket ettirin ve bölgeye tıklayın

click ve hover olayları

Çift tıklama için bir olay işleyici tanımlayacaksanız .dblclick() metodunu kullanırsınız.

         $("div").dblclick(function(){
            $(this).css( {"background-color": "purple"} );
         });

gibi.

JQuery kütüphanesinde hazır bulunan olay metodlarının listesini jQuery Olayları dökümanında bulabilirsiniz. Göreceğiniz gibi daha birçok olay jQuery yardımıyla kolayca işlenebiliyor.

JQuery Animasyon ve Efektler

JQuery animasyonlar ve efektler yapmak için işleri kolaylaştıran birçok fonksiyon sağlar. Yaygın kullanılan teknikler:

Animasyon
Göster-gizle ve toggle efektler
Kaydırmalar
Buharlaştırmalar

Animasyon amacıyla .animate() metodu kullanılır.

   <button>Animasyon için tıkla</button>
   <div>Merhaba</div>
   <style>
      div {
         width: 250px;  height: 150px;
         background-color: black;
         color: white;
         padding: 15px;
         position: absolute;
      }
      button { padding: 10px; margin: 10px 0; }
   </style>
   <script>
      $(document).ready(function(){
         $("button").click(function(){
            $("div").animate( {"left": "250px"}, "slow" );
            $("div").animate( {"font-size": "5em"}, "slow" );
         });
      });
   </script>

Merhaba

İlk parametrede aynı .css() metodunda olduğu gibi JavaScript nesnesi olarak istenen CSS değerleri verilir. <div> elemanını kaydırabilmek için ilk başta stiline position: absolute; vermeyi unutmayınız. İkinci parametre ise animasyon hızını belirtir. Animasyonların sırayla değil aynı anda gerçekleşmesini istersek stilleri tek bir JavaScript nesne içinde toplarız.

$("div").animate( {"left": "250px", "font-size": "5em"}, "slow" );

Merhaba

Hız için değer verirken "fast" ya da "slow" değerleri ile hızlı ya da yavaş olarak seçim yapabileceğiniz gibi milisaniye cinsinden sayı değeri olarak animasyon süresi verilebilir.

$("div").animate( {"left": "250px", "font-size": "5em"}, 11250 );

deneyin ve görün mesela. Şimdi de show, hide ve toggle etkilerini görelim.

   <button id="show">Show</button>
   <button id="hide">Hide</button>
   <button id="toggle">Toggle</button>
   <div>Merhaba</div>
   <style>
      div {
         width: 150px;  height: 100px;
         background-color: black;
         color: white;
         padding: 15px;
      }
      button { padding: 5px; margin: 10px 0; border-radius: 5px;}
   </style>
   <script>
      $(document).ready(function(){
         $("#show").click(function(){
            $("div").show();
         });
         $("#hide").click(function(){
            $("div").hide();
         });
         $("#toggle").click(function(){
            $("div").toggle();
         });
      });
   </script>

Merhaba

.show() metodu seçilen elemanı görünür yapar. Tabi ki , zaten görünür ise bir şey değişmez. .hide() metodu ise daha önce de denediğimiz gibi elemanı sayfada görünmez yapıyor. Burada değişik olan .toggle() metodu, bu metod seçilen elemanı görünürse görünmez yapar. Eğer eleman görünmez ise bu sefer görünür yapar. Örnekteki Toggle yazılı butona her tıkladığınızda eleman bir görünür olur, diğer tıkta görünmez olur vs.

Kullanılan metodlar parametreler de alabiliyor. Örnek olarak:

      $(document).ready(function(){
         $("#show").click(function(){
            $("div").show("fast");
         });
         $("#hide").click(function(){
            $("div").hide(3000, "swing");
         });
         $("#toggle").click(function(){
            $("div").toggle("slow");
         });
      });

Merhaba

.hide() metodunda ikinci verilen parametre animasyonun şeklini bildiriyor. "swing" değeri aslında default değer ve verilmese de olurdu. Gittikçe hızlanan bir animasyon fade eder. "linear" değeri kullanılsa sabit hızda devam eden bir animasyon görürüz. Sırada kaydırma (sliding) efektleri var. Kaydırma efektlerini de .slideUp(), .slideDown() ve .slideToggle() metodları ile yaparız.

   <button id="up">Slide Up</button>
   <button id="down">Slide Down</button>
   <button id="toggle">Slide Toggle</button>
   <div>Merhaba</div>
   <style>
      div {
         width: 150px;  height: 100px;
         background-color: black;
         color: white;
         padding: 15px;
      }
      button { padding: 5px; margin: 10px 0; border-radius: 5px;}
   </style>
   <script>
      $(document).ready(function(){
         $("#up").click(function(){
            $("div").slideUp(2000);
         });
         $("#down").click(function(){
            $("div").slideDown("fast", "linear");
         });
         $("#toggle").click(function(){
            $("div").slideToggle("slow");
         });
      });
   </script>

Merhaba

Buharlaştırmalar (fade) da görsel olarak güzel efektler. 4 metodla bu efektler oluşturulur:

.fadeOut()
.fadeIn()
.fadeTo()
.fadeToggle()

.fadeOut() seçilen elemanı şeffaflaştırarak yok eder.

   <button>Fade Out Etkisi</button><br>
   <div id="box1"></div>
   <div id="box2"></div>
   <div id="box3"></div>
   <div id="box4"></div>
   <style>
      div {
         width: 50px;  height: 50px;
         display: inline-block;
         position: absolute;
      }
      #box1 { background-color: darkturquoise; left: 20px;}
      #box2 { background-color: coral; left: 90px;}
      #box3 { background-color: fuchsia; left: 160px;}
      #box4 { background-color: chocolate; left: 230px;}
      button { padding: 5px; margin: 10px 0; border-radius: 5px;}
   </style>
   <script>
      $(document).ready(function(){
         $("button").click(function(){
            $("#box1").fadeOut();
            $("#box2").fadeOut("slow");
            $("#box3").fadeOut(3000);
            $("#box4").fadeOut(1000);
         });
      });
   </script>

İkinci bir buton ekleyip .fadeIn() denemesi yapalım, tabi ki butonlar karışmasın diye farklı ID değerleri vermeliyiz.

   <button id="fade-out">Fade Out Etkisi</button>
   <button id="fade-in">Fade In Etkisi</button>
   <br>
......
   <script>
      $(document).ready(function(){
         $("#fade-out").click(function(){
            $("#box1").fadeOut();
            $("#box2").fadeOut("slow");
            $("#box3").fadeOut(3000);
            $("#box4").fadeOut(1000);
         });
         $("#fade-in").click(function(){
            $("#box1").fadeIn();
            $("#box2").fadeIn("slow");
            $("#box3").fadeIn(3000);
            $("#box4").fadeIn(1000);
         });
      });
   </script>

.fadeToggle() ise aynı hide-show-toggle gibi fade işleminde bir birini bir diğerini yapar.

   <button>Fade Toggle Etkisi</button>
   <br>
   <div id="box1"></div>
   <div id="box2"></div>
   <div id="box3"></div>
   <div id="box4"></div>
   <style>
      div {
         width: 50px;  height: 50px;
         display: inline-block;
         position: absolute;
      }
      #box1 { background-color: darkturquoise; left: 20px;}
      #box2 { background-color: coral; left: 90px;}
      #box3 { background-color: fuchsia; left: 160px;}
      #box4 { background-color: chocolate; left: 230px;}
      button { padding: 5px; margin: 10px 0; border-radius: 5px;}
   </style>
   <script>
      $(document).ready(function(){
         $("button").click(function(){
            $("#box1").fadeToggle();
            $("#box2").fadeToggle("slow");
            $("#box3").fadeToggle(3000);
            $("#box4").fadeToggle(1000);
         });
      });
   </script>

.fadeTo() metodu verilen bir ölçüye kadar elemanı şeffaflaştırır. Fade işlemleri yapılırken seçili elemanın opacity stili üzerinden işlem yapılır. opacity: 1.0; elemanın şeffaf olmadığını opacity: 0.0; ise elemanın tamamen şeffaf olduğunu belirtir. Sıfır ve bir arası değerler vererek istediğimiz değere getirmek için .fadeTo() metodunu kullanırız.

   <button>Fade To Etkisi</button>
   <br>
   <div id="box1"></div>
   <div id="box2"></div>
   <div id="box3"></div>
   <div id="box4"></div>
   <style>
      div {
         width: 50px;  height: 50px;
         display: inline-block;
         position: absolute;
         background-color: black;
      }
      #box1 { bckground-color: darkturquoise; left: 20px;}
      #box2 { bckground-color: coral; left: 90px;}
      #box3 { bckground-color: fuchsia; left: 160px;}
      #box4 { bckground-color: chocolate; left: 230px;}
      button { padding: 5px; margin: 10px 0; border-radius: 5px;}
   </style>
   <script>
      $(document).ready(function(){
         $("button").click(function(){
            $("#box1").fadeTo("slow", 0.8);
            $("#box2").fadeTo("slow", 0.6);
            $("#box3").fadeTo("slow", 0.4);
            $("#box4").fadeTo("slow", 0.2);
         });
      });
   </script>

Şeffaflaşma etkisi daha açık belli olsun diye kutuları siyaha boyadım. .fadeTo() metodu ilk parametresinde animasyon hızı , ikinci de ise elemanın gitmesini istediğimiz şeffaflık derecesi girilir.

Zincirleme Metodlar

JQuery geliştiricileri tasarladıkları fonksiyonlara bir teknik ekleyerek metodların birbiri arkasına yazılabilmesini sağlamışlar. Metodların seçilmiş bir elemana böyle zincirleme uygulanabilmesi kodlarımızı oldukça kısaltır. Bir örnek verelim.

   <button>Tıkla</button><br>
   <div></div>
   <style>
      div {
         width: 120px;  height: 70px;
         background-color: cyan;
      }
      button { padding: 5px; margin: 10px 0; border-radius: 5px;}
   </style>
   <script>
      $(document).ready(function(){
         $("button").click(function(){
            $("div").css({"background-color": "red"}).slideUp(2000).slideDown(2000);
         });
      });
   </script>

Önce elemanın arka rengi kırmızı yapılıyor, sonra yukarı slide ile görünmez oluyor, sonra da aşağı kaydırma ile tekrar görünür yapılıyor. Bunu böyle yapabilmek için jQuery metodları her zaman işlenmiş elemanı bir jQuery nesnesi olarak geri dönüyor. Bu sayede yukarıdaki örneğe bakarsak $("div") bize elemanı veriyor. Arkasından gelen .css() metodu elemanın stilini değiştirip , değişmiş halini geri değer olarak dönüyor. Arkasından .slideUp() ve onun arkasından da .slideDown() metodları da aynı şekilde işlenmiş elemanı bir jQuery nesnesi olarak geri döndürdüğünden bu şekilde zincirleme metodlar kullanılabiliyor.

Çok fazla sayıda metod zincirleme bağlanırken alt satıra geçerek devam edilebilir. Yukarıdaki örneğe uygularsak:

         $("button").click(function(){
            $("div")
               .css({"background-color": "red"})
               .slideUp(2000)
               .slideDown(2000);
         });

Bu şekilde yazarak daha anlaşılabilir bir görünüm oluşturmuş oluruz.

So far so good, buraya kadar web geliştirici olmak için bir hayli bilgi biriktirdiniz. Bu eğitimi burada kesiyorum. Bundan sonrası aktif server'lar vs. ileri konular. O konuların her birine özel baişlıklar yazmaya devam ediyorum. Github Sayfalarım ve Blogger Sayfalarımı takipte kalmaya devam ediniz, nasip oldukça yazmaya devam edeceğim. Kalın sağlıcakla..

< 5. Bölüm