Ready fonksiyonu DOM yüklendikten sonra çalışacak events belirtmenizi sağlar.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ready Fonksiyonu</title>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$('h1').css('color', 'blue');
</script>
</head>
<body>
<h1>Bu element mavi mi? Tabi ki değil!</h1>
</body>
</html>
Ready fonksiyonu en kısa açıklamasıyla DOM yüklendikten sonra çalışacak eventlarınızı belirtmenize yarar.
Bu bize nasıl bir yarar sağlar?
Bunu bir örnekle bunu açıklayalım. Bir HTML sayfası oluşturun ve içine şu kodları yazın.
Kırmızı yapmamasının sebebi DOM yüklenmeden önce sizin scriptinizin çalışmış olduğundan dolayı. Web tarayıcılarının html belgenizi yukarıdan aşağıya doğru okuduğunu biliyoruz. Bu sebeple okuma sırası şu şekilde olacaktır;
html > head > meta > title > script > script > body > h1
Kalın yerlere dikkat ederseniz önce bizim scriptimiz çalışmış oldu. Sonrasında h1 elementi yüklendi. Yani jQuery aslında olmayan bir h1 etiketini kırmızı yapmaya çalıştığı için sonuç başarısız oldu.
Peki bu script kodunu sayfanın altına alırsak ?
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<html>
<head>
<meta http–equiv=“Content-Type” content=“text/html; charset=utf-8”>
<title>CihanAksoy.com Ready Fonksiyonu Örnekleri</title>
<script src=“//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
</head>
<body>
<h1>Bu elementin kırmızı olması gerekiyor!</h1>
<script type=“text/javascript”>
$(‘h1’).css(‘color’, ‘red’);
</script>
</body>
</html>
|
Evet bu şekilde çalıştırabildik. Örnek sayfamıza buradan ulaşabilirsiniz.
Şimdi gelelim ready() fonksiyonun işlevine. Yukarıda ki hiyerarşimizi terkar yazalım.
html > head > meta > title > script > script > body > h1
Document ready tam bu aşamada bizim imdadımıza koşuyor ve işlevi tam olarak şu şekilde gerçekleştiriyor.
html > head > meta > title > script(jquery load) >
script> body > h1 > script
Gördüğünüz gibi jquery yükledikten sonra ki script bölümümüzü yüklemeden direk olarak DOM elementlerine yöneldi ve en son scriptimizi çalıştırdı. Şimdi ilk örneğimizi document ready kullanarak tekrar yazalım.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<html>
<head>
<meta http–equiv=“Content-Type” content=“text/html; charset=utf-8”>
<title>CihanAksoy.com Ready Fonksiyonu Örnekleri</title>
<script src=“//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
<script type=“text/javascript”>
$(document).ready(function(){
$(‘h1’).css(‘color’, ‘red’);
});
</script>
</head>
<body>
<h1>Bu elementin kırmızı olması gerekiyor!</h1>
</body>
</html>
|
Evet script kodumuz hem üstte hemde h1 elementimiz kırmızı oldu. Canlı örnek için buradaki örnek sayfama gidebilirsiniz. Evet ready() fonksiyonumuzu öğrendiğimize inanıyorum. Ancak şöyle bir soru sorabileceğiniz aklıma geliyor.
Bu ready fonksiyonunun daha kısa kullanımı yok mu?
Ready fonksiyonunun iki adet kullanımı var. Uzun kullanımını yukarda gördük ancak tekrar edelim.
|
1
2
|
$(document).ready(function(){
});
|
Kısa kullanımı ise şu şekilde;
|
1
2
|
$(function(){
});
|
Evet işte bu kadar. Umarım yararlı bir döküman olmuştur.