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

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

<script type="text/javascript" src="../js/plugin/jquery.js"></script>

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

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

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" language="javascript">google.load("jquery", "1.3");</script>

加入 JQuery 外掛

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

<script type="text/javascript" src="../js/plugin/jquery.alerts.js"></script>

基本語法

語法皆為 $(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 代碼：

<p class="navbar">Class 選擇器。</p>
<p id="navbar">id 選擇器。</p>

id selector ：

$("#navbar"); // 取出「id選擇器」

class selector：

$(".navbar"); // 取出「class選擇器」

與 DOM、CSS 之對應語法

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

document.getElementsByTagName("a");

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

$("a");

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

document.getElementById("content");

改寫成 JQuery 將會是：

$("#content");

選取元素

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

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" language="javascript">google.load("jquery", "1.3");</script>

0

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

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" language="javascript">google.load("jquery", "1.3");</script>

1

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

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" language="javascript">google.load("jquery", "1.3");</script>

2

修改 CSS 屬性

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

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" language="javascript">google.load("jquery", "1.3");</script>

3

使用 JQuery 改變其 CSS 屬性，語法如下：

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" language="javascript">google.load("jquery", "1.3");</script>

4

則顯示的 HTML 內容將變成：

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" language="javascript">google.load("jquery", "1.3");</script>

5

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

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" language="javascript">google.load("jquery", "1.3");</script>

6

串接技巧 (Chaining)

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

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" language="javascript">google.load("jquery", "1.3");</script>

7

可以改寫成

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" language="javascript">google.load("jquery", "1.3");</script>

8

將 JQuery 元素取出的值丟給 JS

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" language="javascript">google.load("jquery", "1.3");</script>

9

將 JS 取出的值丟給 JQuery

<script type="text/javascript" src="../js/plugin/jquery.alerts.js"></script>

0

參考資料：

http://jsgears.com/thread-63-1-1.html
http://webdesign.kerthis.com/jquery/
http://webdesign.kerthis.com/jquery/jquery_basics