Download
1 / 36
360 likes | 555 Views
Chapter 4 利用 JavaScript 或 jQuery 進行互動設計. CSS 簡介. HTML 主要是用標籤來定義文件的結構 。 CSS (Cascading Style Sheets) 主要是用來定義 HTML 文件要如何顯示。 同一個網頁內容，因為不同的 CSS 而造成顯示產生差異。. CSS 的基本寫法. 每一條 CSS 規則分為 選擇器 (Selector) 和 宣告 (Declaration) 兩個部分 , 其中 宣告 (Declaration) 則是由 屬性 (Property) 和 值 (Value) 所組成的 , 例 如：.
E N D
Chapter 4 利用JavaScript或jQuery進行互動設計
CSS 簡介 • HTML主要是用標籤來定義文件的結構。 • CSS (Cascading Style Sheets) 主要是用來定義HTML文件要如何顯示。 • 同一個網頁內容，因為不同的CSS而造成顯示產生差異。
CSS的基本寫法 • 每一條 CSS 規則分為選擇器(Selector) 和宣告(Declaration) 兩個部分, 其中宣告(Declaration) 則是由屬性(Property) 和值(Value) 所組成的, 例如：
CSS的基本寫法 • 所謂的選擇器是用來選擇這條規則要套用的對象, 例如我們要設定 <h1> 標籤的字型大小為12點, 顏色為紅色時, 寫法如下：
CSS的基本寫法 • 我們也可以同時讓多個選擇器共用相同的宣告, 例如要把 <h1>、<h2>、<h3>標籤的字型大小都設為12 點： • 當有多個選擇器要共用相同的宣告時, 可以合併寫在一起, 但選擇器要使用逗號"," 做區隔。
CSS 範例 於 <head>…</head> 中加入下列語法
三種常見的選擇器 • The tag Selector (標籤選擇器) • The class Selector (類選擇器) • The id Selector (id選擇器)
類選擇器 • html <h1 class="bluefont">這是第一行</h1> <p class="right">這是第一行</p> <p class="center">這是第二行</p> <p class="bluefont">這是第三行</p> • css p.right {text-align:right} p.center {text-align:center} .bluefont {color:blue}
id選擇器 • html <p id="red">這是第一行</p> <p id="green">這是第二行</p> <p id="blue">這是第三行</p> • css #red {color:red} #green {color:green} p#blue {color:blue}
JavaScript 歷史 • 由網景公司(Netscape)發展而成。 • 前身是Live Script文稿語言。 • 網景與昇陽公司(Sun Micro)共同將之推為WWW文稿語言的標準，改名為JavaScript。
包含於Script前後標籤之間 <Script> document.write("JavaScript程式一") </Script> document物件用於將目前的文件資訊輸出至使用者螢幕 write是document物件的眾多方法之一，作輸出的控制
函式(function) • 結構化程式設計。 • 代表一段副程式。 • 利用關鍵字 function 宣告函式名稱。 • function 函式名稱(引數) • {敘述}
函數的呼叫 - 沒有參數傳遞 <Script> function a(){ //定義函數a document.write(“我是洪國龍"); } function b(){ //定義函數b document.write("<br>"); } a(); //呼叫函數a b(); //呼叫函數b a(); </Script>
函數的呼叫 - 參數傳遞 <Script> function a(name){ document.write("我是", name); } function b(){ document.write("<br>"); } a(“洪國龍");//呼叫函數a, 同時傳入name的值 b(); a("Hubert Yang"); </Script>
DOM (Document Object Model) • Document Object Model (文件物件模型) • 瀏覽器載入網頁時，就會根據網頁的內容來建立相關的文件物件模型 DOM. • DOM是階層式的物件模型，有網頁的各種物件的性質和方法. • 用以產生動態網頁 Dynamical HTML.
JQuery 基本概念 以DOM為中心的思考方式 先決定要做動作的物件(使用selector) 再決定要做的動作 PS(selector跟CSS的用法一樣)
JQuery 基本語法架構 $物件類型+動作 Ex: $(‘ #myPhoto’).css(“height:”40px”); 將ID=myphoto的物件高度設為40px $(‘條件’)=>符合條件的物件 css(“act”)=>修改CSS的設定
多重選取 $(‘a’).append(“(低調)”); 解說: $(‘a’)→所有的<a>標籤 append(text)→在文字欄加入text 結果: <a href=‘xxx’>按我下載</a> <a href=‘yyy’>按我下載</a> ↓執行後 <a href=‘xxx’>按我下載(低調)</a> <a href=‘yyy’>按我下載(低調)</a>
條件選取 $(‘a[target]’).append(“(低調)”); 解說: $(‘a[target]’)→<a>標籤有target屬性的 apend(text)→在文字欄加入text 結果: <a href=‘xxx’>按我下載</a> <a href=‘yyy’ target=‘_blank’>按我下載</a> ↓執行後 <a href=‘xxx’>按我下載</a> <a href=‘yyy’ target=‘_blank’>按我下載(低調)</a>
條件選取 $(‘form#a’).submit(“function{ If($(‘input#user’)==‘’) alert(“名字沒填”); }” ); 解說: $(‘form#a’)→ID=a的表單 submit(action)→按下送出時執行action 結果: 送出時如果user那一欄是空白的話，跳出警告視窗
選取範例 $(‘div>div’) 選取被<div>包住的<div>標籤 $(‘div:has(div)’)選出有包住<div>的<div> $(‘body’) 選出<body>這個標籤 $(‘#body’) 選出ID為body的標籤 $(‘div.good’) 選出class=good的<div> $(‘div p’) 選出在<div>下的<p>
同一物件多動作 $(‘div#a’).css(height:40px;).addClass(‘cons’); 將ID=a的<div>標籤高度修改為40:px，再把該標 籤加入cons這個類別 原理: Jquery每一個動作都會回傳一開始輸入的物件 $(‘div#a’).css(height:40px;)會回傳$(‘div#a’) …Class(‘cons’)=$(‘div#a’).addClass(‘cons’)
便利功能 JQuery還有許多功能強大的Plugin 在其官方網站上有許多連結可供下載。 http://ui.jquery.com/
