iT邦幫忙

DAY 10
4

MIS2000Lab.的「HTML5 認證考試,從零開始」--菜鳥的30天馬拉松系列 第 10

MIS2000Lab.的「HTML5 認證考試,從零開始」#10--寫得少,做得多。jQuery簡介(I)

上一篇文章完成了HTML的DOM

http://ithelp.ithome.com.tw/question/10158053

接下來要介紹jQuery......

jQuery是一個開放原始碼的JavaScript函式庫,而且具備「跨瀏覽器」的相容性,
對於擷取網頁中的DOM更為簡潔,而且具備AJAX功效可以存取Web Service。

威力強大卻簡單好用(輕量化),如同jQuery官方網站的標題**「寫得少,做得多」。**

Microsoft開發工具Visual Studio在ASP.NET網站與專案上,很早就支援jQuery的開發,
透過整合的開發畫面讓您撰寫jQuery更好上手。

您也可以上網搜尋「Visual Studio Express」就能下載免費版本,

開發網頁的朋友請下載for Web版。

==== 引用jQuery到我的網頁裡面 ====


<meta charset="utf-8" />
<script type="text/javascript"
src="Scripts/jquery-1.8.0.min.js"></script>

...

註解:jQuery版本進步很快,上述的版本數1.8.0僅供參考。

您也可以從別人的網站引用這些jQuery檔案(.js檔),這種稱為CDN

一個常用的CDNs是Google網站--
<script type="text/javascript"
src="**http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js**"></script>

==== 使用jQuery函式 ====

jQuery函式庫最主要的特點就是「jQuery函式(function)」,
通常使用縮寫「$()符號」來代替,也可以寫成完整的jQuery()。

通常等到整個網頁(document)都成功載入之後,呼叫jQuery函式庫的功能才會運作,

您可以在下面的程式碼看見關鍵字「ready」。

[img=415,432]http://ithelp.ithome.com.tw/upload/images/20141005/2014100519312954312c11bd5fd\_resize\_600.jpg[/img]

下一個範例,按下按鈕之後,網頁內的主題文字**變成紅色**。

<script type="text/javascript">
$(document).ready(function () {
$("#Button1").click(function () {
$("h2").css("color", "red");
});
註解:按下(.click)id=Button1的表單元件之後,會把網頁中<h2>標籤內的文字,透過CSS樣式改成紅色的字。
});
</script>

<h2>MIS2000 Lab.</h2>
<h2>簡單的 jQuery語法練習。</h2>

<input type="button" id="Button1" value="傳統HTML按鈕,改變標題的顏色" />

==== 使用jQuery選取元素與遊歷DOM ====

要抓取網頁裡面所有的<p>標籤,請寫成:
$(“p”)

如果要抓取ID名為 xyz的「所有」標籤(Tag),例如<div id=”xyz”>或是<li id=”xyz”>則請寫成:
$(“#xyz”)
//註解:JavaScript語法必須寫成document.getElementsById(“xyz”)才有相同效果。

想要抓取特定類別(Class)裡面的所有標籤,例如<div class=”RedFont”>或是 <p class=”RedFont”>請寫成:
$(“.RedFont”)

倘若要為<div>這個標籤動態加入class=”myCSS”則寫成:
$(“div”).addClass(“myCSS”)

表示我們要搜尋HTML網頁裡面,「所有」的<div>標籤(Tag),並為他們全數加上 myCSS的CSS樣式。

下一篇文章會繼續為您介紹 jQuery

**寫得少,做得多。jQuery簡介(II) http://ithelp.ithome.com.tw/question/10158353**

===============================================
本系列文章已經集結出書
HTML5、CSS、JavaScript 網頁程式設計與 MCSD 70-480 認證教材

MIS2000 Lab. 周棟祥/吳進魯

出版商:碁峰
出版日期:2015-04-09

語言:繁體中文
ISBN:9863475750
ISBN-13:9789863475750

PChome http://24h.pchome.com.tw/books/prod/DJAV0S-A90060ASI
博客來 http://www.books.com.tw/products/0010671214
天瓏書局 https://www.tenlong.com.tw/items/9863475750?item\_id=1003110


上一篇
MIS2000Lab.的「HTML5 認證考試,從零開始」#9-- DOM簡介
下一篇
MIS2000Lab.的「HTML5 認證考試,從零開始」#11--jQuery簡介(II)
系列文
MIS2000Lab.的「HTML5 認證考試,從零開始」--菜鳥的30天馬拉松30

尚未有邦友留言

立即登入留言