1.why jQuery
寫過javascript來操作Dom是很麻煩的，jQuery可以比較簡單的來取出相關的Element。
jQuery 所有的 API 都是定義在 jQuery 這個物件下，沒有對 JavaScript 原生的物件作任何修改。
同時 jQuery 的 selector（取得網頁物件的 API）符合 CSS 的語法，同時寫 jQuery 及 CSS 一點都不會錯亂。
2.Download JQuery
網站上有三個版
1.jquery-xxxx.js
這是 jQuery 程式碼最好讀的版本，如果你打算研究 jQuery 的原始程式碼，那下載這個版本是最清楚的。
2.jquery-xxxx.min.js
這個版本與 1. 是一樣的程式碼，只不過把多餘的空白或是換行給拿掉，以便讓整個 js 檔案大小可以下降，
在上線的網站上使用這個版本可以讓使用者下載量變少一點，以提升整個頁面的載入速度。
3.jquery-xxxx.pack.js
這個版本把原本 jQuery 的程式碼作了「壓縮」，也就是有一些名稱代換的方式把 code size 進行更進一步的塑身。
不過因為它用了 eval() 這個函式，所以 JavaScript 的載入會稍微延遲一點時間。
3.第一個jQuery程式
4. UI plug in
4.1 UI plug : http://ui.jquery.com/themeroller
4.2 UI plug in API: http://docs.jquery.com/UI
寫過javascript來操作Dom是很麻煩的，jQuery可以比較簡單的來取出相關的Element。
jQuery 所有的 API 都是定義在 jQuery 這個物件下，沒有對 JavaScript 原生的物件作任何修改。
同時 jQuery 的 selector（取得網頁物件的 API）符合 CSS 的語法，同時寫 jQuery 及 CSS 一點都不會錯亂。
2.Download JQuery
網站上有三個版
1.jquery-xxxx.js
這是 jQuery 程式碼最好讀的版本，如果你打算研究 jQuery 的原始程式碼，那下載這個版本是最清楚的。
2.jquery-xxxx.min.js
這個版本與 1. 是一樣的程式碼，只不過把多餘的空白或是換行給拿掉，以便讓整個 js 檔案大小可以下降，
在上線的網站上使用這個版本可以讓使用者下載量變少一點，以提升整個頁面的載入速度。
3.jquery-xxxx.pack.js
這個版本把原本 jQuery 的程式碼作了「壓縮」，也就是有一些名稱代換的方式把 code size 進行更進一步的塑身。
不過因為它用了 eval() 這個函式，所以 JavaScript 的載入會稍微延遲一點時間。
3.第一個jQuery程式
<html>
<head>
<title>jQuery Tutorial 1</title>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
function showMsg(e) {
$(e.target).attr('disabled', true);
if ($('#msg').html().length == 0) {
$('#msg').html('<h1>Hello</h1>');
}
$('#msg').fadeIn();
setTimeout(function(){
$('#msg').fadeOut();
$(e.target).attr('disabled', false);
}, 3000);
}
$(document).ready(function(e){
$('#btn').click(showMsg);
});
</script>
</head>
<body>
<div id="msg"></div>
<input type="button" value="Click Me" id="btn"/>
</body>
</html>
4. UI plug in
4.1 UI plug : http://ui.jquery.com/themeroller
4.2 UI plug in API: http://docs.jquery.com/UI
沒有留言:
張貼留言