jQuery是一套跨瀏覽器的JavaScript函式庫，簡化HTML與JavaScript之間的操作。由John Resig在2006年1月的BarCamp NYC上釋出第一個版本。目前是由 Dave Methvin 領導的開發團隊進行開發。全球前10000個存取最高的網站中，有65%使用了jQuery，是目前最受歡迎的JavaScript函式庫。

jQuery的語法設計使得許多操作變得容易，如操作文件（document）、選擇DOM元素、建立動畫效果、處理事件、以及開發Ajax程式。也提供了給開發人員在其上建立外掛模組的能力。這使開發人員可以對底層互動與動畫、高階效果和高階主題化的元件進行抽象化。

在開使用前我們要先瞭解網頁的架構，組成網頁最基礎的標籤為:

: 宣告此份文件為HTML

: 網頁引用script或css的地方

: 網頁的內容主體

它們的架構就像一棟房子一樣，每一個標籤就代表著一個樓層，在一個樓層中我們還會有許多的房間，這些房間就是這一樓層的子節點，在房間中也會有許多隔間，這又是一個子節點，所以我們會得到一個祖先節點body、其子節點div、子孫節點span、子孫節點a，所以當我們在找尋物件時我們必須知道自己目前的所在地，這樣才可以正確地找到我們所要的物件。

要如何在網頁中使用jquery只要在網頁標籤中引用jquery函式庫即可，函式庫可從官網中下載 http://jquery.com/，或使用CDN的線上函式庫。

引用函式庫後即可使用jQuery的豐富內容，現在我們來介紹其中最基礎也是最常使用的功能，就是選擇器，要如何使用選擇器也非常簡單，範例如下。

Ex : 選擇一ID為”Item”的物件

jQuery :   $(“#Item”);

傳統JavaScript :  document.getElementById(“Item”);

由上例可以發現，它替開發者們簡化很了多的程式片段，只需要一個簡單的”$( ) “符號，就可以找到我們要的內容，讓程式可以相當的精簡，並具有更好的可讀性，接下來我們就來介紹選擇器的基礎用法。

Ex : 選擇頁面中所有的 input 標籤

$(“input”);

只需要少許的程式片段就可以得到所有指定的物件，是不是相當的方便呢。

Ex : 選擇頁面中所有name為apple的物件

$(“[name=apple]”);

Ex : 選擇頁面中所有class 為first的物件

$(“.first”);

Ex : 選擇頁面所有input標籤其name為apple

$(“input[name=apple]”);

Ex : 選擇頁面所有input標籤其class為first

$(“input.first”);

Ex : 選擇一ID為Item其class為 apple

$(“#Item.apple”);

現在我們瞭解選擇器的基本運用後，就可以繼續瞭解jQuery選擇器的篩選器，篩選器是當我們選取到多數物件時，我們想對其做分類，或是只針對具有特定內容的物件進行處理時，可以將所要的物件篩選出來，以下為範例和常用的篩選器表格。

jQuery常用的篩選 :

Ex : 使用jQuery 常用篩選器來選擇頁面物件

※ console.log()函數會在瀏覽器的DBUG模式中顯示資料，開啟DBUG方法為，在瀏覽器畫面按下F12即可開啟DBUG模式，就可以看到選擇器所選到的物件了。

※

現在我們對於jQuery的選擇器已有基礎的認識，接下來我們就可以對被我們選到的物件做些事，由上個範例我們經由篩選器篩選出我們要的物件後，我們可以對其做些事 :

隱藏 :

$(“#one span a”).hide(); //隱藏所有在span下的a標籤

顯示 :

$(“#one span a”).show();

//顯示所有在span下的a標籤(a必須是隱藏的狀態，不然不會有差別)

獲得資料 :

$(“#one span:first”).html(); //得到第一個span之html值為1

※如果標籤中有再包著標籤，則會顯示其標籤內容，如上個範例最後的span標籤，其顯示之結果為”1234”，如不要標籤出現則須改使用text()函數，就只會出現5 6 7 8

修改 :

$(“#one span:first”).html(“9”); //將第一個span之html值改為9

※此修改會把其內容清空才修改，如果再span標間中有其他標籤，標籤會被清除，如上例最後之span，會把所有a標籤清除且此節點會只剩下”9″這個值

刪除 :

$(“#one span:first”).remove(); //將第一個span標籤移除

清空 :

$(“#one span:first”).empty();

//將第一個span中的所有內容清除，即其原本html值1會變成空值””。

新增class :

$(“#one span:even”).addClass(“first”); //將偶數的span給予class=”first”

※新增後我們可以對class中有first的物件進行篩選並隱藏物件

$(“#one span.first “).hide();

修改style :

$(“#one span:even”).css({“background-color”:”red”,”color”:”blue”});

//將偶數的span背景顏色改為紅色，並將顏色改為藍色

以上為jQuery選擇器的基礎使用方式，在下一篇章中會介紹如何遍歷和操作DOM元素，可以讓我的網頁變得更活潑和更多的變化性。