1. jQuery 初上手指南 ( 一 )
jQuery 介紹與基本使用

2. Agenda
n 網頁前端語言 Javascript
n jQuery 是嗄 ? 可以吃嗎 ?
n 如何使用 jQuery
n 神奇的 jQuery Selector
n jQuery 常用的基本用法

3. 網頁前端語言 Javascript
n Javscript 與 HTML 同為網頁的公認標準，大
多瀏覽器都會支援
n Javascript 與網頁結合應用廣泛、技術成熟，
具有相當多的開發資源
n Javascript 可輕易實現跨平台、跨瀏覽器的理
想

4. n網頁前端語言 Javascript
n Javascript 開發難題
l DOM API 各自為政沒有統一呼叫方式
n 事件 Source:
IE→Event.srcElement
Firefox→function(e){e.target}
l 較少開發工具補助開發
l DOM API 語法冗長

5. jQuery 是嗄 ? 可以吃嗎 ?
n一種 Javascript Framework
njQuery 是 John Resig 於 2006/01/14 於
BarCamp NYC 首次發表
n其它 Javascript Framework 還有
Prototype 、 Mootools…

6. jQuery 是嗄 ? 可以吃嗎 ?
njQuery 特色
語法簡潔
$(“#tbl tr:odd”). css(“color”, “blue”) 改變 table id=tbl 所有單數行前景顏色
擴充彈性
jQuery 提供簡便的 Plugin 擴充方式，免費的 Plugin 越來越多
輕薄短小
大部分的功能只需載入一個 jquery.js 就 了，壓縮過的夠 js 甚至不超過 100KB
支援廣泛
可支援 IE6+, Firefox 2+, Safari 2.0+ 及 Opera 9.0+

7. 如何使用 jQuery
n官網下載最新版本 http://jquery.com/download/
n使用 Visual Studio 2012 NuGet 下載最新版本
njQuery 2.x 不支援 IE 6,7,8( 改使用 jQuery 1.x)

8. 如何使用 jQuery
n 將 jQuery 載入
n 載入頁面
n 開始體驗 jQuery

9. 神奇的 jQuery Selector
1. 指定標籤 (Tag) 類別 $(“A”)
2. 指定識別代號 (id) $(“#table1”)
3. 指定 CSS 類別名稱 $(“.style1”)
4. 額外條件 $(“table1 tr:odd”)
$(selector).action
jquery
前置字元
選取器 執行的動作

10. 神奇的 jQuery Selector
n $(“span”).html(“Hello World”)
所有 span 內文字改成 Hello World
n $(“#table1 tr:odd”).css(“backgroud-
color”,”#00ff11”);
id 為 table1 所有奇數行背景色改成 #00ff11
n $(“.style2).hide();
class 為 style2 的元素全部隱藏


11. jQuery 常用的基本用法
n $(document).ready()
當 document 物件下所有 DOM 物件都可以正確取得時，就會
觸發 jQuery.ready() 註冊的 function 可簡成 $(function(){….})
n .show() .hide()
物件顯示、隱藏
n .attr(attributeName) .attr(attributeName,value)
取得或設定物件屬性
n .click
註冊 Click 事件
n .html()
取得或設定內容，功能同 innerHTML