JQuery基礎與動畫、特效 靜宜大學 資管系 楊子青 網路參考資源: http://www.w3schools.com/jquery/

Slides:



Advertisements
Similar presentations
簡報製作:葉 女 嬰 慧 葉純佑 漫話漫畫 仔細看看這張圖... 回答下列問題 站在正中央的人有沒有打領帶? 2. 在紙上畫線的是鉛筆還是鋼筆? 3. 看書的人有沒有戴眼鏡?
Advertisements

《互联网运营管理》系列课程 觉浅网 荣誉出品
浅析浏览器解析和渲染 偏右.
JQuery 基础教程.
JQuery Mobile 網頁切換 靜宜大學 資管系 楊子青.
20 使用Dreamweaver构建HTML结构
DREAMWEVAER MX 2004入门 楼斌 BBS ID:lou 生命科学学院
第8章 CSS基础知识 【学习目标】 对于一个网页设计者来说,对HTML语言一定不感到陌生,因为它是网页制作的基础,但是如果希望网页能够美观、大方,并且升级维护方便,那么仅仅知道HTML还是不够的,还需要了解CSS。了解CSS基础知识,可以为后面的学习打下基础。 本章主要内容包括: 为什么在网页中加入CSS。
2 HTML5與CSS3 2-1 HTML5的頁面結構 2-2 HTML5的文字編排標籤 2-3 HTML5的圖片與超連結標籤
P303 HTML/DHTML/CSS/JavaScript 專業HTML網頁設計 陳錦輝.
XML 第05讲 使用CSS显示XML.
学习情境三:配置WEB服务器 服务器配置与管理.
第五单元课1-3 层叠样式表.
浏览器工作原理浅析 TID Ghostzhang.
计算机图形技术 余 莉
CSS – 進階 IDIC.
模块七 信息获取与发布 第8章 计算机网络信息的获取与发布.
RWD網頁設計實務 李欣螢 以誠研發有限公司.
第四章 样式表CSS CSS技术是一种格式化网页的标准方式,它通过设置CSS属性债周页元素获得各种不同效果。本章共分9个实例,主要内容包括的基础知识、CSS创建与导入、CSS的语法结构、常用CSS的分类、CSS的使用原则等内容。
第8章 样式表.
Web应用开发 矫桂娥 办公室:222#.
CSS简介 WEB前端三剑客之二.
CSS 徐于晉 陳政樺 陳郁蘋 黃麒錕 劉芳賓.
标准规范 2.自己偏好习惯 3.讨论/建议 永远遵循同一套编码规范 -- 不管多少人同时参与编码,所有代码都应该看上去像是一个人编写的一样。
第 11 章 讓版面更活潑 的 CSS.
網路程式設計期末專案 Master Drummer 資工3A B 陳天盛.
网站设计 前端 入门学习.
Ajax编程技术 第一章 Ajax简介.
第 13 章 用CSS 設定 文字顏色與背景.
滑鼠移動與按鍵事件 JavaScript 滑鼠移動與按鍵事件.
Ch.13 HTML網頁實作.
Lecture 2 Lecture An Introduction To The HTML Language
CSS排版:盒子模式 靜宜大學 資管系 楊子青.
XSL: Extensible Stylesheet Language
Happy Designer 第四次聚會 課程內容分享 2008/11/20.
JavaScript 靜宜大學 資管系 楊子青.
十二年國民基本教育中等學校教師教學專業能力研習五堂課
JQuery與動畫及特效 靜宜大學 資管系 楊子青 網路參考資源:
JQuery Mobile基礎 (開發跨平台行動裝置網頁)
网站设计 前端 选择器(复习),表单.
CSS技术 蒋玉华.
JQuery基礎與動畫、特效 靜宜大學 資管系 楊子青 網路參考資源:
UI 软件 设计 页面布局(二).
大家所认为的电子商务行业有哪些途径来赚钱?
聖文德書院 ST BONAVENTURE COLLEGE & HIGH SCHOOL
A New Kind of JavaScript Library
2.2 Web界面设计 信息工程系 向模军 Tel: QQ:
第4章 CSS基础 主讲人:刘泰然 经济管理学院.
网页设计与制作教程第5版 机械工业出版社同名教材 配套电子教案.
Web Programming 網際網路程式設計
第三章 HTML相关技术基础知识 纵观各种动态页面开发技术,无论是JSP、ASP还是PHP都无 法摆脱HTML的影子。这些动态的页面开发技术无非是在静 态HTML页面的基础上添加了动态的可以交互的内容。HTML 是所有动态页面开发技术的基础。在接下来的章节将要详 细介绍的就是HTML相关的一系列技术,包括HTML、
第13章 CSS 通过CSS可以使用更丰富、更灵活的样式,更简单地 设计出更美观的网页。同时,也让网页的设计与维护 更有效率。CSS在网页设计中的作用尤为重要,是网 页设计师必备的知识。本章首先介绍什么是CSS、CSS 的基本语法等基础知识,接着学习利用“CSS”面板 管理规则,如何在Dreamweaver中创建与应用CSS样式.
Ajax编程技术 第六章 调试与错误处理.
JQuery基礎與動畫、特效 靜宜大學 資管系 楊子青.
指導老師:吳玫瑩老師 組員: 廖偉淳 B 陳逸瑋B 劉權德 B 陳聖鴻B
武汉纺织大学传媒学院 cm.wtu.edu.cn
主讲:陶建平 华中科技大学网络与计算中心
動態網頁程式設計實習 主講人:徐培倫老師.
UI 软件 设计 页面布局(一).
CSS排版:盒子模式 靜宜大學 資管系 楊子青.
武汉纺织大学传媒学院 cm.wtu.edu.cn
網頁程式設計 袁福良 B B.
國立東華大學課程設計與潛能開發學系張德勝
CSS基礎 靜宜大學 資管系 楊子青.
CSS 一起來美化網頁吧!!.
第4章 JSP动态网页设计基础 教学目标 教学重点 教学过程 2019年10月21日.
JavaScript 教师:魏小迪
教师:李金双 网页制作 教师:李金双
Section 1 Basic concepts of web page
When using opening and closing presentation slides, use the masterbrand logo at the correct size and in the right position. This slide meets both needs.
Presentation transcript:

