[jquery] 不懂javascript的網頁設計師也可以輕鬆上手的jquery

2012-04-20

既然有人問了
那就簡單整理一下
有哪邊不懂的歡迎提出

STEP.1 引入jquery檔案
這邊使用google托管的檔案
就不用另外放一支jquery的檔案在自己的目錄下
如果他去的別的網站也有用 也就不用再load一次

▼將這行放在head標籤裡面






STEP.2 jquery的碼要擺在…

除了function以外的碼 (看不懂function的意思 就先不用在意他了)
通通都放在下面這兩個其中一個裡(任選一個 兩個是一樣的)
再把整段script標籤放在body標籤裡
▼將所有jquery的碼放在這裡面


STEP.3 選擇器怎麼用

你要操作哪一個標籤的東西
就把他放在 $(裡面)
用法就跟css的選擇器 幾乎完全一樣
記得用單引號 ‘ 或是 雙引號 ” 前後包起來
更多請看我之前寫的筆記或是官方文件(英文的)
▼ 幾個範例

// 如果是內建的標籤 (後面的.attr("name")下一個STEP會講)
// $("div")
$("div").attr("name");
$("a").attr("name");

// 如果是id的話
// $("#myform")
$("#myform").attr("name");
$("#content").attr("name");

//如果是class的話
// $(".btn")
$(".btn").attr("name");
$(".hint").attr("name");

//當然也可以結合
$("div.hint").attr("name");
$("a#content").attr("name");

STEP.4 對標籤做操作

這邊只有介紹些許功能
更多請看我之前的筆記或是官方文件

▼ html標籤的屬性

這是個a標籤

▼操作上面這個a標籤

$("a#content").attr("name");
//會得到name屬性的值 也就是myaaa

//要修改name呢 則是
$("a#content").attr("name","mynewbbb");
// 這樣就會將name從myaaa改成mynewbbb

▼ style(也就是css)

這是個div

▼ 操作上面這個div標籤

$("#content").css("color");
//會得到color的值 也就是#3c3c3c

//要修改呢 則是
$("a#content").css("backgroundColor","#cc00ff");
// 這樣就會將background-color從#ffffff改成#cc00ff

// 這邊有另一個重點是 如果css有橫線- 則是改成去掉橫線 橫線後面的第一個字母大寫
// background-color 就要寫成 backgroundColor 

▼增加及減少class

// 增加hint這個classname
$("#content").addClass("hint");

// 減少hint這個classname
$("#content").removeClass("hint");
STEP.5 怎麼觸發jquery神奇的功能

這邊介紹常用的click,mouseover,mouseout
更多請看我之前寫的筆記或是官方文件
在上一個step知道怎麼操作了之後
當然還需要做一些觸發的動作 來去操作
▼ click

// 按到id=content的標籤時 將他的背景色改為紅色
$("#content").click(function(){
    $("#content").css("backgroundColor","red");
});

▼ mouseover,mouseout

// 游標移到id=content的標籤上時 為他增加一個class
$("#content").mouseover(function(){
    $("#content").addClass("hint");
});
// 游標離開id=content的標籤上時 將一個class移除
$("#content").mouseout(function(){
    $("#content").removeClass("hint");
});

以上五點希望可以給未接觸過jquery的朋友了解一下jquery的用法
當然他可以做的事還非常的多
要深入請再研讀官方文件
或咕狗咕狗
有問題也可以發問
我會的會盡量回答

jquery真的很好用窩~~~