[技術探討]jQuery小而精的網頁函式庫 (一)

jQuery小而精的網頁函式庫

 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元素,可以讓我的網頁變得更活潑和更多的變化性。


發佈留言

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料