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.
jQuery Document Ready Fonksiyonu
Ş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ı
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html lang="en"> <head> <title>jQuery Document Ready Fonksiyonu</title> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script> <script> $("#text").css("background-color", "yellow"); </script> </head> <body> <p id="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur.</p> </body> </html> |
Şimdi oluşturduğumuz web sayfasını tarayıcıda görüntüleyelim.
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ı
|
1 2 3 4 5 6 7 |
$(document).ready(function{ //Kodlar buraya yazılacak }); |
Yukarıda yapmış olduğumuz örneği şimdi de document ready fonksiyonu ile yapıp sonucu gözlemleyelim.
Html ve jQuery Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html lang="en"> <head> <title>jQuery Document Ready Fonksiyonu</title> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script> <script> $(document).ready(function () { $("#text").css("background-color", "yellow"); }); </script> </head> <body> <p id="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur.</p> </body> </html> |
Şimdi oluşturduğumuz web sayfasını tarayıcıda görüntüleyelim.
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ı
|
1 2 3 4 5 6 7 8 9 |
<script> $(document).ready(function(){ // Kodlar buraya yazılacak }); </script> |
Document Ready Fonksiyonunun Kısa Kullanımı
|
1 2 3 4 5 6 7 8 9 |
<script> $(function(){ // Kodlar buraya yazılacak }); </script> |
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.
Yeni bir yazımda görüşmek üzere.
