jQuery: 基本概念
這是入門教學，設計來幫你開始使用jQuery，假如你尚未設定測試頁面，現在開始建立下面的HTML網頁：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!doctype html><html><head> <meta charset="utf-8" /> <title>Demo</title></head><body> <a href="http://jquery.com/">jQuery</a> <script src="jquery.js"></script> <script> // Your code goes here. </script></body></html> |
在<script> 元素裡的src屬性必須指到jQuery的一個副本，下載jQuery的副本可以到下載jQuery頁面，然後儲存jquery.js檔案到你HTML檔案的相同目錄。
文件準備好時啟動程式碼
為了確保程式碼可以在瀏覽器完成載入文件後執行，很多JavaScripttt程式設計師會將程式碼置於onload 函式內：
|
1
2
3
4
5
|
window.onload = function() { alert( "welcome" );} |
不幸的是，會直到所有的圖片完成下載，包括橫幅廣告，才會執行，要在文件一準備好就能執行操作，jQuery需要有ready事件的敘述：
|
1
2
3
4
5
|
$( document ).ready(function() { // Your code here.}); |
例如，在ready事件內，你可以增加一個click處理器到連結：
|
1
2
3
4
5
6
7
8
9
|
$( document ).ready(function() { $( "a" ).click(function( event ) { alert( "Thanks for visiting!" ); });}); |
儲存你的HTML檔案，然後在瀏覽器重新載入測試頁，點擊連結現在會先出現一個警告彈出視窗，接著繼續瀏覽的行為到 http://jquery.com。
對於click 跟很多其他的事件，你可以在事件處理器內呼叫event.preventDefault()來避免預設的行為：
|
1
2
3
4
5
6
7
8
9
10
11
|
$( document ).ready(function() { $( "a" ).click(function( event ) { alert( "As you can see, the link no longer took you to jquery.com" ); event.preventDefault(); });}); |
完整的範例
下面的例子說明上面討論的點擊處理的程式碼，直接內嵌在HTML <body>中，注意實際運用中，通常將你的程式碼另外放到一個獨立的JS檔案中，然後使用 <script>元素的src屬性在頁面上載入程式碼。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!doctype html><html><head> <meta charset="utf-8" /> <title>Demo</title></head><body> <a href="http://jquery.com/">jQuery</a> <script src="jquery.js"></script> <script> $( document ).ready(function() { $( "a" ).click(function( event ) { alert( "The link will no longer take you to jquery.com" ); event.preventDefault(); }); }); </script></body></html> |
新增移除HTML類別
重要：你必須接下來jQuery範例在ready事件內，這樣你的程式碼會在文件準備好的時候執行。
另一個常見的工作就是新增或移除類別。
首先，新增一些樣式資訊到文件的<head>內，像這樣：
|
1
2
3
4
5
|
<style>a.test { font-weight: bold;}</style> |
接下來，新增.addClass() 呼叫到指令碼：
|
1
|
$( "a" ).addClass( "test" ); |
所有的<a>元素現在變成粗體字。
要移除現有的類別，使用.removeClass()：
|
1
|
$( "a" ).removeClass( "test" ); |
特別效果
jQuery也提供一些方便使用的效果來幫你的網站更加突出，例如假如你建構了一個click處理器：
|
1
2
3
4
5
6
7
|
$( "a" ).click(function( event ) { event.preventDefault(); $( this ).hide( "slow" );}); |
接著在點擊時連結會慢慢地消失。
回呼函式跟函式
不像很多其他的程式語言，JavaScript允許你在以後的時間自由地傳遞函式來執行，callback 是一個函式用來傳遞參數到另一個函式，它在父函式完成時執行，回呼函式很特別因為他們會很有耐心地等待父函式完成才執行。這個時候，瀏覽器可以執行其他的函式或是做其他種類的工作。
要使用回呼函式，知道如何傳遞他們到父函式裡很重要。
不用參數的回呼
假如回呼沒有參數，你可以像這樣來傳遞：
|
1
|
$.get( "myhtmlpage.html", myCallBack ); |
在$.get()完成取得頁面 myhtmlpage.html時，它會執行myCallBack()函式。
- 注意： 這裡的第二個參數就是函式的名稱（這不是字串，也不用括號）。
有參數的回呼
執行有參數的回呼是較難處理的。
錯誤
這個程式碼範例不能執行：
|
1
|
$.get( "myhtmlpage.html", myCallBack( param1, param2 ) ); |
錯誤的原因就是程式碼一執行myCallBack( param1, param2 )後就傳遞myCallBack()的傳回值作為第二個參數到$.get()，我們實際上想傳遞函式myCallBack()而不是myCallBack( param1, param2 )的傳回值（可能是或不可能是一個函式），所以如何在 myCallBack() 內含有參數傳遞？
正確
要推遲執行有參數的myCallBack()，你可以使用一個匿名函式做為包裝，注意function(){的使用，匿名函式就做一件事：呼叫帶有param1跟param2值的myCallBack()。
|
1
2
3
4
5
|
$.get( "myhtmlpage.html", function() { myCallBack( param1, param2 );}); |
當$.get()完成取得頁面myhtmlpage.html時，它會執行匿名函式，這個函式會執行myCallBack( param1, param2 )。