select * from wp_mban_banner where id = 13Select returned 1 rows. 0: select * from wp_mban_banner where id = 13Select returned 1 rows. 0:

: 基本概念

這是入門教學,設計來幫你開始使用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 )

Print Friendly, PDF & Email

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料