學習過許多程式語言 ( 雖然有些都是應付交差 )
不過起碼我都有寫出Hello World唷~~
當然 , 學習JQuery也不例外 , 這邊放上最簡單的Hello World範例 , 讓大家了解一下JQuery的運作原理
- 下載JQuery!
http://docs.jquery.com/Downloading_jQuery我以Current Release為主 , 版本為1.2.1 的未壓縮版
- 官方表明版本都會有所謂的壓縮版與未壓縮版 , 壓縮版是為了降低檔案大小 , 快速而設定的 , 抽出一些比較無關的功能 ( 偵錯等等 )
- 目前JQuery其實不斷的有在做更新的動作 , 甚至有許多的Nightly Builds ( 如果我沒解釋錯誤 , 這些應該是最新的Beta版 , 也有可能是Alpha版 ) 同時也提供原始碼版本 – 不過不太確定是完整提供還是部份提供
- 檔案以MIT與GPL的方式授權
- 將檔案以連結方式引入
<html>
<head>
<script type=”text/javascript” src=”jquery-1.2.1.js”></script>
<script type=”text/javascript”>
// JQuery會用到的程式碼放這邊 , 為了管理方便 , 建議可以放在不同*.js檔案下方便管理
</script>
</head>
<body>
<通常網頁放置資料的地方也就在此>
</body>
</html> - 加入一個<A>連結 , 並透過Selector偵測到Click動作後顯示Hello World
<html>
<head>
<script type=”text/javascript” src=”jquery-1.2.1.js”></script>
<script type=”text/javascript”>
$(document).ready(function() {
//這邊的功用有點像在<body>屬性加入Onload=”xxxx” , 不過呼叫的時間點不太一樣
$(“a”).click(function() {
//Selecter偵測只要使用者按下Tag <A> ( 在此範例包含所有的<A> )
alert(“Hello World!”);
//顯示Hello World!
return false;
//把預期會連接到google網頁給擋住 ( 阻擋預期可能會觸動的行為 )
});
});
</script>
</head>
<body>
<a href=”http://www.google.com.tw”>Link</a>
</body>
</html> - 改由讀取外部檔案上的Hello World文字
JQuery支援幾種方式讀取外部資料 , 本篇使用的.load是最簡單也最方便的寫法 , 但是缺點是沒有Callback的支援 , 比較建議使用於檔案小且不需要等待時使用 ( 其餘用法會整理後放在 ” JQuery 學習心得 – 讀取外部檔案 ” 的文章中 )
- $ ( ‘ #xxx ‘ ) . load ( ‘ yy.html ‘ )
指定ID為xxx的Div (Span 也可以 ) 讀取yy.html檔案內的資料 ( yy.html 不用是完整的html格式 )範例 :
檔案helloworld.html就只有放一行HelloWorld!
Hello World!檔案Test.html
<html>
<head>
<script type=”text/javascript” src=”jquery-1.2.1.js”></script>
<script type=”text/javascript”>
$(document).ready(function() {
//這邊的功用有點像在<body>屬性加入Onload=”xxxx” , 不過呼叫的時間點不太一樣
$(“a”).click(function() {
//Selecter偵測只要使用者按下Tag <A> ( 在此範例包含所有的<A> )
$(‘#container’).load(‘helloworld.html’);
//將檔案helloworld.html內的Hello World!文字載入到id為container的div內
return false;
//把預期會連接到google網頁給擋住 ( 阻擋預期可能會觸動的行為 )
});
});
</script>
</head>
<body>
<a href=”http://www.google.com.tw”>Link</a>
<div id=”container”></div>
</body>
</html>
資料來源
- http://jquery.com/
- 書 – Learning jQuery : Better Interaction Design and Web Development with Simple JavaScript Techniques