HTML教程(第四章).pptx

《HTML教程(第四章).pptx》由会员分享，可在线阅读，更多相关《HTML教程(第四章).pptx（49页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、jQuery概述及开发环境搭建 1.概述 jQuery是一个开源的、优秀的Javascript框架，集CSS、DOM、Ajax操作于一体。它的主旨是“以更少的代码。实现更多的功能”。可以通俗的认为，它就是Javascript函数库。它具有以下几个基本功能：(1)访问和操作DOM元素 使用jQuery，可以很方便地获取和修改页面中的某元素，无论是删除、移动还是复制某元素，jQuery都提供了一整套完整方便、快捷的方法。(2)控制页面样式 通过引入jQuery，开发人员可以很快捷地控制页面的CSS样式。(3)对页面事件的处理 引入jQuery后，可以使页面的表现层与功能开发分离，通过事件绑定，轻松

2、地实现二者的结合。(4)大量插件在页面中的运用 在引入jQuery后，还可以使用大量的插件来完善页面的功能和效果，如表单插件、UI插件，这些插件极大的丰富了页面的展示效果。(5)与Ajax的完美结合 Ajax的异步读取服务器数据的方法，极大地方便了程序的开发，加深了用户的页面体验度；而jQuery不仅完善了原有的功能，而且减少了代码的书写，通过其内部对象或函数，加上几行代码就可以实现复杂的功能。2.搭建开发环境 (1)在jQuery的官方网站下载的jQuery文件库。(最新版本为2.0.2，但本次案例都没有使用最新版本，使用了旧的版本1.9.1。)http:/ 例：window.onload=

3、function()alert(open_1);window.onload=function()alert(open_2);$(document).ready(function()alert(ready_1););$(document).ready(function()alert(ready_2););Javascript:window.onload必须在页面全部加载完毕后才能执行。多个onload事件，只会执行最后一个。jQuery:$(document).ready在页面框架下载完毕后就执行，早于onload事件，效率更高。并且可多个执行。$(document)表示获取当前页面的Docum

