页面载入

页面载入和window.onload

 1 1. jquery文件要在使用jquery的代码之前引入
 2 
 3 2. js代码最好都放到body标签下面或者里面的最下面来写
 4 
 5 3.window.onload
 6     // window.onload = function () {
 7     //     $('.c1').click(function () {
 8     //         $(this).css({'background-color':'green'});
 9     //     })
10     // }
11 4.页面载入,$(function (){alert('xx');}) -- $(document).ready(function(){});
12     页面载入与window.onload的区别
13 　　　　1.window.onload()函数有覆盖现象，必须等待着图片资源加载完成之后才能调用
14 　　　　2.jQuery的这个入口函数没有函数覆盖现象，文档加载完成之后就可以调用（建议使用此函数）
15 　　　　
16 示例:
17 <!DOCTYPE html>
18 <html lang="en">
19 <head>
20     <meta charset="UTF-8">
21     <title>Title</title>
22     <script src="jquery.js"></script>
23     <script>
24         // 等待整个页面中的内容全部加载完成之后,触发window.onload对应的函数里面的内容
25         // window.onload 有覆盖现象,会被后面的window.onload给重新赋值
26         // window.onload = function () {
27         //     $('.c1').click(function () {
28         //         $(this).css({'background-color':'green'});
29         //     })
30         // }
31 
32         
33         $(function () {
34             $('.c1').click(function () {
35                 $(this).css({'background-color':'green'});
36             })
37         });
38 
39     </script>
40     <script src="xx.js"></script>
41 
42 
43     <style>
44         .c1{
45             background-color: red;
46             height: 200px;
47             width: 200px;
48         }
49     </style>
50 </head>
51 <body>
52 
53 <div class="c1"></div>
54 
55 <img src="" alt="">
56 
57 
58 </body>
59 
60 </html>

 

posted @ 2020-05-31 22:44  竹石2020  阅读(185)  评论(0)  编辑  收藏  举报