JQuery基礎與動畫、特效 靜宜大學 資管系 楊子青 網路參考資源: http://www.w3schools.com/jquery/

是一個高效率和簡潔的JavaScript函數庫 jQuery 是一個高效率和簡潔的JavaScript函數庫 提供網頁設計者更簡潔的方式,來撰寫JavaScript程式碼和擴充JavaScript的功能。 傳統JavaScript程式碼建立的功能,使用jQuery通常只需1/4的程式碼長度就可以達成 強調JavaScript與HTML之間的交互作用,可以 處理DOM,走訪網頁元素來更改外觀 新增特效、事件處理、動畫 支援Ajax來加速Web應用程式開發

大綱 jQuery下載與使用 jQuery Selectors jQuery與CSS jQuery特效

1. jQuery下載與使用 在jQuery官方網站可以下載jQuery最新版 若不要自行下載檔案,可直接使用Google提供的網路節點 http://jquery.com/download/ 建議使用1.11.1版,目前2.x版不支援IE 6, 7, 8 選擇Download the compressed, production jQuery 1.11.1,下載jquery-1.11.1.min.js檔案 將檔案置於HTML網頁的同一個資料夾,在HTML網頁<head>標籤的<script>子標籤含括jQuery函數庫 <head> <script src=" jquery-1.11.1.min.js"></script> </head> 若不要自行下載檔案,可直接使用Google提供的網路節點 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script>

jQuery實例 <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> <script> $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); </head> <body> <p>If you click on me, I will disappear.</p> <p>Click me away!</p> <p>Click me too!</p> </body> </html> 滑鼠按一下

