HTML教程(第四章).pptx

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。) 下载后，会看到jquery-1

3、.9.1.min.js的文件。 (2)使用标签引用下载的jQuery文件。 例如： ,jQuery的简单应用,例： window.onload = 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事件，只会执

4、行最后一个。,jQuery: $(document).ready在页面框架下载完毕后就执行，早于onload事件，效率更高。并且可多个执行。 $(document) 表示获取当前页面的Document对象。,$是jQuery的标志，无论是页面元素的选择、功能函数的前缀，都需要使用该符号。,(见jQuery_simple.html),$符号在jQuery中一般用于两个地方： 1.$()函数 语法一：$(选择器表达式) 例如： $(#divOne) $(#divOne .cls) 语法二：$(字符串) 例如： $(); 2.声明jQuery对象 语法：$对象名称 例如： var $doc = $(

5、document); var $divMain = $(#divMain); var $inputList = $();,下章介绍，语法与css选择器基本一致。 用于获取页面元素。,创建了一个img元素对象。,jQuery选择器,jQuery选择器继承了CSS选择器的大部分语法，允许通过标签名、属性名或内容对DOM元素进行快速、准确的选择，而不必担心浏览器的兼容性，通过jQuery选择器对页面元素的精确定位，能够完成元素属性和行为的处理。 根据所获取页面中元素的不同，分为：,jQuery选择器,基本选择器,层次选择器,过滤选择器,表单选择器,简单过滤选择器,内容过滤选择器,可见型性过滤选择器,

6、属性过滤选择器,子元素过滤选择器,表单对象过滤选择器,css()方法返回或设置匹配的元素的一个或多个样式属性。 共两个参数，第一个参数为css属性名，第二个参数为css属性值，可以为具体数值，也可以是创建函数进行处理。,1.基本选择器 基本选择器是使用最频繁的选择器。它由元素ID、class属性、元素名、通配符*、多个选择组成，与css选择器语法完全一致。 例如： ID CLASS SPAN $(#divOne).css(display, block); $(div).css(display, block); $(.clsFrame .clsOne).css(display, block);

7、$(*).css(display, block); $(#divOne, span).css(display, block); ,(见selector_basic.html),ID匹配元素。,元素名匹配元素。,类匹配元素。,匹配所有元素。,多个选择器匹配元素。,2.层次选择器 层次选择器通过DOM元素间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻、兄弟关系，与css选择器语法完全一致。 例如： Left Right_1 Right_2,匹配子元素。,匹配后代元素。, $(#divMid).css(display, block); $(div span).css(display, b

8、lock); $(div span).css(display, block); $(#divMid + div).css(display, block); $(#divMid).next().css(display, block); $(#divMid div).css(display, block); $(#divMid).nextAll().css(display, block); $(#divMid).siblings(div).css(display, block); ,(见selector_hierarchy.html),返回所有相邻的div元素。,返回后面所有的同胞元素。,返回下一

9、个相邻的同胞元素。,匹配后面相邻的同胞元素。,匹配后面所有的指定类型的同胞元素。,本例中,效果相同。,本例中,效果相同。,3.过滤选择器 过滤选择器根据某类过滤进行元素的匹配，书写时以冒号”:”开头。与CSS样式伪类和伪元素几乎一致。 以简单过滤选择器为例： Item 1 Item 2 Item 3 Item 4 , $(li:first).addClass(GetFocus); $(li:last).addClass(GetFocus); $(li:not(.NotClass).addClass(GetFocus); $(li:eq(1).addClass(GetFocus); $(li:g

10、t(1).addClass(GetFocus); $(li:lt(4).addClass(GetFocus); ,addClass() 方法向被选元素添加一个或多个类选择器名。,匹配li元素集合的第一个。,匹配li元素集合的最后一个。,匹配指定选择器以外的所有li元素。,匹配li集合中指定索引值的那个元素，以0开始计数。,匹配li集合中大于指定索引值的元素，以0开始计数。,匹配li集合中小于指定索引值的元素，以0开始计数。,(见selector_filter_simple.html),4.表单选择器 无论是提交还是传递数据，表单在页面中的作用是显而易见的。为了使用户能更加方便地、高效地使用表单

11、,jQuery选择器引入了表单选择器，这是CSS选择器没有的，通过它可以在页面中快速定位某表单对象。 例如： Textarea $(#form1 :input).addClass(colorA); $(#form1 :button).addClass(colorB); ,:input获取所有input、textarea、select标签元素。,:button获取所有按钮。,jQuery对DOM的操作,1.访问元素 (1)元素属性操作 获取元素属性：attr(“name“) 设置单个元素属性：attr(“name“,value) 设置多个元素属性：attr(name1:value1,name2:

12、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).removeAttr(title); ,name：属性名称 value：属性值,(见dom_attr_control.html),获取img标签的src属性值。,设置单个或多个属性。,删除title属性。,(2)元素内容操作 获取或设置元素的HTML内容(类似JS中的inn

13、erHTML属性)：html(val) 获取或设置元素的文本内容(类似JS中的innerText属性)：text(val) 例如: Write Less Do More var htmlStr = $(#divShow).html(); var textStr = $(#divShow).text(); $(#divHTML).html(htmlStr); $(#divText).text(textStr); ,元素的HTML内容，无参数表示获取，有参数表示设置。,元素的文本内容,(见dom_attr_content.html),获取id属性为divShow的div元素的HTML内容： Wri

14、te Less Do More,获取id属性为divShow的div元素的文本内容： Write Less Do More,对id属性为divHTML的div元素设置HTML内容。,对id属性为divHTML的div元素设置文本内容。,(3)元素样式操作 获取元素样式：css(“样式名称“) 直接设置元素样式：css(“样式名称“,样式的值) 增加类别设置样式：addClass(“类选择器名称“) 切换类别设置样式：toggleClass(“类选择器名称“) 删除类别：removeClass(“类选择器名称“) 例如: .imgCls border-radius: 50px; . var wi

15、dth = $(img).css(width); $(img).css(border,5px solid red); $(img).addClass(imgCls); $(img).toggleClass(imgCls); $(img).removeClass(imgCls); ,(见dom_attr_css.html),当元素中含有参数名称的类样式时，删除该样式。否则增加一个该类名称的样式。,获取img元素的width样式属性值。,设置img元素样式的border属性。,添加类样式。,切换类样式，增加或删除类样式。,删除类样式。,2.创建元素节点 如果要在页面中增加某个元素，只需要找到元素的

16、上级节点，通过函数$()完成元素的创建，然后添加到该节点中。 语法：$(HTML字符串) 例如： checkbox var $select = $(AB); $(div).append($select); ,声明jQuery对象。,向选择的元素div内的结尾部分插入select元素。 语法：选择器.append(插入的元素) 参数也可以是一个函数，例如: $(div).append(function() return $select; );,(见dom_addElement.html),创建了select元素对象。,3.插入节点 按照插入元素的顺序来分，可以分为内部插入和外部插入。 (1)内部

17、插入 (a)append()、appendTo() 上例中提到了append()，还有一个appendTo()也经常用到。该函数用于将一个元素插入到另一个指定的元素内的结尾部分。 语法：插入的元素.appendTo(选择器表达式) 所以，参照上例，将$(div).append($select)改为$select.appendTo(div)，运行效果是一致的。,(见dom_insertElement_inner_end.html),(b)prepend()、prependTo() 使用方法与append()、appendTo()一致，区别在于，这两个方法不是在指定元素内的尾部插入内容，而是在头部

18、。,(见dom_insertElement_inner_start.html),(2)外部插入 (a)after()、insertAfter() 前者是向所选择的元素外的后面插入内容，后者则是将内容插入到所选择的元素外的后面。区别如同append()与appendTo()的关系。 语法：选择器.after(插入的元素) 插入的元素.innserAfter(选择器表达式) 例如： var $select = $(AB); $(img).after($select); $(img).after(function() return $select; ); $select.insertAfter(im

19、g); ,参数也可以是函数。,效果一致。,(b)before()、inserBefore() 前者是向所选择的元素外的前面插入内容，后者则是将内容插入到所选择的元素外的前面。区别同样如同append()与appendTo()的关系,用法也与after()、insertAfter()一致。 语法：选择器.before(插入的元素) 插入的元素.innserBefore(父元素选择器表达式) 例如： var $select = $(AB); $(img).before($select); $(img).before(function() return $select; ); $select.ins

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

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

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

23、器.warpInner(包裹元素),参数也可以是函数。,参数也可以是函数。,姓名:张三 生日:2014/4/4 $(p).wrap(); $(p).unwrap(); $(p).wrapAll(); $(span).wrapInner(); ,(见dom_wrapElement.html),7.遍历元素 (1)each() 语法：选择器.each(function(索引值) 语句块 ) 例如： $(img).each(function(index) var id = this.id; ); ,如果不需要使用索引值，参数可以省略。,(见dom_eachElement.html),(2)paren

24、t() 获取某元素节点的父节点。 语法：选择器.parent() 例如：$(#img1).parent(); (3)parents() 获取某元素节点的所有祖先节点，最外层节点为根节点。 语法：选择器.parents(选择器表达式) 例如：$(#img1).parents(); $(#img1).parents(div); (4)children() 获取某元素节点的所有子节点。 语法：选择器.children(选择器表达式) 例如：$(#div1).children(); $(#div1).children(p);,表示获取p类型的子节点。,(5)find() 获取某元素节点的所有指定节点类

25、型的后代节点。 语法：选择器.find(选择器表达式) 例如：$(#div1”).find(*); $(#div1).find(p); (6)siblings() 获取某元素节点的同胞节点。 语法：选择器.siblings(选择器表达式) 例如：$(#img1).siblings(); $(#img1).siblings(input); (7)next() 获取某元素节点的下一个同胞节点。 语法：选择器.next() 例如：$(#img1).next();,参数为*，表示获取该类型的所有后代节点。,获取input类型的同胞节点。,(8)prev() 获取某元素节点的上一个同胞节点。 语法：选择

26、器.prev() 例如：$(#img1).prev();,8.删除元素 (1)remove() 删除指定元素。 语法：选择器.remove(选择器表达式) (2)empty() 删除指定元素的文本和后代元素。 语法：选择器.empty() 例如： 学号 1001 1002 1003 $(ul li).remove(lititle=t); $(ul li).remove(); $(ul li).empty(); ,参数可省略，表示全部删除。,(见dom_deleteElement.html),jQuery事件,1.页面载入事件 ready():只要页面的DOM模型加载完毕，就会触发该方法。 该方

27、法比较特殊，常规有两种写法： (1)$(document).ready(function() ); (2)$(function() ),2.绑定事件 (1)bind() 为每个选择元素的事件绑定处理函数。 语法：元素.bind(type,data，function) type：表示事件类型的字符串，如click、change、blur、focus等。 data：可省略，以event.data形式，传入处理函数中。 function：事件处理函数 例如： $(#txtInput).bind(keyup, function() $(div).html(this.value); ); $(#txtI

28、nput).bind(blur, msg: blur, function(event) alert(event.data.msg); ); ,(见dom_event_bind.html),当焦点移开文本输入框，触发事件。,键盘按键释放时，在div标签显示输入文本。,固定搭配，实际中很少使用。,部分常用事件（不同的对象或标签元素，拥有不同的事件。） 键盘事件：,事件触发顺序：keydown - keypress - keyup,(见dom_event_keyboard.html),键盘事件：,(见dom_event_mouse.html),表单事件：,(见dom_event_form.html)

29、,(见dom_event_audio.html),audio标签事件：,当音频/视频处于加载过程中时，会依次发生以下事件： loadstart - durationchange - loadedmetadata - loadeddata - progress - canplay -canplaythrough,viedo与audio标签的事件基本一致。,(2)one() 为所选的元素绑定一个仅触发一次的处理函数。 语法：元素.one(type,data，function) 例如： $(#txtInput).one(keyup, function() $(div).html(this.value

30、); ); $(#txtInput).one(blur, msg: blur, function(event) alert(event.data.msg); ); ,参数含义与bind()一致。,(见dom_event_one.html),3.移除事件 既然存在用于绑定事件,也相应存在存在移除事件。 语法：元素.unbind(type ,function) type：可省略,表示事件类型的字符串。 function：可省略,绑定事件时指定的函数。 例如： $(#txtInput).bind(keyup, oKeyup); $(#txtInput).bind(blur, msg: blur, f

31、unction(event) alert(event.data.msg); ); function oKeyup() $(div).html(this.value); $(#txtInput).unbind(); $(#txtInput).unbind(keyup); $(#txtInput).unbind(keyup, oKeyup); ,(见dom_event_unbind.html),可不带参数,表示移除所有事件。,文本输入框绑定了两个事件:keyup和blur。,指定事件的处理函数。,移除全部事件:keyup和blur。,只移除keyup事件。,只移除keyup事件的处理函数,事件不移

32、除。,jQuery的动画与特效,1.显示与隐藏 (1)show()、hide() 语法：元素.show(speed ,callback) 元素.hide(speed ,callback) speed：表示执行动画时的速度,该速度有三个值slow、 normal(默认值)、 fast；此外也可以直接数字，如3000，表示3000毫秒； callback：可省略，回调函数，动画完成时执行。 该方法可不带参数，实现无动画的效果。 例如： $(div).hide(); $(div).show(); $(div).hide(slow); $(div).show(normal, function() $(

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

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

35、ext(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() 两者功能都是改变所选元素透明度，前者实现淡入的动画效果；后者是实现淡出的动画效果。 语法：元素.fadeIn(sp

36、eed ,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 $(#select1).bind(cha

37、nge, 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

38、: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

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

40、秒。 queueName：可省略，动画队列的名称。 例如： $(div).animate(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对象，以一种异步的方式，向服务器发送数据请求，并通过

41、该对象接受请求返回的数据，从而完成数据交互。这种方式并不局限与Web动态页面，在普通的静态HTML页面中同样可以实现。在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 ,d

42、ata ,callback) 例如： json/services.json： services: service_id: 1,service_name: Youku, 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格式的数据，格式用法完全一致。,$表示调用全局函数。,返回