jQuery 初上手指南 ( 一 )jQuery 介紹與基本使用
Agendan 網頁前端語言 Javascriptn jQuery 是嗄 ? 可以吃嗎 ?n 如何使用 jQueryn 神奇的 jQuery Selectorn jQuery 常用的基本用法
網頁前端語言 Javascriptn Javscript 與 HTML 同為網頁的公認標準,大多瀏覽器都會支援n Javascript 與網頁結合應用廣泛、技術成熟,具有相當多的開發資源n Javascript 可輕易實現跨平台、跨瀏覽器的理想
n網頁前端語言 Javascriptn Javascript 開發難題l DOM API 各自為政沒有統一呼叫方式n 事件 Source:IE→Event.srcElementFirefox→function(e){e.target}l 較少開...
jQuery 是嗄 ? 可以吃嗎 ?n一種 Javascript FrameworknjQuery 是 John Resig 於 2006/01/14 於BarCamp NYC 首次發表n其它 Javascript Framework 還有Pr...
jQuery 是嗄 ? 可以吃嗎 ?njQuery 特色語法簡潔$(“#tbl tr:odd”). css(“color”, “blue”) 改變 table id=tbl 所有單數行前景顏色擴充彈性jQuery 提供簡便的 Plugin ...
如何使用 jQueryn官網下載最新版本 http://jquery.com/download/n使用 Visual Studio 2012 NuGet 下載最新版本njQuery 2.x 不支援 IE 6,7,8( 改使用 jQuery 1.x)
如何使用 jQueryn 將 jQuery 載入n 載入頁面n 開始體驗 jQuery
神奇的 jQuery Selector1. 指定標籤 (Tag) 類別 $(“A”)2. 指定識別代號 (id) $(“#table1”)3. 指定 CSS 類別名稱 $(“.style1”)4. 額外條件 $(“table1 tr:odd”)...
神奇的 jQuery Selectorn $(“span”).html(“Hello World”)所有 span 內文字改成 Hello Worldn $(“#table1 tr:odd”).css(“backgroud-color”,”#0...
jQuery 常用的基本用法n $(document).ready()當 document 物件下所有 DOM 物件都可以正確取得時,就會觸發 jQuery.ready() 註冊的 function 可簡成 $(function(){….})n...
Upcoming SlideShare
Loading in …5
×

jQuery 初上手指南(一)

413 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
413
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

jQuery 初上手指南(一)

  1. 1. jQuery 初上手指南 ( 一 )jQuery 介紹與基本使用
  2. 2. Agendan 網頁前端語言 Javascriptn jQuery 是嗄 ? 可以吃嗎 ?n 如何使用 jQueryn 神奇的 jQuery Selectorn jQuery 常用的基本用法
  3. 3. 網頁前端語言 Javascriptn Javscript 與 HTML 同為網頁的公認標準,大多瀏覽器都會支援n Javascript 與網頁結合應用廣泛、技術成熟,具有相當多的開發資源n Javascript 可輕易實現跨平台、跨瀏覽器的理想
  4. 4. n網頁前端語言 Javascriptn Javascript 開發難題l DOM API 各自為政沒有統一呼叫方式n 事件 Source:IE→Event.srcElementFirefox→function(e){e.target}l 較少開發工具補助開發l DOM API 語法冗長
  5. 5. jQuery 是嗄 ? 可以吃嗎 ?n一種 Javascript FrameworknjQuery 是 John Resig 於 2006/01/14 於BarCamp NYC 首次發表n其它 Javascript Framework 還有Prototype 、 Mootools…
  6. 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. 7. 如何使用 jQueryn官網下載最新版本 http://jquery.com/download/n使用 Visual Studio 2012 NuGet 下載最新版本njQuery 2.x 不支援 IE 6,7,8( 改使用 jQuery 1.x)
  8. 8. 如何使用 jQueryn 將 jQuery 載入n 載入頁面n 開始體驗 jQuery
  9. 9. 神奇的 jQuery Selector1. 指定標籤 (Tag) 類別 $(“A”)2. 指定識別代號 (id) $(“#table1”)3. 指定 CSS 類別名稱 $(“.style1”)4. 額外條件 $(“table1 tr:odd”)$(selector).actionjquery前置字元選取器 執行的動作
  10. 10. 神奇的 jQuery Selectorn $(“span”).html(“Hello World”)所有 span 內文字改成 Hello Worldn $(“#table1 tr:odd”).css(“backgroud-color”,”#00ff11”);id 為 table1 所有奇數行背景色改成 #00ff11n $(“.style2).hide();class 為 style2 的元素全部隱藏
  11. 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

×