第 12 讲 Javascript 及其扩展应用简介 (2) 张高川遗传学与生物信息学系基础医学与生物科学学院苏州大学医学部 WX: zhanggaochuan QQ: 苏州大学医学部基础医学与生物

Size: px

Start display at page:

Download "第 12 讲 Javascript 及其扩展应用简介 (2) 张高川遗传学与生物信息学系基础医学与生物科学学院苏州大学医学部 WX: zhanggaochuan QQ: 苏州大学医学部基础医学与生物"

十党
4 years ago
Views:

1 第 12 讲 Javascript 及其扩展应用简介 (2) 张高川遗传学与生物信息学系基础医学与生物科学学院苏州大学医学部 WX: zhanggaochuan QQ:

2 HTML 元素 CSS 样式 HTML 事件函数 ( 交互 )

3 HTML 元素 CSS 样式 Javascript (jquery) HTML 事件函数 ( 交互 )

4 jquery? jquery 是一个 JavaScript 函数库

5 jquery (

6 jquery (

7 jquery-plugins (

8 jquery-plugins (

9 jquery 插件 (

10 jquery 可以做什么? HTML 元素选取 HTML 事件函数 HTML 元素操作 HTML DOM 遍历和修改 CSS 操作 Javascript 特效和动画 AJAX Utilities

11 How to use jquery? <head> <script type="text/javascript" src="jquery.js"></script> </head> <script type="text/javascript"> $(document).ready(function(){ $("#aaa").click(function(){ $("#bbb").hide(); </script> 在这里写入 jquery 代码

12 jquery 语法 $(selector).action(); $(this).hide() - 隐藏当前元素 $("p").hide() - 隐藏所有段落 $(".test").hide() - 隐藏所有 class="test" 的所有元素 $("#test").hide() - 隐藏所有 id="test" 的元素

13 jquery selector? 元素选择器属性选择器 CSS 选择器

14 jquery selector? 元素选择器 $("p") 选取 <p> 元素属性选择器 $("p.intro") 的 <p> 元素选取所有 class="intro" CSS 选择器 $("p#demo") <p> 元素选取所有 id="demo" 的

15 jquery selector? 元素选择器属性选择器 CSS 选择器 $("[href]") 选取所有带有 href 属性的元素 $("[href= # ]") 选取所有带有 href 值等于 # 的元素 $("[href!='#']") 选取所有带有 href 值不等于 # 的元素 $("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素

16 jquery selector? 元素选择器属性选择器 $("p").css("background-color","red"); 把所有 p 元素的背景颜色更改为红色 CSS 选择器

17 jquery action? Event 函数绑定函数至 $(document).ready(function) 将函数绑定到文档的就绪事件 ( 当文档完成加载时 ) $(selector).click(function) $(selector).dblclick(function) $(selector).focus(function) 触发或将函数绑定到被选元素的点击事件触发或将函数绑定到被选元素的双击事件触发或将函数绑定到被选元素的获得焦点事件 $(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件

18 jquery 效果 >> 隐藏和显示 <p> 段落隐藏与显示 </p> <button id="hide" type="button"> 隐藏 </button> <button id="show" type="button"> 显示 </button> $(document).ready(function(){ $("#hide").click(function(){ $("p").hide(); $("#show").click(function(){ $("p").show();

19 jquery 效果 >> 隐藏和显示 $(selector). hide (speed, callback); $(selector). show (speed, callback); $(selector). troggle (speed, callback); $(document).ready(function(){ $("#hide").click(function(){ $("p").hide(1000); $("#show").click(function(){ $("p").show(1000);

20 jquery 效果 >> 淡入淡出 $(selector). fadein (speed, callback); $(selector). fadeout (speed, callback); $(selector). fadetggle (speed, callback); $(selector). fadeto (speed, opacity, callback); $(document).ready(function(){ $("#fadeout").click(function(){ $("p"). fadeout(1000); $("#fadein").click(function(){ $("p"). fadein(1000);

21 jquery 效果 >> 滑动 $(selector).slidedown(speed,callback); $(selector).slideup(speed,callback); $(selector).slidetoggle(speed,callback); $(document).ready(function(){ $("#slidedown").click(function(){ $("p"). slidedown(1000); $("#slideup").click(function(){ $("p"). slideup(1000);

22 jquery 效果 >> 动画 $(selector). animate ({params}, speed, callback); <button id="btn1"> 开始动画 </button> <div id="demo" style="background:#98bf21;height:100px;width:210px;po sition:relative;"> jquery </div>

23 jquery 效果 >> 动画 $(selector). animate ( {params}, speed, callback); $(document).ready(function(){ $("button#btn1").click(function(){ $("div#demo").animate({left:"170px",opacity:"0.5"}, "slow"); $("div#demo").animate({fontsize:"5em"}, "slow");

24 jquery 效果 >> 动画 $(selector). animate ( {params}, speed, callback); $("button").click(function() { $("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px' $("button").click(function() { $("div").animate({ left:'250px', height:'+=150px', width:'+=150px'

25 jquery HTML >> 获取新元素和内容 text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容 ( 包括 HTML 标记 ) val() - 设置或返回表单字段的值 attr() - 用于获取属性值

26 jquery HTML >> 增加新元素和内容 append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() - 在被选元素之前插入内容 $("p").append("some appended text."); $("p").prepend("some prepended text."); $("img").after("some text after"); $("img").before("some text before");

27 jquery HTML >> 删除元素 remove() - 删除被选元素 ( 及其子元素 ) empty() - 从被选元素中删除子元素 $("#div1").remove(); $("#div1").empty(); $("p").remove(".italic");

important { font-weight:bold; font-size:xx-large; }.blue { color:blue; } $("button").

28 jquery HTML >> 获取并设置 CSS 类 addclass() - 向被选元素添加一个或多个类 removeclass() - 从被选元素删除一个或多个类 toggleclass() - 对被选元素进行添加 / 删除类的切换操作 css() - 设置或返回样式属性.important { font-weight:bold; font-size:xx-large; }.blue { color:blue; } $("button").click(function(){ $("h1,h2,p").addclass("blue"); $("div").addclass("important"); $("button").click(function(){ $("#div1").addclass("important blue");

29 jquery HTML >> 尺寸 width() 方法设置或返回元素的宽度 ( 不包括内边距边框或外边距 ) height() 方法设置或返回元素的高度 ( 不包括内边距边框或外边距 ) innerwidth() 方法返回元素的宽度 ( 包括内边距 ) innerheight() 方法返回元素的高度 ( 包括内边距 ) outerwidth() 方法返回元素的宽度 ( 包括内边距和边框 ) outerheight() 方法返回元素的高度 ( 包括内边距和边框 )

30 jquery 遍历 <div> <ul> <li> <li> <li> < > <a> <a> <a> < >

31 jquery 遍历 >> 祖先 <div> <ul> <li> <li> <li> < > <a> <a> <a> < > parent() parents() parentsuntil() 向上遍历 DOM 树返回被选元素的直接父元素返回被选元素的所有祖先元素, 它一路向上直到文档的根元素 (<html>) 返回介于两个给定元素之间的所有祖先元素 $(document).ready(function() { $("a").parent(); $(document).ready(function() { $("a").parents(); $(document).ready(function() { $("a").parents("ul"); $(document).ready(function() { $("a").parentsuntil("div");

32 jquery 遍历 >> 后代 <div> <ul> <li> <li> <li> < > <a> <a> <a> < > children() find() 向下遍历 DOM 树返回被选元素的所有直接子元素返回被选元素的后代元素, 一路向下直到最后一个后代 $(document).ready(function(){ $("div").children(); $(document).ready(function(){ $("div").children("p.1"); $(document).ready(function(){ $("div").find("*");

33 jquery 遍历 >> 同胞 <div> <ul> <li> <li> <li> < > <a> <a> <a> < > siblings() next() nextall() nextuntil() prev() prevall() prevuntil() 水平遍历 DOM 树返回被选元素的所有同胞元素返回被选元素的下一个同胞元素返回被选元素的所有跟随的同胞元素返回介于两个给定参数之间的所有跟随的同胞元素工作方式与 next 系列类似, 方向相反 $(document).ready(function(){ $("li").siblings(); $(document).ready(function(){ $("li").next(); $(document).ready(function(){ $("li").nextall(); $(document).ready(function(){ $("li").nextuntil("a");

34 jquery 遍历 >> 过滤 <div> <ul> <li> <li> <li> < > <a> <a> <a> < > first() last() eq() filter() not() 返回被选元素的首个元素返回被选元素的最后一个元素返回被选元素中带有指定索引号的元素允许您规定一个标准不匹配这个标准的元素会被从集合中删除, 匹配的元素会被返回返回不匹配标准的所有元素 $(document).ready(function() { $("ul li").first(); $(document).ready(function() { $("ul li").last(); $(document).ready(function() { $("li").eq(1); $(document).ready(function() { $("a").filter(".menu"); $(document).ready(function() { $("a").not(".menu");

35 jquery 核心 >> 增加新元素和事件 jquery(html,props) 实例 : 创建一个 <input> 元素, 同时设定 type 属性属性值, 以及一些事件 $("<input>", { type: "text", val: "Test", focusin: function() { $(this).addclass("active"); }, focusout: function() { $(this).removeclass("active"); } }).appendto("form");

36 jquery 核心 >> 增加新元素和事件 jquery(html,props) 实例 : 创建一个 <input> 元素, 同时设定 type 属性属性值, 以及一些事件 $("<input>", { type: "text", val: "Test", focusin: function() { $(this).addclass("active"); }, focusout: function() { $(this).removeclass("active"); } }).appendto("form");

37 课堂讨论模仿 PPT 页面切换效果? ( 在线文档编辑效果? (

38 思考题永远点不中的猴子基本要求 : (1) 页面打开显示一只猴子图像, 位置随机但不能超出页面窗口范围 ; (2) 鼠标一旦移动到猴子图像上, 猴子图像位置随机变换, 但不能与原有位置存在重叠注意事项 : (1) 如何判断猴子图像没有超出当前页面窗口 ; (2) 如何判断猴子图像与原有位置存在重叠

39 实践练习与拓展阅读在之前编写的网页上增加简单的 jquery 功能模块

Microsoft Word - 最新正文.doc

Microsoft Word - 最新正文.doc 2 2 Web 2.0 Ajax StarTrackr! GPS RFID jquery JavaScript StarTrackr! JavaScript jquery 1 jquery jquery jquery JavaScript HTML jquery JavaScript jquery jquery jquery $(document).ready()! jquery jquery (document)

第 12 讲 Javascript 及其扩展应用简介 (2) 张高川 遗传学与生物信息学系基础医学与生物科学学院苏州大学医学部 WX: zhanggaochuan QQ: 苏州大学医学部基础医学与生物

第 12 讲 Javascript 及其扩展应用简介 (2) 张高川遗传学与生物信息学系基础医学与生物科学学院苏州大学医学部 WX: zhanggaochuan QQ: 苏州大学医学部基础医学与生物