jQuery初学者的第一步

这个教程将协助你开始使用 jQuery。如果你没有一个测试的网页，那你可以透过下列的程式码建立一个测试网页。

　　在 SCRIPT中的src属性必须指向至jQuery的档案。下载完jQuery的档案后，须把jquery.js这个档案，储存在与HTML档案相同的目录之下。

　　在Document载入完成时，才执行程式码

　　为了确保程式码在Browser完成载入时才执行，许多的JavaScript程式设计师会把他们的程式码放在onload这个function中

window.onload = function() {
    alert( "welcome" );
}

　　但是放在onload理面的程式码并不会等所有的图片完成下载后才执行。当你有需要在载入完成之后才执行的程式码，可以利用jQuery提供的ready事件

$( document ).ready(function() {
    // Your code here
});

　　举个例子，在ready事件中，你可以替超连结增加click的事件处理

$( document ).ready(function() {
    $( "a" ).click(function( event ) {
        alert( "Thanks for visiting!" );
    });
});

　　现在储存你的HTML档并且在Browser中重新整理你的测试页面。当你点击网页中的连结时，你会发现它会先弹出alert视窗，然后继续执行Browser的预设动作连结至 http://jquery.com

　　对于click和其他大多数的事件，你可以藉由在事件处理中唿叫event.preventDefault()来防止它执行预设动作

$( document ).ready(function() {
    $( "a" ).click(function( event ) {
        alert( "As you can see, the link no longer took you to jquery.com" );
        event.preventDefault();
    });
});

　　完整的範例

　　下面的範例是上面所讨论的完整程式码，直接把click事件处理嵌入HTML的中即可。

　　在实作的时候需注意：我们通常把JavaScript程式码独立在单独的JS档，并透过 script 的src属性载入，可增加程式码日后的维护性

　　增加和移除HTML Class

　　TIP : 当document完成载入后，你的程式码就会被执行，所以你必须将你的jQuery範例放到ready中

　　另一个普通的目标是增加或移除Class

　　首先，增加一些style设定到你的HTML档的

中，如下：

　　接着，替你的元件唿叫addClass()：

$( "a" ).addClass( "test" );

　　现在所有的超连结(a)元件就都会套用在第一步设定的style了

　　而我们可以透过唿叫removeClass()来移除已设定Class的元件：

$( "a" ).removeClass( "test" );

　　特效处理

　　jQuery也提供一些特效处理让你的网站与别人不一样。下面的例子是触发超连结click事件的特效处理：

$( "a" ).click(function( event ){
    event.preventDefault();
    $( this ).hide( "slow" );
});

　　当你点击这个超连结的时候，你就会发现超连结缓慢的消失了。

　　Callback 与 函数

　　JavaScript不像许多其他程式语言，它允许你自由的传递函数以便在以后的时间被执行。callback可以将一个function当做参数传递到另一个function中执行，当父function执行完成后才会唿叫执行callback函数。callback特别的地方在于它会等待父function完成后才执行。在等待父function完成的同时，browser可以执行其他的function或作各种其他的工作。

　　使用callback时，重点在于知道如何将它们传递到它所属的父function

　　没有引数的Callback (Callback without Arguments)

　　如果callback没有任何参数，那你可以像下面这样传递：

$.get( "myhtmlpage.html", myCallBack );

　　当get完成传递至myhtmlpage.html时，接着会执行myCallBack function

　　注意：第二个参数在这裡是简单的funcation名称 ( 但不是一个字串，且没有携带任何参数 )

　　携带引数的Callback (Callback with Arguments)

　　携带引数执行的Callback可能会有点棘手

　　错误的範例 ( 这个範例不会被正常执行 )

$.get( "myhtmlpage.html", myCallBack( param1, param2 ) );

　　上述例子失败的塬因是因为程式码会立即执行myCallBack( param1, param2 )，然后将myCallBack的回传值代入$.get的第二个参数。我们实际上是想要传递myCallBack整个function，不是myCallBack的回传值(回传值可能是或可能不是一个function)。所以，要如何传递myCallBack与它的参数呢?

　　正确的範例

　　要延缓执行myCallBack与其参数，你可以将其包装在匿名的function中。注意：匿名function中将会唿叫myCallBack并代入param1和param2的值

$.get( "myhtmlpage.html", function() {
    myCallBack( param1, param2 );
});

　　当get完成传递至myhtmlpage.html时，将会执行这个匿名function，进而执行myCallBack( param1, param2 )