頁面載入

頁面載入和window.onloadcss

 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>
相關文章
相關標籤/搜索