The Document Ready Event allows us to execute a function when the document is fully loaded (文件完全載入後,執行此函數): $(document).ready(function(){ // jQuery methods go here... }); 也可簡化為: $(function(){ 「$」符號:jQuery物件的別名 參數doucment是指HTML網頁本身 jQuery基本語法: $(selector).action()

jQuery Event Methods http://www.w3schools.com/jquery/jquery_events.asp 參考資料 http://www.w3schools.com/jquery/jquery_ref_events.asp

jQuery Event Methods hover 參考資料 The hover() method takes two functions and is a combination of the mouseenter() and mouseleave() methods. The first function is executed when the mouse enters the HTML element, and the second function is executed when the mouse leaves the HTML element. Example: $("#p1").hover(function(){ alert("You entered p1!"); }, function(){ alert("Bye! You now leave p1!"); }); 參考資料 http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hover

2. jQuery Selectors http://www.w3schools.com/jquery/jquery_selectors.asp The element Selector You can select all <p> elements on a page like this: $("p") The #id Selector The jQuery #id selector uses the id attribute of an HTML tag to find the specific element. The .class Selector The jQuery class selector finds elements with a specific class. 參考資料 http://www.w3schools.com/jquery/jquery_ref_selectors.asp

More Examples of jQuery Selectors

3. jQuery與CSS http://www.w3schools.com/jquery/jquery_css_classes.asp addClass() Adds one or more classes to the selected elements removeClass() Removes one or more classes from the selected elements toggleClass() Toggles between adding/removing classes from the selected elements css() Sets or returns the style attribute

toggleClass實例 <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("h1,h2,p").toggleClass("blue"); }); <style type="text/css"> .blue { color:blue; } </style> </head> <body> <h1>Heading 1</h1> <h2>Heading 2</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button>Toggle class</button> </body> </html>

4. jQuery特效 分類 特效名稱 說明 基本 show() 顯示元素 hide() 隱藏元素 toggle() 按一下可以切換顯示或隱藏元素 滑動 slideDown() 元素向下滑動 slideUp() 元素向上滑動 slideToggle() 切換元素向上和向下滑動 淡入淡出 fadeIn() 淡入元素,即慢慢變成不透明 fadeOut() 淡出元素,即慢慢變成透明 fadeToggle() 切換淡入與淡出元素 fadeTo() 元素慢慢變成指定的透明度

jQuery特效基本語法 $(選擇器).特效方法(持續時間, 回撥函數) 持續時間(Duration):動畫持續的時間 Fast(相當200毫秒)、normal(相當400毫秒)和slow(相當600毫秒) 或指定毫秒(例如:100、250和500等值)。 回撥函數(Callback):當特效結束後呼叫的函數。 jQuery 1.4版之後新增delay()方法,可以讓我們延遲一段時間才執行之後的特效方法例如: $('.more').delay("500"); 串聯多種特效 可以在同一行程式碼替選擇元素新增多種方法,例如: $(this).hide().delay("1500") .fadeIn('1500').delay("1500") .fadeOut('1500').delay("1500")

Hide與Toggle實例 <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("#p1").toggle(); $("#p2").hide(); }); </head> <body> <button>Toggle</button> <p id="p1">First</p> <p id="p2">Second</p> </body> </html>

slideToggle實例 <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideToggle("slow"); }); <style type="text/css"> #panel,#flip { padding:5px; text-align:center; background-color:#e5eecc; border:solid 1px #c3c3c3; } #panel { padding:50px; display:none; } </style> </head> <body> <div id="flip">Click to slide the panel down or up</div> <div id="panel">Hello world!</div> </body> </html>

fadeToggle實例 <!DOCTYPE html> <html> <head> <script src=" http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js "> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("#div1").fadeToggle(); $("#div2").fadeToggle("slow"); $("#div3").fadeToggle(3000); }); </head> <body> <p>Demonstrate fadeToggle() with different speed parameters.</p> <button>Click to fade in/out boxes</button> <br><br> <div id="div1" style="width:80px;height:80px;background-color:red;"></div> <br> <div id="div2" style="width:80px;height:80px;background-color:green;"></div> <div id="div3" style="width:80px;height:80px;background-color:blue;"></div> </body> </html>

Animate(動畫效果)實例 $(selector).animate({params},speed,callback); <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ var div=$("div"); div.animate({left:'100px'},"slow"); div.animate({fontSize:'3em'},"slow"); }); </head> <body> <button>Start Animation</button> <p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p> <div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div> </body> </html>