[jQuery 權威指南（第二版）]閱讀筆記-p9(範例1-1)
[jQuery 權威指南（第二版）]閱讀筆記-p9(範例1-1)
資料來源:http://www.java1234.com/a/javaziliao/shuji/2014/1206/3343.html
功能:單純利用jQuery在網頁載入同時，把放在body內的div填入一串中文字並顯示
關鍵技術(閱讀心得):
01.在head中利用CSS指定div樣式
div{ padding:8px 0px;font-size:12px;text-align:center;border:solid 1px #888;}
備註:
padding:8px 0px;-上下內距都是 8px 而左右內距都是 0px
font-size:12px;-字型大小
text-align:center;-文字至中
border:solid 1px #888;-邊框寬度和顏色
02.在head載入jQuery函示庫
<script src=”JScript/jquery-1.8.2.min.js” type=”text/javascript”></script>
備註:
同一層相對目錄
03.在head寫$(document).ready(function() {});函數
備註:當網頁全部載入後的事件函數
04.使用jQuery指定div內容
$(“div”).html(“您好！欢迎来到jQuery的精彩世界。”);
| <!DOCTYPE html> <html> <head> <title>第一个简单的jQuery程序</title> <style type=”text/css”> div{ padding:8px 0px;font-size:12px; text-align:center;border:solid 1px #888;} </style> <script src=”JScript/jquery-1.8.2.min.js” type=”text/javascript”></script> <script type=”text/javascript”> $(document).ready(function() { $(“div”).html(“您好！欢迎来到jQuery的精彩世界。”); }); </script> </head> <body> <div></div> </body> </html> |
One thought on “[jQuery 權威指南（第二版）]閱讀筆記-p9(範例1-1)”
雖然上述兩段代碼在功能上可以互換，但它們之間又有許多區別：
執行時間不同：$(document).ready 在頁面框架下載完畢後就執行 ；而window.onload必須在頁面全部載入完畢（包含圖片下載）後才能執行。很明顯前者的執行效率高於後者。
執行數量不同 ：$(document).ready 可以重複寫多個，並且每次執行結果不同 ；而window.onload 儘管可以執行多個，但僅輸出最後一個執行結果，無法完成多個結果
的輸出。