jQuery - Document Ready

DOM mantığına göre <script> tagları arasında yazdığımız jQuery kodları sayfa yüklenmeden önce çalışır. Aşağıdaki sıralamaya göre butondan önce script kodları çalışıp, sayfa yüklenirken buton henüz oluşmadığı için buton veya herhangi bir kontrole erişemeyecek ve işlem yapamayacaktır.

DOM sıralaması : html > head > meta > title > script > script > body > button

Bu sorunu çözebileceğimiz iki yol var

1. yol:
$(document).ready() fonkiyonu sayfanın yüklenip hazır olması anlamına gelen jQuery fonksiyonudur. Bu işlem sayfamıza eklediğimiz kontrollere erişip üzerinde işlem yaptırabilmek için gereklidir. Sayfa yüklendikten sonra script kodlarını çalıştırır. Bu yol, <script> tagları <head> etiketleri arasındadır.

document: Web sayfasını temsil eder.

ready(): Sayfanın ve kontrollerinin yüklenip hazır olmasını sağlar.
<script>
        $(document).ready(function () {
            $('#button1').click(function () {
                alert('Hello World');
            })
        })
</script>

2. yol:
<script> taglarını <html> taglarından sonra eklemektir. Bu şekilde DOM mantığı ile sayfa yüklenmiş olacaktır ve $(document).ready() fonkiyonunu kullanmadan jQuery kodları çalışacaktır.



Yorumlar