JQuery Document Ready Nedir?

Bu yazımızda Jquery de $(document).ready(function{ }); yapısını neden kullandığımızı öğreneceğiz.

Basit bir Html5 sayfası oluşturup içerisine id’si text olan bir p etiketi oluşturdum. Jquery kullanabilmek için Google CDN ile projeme Jquery’i ekledim.

Şimdi Jquery kullanarak p etiketinin Css özelliklerinden arkaplan rengini sarı yapacağız.

Html ve Jquery Kodları

Sayfamızı tarayıcıda görüntüleyelim.

jquery-document-ready-nedir-2

Gördüğünüz gibi paragrafın arkaplan rengi değişmedi.

Çünkü sayfa görüntülendiğinde öncelikle head etiketinin içerisi çalışacak. Ve burada id’si text olan p etiketi üzerinde işlem yapmaya çalışıyoruz.

p etiketi body içerisinde olduğu için henüz yüklenmedi ve bu yüzden ulaşamıyoruz. Tabi arkaplan renginide değiştirememiş olduk.

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

İşte Jquery kodlarımızı,

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 içerisindeki p etiketide yüklenmiş olacağı için yazdığımız Jquery kodları etkin olacak.

Html ve Jquery Kodları

jquery-document-ready-nedir-4

Son olarak şunu da söyleyelim. Bunu 2 farklı şekilde kullanabiliriz. Tek farkı ikincisinin biraz daha kısa olması. Hangisini kullanmak isterseniz onu kullanabilirsiniz.

Umarım sizin için faydalı bir yazı olmuştur.

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

Yorum Yazın

E-BÜLTEN ABONELİĞİ

Adını ve E-Posta adresini yazarak Html, Css, Javascript, Jquery, Bootstrap, Web Tasarım, C#, Asp.Net MVC, MSSQL ve daha birçok alanda ders anlatımlarından ve uygulamalı örneklerden anında haberdar olabilirsin.
ABONE OL
close-link