jQuery Document Ready Fonksiyonu Nedir? Nasıl Kullanılır?

Bu yazımızda jQuery’de kullandığımız Document ready fonksiyonu nedir? Document ready fonksiyonu neden kullanılır? Document ready fonksiyonu nasıl kullanılır? sorularının cevabını öğreneceğiz.

Şimdi bir örnek üzerinden inceleyerek konuyu daha iyi anlamaya çalışalım.

 ⇒  Basit bir Html5 sayfası oluşturup içerisine id’si text olan bir p etiketi oluşturdum.

 ⇒  jQuery kullanabilmek için Html sayfasına Google CDN ile jQuery’i ekledim.

 ⇒  jQuery kodları ile p etiketinin Css değerleri üzerinde değişiklik yapıp arka plan rengini sarı yapacağız.

Html ve jQuery Kodları

Şimdi oluşturduğumuz web sayfasını tarayıcıda görüntüleyelim.

jquery-document-ready-fonksiyonu-nedir-1

Paragrafın arka plan renginin sarı olmasını bekliyorduk ama gördüğünüz gibi paragrafın arka plan rengi değişmedi. 

Çünkü sayfa görüntülendiğinde öncelikle head etiketinin içerisindeki kodlar yürütülecek ve burada id’si text olan p etiketi üzerinde işlem yapılmaya çalışılacak.

P etiketi, body etiketleri içerisinde olduğu için henüz yüklenmedi ve bu yüzden erişilemiyor. Tabi doğal olarak arka plan rengi de değiştirilemiyor.

Peki bu problemi nasıl çözeceğiz?

İşte jQuery kodlarımızı document ready fonksiyonu içerisinde yazdığımız zaman şunu demiş oluyoruz.

Burada yazılı kodlar, tüm sayfa yüklendikten sonra çalışsın. Bu şekilde yazdığımız zaman body etiketleri içerisindeki p etiketi de yüklenmiş olacağı için yazdığımız jQuery kodları etkin olacaktır.

jQuery Document Ready Fonksiyonunun Kullanımı

Yukarıda yapmış olduğumuz örneği şimdi de document ready fonksiyonu ile yapıp sonucu gözlemleyelim.

Html ve jQuery Kodları

Şimdi oluşturduğumuz web sayfasını tarayıcıda görüntüleyelim.

jquery-document-ready-fonksiyonu-nedir-2

Gördüğünüz gibi yazmış olduğumuz paragrafın arka plan rengi sarı oldu.

Son olarak şunu da söyleyelim.

Document ready fonksiyonunu 2 farklı şekilde kullanabiliriz. Tek farkı ikincisinin biraz daha kısa yazılması. Hangisini kullanmak isterseniz onu kullanabilirsiniz.

Document Ready Fonksiyonunun Uzun Kullanımı

Document Ready Fonksiyonunun Kısa Kullanımı

Umarım “jQuery Document Ready Fonksiyonu Nedir? Nasıl Kullanılır?” başlıklı yazım sizin için faydalı olmuştur.

Şu yazılar da ilginizi çekebilir.

JavaScript let Nedir?

JavaScript const Nedir?

Yeni bir yazımda görüşmek üzere.

Yorum Yazın

650+ ABONE ARASINA KATIL

Adını ve E-Posta adresini yazarak Html, Css, Javascript, Jquery, Bootstrap, Web Tasarım, C#, Bilgisayar, Telefon, Android, Veri Güvenliği ve daha birçok alanda ders anlatımlarından ve uygulamalı örneklerden anında haberdar olabilirsin.

Abone olduğunuz için teşekkürler.

Birşeyler yanlış gitti.