3--window.onload和$(document).ready()

Jquery中的$符号

$ 就是jQuery的一个简写形式,例如$ (“#username”)和jQuery(“#username”)是等价的。$.ajax()和jQuery.ajax()是等价的。
实例1:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Jquery中的$符号</title>
    <!--导入Jquery框架-->
    <script src="jquery-1.11.3.js"></script>
</head>
<body>
    username:<input id="username" value="admin"><br>
    <script>
        /*$就是jQuery的一个简写形式*/
        /*根据Id获取input元素*/
       /* var $_input=$("#username");*/
        var $_input=jQuery("#username");
        /*获取value属性的值*/
        var val=$_input.val();
        alert(val);
    </script>
</body>
</html>

window.onload和$(document).ready()的区别

实例2:$(document).ready():表示整个文档中的全部元素加载完毕之后执行

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>window.onload和$(document).ready()的区别</title>
    <!--导入Jquery框架-->
    <script src="jquery-1.11.3.js"></script>
</head>
<body>
    <script>
        /* $(document).ready():表示整个文档中的全部元素加载完毕之后执行*/
        $(document).ready(function(){
     
            var $_input=$("#username");
            var val=$_input.val();
            alert(val);
        });
    </script>
    username:<input id="username" value="admin"><br>
</body>
</html>

实例3:window.onload表示整个窗口加载完毕(包括内容,视频…)都加载完毕后才会执行。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Jquery中的$符号</title>
    <!--导入Jquery框架-->
    <script src="jquery-1.11.3.js"></script>
</head>
<body>
    <script>
        /*window.onload表示整个窗口加载完毕(包括内容,视频...)都加载完毕后才会执行。*/
         window.onload=function(){
     
           var val=  document.getElementById("username").value;
             alert(val);
         }
    </script>
    username:<input id="username" value="admin"><br>
</body>
</html>

实例4:window.onload在一个网页中只能调用一次

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>$(document).ready()和window.onload的不同</title>
</head>
<body>
    <script>
        window.onload=function(){
     
            alert("test1");
        }
        window.onload=function(){
     
            alert("test2");
        }
        /*只有test2被执行了,也就是说window.onload在一个网页中只能调用一次*/
    </script>
</body>
</html>

实例5:$(document).ready()在同一个网页中可以多次调用

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>$(document).ready()和window.onload的不同</title>
    <script src="jquery-1.11.3.js"></script>
</head>
<body>
    <script>
        /*$(document).ready()在同一个网页中可以多次调用*/
        $(document).ready(function(){
     
            alert("test1");
        });
        $(document).ready(function(){
     
            alert("test2");
        });
    </script>
</body>
</html>

实例6:$(document).ready()的简写

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>$(document).ready()和window.onload的不同</title>
    <script src="jquery-1.11.3.js"></script>
</head>
<body>
    <script>
        $(document).ready(function(){
     
            alert("test1");
        });
        /*$(document).ready()的简写形式:*/
        $(function(){
     
            alert("test2");
        })
    </script>
</body>
</html>

总结:
$(document).ready():
①在整个网页中可以多次调用。
②只要网页中所有的DOM结构加载完毕就执行。
③可以简写。
window.onload:
①在整个网页中只能使用一次。
②必须等待这个网页中所有的内容加载完毕之后(包括图片、视频等)才能运行。
③没有简写形式

你可能感兴趣的:(Jquery,jquery,javascript,js,dom)