Pengertian dan Perbedaan $(document).ready dan $(window).load Pada JQuery ~ Nyintak

$(document).ready

$(document).ready

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
        $(document).ready(function(){
            $("#button1").click(function(){
                alert("JQuery Tutorial");
            });
        });
        </script>
    </head>
    <body>
        <input type="button" id="button1" value="Klik Saya!"/>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
            $("#button1").click(function(){
                alert("JQuery Tutorial");
            });
        </script>
    </head>
    <body>
        <input type="button" id="button1" value="Klik Saya!"/>
    </body>
</html>

Tambahkan code JQuery $(document).ready seperti contoh pertama, atau
Letakkan elemen "script" di akhir sebelum penutup elemen "body"

$(window).load

$(window).load

$(document).ready

Klik disini

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
            $(window).load(function(){
                alert("Window Termuat");
            });
            $(document).ready(function(){
                alert("Dokumen Termuat");
            })
        </script>
    </head>
    <body>
    </body>
</html>

Menggunakan $(window).load

Menggunakan $(document).ready

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
            $(window).load(function(){
                var height = $("#image1").height();
                var width = $("#image1").width();
                $("#div1").html("Height = " + height + "<br/>Width = " + width);
            });
        </script>
    </head>
    <body>
        <div id="div1">
</div>
<img border="0" height="212" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqHQ0U4Dh9j2ndTTn6B7ZYVZ-7WuYf6C_f9DfL6b970zzWA903qvoKK0KnB0l9C4TsEDtYo0UGxJvkdtu25wDAPI7jGTPnGr4hUmtun-cLUJUs3YujovxCGLKGhczLFCai9eyHK0lTppE/s320/1.jpg" width="320" id="image1"/>
    </body>
</html>

Refresh

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                var height = $("#image1").height();
                var width = $("#image1").width();
                $("#div1").html("Height = " + height + "<br/>Width = " + width);
            });
        </script>
    </head>
    <body>
        <div id="div1">
</div>
<img border="0" height="212" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqHQ0U4Dh9j2ndTTn6B7ZYVZ-7WuYf6C_f9DfL6b970zzWA903qvoKK0KnB0l9C4TsEDtYo0UGxJvkdtu25wDAPI7jGTPnGr4hUmtun-cLUJUs3YujovxCGLKGhczLFCai9eyHK0lTppE/s320/1.jpg" width="320" id="image1"/>
    </body>
</html>

Refresh

Nyintak

Nyekrip dari tutorial lengkap dengan penjelasannya

Wednesday, 25 May 2016

Pengertian dan Perbedaan $(document).ready dan $(window).load Pada JQuery

$(document).ready

$(window).load

0 comments:

Post a Comment

Kunjungi Juga

Blog Archive

Labels