Onaylı Üye
Ş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ı
HTML:
<!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>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ı
JavaScript:
$(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ı
Kod:
<!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>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ı
Kod:
<script>
$(document).ready(function(){
// Kodlar buraya yazılacak
});
</script>
JavaScript:
<script>
$(function(){
// Kodlar buraya yazılacak
});
</script>
