/* syntax highlight */ /* end of syntax highlight */

2011年11月30日 星期三

jQuery 筆記 (三) – 基本使用語法

Bookmark and Share

JQuery 的好處就是可以幫你處理掉許多原本 JavaScript 要自己手調的地方,並加速開發進度,基本上 JQuery 會跟 JavaScript 寫在一起,而非

僅用本文章紀錄 JQuery 的基本語法

 

加入 JQuery

只要用以上語法就可以將整個 JQuery plugin 抓進來使用了,其中 jquery 指的是其檔案名稱,依版本不同可能會有差異

 

另外,也可以透過 Google 的空間來引入外掛 (但速度可能較慢)

 

加入 JQuery 外掛

您也可以新增其他 JQuery 外掛,例如 alert 外掛,你可以從 此頁下載,並在 HTML 當中新增 import 項目,即可使用。

 

基本語法

語法皆為 $(selectors) ,依中的選擇器之不同,取出不同的元素,例如:

$("div")                   :選取所有的 <div>

$("#content")          :選取所有 id 為 content 的元素

$("div.contents a")  :選取所有 content 底下所有被 <a></a>所包住的元素

$("body > p")           :選取被 body 包住的下一層 div ,即 <p> 標籤

$("div:has(p)")         :選取至少有出現一次 <p> 的 <div>

$("tr:first")                 :選取第一個找到的 <tr> 標籤元素

$("input[name='newsletter']")  :取得其name屬性值為newsletter的input元素

 

id selector 與 class selector

我覺得 CSS 與 Javascript 裡面最容易搞混的就是 id 與 class 了…以下語法分別可以取出 id 與 class 值

例如以下 html 代碼:

id selector :

class selector:

 

與 DOM、CSS 之對應語法

前一篇 有談到 DOM 的架構及取值之方法,JQuery 的語法更為簡潔,例如原本的 JS 語法為:

 

即取得HTML當中所有 <a> 的元素,而改寫成 JQuery 將會是

 

而對應的 CSS 為:

 

再看一個 id selector 的範例 例如我們想取得 id 為 content 的元素,我們會用 JS 的語法如下:

 

改寫成 JQuery 將會是:

 

而 CSS 當中將會是:

 

選取元素

基本上 JQuery 是用 $ 來當作取出物件資料的記號,例如原本可能的 HTML 內容如下:

 

加入 JQuery 以下語法,選取所有有 target 屬性的 <a> 標籤

 

執行 JQuery 語法之後,原本上面那句話就會變成:

 

修改 CSS 屬性

JQuery 也可使用 $(“div”) 來選取 div 元素,例如原本的 HTML 內容如下:

 

使用 JQuery 改變其 CSS 屬性,語法如下:

 

則顯示的 HTML 內容將變成:

 

可以配合事件加入,加強互動,例如以下範例讓使用者按下 header 區塊時,即變更背景顏色:

 

串接技巧 (Chaining)

利用串接的技巧,可以巧妙的簡化語法,例如原本可能是以下兩段函式

可以改寫成

 

將 JQuery 元素取出的值丟給 JS

 

將 JS 取出的值丟給 JQuery

 

參考資料:

http://jsgears.com/thread-63-1-1.html

http://webdesign.kerthis.com/jquery/

http://webdesign.kerthis.com/jquery/jquery_basics

0 意見:

張貼留言

Related Posts Plugin for WordPress, Blogger...