4、ent对象。$是是jQuery的的标志，无志，无论是是页面元素的面元素的选择、功能函数、功能函数的前的前缀，都需要使用，都需要使用该符号。符号。(见jQuery_simple.html)$符号在jQuery中一般用于两个地方：1.$()函数 语法一：$(选择器表达式选择器表达式)例如：$(#divOne)$(#divOne.cls)语法二：$(字符串字符串)例如：$();2.声明jQuery对象 语法：$对象名称对象名称 例如：var$doc=$(document);var$divMain=$(#divMain);var$inputList=$();下章介绍，语法与css选择器基本一致。用于获

5、取页面元素。创建了一个img元素对象。jQuery选择器 jQuery选择器继承了CSS选择器的大部分语法，允许通过标签名、属性名或内容对DOM元素进行快速、准确的选择，而不必担心浏览器的兼容性，通过jQuery选择器对页面元素的精确定位，能够完成元素属性和行为的处理。根据所获取页面中元素的不同，分为：jQuery选择器基本选择器层次选择器过滤选择器表单选择器简单过滤选择器内容过滤选择器可见型性过滤选择器属性过滤选择器子元素过滤选择器表单对象过滤选择器css()方法返回或设置匹配的元素的一个或多个样式属性。共两个参数，第一个参数为css属性名，第二个参数为css属性值，可以为具体数值，也可以是

6、创建函数进行处理。1.基本选择器 基本选择器是使用最频繁的选择器。它由元素ID、class属性、元素名、通配符*、多个选择组成，与css选择器语法完全一致。例如：ID CLASS SPAN$(#divOne).css(display,block);$(div).css(display,block);$(.clsFrame.clsOne).css(display,block);$(*).css(display,block);$(#divOne,span).css(display,block);(见selector_basic.html)ID匹配元素。元素名匹配元素。类匹配元素。匹配所有元素。多个

7、选择器匹配元素。2.层次选择器 层次选择器通过DOM元素间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻、兄弟关系，与css选择器语法完全一致。例如：Left Right_1 Right_2匹配子元素。匹配后代元素。$(#divMid).css(display,block);$(div span).css(display,block);$(div span).css(display,block);$(#divMid+div).css(display,block);$(#divMid).next().css(display,block);$(#divMid div).css(displ

8、ay,block);$(#divMid).nextAll().css(display,block);$(#divMid).siblings(div).css(display,block);(见selector_hierarchy.html)返回所有相邻的div元素。返回后面所有的同胞元素。返回下一个相邻的同胞元素。匹配后面相邻的同胞元素。匹配后面所有的指定类型的同胞元素。本例中,效果相同。本例中,效果相同。3.过滤选择器 过滤选择器根据某类过滤进行元素的匹配，书写时以冒号”:”开头。与CSS样式伪类和伪元素几乎一致。以简单过滤选择器为例：Item 1 Item 2 Item 3 Item 4$

9、(li:first:first).addClass(GetFocus);$(li:last:last).addClass(GetFocus);$(li:not(.not(.NotClass).addClass(GetFocus);$(li:eq(eq(1).addClass(GetFocus);$(li:gt(gt(1).addClass(GetFocus);$(li:lt(lt(4).addClass(GetFocus);addClass()方法向被选元素添加一个或多个类选择器名。匹配li元素集合的第一个。匹配li元素集合的最后一个。匹配指定选择器以外的所有li元素。匹配li集合中指定索引值

10、的那个元素，以0开始计数。匹配li集合中大于指定索引值的元素，以0开始计数。匹配li集合中小于指定索引值的元素，以0开始计数。(见selector_filter_simple.html)4.表单选择器 无论是提交还是传递数据，表单在页面中的作用是显而易见的。为了使用户能更加方便地、高效地使用表单,jQuery选择器引入了表单选择器，这是CSS选择器没有的，通过它可以在页面中快速定位某表单对象。例如：Textarea$(#form1:input:input).addClass(colorA);$(#form1:button:button).addClass(colorB);:input获取所有i

11、nput、textarea、select标签元素。:button获取所有按钮。jQuery对DOM的操作 1.访问元素(1)元素属性操作 获取元素属性：attr(“name“)设置单个元素属性：attr(“name“,value)设置多个元素属性：attr(name1:value1,name2:value2,.)删除元素属性：removeAttr(“name“)例如:var srcStr=$(img).attr(src);$(img).attr(title,This is a picture);$(img).attr(id:img1,title:This is a picture);$(img

12、).removeAttr(title);name：属性名称value：属性值(见dom_attr_control.html)获取img标签的src属性值。设置单个或多个属性。删除title属性。(2)元素内容操作 获取或设置元素的HTML内容(类似JS中的innerHTML属性)：html(val)获取或设置元素的文本内容(类似JS中的innerText属性)：text(val)例如:Write Less Do More var htmlStr=$(#divShow).html();var textStr=$(#divShow).text();$(#divHTML).html(htmlStr)

13、;$(#divText).text(textStr);元素的HTML内容，无参数表示获取，有参数表示设置。元素的文本内容(见dom_attr_content.html)获取id属性为divShow的div元素的HTML内容：Write Less Do More获取id属性为divShow的div元素的文本内容：Write Less Do More对id属性为divHTML的div元素设置HTML内容。对id属性为divHTML的div元素设置文本内容。(3)元素样式操作 获取元素样式：css(“样式名称样式名称“)直接设置元素样式：css(“样式名称样式名称“,样式的值样式的值)增加类别设置样

14、式：addClass(“类选择器名称类选择器名称“)切换类别设置样式：toggleClass(“类选择器名称类选择器名称“)删除类别：removeClass(“类选择器名称类选择器名称“)例如:.imgCls border-radius:50px;.var width=$(img).css(width);$(img).css(border,5px solid red);$(img).addClass(imgCls);$(img).toggleClass(imgCls);$(img).removeClass(imgCls);(见dom_attr_css.html)当元素中含有参数名称的类样式时，

15、删除该样式。否则增加一个该类名称的样式。获取img元素的width样式属性值。设置img元素样式的border属性。添加类样式。切换类样式，增加或删除类样式。删除类样式。2.创建元素节点 如果要在页面中增加某个元素，只需要找到元素的上级节点，通过函数$()完成元素的创建，然后添加到该节点中。语法：$(HTML$(HTML字符串字符串)例如：checkbox var$select$select=$($(AB);$(div).appendappend($select);声明jQuery对象。向选择的元素div内的结尾部分内的结尾部分插入select元素。语法：选择器器.append(插入的元素插入

16、的元素)参数也可以是一个函数参数也可以是一个函数，例如:$(div).append(function()return$select;);(见dom_addElement.html)创建了select元素对象。3.插入节点 按照插入元素的顺序来分，可以分为内部插入和外部插入。(1)内部插入 (a)append()、appendTo()上例中提到了append()，还有一个appendTo()appendTo()也经常用到。该函数用于将一个元素插入到另一个指定的元素内的结尾部分元素内的结尾部分。语法：插入的元素插入的元素.appendTo(选择器表达式选择器表达式)所以，参照上例，将$($(div

17、div).append($select)改为$select.appendTo(divdiv)，运行效果是一致的。(见dom_insertElement_inner_end.html)(b)prepend()、prependTo()使用方法与append()、appendTo()一致，区别在于，这两个方法不是在指定元素内的尾部插入内容，而是在头部头部。(见dom_insertElement_inner_start.html)(2)外部插入 (a)after()、insertAfter()前者是向所选择的元素外的后面元素外的后面插入内容，后者则是将内容插入到所选择的元素外的后面元素外的后面。区别如

18、同append()与appendTo()的关系。语法：选择器选择器.after(插入的元素插入的元素)插入的元素插入的元素.innserAfter(选择器表达式选择器表达式)例如：var$select=$(AB);$(img).afterafter($select);$(img).afterafter(functionfunction()returnreturn$select;);$select.insertAfterinsertAfter(img);参数也可以是函数。效果一致。(b)before()、inserBefore()前者是向所选择的元素外的前面元素外的前面插入内容，后者则是将内容插

19、入到所选择的元素外的前面元素外的前面。区别同样如同append()与appendTo()的关系,用法也与after()、insertAfter()一致。语法：选择器选择器.before(插入的元素插入的元素)插入的元素插入的元素.innserBefore(父元素选择器表达父元素选择器表达式式)例如：var$select=$(AB);$(img).beforebefore($select);$(img).beforebefore(functionfunction()returnreturn$select;);$select.insertBeforeinsertBefore(img);参数也可以是

20、函数。效果一致。(见dom_insertElement_outer.html)4.复制节点 在页面中，有时需要将某个元素节点复制到另一个节点后，可以使用clone()实现。语法：选择器选择器.clone(true).clone(true)例如：$(img).click(function()alert(img););$(img).eq(0).clone()clone().appendTo(div);$(img).eq(0).clone(true)clone(true).appendTo(div);参数可以省略，这时表示仅复制元素本身，被复制后的新元素不具有任何元素行为。如果需要复制该元素的全部行

21、为，设置参数true。定义图片标签点击事件的行为。$(“img”)返回一个img标签元素的集合，eq方法根据索引值获取其中指定元素。第一句代码中clone()没有带参数，新元素不会复制原元素的click行为；而第二代码添加了参数true，则click行为被一并复制。(见dom_cloneElement.html)5.替换节点 (1)replaceWith()将所有指定的元素节点替换成新的元素节点。语法：选择器选择器.replaceWith(.replaceWith(新的元素新的元素)(2)replaceAll()将新的元素节点替换所有指定的元素节点。语法：新的元素新的元素.replaceAll

22、(.replaceAll(选择器表达式选择器表达式)例如：姓名:生日:$(#span1).replaceWith(张三);$(2014/4/4).replaceAll(#span2);(见dom_replaceElement.html)参数也可以是函数。6.包裹节点 (1)wrap()所有指定的元素逐个用其他元素包裹起来。语法：选择器选择器.warp(.warp(包裹元素包裹元素)(2)unwrap()删除所有指定的元素的父节点。语法：选择器选择器.unwarp().unwarp()(3)wrapAll()所有指定的元素用单个其他元素包裹起来。语法：选择器选择器.warpAll(.warpAl

23、l(包裹元素包裹元素)(4)wrapInner()所有指定元素的文本内容用其他元素包裹起来。语法：选择器选择器.warpInner(.warpInner(包裹元素包裹元素)参数也可以是函数。参数也可以是函数。姓名:张三生日:2014/4/4$(p).wrapwrap();$(p).unwrapunwrap();$(p).wrapAllwrapAll();$(span).wrapInnerwrapInner();(见dom_wrapElement.html)7.遍历元素 (1)each()语法：选择器选择器.each(function(.each(function(索引值索引值)语句块语句块 )

24、例如：$(img).eacheach(function(index)var id=this.idid;);如果不需要使用索引值，参数可以省略。(见dom_eachElement.html)(2)parent()获取某元素节点的父节点。语法：选择器选择器.parent().parent()例如：$(#img1).parent();(3)parents()获取某元素节点的所有祖先节点，最外层节点为根节点。语法：选择器选择器.parents(.parents(选择器表达式选择器表达式)例如：$(#img1).parents();$(#img1).parents(div);(4)children()获

25、取某元素节点的所有子节点。语法：选择器选择器.children(.children(选择器表达式选择器表达式)例如：$(#div1).children();$(#div1).children(p);表示获取p类型的子节点。(5)find()获取某元素节点的所有指定节点类型的后代节点。语法：选择器选择器.find(.find(选择器表达式选择器表达式)例如：$(#div1”).find(*);$(#div1).find(p);(6)siblings()获取某元素节点的同胞节点。语法：选择器选择器.siblings(.siblings(选择器表达式选择器表达式)例如：$(#img1).siblin

26、gs();$(#img1).siblings(input);(7)next()获取某元素节点的下一个同胞节点。语法：选择器选择器.next().next()例如：$(#img1).next();参数为*，表示获取该类型的所有后代节点。获取input类型的同胞节点。(8)prev()获取某元素节点的上一个同胞节点。语法：选择器选择器.prev().prev()例如：$(#img1).prev();8.删除元素 (1)remove()删除指定元素。语法：选择器选择器.remove(.remove(选择器表达式选择器表达式)(2)empty()删除指定元素的文本和后代元素。语法：选择器选择器.emp

27、ty().empty()例如：学号 1001 1002 1003$(ul li).removeremove(lititle=tlititle=t);$(ul li).remove()remove();$(ul li).empty()empty();参数可省略，表示全部删除。(见dom_deleteElement.html)jQuery事件 1.页面载入事件 ready():只要页面的DOM模型加载完毕，就会触发该方法。该方法比较特殊，常规有两种写法：(1)$(document).ready(function();(2)$(function()2.绑定事件 (1)bind()为每个选择元素的事件

28、绑定处理函数。语法：元素元素.bind(type,data，function)type：表示事件类型的字符串，如click、change、blur、focus等。data：可省略，以event.data形式，传入处理函数中。function：事件处理函数 例如：$(#txtInput).bind(keyup,function()$(div).html(this.value););$(#txtInput).bind(blur,msg:blur,function(event)alert(event.data.msg););(见dom_event_bind.html)当焦点移开文本输入框，触发事件。

29、键盘按键释放时，在div标签显示输入文本。固定搭配，实际中很少使用。部分常用事件（不同的对象或标签元素，拥有不同的事件。）键盘事件：keydown键盘按下时触发。keypress与keydown类似，但对中文、系统功能键(如backspance)支持不好。keyup按键释放时触发。事件触发顺序：keydown-keypress-keyup(见dom_event_keyboard.html)键盘事件：(见dom_event_mouse.html)click鼠标单击时触发。dbclick鼠标双击时触发。mouseover鼠标移动到元素上方时触发。mouseout鼠标离开元素时触发。表单事件：foc

30、us当元素获取焦点时触发。change当焦点离开元素，值发生改变时触发。blur当元素失去焦点时处罚。(见dom_event_form.html)(见dom_event_audio.html)canplaythrough当浏览器可在不因缓冲而停顿的情况下进行播放时触发。timeupdate当目前的播放位置已更改时触发。audio标签事件：当音频/视频处于加载过程中时，会依次发生以下事件：loadstart-durationchange-loadedmetadata-loadeddata-progress-canplay-canplaythroughviedo与audio标签的事件基本一致。(2

31、)one()为所选的元素绑定一个仅触发一次的处理函数。语法：元素元素.one(type,data，function)例如：$(#txtInput).one(keyup,function()$(div).html(this.value););$(#txtInput).one(blur,msg:blur,function(event)alert(event.data.msg););参数含义与bind()一致。(见dom_event_one.html)3.移除事件 既然存在用于绑定事件,也相应存在存在移除事件。语法：元素元素.unbind(type ,function)type：可省略,表示事件类型

32、的字符串。function：可省略,绑定事件时指定的函数。例如：$(#txtInput).bind(keyup,oKeyup);$(#txtInput).bind(blur,msg:blur,function(event)alert(event.data.msg););function oKeyup()$(div).html(this.value);$(#txtInput).unbind();$(#txtInput).unbind(keyup);$(#txtInput).unbind(keyup,oKeyup);(见dom_event_unbind.html)可不带参数,表示移除所有事件。文本

33、输入框绑定了两个事件:keyup和blur。指定事件的处理函数。移除全部事件:keyup和blur。只移除keyup事件。只移除keyup事件的处理函数,事件不移除。jQuery的动画与特效 1.显示与隐藏 (1)show()、hide()语法：元素元素.show(speed,callback)元素元素.hide(speed,callback)speed：表示执行动画时的速度,该速度有三个值slow、normal(默认值)、fast；此外也可以直接数字，如3000，表示3000毫秒；callback：可省略，回调函数，动画完成时执行。该方法可不带参数，实现无动画的效果。例如：$(div).hi

34、de();$(div).show();$(div).hide(slow);$(div).show(normal,function()$(div).text(div););显示。隐藏。(见dom_animation_display.html)直接隐藏。直接显示。以”slow”的速度隐藏。以”noraml”的速度显示，并且动画完成后添加文本内容。(2)toggle()切换元素的可见状态。语法一：元素元素.toggle(speed ,callback)语法二：元素元素.toggle(布尔值布尔值)例如：$(div).toggle();$(div).toggle(fast);$(div).toggle

35、(false);参数参考show()、hide()。true表示显示元素；false表示隐藏元素。(见dom_animation_toggle.html)在显示与隐藏之间切换。隐藏。以”fast”的速度切换显示或隐藏。2.滑动 (1)slideDown()、slideUp()前者功能是以动画的效果将所选择元素的高度向下增大，后者是以动画的效果将所选择元素的高度向上减小。语法：元素元素.slideDown(speed,callback)元素元素.slideUp(speed,callback)它们的动画效果仅是增加或减少元素高度，包括margin和padding。例如：$(div).slideUp

36、();$(div).slideDown(fast,function()$(div).text(div););默认speed为normal。(见dom_animation_slide.html)(2)slideToggle()以动画的效果切换所选元素的高度。语法：元素元素.slideToggle(speed,callback)例如：$(div).slideToggle();$(div).slideToggle(3000);(见dom_animation_slideToggle.html)3.淡入淡出 (1)fadeIn()、fadeOut()两者功能都是改变所选元素透明度，前者实现淡入的动画效果

37、；后者是实现淡出的动画效果。语法：元素元素.fadeIn(speed,callback)元素元素.fadeOut(speed,callback)例如：$(div).fadeIn(2000,function()$(div).text(fadeIn););$(div).fadeOut(5000,function()$(div).text(fadeOut););(见dom_animation_fade.html)(2)fadeTo()以动画实现指定透明度的淡出或淡入效果。语法：元素元素.fadeTo(speed,透明度透明度)透明度的值范围为01。例如：0 0.2 0.4 0.6 0.8 1$(#s

38、elect1).bind(change,function()$(div).fadeTo(2000,this.value););(见dom_animation_fadeTo.html)根据select的选项值，改变透明度。4.自定义动画 (1)animate()允许用户自定义动画效果。语法：元素元素.animate(param,speed,easing,callback)param：用于制作动画效果的CSS样式的集合；speed：可省略，表示执行动画时的速度；esing：可省略，动画插件使用，用于控制动画的表现效果；callback：可省略，回调函数。例如：$(div).animate(left

39、:800px,width:300px,height:200px ,5000,function()this.text(div););(见dom_animation_animate.html)设定目标样式。(2)stop()停止所选元素中正在执行的动画。语法：元素元素.stop(stopAll,gotoEnd)stopAll：布尔值，true表示停止该元素的所有动画；false表示停止当前的动画。gotoEnd：可省略，布尔值，表示是否立即完成动画。例如：$(div).animate(left:800px,5000);$(div).animate(width:300px,5000);$(div).

40、animate(height:200px,5000);$(div).stop(true);$(div).stop(false);$(div).stop(true,true);(见dom_animation_stop.html)三个动画都被停止。正在执行的某个动画被停止，之后的继续执行。三个动画都被停止，并且当前动画立即完成，变为目标样式。定义了三个动画。(3)delay()设置一个时间来延后执行序列中未执行的动画。语法：元素元素.delay(duration,queueName)duration：延迟的时间，单位为毫秒。queueName：可省略，动画队列的名称。例如：$(div).anima

41、te(left:800px,1000);$(div).delay(5000);$(div).animate(width:300px,1000);$(“div).animate(height:200px,1000);(见dom_animation_delay.html)队列queue很少使用，不太了解。之后两个动画延迟5秒执行。jQuery关于加载异步数据和请求服务器数据的操作 Ajax的核心是通过XMLHttpResponse对象，以一种异步的方式，向服务器发送数据请求，并通过该对象接受请求返回的数据，从而完成数据交互。这种方式并不局限与Web动态页面，在普通的静态HTML页面中同样可以实现。

42、在jQuery中，大量运用了这些技术。1.load()通过AJAX请求从服务器加载数据，并把返回的数据放置到指定的元素中。语法：元素元素.load(url,data,callback)例如：$(div).load(dom_attr_control.html,function()alert(load););(见dom_XMLHttpRequest_load.html)(2)getJSON()用于调用JSON格式数据。语法：$.getJSON(url,data,callback)例如：json/services.json：services:service_id:1,service_name:You

43、ku,service_id:2,service_name:letv,total_results:2$.getJSON(json/services.json,function(data)alert(data.total_results);$.each(data.services,function()alert(this.service_id+n+this.service_name);););(见dom_XMLHttpRequest_getJSON.html)遍历。之后介绍的get()、post()同样可以调用JSON格式的数据，格式用法完全一致。$表示调用全局函数。返回数据。建议JSON数据使用

44、双引号，jQuery最近发布的几个版本对单引号不支持。(3)getScript()用于获取js文件的内容。语法：$.getScript(url,callback)例如一：js/test.js：function returnMsg()return test.js;$.getScript(js/test.js,function()alert(returnMsg(););因为JSON本身就是Javascript，所以也可以获取，但对json文件的内容有特定要求。可调用js文件中的变量和函数。测试结果看，如果js文件变量或函数与寄存的变量或函数重名,寄存的会被覆盖。例如二：json/services_

45、1.json：var serviceList=services:service_id:1,service_name:Youku,service_id:2,service_name:letv,total_results:2$.getScript(json/services_1.json,function()alert(serviceList.total_results);$.each(serviceList.services,function()alert(this.service_id+n+this.service_name);););(见dom_XMLHttpRequest_getScrip

46、t.html)由于获取的是json内容，不是json格式的数据对象。所以在json文件中，需要将数据赋值给一个变量。(4)get()通过HTTP GET请求数据。语法：$.get(url ,data,callback,type)type：表示返回数据的格式，如html、xml、js、json、text等。若省略，jQuery将自行判断。例如一：获取json数据$.get(json/services.json,function(data)alert(data.total_results);$.each(data.services,function()alert(this.service_id+n

47、+this.service_name););,json);(见dom_XMLHttpRequest_get.html)例如二：向服务器请求数据$.get(userInfo.aspx,name:zhangsan,function(data);部署于服务器。向服务器传递参数。服务器返回数据。(5)post()通过HTTP POST请求数据。语法：$.post(url,data,callback,type)用法与get()一致。例如：$.post(json/services.json,function(data)alert(data.total_results);$.each(data.services,function()alert(this.service_id+n+this.service_name););,json);(见dom_XMLHttpRequest_post.html)