.ready()

.ready(handler) Dönen Değer : JQuery Nesnesi
Açıklama : DOM tamamen yüklendiğinde çalışması için bir fonksiyon tanımlaması yapılır.

.ready(handler)
handler
Tip : Fonksiyon
DOM yüklendikten sonra çalışması istenen fonksiyon

ready() metodu JavaScript kodunu DOM (Document Object Model) yüklenip manipüle edilmeye hazır olduğunda çalıştırmak için kullanılır. Bu an kullanıcının sayfayı görmesi ve kullanmaya başlamasından önce yapılması gerekenler için en uygun zamandır. Örneğin olay işleyicilerin tanımlanması ve plugin'lerin aktif edilmesi gibi.

Birçok tarayıcı DOMContentLoaded olayı ile benzer olanak sağlar. Fakat jQuery .ready() metodu önemli bir noktada farklılık gösterir: Olay tetiklendikten sonra yapılan bir DOMContentLoaded olay işleyicisi hiç bir zaman çalışmayacaktır. Ama .ready(handler) tanımlaması yapılırsa , bu tanımlama olay tetiklendikten sonra yapılsa dahi çalışır.

Tarayıcılar ayrıca window nesnesinde load olayını da üretir. Bu olay ateşlenmişse sayfadaki resimler dahil tüm varlıklar yüklenmiş demektir. Bu olay da jQuery $("window").on("load", handler) fonksiyonu ile izlenebilir. Kod yüklü varlıklarla alakalı olduğunda (mesela bir resmin boyutları kullanılacaksa), kod load olayına bağlanmalıdır.

JQuery DOM hazır olduğunda çalışacak fonksiyonu tanımlamak için değişik yöntemler sunar. Aşağıdaki tüm deyimler aynı çalışırlar.

  • $(handler)
  • $(document).ready(handler)
  • $("document").ready(handler)
  • $("img").ready(handler)
  • $().ready(handler)

Versiyon 3.0'dan itibaren ilk örnek kullanımı tavsiye edilir. Diğerleri zamanla deprecated olacaklar. Sebebi ise ready() fonksiyon kullanımı için eleman seçimine gerek olmaması. Örneğin 3. maddedeki "document" elemanı seçicisinin aslında anlamı yok, olmasa da olur, ki sonuncu zaten öyle. 4. madde yanlış şekilde resimler hazır olursa diye yazılmış ama yine de döküman hazır olunca çalışır.

Ayrıca versiyon 1.8'den beri kullanılmayan $(document).on( "ready", handler ) şeklinde bir tanım da vardır, bilginiz olsun. Bu kullanımda eğer DOM bu kod çalışmadan önce yüklenirse handler çalışmaz.

.ready() metodu genellikle isimsiz (anonim) bir fonksiyon tanımı ile kullanılır.

$( document ).ready(function() {
  // .ready() için çağrılan olay işleyici kod.
});

Bu kod tavsiye edilen şu şekil yazım ile aynıdır:

$(function() {
  // .ready() için çağrılan olay işleyici kod.
});

JQuery Nesnesi Ad Değiştirmesi

İsim çakışmalarını önlemek için $.noConflict() kullanılırsa $ kısayolu artık geçersiz olur. Fakat .ready() metodu handler fonksiyonuna verilen parametre yine olaya sebep olan (ready olayı) jQuery nesnesi olacaktır. Bundan yararlanarak $ değerini handler fonksiyon içinde eskisi gibi kullanmaya devam edebilirsiniz.

jq2 = jQuery.noConflict();
jq2(function( $ ) {
  // Standart '$' kullanan kod buraya yazılabilir;
  // aktif jQuery nesnesi ise jq2
});

Örnek :

DOM yüklenince bir mesaj göster.

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>.ready() Demo</title>
        <style>
            p {
                color: red;
            }
        </style>
        <script src="jquery.js"></script>
        <script>
            $(function() {
                $( "p" ).text( "DOM şimdi yüklendi ve manipüle edilebilir." );
            });
        </script>
    </head>
    <body>
        <p>Henüz yüklenmedi</p>

    </body>
</html>

.

.