XML与WEB Service技术(微软)：第04章 JavaScript和jQuery

1、第4章 JavaScript和jQuery08 七月 20222Ch4 JavaScript和jQuery4.1 在网页中使用JavaScript和jQuery4.2 JavaScript和jquery的基本用法4.3 JavaScript的内置的函数和对象4.4 浏览器对象和客户端事件4.5 jQuery选择器4.6 jQuery方法4.7 jQuery动画08 七月 202234.1在网页中使用JavaScript和jQueryJavaScript是什么JavaScript是一种广泛用于网页客户端开发的脚本语言。通过JavaScript，可以动态选择、添加、删除、修改HTML元素和CSS。

2、JavaScript具有内置的函数、对象和事件。jQuery是什么jQuery是一种免费的开源JavaScript库，这些库函数也是用JavaScript来编写的，但是语法更加简洁、直观。08 七月 202244.1在网页中使用JavaScript和jQuery使用JavaScript和jQuery的限制区分大小写， myname和MyName是两个不同的变量名用户可以设置禁用JavaScript，重要业务不能完全依赖于客户端JavaScript脚本来实现由于JavaScript是在客户端的浏览器解析执行，用户可以在客户机中看到JavaScript的源码。因此，它不适用于处理安全级别较高的敏感

3、数据。08 七月 202254.1在网页中使用JavaScript和jQueryJavaScript和jQuery的代码形式-以查找HTML元素为例 查找id为“div2”的元素块级元素1块级元素2JavaScript代码示例：var id=document.getElementById(div2);jQuery代码示例：var id = $(#div2);jQuery实际上就是用函数jQuery()对JavaScript功能进行封装，然后用简洁的参数形式提供给开发人员去调用。本书使用的jQuery版本为1.7.1版08 七月 202264.1在网页中使用JavaScript和jQuery编写

4、JavaScript和jQuery代码的两种方式1、在网页中直接编写网页中的JavaScript和jQuery代码都必须包含在和之间，一般将其定义为函数保存在body块的末尾。为了防止文档在完全加载完毕之前执行jQuery代码，一般都将jQuery函数放在document.ready函数的内部。【例4-1】：演示如何在页面中分别用JavaScript和jQuery显示和隐藏div元素。在网页中直接编写代码的缺点：无法在其他网页中重复调用。08 七月 202274.1在网页中使用JavaScript和jQuery编写JavaScript和jQuery代码的两种方式2、在js文件中编写为了达到“在

5、多个网页中重复调用”这个目的，我们可以先将JavaScript和jQuery代码写到一个或多个以“.js”为扩展名的外部文件中，然后在网页中根据需要引用对应的.js文件。【例4-2】：演示如何在单独的文件中编写JavaScript和jQuery代码。 注意：为了提高网页显示的速度，一般不要将对.js文件的引用放到head块内。在实际的项目开发时，应把所有对JavaScript文件的引用全部放在元素的末尾（之前）。08 七月 202284.1在网页中使用JavaScript和jQuery提高JavaScript和jQuery性能的技巧尽量使用整数进行运算合理确定JavaScript变量名不要在页

6、面中引用不必要的.js文件08 七月 202294.2 JavaScript和jQuery基本用法变量和运算符 从大的方面看，JavaScript有两种数据类型。（1）基本类型：用于保存固定长度的值，包括数字、布尔值（true和false）、null以及undefined等。 这里需要注意一点，在JavaScript中，null表示无效的对象、数组、数字、字符串和布尔值，而undefined则表示未声明的变量。（2）引用类型：用于保存可变长度的值，包括对象、数组和函数。注意字符串是一种特殊的对象，函数也是一个对象。08 七月 2022104.2 JavaScript和jQuery基本用法变量和

7、运算符变量 JavaScript是一种弱类型的脚本语言，所以不论是什么类型的JavaScript变量，一律都使用var关键字来声明，变量的类型在给变量赋值时才能确定。例如：var i； var j, k； var i = 5；08 七月 2022114.2 JavaScript和jQuery基本用法变量和运算符变量作用域在函数内部定义的变量称为局部变量，作用域仅限于函数内部在函数外部定义的变量称为全局变量，而全局变量则可以用于所有函数。 var x = 100； var y = 200； function f1() document.writeln(x= + x)； function f2()

8、 document.writeln(y= + y)； 4.2 JavaScript和jQuery基本用法注意：如局部变量和全局变量同名，则在函数内部会使用局部变量，而隐藏与其同名的全局变量。但是，开发人员一定要注意，在JavaScript函数内声明的变量作用域是整个函数，而不受函数内的块的约束。例如：function f() var i = 0； if(i = 0) var j=3； document.write(j)；08 七月 2022124.2 JavaScript和jQuery基本用法 例： JavaScript的变量作用域处理方式可能会引起逻辑错误 var i = 8； functi

9、on function1() document.write(i)； var i = 5； document.write(i)； function1()；输出为：undefined5 08 七月 2022134.2 JavaScript和jQuery基本用法运算符JavaScript使用的运算符和C#语言的运算符绝大部分都相同。例如：算术运算符：加（+）、减（-）、乘（*）、除（/）比较运算符：大于（）、小于（=）、小于等于（=）、等于（=）、不等于（!=）逻辑运算符：（&、|、！）和位运算符（&、|）等。08 七月 20221408 七月 2022154.2 JavaScript和jQuery

10、基本用法流程控制语句if语句 if语句的语法和C#语言的if语句语法及含义完全相同。 【例4-3】if语句代码示例switch语句switch语句的用法和C#语言的switch语句有些区别。在JavaScript中，当case块的末尾不包含break或者return语句时，程序将沿着下一个case语句继续执行，直到遇到break或者return语句为止，也可能一直执行到switch语句的结束。【例4-4】switch语句代码示例4.2 JavaScript和jQuery基本用法for语句for语句的语法和C#语言的for语句语法相同。for/in语句JavaScript的for/in语句和C#

11、的foreach作用相同，可以用它逐个遍历数组或者集合中的每个元素。一般形式为：for(变量 in 对象) /语句块 【例4-5】for语句和for/in语句代码示例08 七月 20221608 七月 2022174.2 JavaScript和jQuery基本用法流程控制语句while语句和do-while语句while语句和do-while语句的用法和C#语言的while语句和do-while用法相同。【例4-6】 while语句代码示例try-catch-finally语句try-catch-finally语句的用法和C#的try-catch-finally用法相同。08 七月 20221

12、84.3 JavaScript内置的函数和对象定义函数和对象在JavaScript中，函数（function）是一个可执行的JavaScript代码段，对象（object）是指已命名的数据的集合。自定义函数C#要求必须声明方法参数的类型才能正常调用，而在JavaScript函数中，不需要声明函数参数的类型。另外，JavaScript利用function关键字声明函数，函数中如果有参数，各参数之间用逗号分隔。自定义对象 定义JavaScript对象与定义C#语言的对象形式上也比较相似08 七月 2022194.3 JavaScript内置的函数和对象JavaScript的内置函数JavaScri

13、pt提供了包括数学函数、字符串函数、数组函数、日期和时间函数，以及各种数据类型之间的转换。数学函数JavaScript提供的Math函数与C#语言的Math类的用法相似。【例4-7】演示数学函数的基本用法。字符串函数JavaScript对字符串的处理与C#对字符串的处理类似，但也有一些区别。另外，jQuery还提供了JavaScript没有提供的Trim方法。【例4-8】演示字符串的基本操作08 七月 2022204.3 JavaScript内置的函数和对象数组函数在JavaScript中，有一个内置的名为Array的数组。由于JavaScript是一种弱类型的脚本语言，所以它的每一个元素可以

14、是任何类型的值。 JavaScript中数组的下标编号和C#相同，即从0开始编号。例如：var a = new Array();var a = new Array(10)；也可以在定义数组的同时赋初值，例如：var a = new Array(aaa, bb, 12);或者：var a = aaa, bb, 12;08 七月 2022214.3 JavaScript内置的函数和对象数组函数-（1）数组和字符串转换-var a = 1, 2, 3;var s = a.join(,); /数组转换为字符串，结果为1,2,3“var a1 = s.split(,); /字符串转换为数组，结果为1,2

15、,3-（2）合并数组-var b = 4, 5;var a2 = a.concat(b); /结果为a2=1,2,3,4,508 七月 2022224.3 JavaScript内置的函数和对象数组函数-（3）获取数组的一部分-var a3 = a.slice(0, 2); /结果为1,2var a4 = a.slice(2); /结果为3-（4）添加或删除数组元素-var c = 1, 2, 3, 4, 5, 6;/删除c数组中从第3个元素开始的所有元素var c1 = c.splice(3); /结果为c1=4,5,6,c=1,2,3var d = 1, 2, 3, 4, 5, 6;var

16、d1 = d.splice(2, 3); /结果为d=1,2,6,d1=3,4,508 七月 2022234.3 JavaScript内置的函数和对象数组函数/-（5）数组排序-var t1 = cab, b12, cook;t1.sort(); /升序排序,结果为t1=b12,cab,cookvar t2 = cab, b12, cook;t2.reverse(); /逆序，结果为t2=cook,b12,cabvar r1 = 2, 1, 3;r1.sort(); /结果为r1=1,2,3var r2 = 2, 1, 3;r2.reverse(); /逆序，结果为r2=3,1,2【例4-9】

17、演示Array数组的基本用法08 七月 2022244.3 JavaScript内置的函数和对象日期和时间函数 在JavaScript中，对日期（年、月、日、星期）和时间（时、分、秒、毫秒）的处理是通过date对象来实现的 其用法和C#的date用法相似 【例4-10】演示日期函数的基本用法08 七月 2022254.3 JavaScript内置的函数和对象数据类型转换字符串转换为整数（parseInt）该函数将字符串转换为整数，其功能类似于C#的int.Parse(string,radix)方法的功能。语法为：parseInt(string, radix)。string表示被转换的字符串。r

18、adix表示被转换的数字的基数，该值介于2 36之间。如果省略radix参数，则将字符串看作十进制为基数进行转换。如果该参数小于2或者大于36，则返回NaN。08 七月 2022264.3 JavaScript内置的函数和对象数据类型转换字符串转换为浮点数（parseFloat）该函数将字符串转换为浮点数，类似于C#的float.Parse(string)方法的功能。语法为：parseFloat (string)如果字符串中存在除了数字、符号、小数点和指数符号以外的字符，则停止转换并返回已经转换的结果。如果第一个字符就不能转换，则返回“NaN”。例如：（1） parseFloat(10)；/返

19、回10（2） parseFloat(10.33)；/返回10.33（3） parseFloat(34 45 66)；/返回34（4） parseFloat(40 years)；/返回40（5） parseFloat(He was 40)；/返回NaN08 七月 2022274.3 JavaScript内置的函数和对象数据类型转换整数或浮点数转换为字符串（1）toString函数：将一个数转换为十进制、二进制、八进制、十六进制的字符串。（2）toFixed函数：将一个数转换为固定长度的字符串，参数指定小数位数。（3）toExponential函数：将一个数转换为指数形式的字符串，参数指定小数位数

20、。【例4-11】演示将浮点数转换为字符串的基本用法。08 七月 2022284.3 JavaScript内置的函数和对象数据类型转换判断转换结果是否为非数字（isNaN）当使用parseInt函数或者parseFloat函数时，如果不能将字符串转换成数字，将自动返回一个叫做NaN的结果。利用isNaN函数，可以测试转换是否成功，如果转换成功，则isNaN函数返回false，否则返回true。例如：var a = isNaN(parseInt(10)； /结果为falsevar b = isNaN(parseFloat(hello)； /结果为true08 七月 2022294.4浏览器对象和客

21、户端事件DOMDOM（Document Object Model for HTML，文档对象模型）是W3C制定的一种与客户端浏览器、平台和语言无关的HTML编程接口，它提供了对HTML文档的结构表述，定义了访问和操作HTML文档的标准方法，而且可被其他编程语言或脚本使用。例如：文档标题 标题1我的链接08 七月 2022304.4浏览器对象和客户端事件DOM客户端浏览器公开的DOM树中html元素对象的层次结构。08 七月 2022314.4浏览器对象和客户端事件Windows对象利用浏览器提供的window对象，可以控制浏览器窗口。08 七月 2022324.4浏览器对象和客户端事件Wind

22、ows对象获取浏览器窗口信息/浏览器窗口大小var windowWidth = window.outerWidth;var windowHeight = window.outerHeight;/浏览器窗口相对于屏幕左上角的位置var windowX = window.screenX;var windowY = window.screenY;/浏览器工作区（不包括工具条、菜单条、状态条）var viewportWidth = window.innerWidth;var viewportHeight = window.innerHeight;【例4-12】演示获取浏览器窗口信息的基本用法08 七月

23、 2022334.4浏览器对象和客户端事件Windows对象计时器计时器提供了一个可以异步延时执行JavaScript代码片段的能力。注意JavaScript本身是单线程的（在一定时间范围内仅一部分脚本能运行），利用计时器则可以突破这种限制，从而规划一些在指定时间后自动执行的代码。【例4-13】演示利用JavaScript函数开始和停止计时。08 七月 2022344.4浏览器对象和客户端事件screen对象screen对象用于获取客户端屏幕和渲染能力等信息。属性：（1）availHeight：获取屏幕的工作区高度，不包括Windows任务栏可用高度。（2）availWidth：获取屏幕的工作

24、区宽度，不包括Windows任务栏可用宽度。（3）width：屏幕宽度。（4）height：屏幕高度。（5）colorDepth：颜色深度，即可用的颜色数量。【例4-14】利用Screen对象返回客户端屏幕的高度和宽度等信息。08 七月 2022354.4浏览器对象和客户端事件Document对象Document对象的常用方法var x= document.getElementsByTagName(p)；/返回标记名为p的子元素列表（数组）var x=document.createElement(div) ；/创建一个div元素节点var txt=document.createTextNode

25、(这是动态创建的内容)；/创建一段文本08 七月 2022364.4浏览器对象和客户端事件Document对象node对象调用Node对象的属性及方法来查询、设置或者删除一个节点的相关属性：（1）childNodes属性：返回指定节点的所有子节点，并将其保存在数组中（2）nodeName属性：返回指定节点的HTML标记名称（3）innerHTML属性：设置或返回该标签元素开始和结束标记之间包含的HTML（4） appendChild方法：向当前节点对象追加节点，一般用于给页面动态添加内容的场合。（5）removeChild方法：移除当前节点的子节点，并返回被移除的节点对象。08 七月 2022

26、374.4浏览器对象和客户端事件客户端事件在HTML元素的开始标记内，可以定义与用户交互的客户端事件。可以利用JavaScript或者jQuery实现事件被触发时执行的代码。鼠标事件08 七月 2022384.4浏览器对象和客户端事件客户端事件键盘事件窗体事件08 七月 2022394.4浏览器对象和客户端事件客户端事件表单事件表单事件是指在form元素的开始标记内声明的事件【例4-15】演示利用onmouseover事件控制和显示区域热点。08 七月 2022404.5 jQuery选择器当希望对某个元素进行操作时，首先必须找到这个元素。jQuery选择器的用途就是通过标记名、特性名、元素内

27、容或其他CSS样式属性等多种方式准确地找到将要对其操作的元素。基本格式$(selector)其中，selector是一个字符串，字符串的内容和CSS 3.0选择器的表示形式完全相同。例如：$(#div1)表示选择id为“div1”的元素。由于jQuery选择器的参数是字符串常量，当参数中包含CSS 3.0选择器中的特殊符号（!“#$%&()*+,./:;?|等）时，必须在每个字符的前面加上两个反斜杠（）如：$(.bar)$(#div1.bar)08 七月 2022414.5 jQuery选择器基本选择器jQuery基本选择器的格式和CSS 3.0基本选择器的格式完全相同。【例4-16】演示jQ

28、uery基本选择器的用法。层次选择器【例4-17】演示jQuery层次选择器的用法。08 七月 2022424.5 jQuery选择器特性选择器jQuery特性选择器的格式和CSS 3.0基本选择器的格式完全相同。【例4-18】演示jQuery特性选择器的用法。基本过滤选择器【例4-19】演示jQuery基本过滤选择器的用法。08 七月 2022434.5 jQuery选择器内容过滤选择器jQuery的元素内容选择器用于对DOM文档中的文本内容进行筛选，从而准确地选取所需元素。【例4-20】演示jQuery内容过滤选择器的用法。可见性过滤选择器可见性过滤选择器用于选择可见或者不可见的元素08

29、七月 2022444.5 jQuery选择器子元素过滤选择器jQUery的子元素过滤选择器是对某一元素的子元素进行选取。表单对象选择器利用表单对象选择器可以在页面中快读定位某表单对象。08 七月 2022454.5 jQuery选择器表单对象特性选择器表单对象特性选择器主要是通过表单中某对象的特性获取该类元素，例如选择不可用的表单元素、被选中的下拉框、多选框等。08 七月 2022464.6 jQuery方法CSS操作利用jQuery提供的CSS操作方法，能方便地获取或设置元素的CSS属性。css(propertyName,value) 用于设置匹配元素的CSS属性。参数propertyNam

30、e指定要设置的CSS属性名，value指定propertyName的值。如果value是一个数，还可以用原来的值参与运算。例如：$(this).css(background-color, #FF0000); /设置当前对象的背景色$(this).css(background-color, ); /移除当前对象的背景色属性$(div).css(background-color, red); /设置所有div元素的背景色$(this).css(width, +=10); /将原来的宽度增加10px$(this).css(height, -=15); /将原来的宽度减少15px08 七月 20224

31、74.6 jQuery方法CSS操作css(propertyName)获取匹配元素的CSS属性值，propertyName指定要获取的属性。例如：$(this).css(background-color); /获取当前对象的背景色$(#div1).css(background-color); /获取id=div1的对象的背景色08 七月 2022484.6 jQuery方法CSS操作css(properties)该方法为匹配的每个元素设置一个或多个CSS属性。一般格式为：.css(属性名1:值1, 属性名2:值2, , 属性名n:值n)如果属性名不包含“-”，可以不加引号，否则必须加引号。建议

32、全部加引号属性名和属性值之间用冒号分隔，多个属性之间用逗号分隔。例如：$(this).css(background-color:blue, color:white);$(p).css(background-color:red, font-size:150%); 【例4-21】演示jQuery提供的CSS方法的基本用法。08 七月 2022494.6 jQuery方法HTML操作jQuery提供的HTML方法用于获取或设置元素的内容或选项的值。html(value)、html(function(index, html)html(value)：不带参数时，获取第一个匹配元素的html内容。带参数时

33、，设置每一个匹配元素的html内容。html(function(index, html)：用参数返回的HTML字符串设置每一个匹配元素的html内容。text(value)、text(function(index, html)获取的是所有匹配元素的内容，结果是由所有匹配元素包含的文本内容组合起来的文本。val(value)不带参数时，获取第一个匹配元素的值，如果有多个值，则返回的是一个数组。带参数时，设置每一个匹配元素的值。08 七月 2022504.6 jQuery方法元素大小和位置操作元素大小和位置相关的方法用于获取或设置元素的大小、位置和偏移量。width、height、innerWid

34、th、innerHeight、outerWidth、outerHeightscrollLeft(value)、scrollTop(value)offset(coordinates)例如：var p = $(p:last);var offset = p.offset();p.html( left: + offset.left + , top: + offset.top );$(p:last).offset( top: 10, left: 30 );scrollLeft(value)、scrollTop(value)position()获取匹配元素相对父元素的偏移量，返回的对象包含两个整型属性to

35、p和left。08 七月 2022514.6 jQuery方法元素特性和属性操作attr()、prop()attr方法获取或设置元素的特性，prop方法获取或设置元素的属性.（1）attr(attributeName)、prop(propertyName)attr(attributeName)获取第一个匹配元素的特性值。如果元素没有相应的特性，则返回undefined。例如:，则 $(img).attr(src) 的结果为test.jpg。prop(propertyName)获取的是第一个匹配元素的属性值，而不是元素的特性值。例如：08 七月 2022524.6 jQuery方法元素特性和属性

36、操作attr()、prop()attr方法获取或设置元素的特性，prop方法获取或设置元素的属性.（2）attr(attributeName,value)、prop(propertyName,value)attr(attributeName,value)为所有匹配的元素设置特性值。例如：$(img).attr(src,test.jpg); /为一个特性设置值$(#img1).attr(alt:图片1,src:test.jpg); /为多个特性设置值prop(propertyName,value)为所有匹配的元素设置属性值。08 七月 2022534.6 jQuery方法元素特性和属性操作att

37、r()、prop()attr(attributeName, function(index, attr)将返回的结果作为特性值prop(propertyName, function(index, prop)将返回的结果作为属性值【例4-22】演示attr和prop方法的基本用法。removeAttr(attributeName)、removeProp(propertyName)removeAttr(attributeName)为所有匹配的元素移除用attributeName指定的特性。removeProp(propertyName)为所有匹配的元素移除用propertyName指定的属性08 七

38、月 2022544.6 jQuery方法元素特性和属性操作addClass(className)为所选元素添加class特性的值。参数className指定为元素的class特性添加的值如果有多个class值，各个值之间用空格分隔。removeClass(className)删除所选元素的class中的值参数指定要删除的class特性的值。08 七月 2022554.6 jQuery方法元素特性和属性操作addClass(function(index, currentClass)含义和css(name, function(index, value)的含义相似。例如：$(div).addClas

39、s(function (index, currentClass) var addedClass; if (currentClass = red) addedClass = green; $(p).text(There is one green div); return addedClass;);hasClass(className)、toggleClass(className)hasClass(className)判断指定的className是否存在，如果存在则返回true，否则返回false。toggleClass(className)在添加className和删除className之间切换

40、。08 七月 2022564.6 jQuery方法元素自定义数据操作data(key , value)该方法用于在一个元素上存取“键/值”数据$(div).data(MyData); / undefined$(div).data(MyData, hello); /MyData设置为hello$(div).data(MyData); / hello$(div).data(MyData, 86); / MyData设置为86$(div).data(MyData); / 86$(div).removeData(MyData); /移除MyData$(div).data(MyData); / unde

41、fined08 七月 2022574.6 jQuery方法元素自定义数据操作removeData(key)移除在元素上存放的名为key的数据。文档处理jQuery提供的文档处理方法用于在HTML文档中添加、插入、包围、替换元素在元素内部插入新元素（1）append( content , content )、appendTo(target)这两个方法的功能相似，都是向匹配的元素内部追加内容。区别是$(A).append(B)的含义是向A中追加B，而$(A).appendTo(B)的含义是向B中追加A。（2）prepend( content , content )、prependTo( targe

42、t )这两个方法和append及appendTo方法的区别是在匹配元素内部的最前面增加内容，其他用法和append及appendTo方法的用法相同。【例4-23】演示append和appendTo方法的基本用法。08 七月 2022584.6 jQuery方法文档处理在元素外部插入元素外部插入是指将内容插入到元素的外部。（1）after ( content , content )、insertAfter( target )这两个方法的用法和append及appendTo方法的用法相同，唯一的区别就是被插入的内容是插入到元素的外部了。（2）before ( content , content )

43、、insertBrfore(target)这两个方法的用法和prepend及prependTo方法的用法相同，唯一的区别就是被插入的内容是插入到元素的外部了。删除元素（1）remove( selector )、detach( selector )这两个方法的功能相似，都是从DOM中删除匹配的元素。区别是remove方法包括数据和事件一块删除，而detach方法不删除数据和事件。（2）empty()该方法删除匹配的元素集合中所有的子节点。08 七月 2022594.6 jQuery方法文档处理容器容器（wrap）的含义是将原始元素的外围插入新元素作为容器。（1）wrap( wrappingEle

44、ment )用指定的元素作为匹配元素的容器。例如：$(span).wrap(); /将span作为div元素的容器（2）wrap( function(index) )用指定的元素作为匹配元素的容器。（3）wrapAll( wrappingElement )用单个元素作为匹配元素的容器。它与wrap()的区别是wrap()为每一个匹配的元素都包裹一次，而该函数只用单个元素包裹。其他用法都和wrap方法相同。（4）wrapInner( wrappingElement )将每一个匹配的元素的子内容(包括文本节点)用DOM元素包裹起来。例如：HellocruelWorld（5）unwrap()该方法将

45、移出元素的父元素。08 七月 2022604.6 jQuery方法文档处理替换元素替换元素用于将一种或多种元素替换为另一种元素。（1）replaceWith( newContent )该方法先从DOM中删除与newContent匹配的元素，然后再将所有匹配的目标元素替换为用newContent指定的元素。例如： Hello And Goodbye（2）.replaceAll( target )该方法用匹配的元素替换掉所有target匹配到的元素。08 七月 2022614.6 jQuery方法事件处理on方法（1）on( events , selector , data, handler(ev

46、entObject) )该方法给所有匹配的元素附加一个或多个事件处理函数。（a）events参数该参数表示附加一个或多个用空格分隔的事件类型或命名空间，例如：“click keydown.myPlugin（b）selector参数该参数表示要筛选的触发该事件的选定元素的后代选择器的字符串。（c）data参数该参数表示事件被触发时，通过event.data传递给事件处理程序的数据。如果只有一个数据，可以用引号引起来。如果有多个数据，则用集合表示。例如： data1:abc, data2:1508 七月 2022624.6 jQuery方法事件处理on方法（d）handler(eventObjec

47、t)参数该参数表示在触发事件时要执行的函数。该函数也可以直接写为false，起作用和在事件处理函数中只有一条语句“return false;”的作用相同。例如：$(p).on(click, data1:abc, data2:15, function () alert($(this).text(););也可以在该参数中指定事件句柄，例如：$(p).on(click, data1:abc, data2:15, Myhander);function MyHander()alert($(this).text();【例4-24】演示on方法的基本用法。08 七月 2022634.6 jQuery方法事件

48、处理除了上述的on事件基本用法外，利用on事件还可以取消事件冒泡等默认的操作。（1）在on方法的参数中指定是否取消冒泡和默认行为，其作用和在事件处理函数的最后一条语句中加上return false;的作用相同。例如下面的代码取消窗体提交操作，并返回false防止事件向上冒泡：$(form).on(submit, false)（2）在事件处理函数中调用preventdefault方法。该方法不阻止事件冒泡，但阻止其他的默认行为。例如：$(form).on(submit, function (event) event.preventDefault(););（3）在事件处理函数中调用stopProp

49、agation方法。该方法只阻止事件冒泡，但不阻止其他的默认行为。例如下面的代码阻止了事件冒泡，但不会阻止窗体提交：$(form).on(submit, function (event) event.stopPropagation(); );08 七月 2022644.6 jQuery方法事件处理【例4-25】演示自定义事件的基本用法。（2）on( events-map , selector , data )在这个方法中，events-map的参数是JavaScript事件对象。它和上一个方法的events参数一样是一个字符串，用来表示事件类型名称和可选的命名空间，如果有多个附加的事件，各事件

50、类型之间用空格分隔。off方法off方法移除用on方法附加的事件操作。参数含义和on方法的参数含义相同。off( events , selector , handler(eventObject) )off( events-map , selector )这两种方法的参数含义和对应的on方法的参数含义相同。【例4-26】演示off方法的基本用法。08 七月 2022654.6 jQuery动画jQuery还提供了创建、隐藏、显示、切换、滑动等对HTML元素操作的方法08 七月 2022664.6 jQuery动画参数（duration、easing、callback）Duration该参数指定动

51、画持续的时间。类型可以是整数或字符串。如果是整数，单位为毫秒如果是字符串，有3个可用的选项fast、slow和normal，分别表示持续时间为200毫秒、400毫秒、600毫秒。例如：$(div).show(); /默认为持续时间为0$(div).show(fast); /持续时间为200毫秒$(div).show(1000); /持续时间为1000毫秒08 七月 2022674.6 jQuery动画参数（duration、easing、callback）Easing实现渐变路径，在easing参数中，只需要指定函数名称即可，而不需要指定参数。如果不指定easing参数，Query就会自动使用

52、默认的渐变函数。例如：show方法、hide方法默认使用的是linear函数toggle方法默认使用的是swing函数。callbackcallback称为回调函数，是指当该参数所在的方法执行完成后自动执行的函数。可以在callback函数中复位或者重新设置某些元素的位置、颜色等CSS属性。08 七月 2022684.6 jQuery动画显示隐藏和切换（hide、show、toggle） 通过jQuery的hide、show和toggle方法，可以动态地显示、隐藏HTML元素，以及切换隐藏和显示的状态。基本格式为：$(selector).show(duration , easing , callback )$(selector).hide(duration , easing , callback )$(selector).toggle(duration , eas