jQuery 小而精的網頁函式庫 (一)
jQuery是一套跨瀏覽器的JavaScript函式庫，簡化HTML與JavaScript之間的操作。由John Resig在2006年1月的BarCamp NYC上釋出第一個版本。目前是由 Dave Methvin 領導的開發團隊進行開發。全球前10000個存取最高的網站中，有65%使用了jQuery，是目前最受歡迎的JavaScript函式庫。
jQuery的語法設計使得許多操作變得容易，如操作文件（document）、選擇DOM元素、建立動畫效果、處理事件、以及開發Ajax程式。也提供了給開發人員在其上建立外掛模組的能力。這使開發人員可以對底層互動與動畫、高階效果和高階主題化的元件進行抽象化。
在開使用前我們要先瞭解網頁的架構，組成網頁最基礎的標籤為:
<html> : 宣告此份文件為HTML
<head> : 網頁引用script或css的地方
<body> : 網頁的內容主體
它們的架構就像一棟房子一樣，每一個標籤就代表著一個樓層，在一個樓層中我們還會有許多的房間，這些房間就是這一樓層的子節點，在房間中也會有許多隔間，這又是一個子節點，所以我們會得到一個祖先節點body、其子節點div、子孫節點span、子孫節點a，所以當我們在找尋物件時我們必須知道自己目前的所在地，這樣才可以正確地找到我們所要的物件。
<html> <!-- 土地 --> <head></head> <!-- 房子的門牌 --> <body> <!-- 房子的本體 --> <div> <!-- 房子的樓層 --> <span> <!-- 樓層中的房間 --> <a></a> <!-- 房間中的隔間 --> </span> </div> </body> </html>
要如何在網頁中使用jquery只要在網頁<head>標籤中引用jquery函式庫即可，函式庫可從官網中下載 http://jquery.com/，或使用CDN的線上函式庫。
<head> <script src="//code.jquery.com/jquery-1.11.0.js"></script> <!--CDN--> <script type="text/javascript" src="jquery-1.11.0.js "></script> </head> </body> </html>
引用函式庫後即可使用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常用的篩選 :
| :animated | 選擇的物件是否正在執行動畫效果的元素。 |
| :eq() | 在匹配的集合中選擇索引值為index的元素。 |
| :even | 選擇索引值為偶數的元素，從 0 開始計數。 |
| :odd | 選擇索引值為奇數元素，從 0 開始計數。 |
| :first | 選擇第一個匹配的元素。 |
| :gt() | 選擇匹配集合中所有大於給定index |
| :header | 選擇所有標題元素，像h1, h2, h3 等 |
| :last | 選擇最後一個匹配的元素。 |
| :lt() | 選擇匹配集合中所有索引值小於給定index參數的元素。 |
| :not() | 選擇所有元素去除不匹配給定的選擇器的元素。 |
Ex : 使用jQuery 常用篩選器來選擇頁面物件
※ console.log()函數會在瀏覽器的DBUG模式中顯示資料，開啟DBUG方法為，在瀏覽器畫面按下F12即可開啟DBUG模式，就可以看到選擇器所選到的物件了。
※ <script>標籤內註解為//註解 或 /*註解*/，其餘網頁標籤片段皆為<!—註解–>
<!DOCTYPE HTML> <html> <meta content="text/html; charset=UTF8" /> <title>apple</title> <head> <script src="//code.jquery.com/jquery-1.11.0.js"></script> <!--CDN--> </head> <script type="text/javascript"> $(function(){ //從ID等於one的DIV節點開始其中的第一個span標籤 console.log($("#one span:first")); //從ID等於one的DIV節點開始其中的第四個span標籤 console.log($("#one span:last")); //從ID等於one的DIV節點開始其中的第二個span(索引由0開始)標籤 console.log($("#one span:eq(1)")); //從ID等於one的DIV節點開始其中索引為的偶數span(索引由0開始)標籤 console.log($("#one span:even")); //從ID等於one的DIV節點開始其中索引為的奇數span(索引由0開始)標籤 console.log($("#one span:odd")); //從ID等於one的DIV節點開始其中索引大於1的span(索引由0開始)標籤 console.log($("#one span:gt(1)")); //從ID等於one的DIV節點開始其中索引小於1的span(索引由0開始)標籤 console.log($("#one span:lt(1)")); //從ID等於one的DIV節點中所有span標籤但不包含name="a"的span console.log($("#one span:not([name=a])")); //從ID等於one的DIV節點中的span標籤中，的所有a標籤 console.log($("#one span a")); //得到第五個span中的所有a標籤 //從ID等於one的DIV節點中，其 name="h" 的物件 console.log($("#one [name=h]")); //得到Id="one"中name="h"的所有物件 }); </script> <body> <div id="one"> <span name="a">1</span> <span name="b">2</span> <span name="c">3</span> <span name="d">4</span> <span id="e"> <a name="f">5</a> <a name="g">6</a> <a name="h">7</a> <a name="i">8</a> </span> </div> </body> </html>
現在我們對於jQuery的選擇器已有基礎的認識，接下來我們就可以對被我們選到的物件做些事，由上個範例我們經由篩選器篩選出我們要的物件後，我們可以對其做些事 :
隱藏 :
$(“#one span a”).hide(); //隱藏所有在span下的a標籤
顯示 :
$(“#one span a”).show();
//顯示所有在span下的a標籤(a必須是隱藏的狀態，不然不會有差別)
獲得資料 :
$(“#one span:first”).html(); //得到第一個span之html值為1
※如果標籤中有再包著標籤，則會顯示其標籤內容，如上個範例最後的span標籤，其顯示之結果為”<a name=”f”>1</a><a name=”g”>2</a><a name=”h”>3</a><a name=”i”>4</a>”，如不要標籤出現則須改使用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元素，可以讓我的網頁變得更活潑和更多的變化性。