jQuery 基礎教學

Part1: 簡介

jQuery 是一個超級無敵強大的工具，有了他， javascript 變得十分簡單。
相信很多人都會跟我一樣，在剛學習的時候有一個問題：

Q: 要先學會javascript 還是 jQuery ?

A: 簡單一點來說，以C++ 做為舉例

javascript 就等於是 C++

而 jQuery 就等於是 別人幫你寫好的Class

因此你還是要先懂一些C++的語法

有哪些語法呢?

我覺得只要知道怎麼宣告變數、跟用迴圈就夠了

因為，其他javascript 辦得到得事情，jQuery 辦得更快

因此我直接切入正題

----------------------------------------------------------------------------

Part2: 基本的jQuery 架構

$(document).ready(function() {



  // Handler for .ready() called.



});

基本上任何的javascript 都寫在 document .ready 裡面就對了

這個code 的意思就是：在我的網頁(DOM) load 完成之後，我要做些甚麼事情

在jQuery 中，  $   這個符號代表的就是jQuery

因此你也可以寫成jQuery(document).ready

----------------------------------------------------------------------------

Part3: 常用的語法

通常我們最常用的就是按下按鈕時，我們希望叫javascript 幫我們做事情

因此其實jQuery 的概念就是

1.利用選擇器選取要操作的DOM

2.修改他

我舉個例子:

<button id="click" class="me" type="button">Click Me!</button>

<input type="text" class="mouse" name="LastName" value="Mouse">

上面是兩個基本的DOM

buttom 擁有id 與 class

而input 擁有 class 與 name

所以我們首先第一步要先選擇DOM

在選擇器方面通常我們會選的依據有兩種

id 或者是 class

所以name在這邊沒屁用

假設我要選擇buttom這個東西的時候，我可以這樣寫

第一步驟：選擇DOM

$("#click")  或者是 $(".me")

記住一定要有單引號或雙引號，不然你可能會很納悶程式怎麼都跑不出來

我就在這邊吃了很多悶虧

第二步驟:做事情

通常我們會把事情寫在function 裡面，假設是click事件

$(".me").click(function() {
    //要做的事情
    $(".mouse").attr("value", "hello");
});

如此一來我在點擊button 時就會將input 的值從mouse 改成 hello

很簡單吧! 設定 input 的屬性竟然只需要一行就完成!!


大致上這就是jQuery 基礎會用到的東西