• Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
160
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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