jQuery學習第一課

jQuery學習第一課

  • 基本的jQuery 架構
01.$(document).ready(function() {
02.  // Handler for .ready() called.
03.});

基本上任何的javascript 都寫在 document .ready 裡面就對了。
 這個code 的意思就是:在我的網頁(DOM) load 完成之後,我要做些甚麼事情!
 在jQuery 中, “$” 這個符號代表的就是jQuery。
 因此你也可以寫成

01.jQuery(document).ready(function(){
02.  // Handler for .ready() called.
03.});
  • 常用的語法

通常我們最常用的就是按下按鈕時,我們希望叫javascript 幫我們做事情。
 因此其實jQuery 的概念就是:
1.利用選擇器選取要操作的DOM
2.修改他
我舉個例子:

01.<button id="click" class="me" type="button">Click Me!>/button>
02.<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事件

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

如此一來我在點擊button 時就會將input 的值從mouse 改成 hello
很簡單吧!設定 input 的屬性竟然只需要一行就完成!
 大致上這就是jQuery 基礎會用到的東西。