1.js類庫
JavaScript封裝了很多的預定義的對象和實用函數,能幫助使用者建立有高難度交互
客戶端頁面,並且兼容各大瀏覽器。跑在瀏覽器,請求服務器
當前比較流行的js庫:
- jquery
- EXT_JS 2.0開始收費
- Dojo 需要引入很多js單獨文件
- Prototype 對js擴展,框架開發
- YUI
- 淘寶UI
jquery介紹:
- 輕量級:依賴程序少,占用資源少
- 兼容CSS3
- 文檔說明很全
- js代碼和html代碼分離
- 免費開源
分類:
- WEB版本
- UI版本
- mobile版本
- qunit版本:用於js測試
2.jQuery基本語法
案例:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>Insert title here</title> 6 </head> 7 <script src="../js/jquery-1.8.3.js"></script> 8 <body> 9 <input type="text" id="username" value="jack"/> 10 </body> 11 </html> 12 <script type="text/javascript"> 13 //jquer執行時有加載順序 14 //jquery基本語法 15 var value = $("#username").val(); 16 alert(value); 17 //1.使用javascript獲取DOM對象 18 var value1 = document.getElementById("username"); 19 alert(value1.value); 20 21 //2.將DOM對象轉換為jquery對象 22 var $value1 = $(value1); 23 alert($value1.val()); 24 25 //3.將jquery對象轉換為DOM對象 26 //jquery對象內部使用數組存放所有數據,可以用數組下標獲取DOM對象 27 var value2 = $value1.get(0); 28 alert(value2.value); 29 </script>
注意js是有執行順序的,它是在頁面加載完成之后才會執行,因此我們應該講script代碼,放在body之后,同時需要注意引入外部js的寫法:
<script src="../js/jquery-1.8.3.js"></script>
不要寫成這種的:
<script src="../js/jquery-1.8.3.js"/>
