Web 前端开发技术（HTML5+CSS3+JavaScript+jQuery） 课件 项目十一　 jQuery 操作方法及应用

jQuery操作方法及应用Web前端开发技术篇4：jQuery技术

本项目介绍jQuery操作元素对象信息、事件概述、操作文档结构、特效的方法及应用。通过学习jQuery的相关知识和实际操作,引导学生理解理论知识并运用于实践,领会理论与实践相结合的思想。党的二十大报告提出“坚持学思用贯通、知信行统一”。学生要在学原文、知原义、悟原理上下功夫、见实效,做到知其言更知其义、知其然更知其所以然,围绕党的二十大提出的一系列具有开创性、标志性的重要思想、重要观点、重大战略、重大举措,找准和抓实学思用贯通、知信行统一的着力点。序言目录CONTENTS元素对象信息事件概述操作文档结构0102030405jQuery特效方法链接01元素对象信息Learningisaveryhappyopportunity,anopportunitythatmustbethoroughlyutilizedinordertoacquireknowledgeandbroadenone'shorizon.获取元素对象信息获取元素对象信息包括获取元素的文本内容、HTML标记内容、表单值、属性值、样式值等。获取元素对象信息的方法及说明如表11-1所示。元素对象信息获取元素对象信息获取元素对象信息包括获取元素的文本内容、HTML标记内容、表单值、属性值、样式值等。获取元素对象信息的方法及说明如表11-1所示。元素对象信息设置元素对象信息设置元素对象信息包括设置元素的文本内容、HTML标记内容、属性值、样式值等。设置元素对象信息的方法及说明如表11-2所示。元素对象信息设置元素对象信息用css()方法设置元素的属性时,可以批量设置,即对选择的元素对象同时进行多个属性设置。批量设置属性的基本语法格式如下。$("元素").css({属性:"属性值",属性:"属性值"……});其中,属性名称不需要加双引号,属性值要加双引号。另外,属性名称中不能有“-”,还要改为“驼峰标记法”格式,即第一个单词小写,后面单词的首字母大写。例如,CSS中背景颜色属性“background-color”要改为“backgroundColor”。元素对象信息02事件概述Learningisaveryhappyopportunity,anopportunitythatmustbethoroughlyutilizedinordertoacquireknowledgeandbroadenone'shorizon.事件概述事件是一些可以通过脚本响应的页面动作。当用户按下鼠标键或提交一个表单,或者在页面上移动鼠标指针时,都会产生相关的事件。事件处理是一段JavaScript代码,总是与页面中的特定部分以及一定的事件相关联。当与页面特定部分关联的事件发生时,事件处理器就会被调用。绝大多数事件的命名是描述性的,很容易理解,如Click、Submit、MouseOver等,通过名称即可猜测其含义。但也有少数事件的名称不易理解,如blur(英文的字面意思为“模糊”),表示一个域或者一个表单失去焦点。通常,事件处理器的命名原则是,在事件名称前加上前缀on。例如,对于click事件,处理器名为onClick。事件概述事件概述jQuery事件的基本语法格式如下。$("元素").事件名称(function(){事件处理代码;});在jQuery事件中,选中的元素对象触发了事件,如果事件代码中需要对这些元素对象进行处理,则可以再次选中这些元素对象,也可以用this关键字引用当前选中的元素对象。事件概述键盘事件键盘事件是对文档对象document或对获得焦点的指定元素,设置在按下或释放键盘按键时触发的处理过程。常用的键盘事件及说明如表11-3所示。事件概述件采购汇总表事件概述鼠标事件鼠标事件是为网页文档中的任意HTML元素对象设置在鼠标操作时触发的处理过程。常用的鼠标事件及说明如表11-4所示。表单事件表单事件是表单元素发生用户交互动作时触发的事件。常用的表单事件及说明如表11-5所示。事件概述03操作文档结构Learningisaveryhappyopportunity,anopportunitythatmustbethoroughlyutilizedinordertoacquireknowledgeandbroadenone'shorizon.操作文档结构jQuery可以在网页文档中添加、删除元素和内容。操作文档结构的常用方法及说明如表11-6所示。操作文档结构04jQuery特效Learningisaveryhappyopportunity,anopportunitythatmustbethoroughlyutilizedinordertoacquireknowledgeandbroadenone'shorizon.隐藏和显示1.隐藏元素方法hide()hide()方法用于隐藏指定元素,其基本语法格式如下。$("元素").hide(持续时间,完成后执行的函数);hide()方法的参数都是可选参数,持续时间可以是关键字fast或slow,也可以是具体的时间值(以毫秒为单位)。fast是200毫秒,slow是600毫秒。若未设置时间,则默认是400毫秒。2.显示元素方法show()show()方法用于显示指定元素,其基本语法格式如下。$("元素").show(持续时间,完成后执行的函数);3.切换显示或隐藏元素方法toggle()toggle()方法用于隐藏已显示的元素或显示已隐藏的元素,其基本语法格式如下。$("元素").toggle(持续时间,完成后执行的函数);jQuery特效淡入和淡出1.淡入方法fadeIn()fadeIn()方法用于修改指定元素的透明度,直至元素完全显现,其基本语法格式如下。$("元素").fadeIn(持续时间,完成后执行的函数);fadeIn()方法的参数都是可选参数。2.淡出方法fadeOut()fadeOut()方法用于修改指定元素的透明度,直至元素完全隐藏,其基本语法格式如下。$("元素").fadeOut(持续时间,完成后执行的函数);fadeOut()方法的参数都是可选参数。jQuery特效淡入和淡出3.淡入淡出切换方法fadeToggle()fadeToggle()方法用于修改指定元素的透明度,实现隐藏的元素淡入显示或可见的元素淡出隐藏,其基本语法格式如下。$("元素").fadeToggle(持续时间,完成后执行的函数);fadeToggle()方法的参数都是可选参数。4.透明度变化方法fadeTo()fadeTo()方法用于修改指定元素的透明度,变化到指定的透明度,其基本语法格式如下。$("元素").fadeTo(持续时间,透明度,完成后执行的函数);jQuery特效滑动1.向下滑动方法slideDown()slideDown()方法用于设置元素从上往下滑动显示,其基本语法格式如下。$("元素").slideDown(持续时间,完成后执行的函数);slideDown()方法的参数都是可选参数。2.向上滑动方法slideUp()slideUp()方法用于设置元素从下往上滑动隐藏,其基本语法格式如下。$("元素").slideUp(持续时间,完成后执行的函数);slideUp()方法的参数都是可选参数。jQuery特效滑动3.上下滑动切换方法slideToggle()slideToggle()方法用于设置元素不可见时从上往下滑动显示,元素可见时从下往上滑动隐藏,其基本语法格式如下。$("元素").slideToggle(持续时间,完成后执行的函数);slideToggle()方法的参数都是可选参数。jQuery特效动画1.动画方法animate()animate()方法通过指定元素结束时的CSS属性值,自动实现从初始属性值到结束属性值变化的动画效果,其基本语法格式如下。$("元素").animate({属性:"属性值"},持续时间,完成后执行的函数);属性和属性值是必填参数,持续时间和完成后执行的函数是可选参数。允许设置多个属性和属性值,用逗号分隔。属性名称中有“-”的,需要改为“驼峰标记法”的格式。animate()方法可以实现绝大部分CSS属性变化的动画效果,如宽度、高度、透明度、位置等。

在设置位置变化的动画时,元素的position属性值必须设定为absolute、relative或fixed才有效。jQuery函数库中没有颜色变化的动画效果,如果要实现颜色变化的动画效果,则需要下载相关的插件。jQuery特效动画属性值可以是确定值,也可以是相对值,用“+=”或“-=”相对于当前值计算得到。同一个animate()方法的多个属性变化动画可以同时发生,而多个连续的animate()方法只能依次执行。2.停止动画方法stop()stop()方法用于停止指定元素进行中的或后续的animate()动画操作,其基本语法格式如下。$("元素").stop(是否停止后续所有动画,是否完成当前动画);是否停止后续所有动画和是否完成当前动画两个参数都是可选参数,默认值是false。jQuery特效05方法链接Learningisaveryhappyopportunity,anopportunitythatmustbethoroughlyutilizedinordertoacquireknowledgeandbroadenone'shorizon.方法链接对同一元素依次执行多种操作时,可以使用方法链接,只需要选择一次元素,然后依次将新动作追加到上一动作后面即可,其基本语法格式如下。$("元素").方法1().方法2().方法3()……;或者$("元素").方法1().方法2().方法3()……;方法链接实训工单问答题：(5)当鼠标指针进入HTML元素时执行的函数是什么?(6)jQuery中有哪些方法可以遍历节点?(7)$(this)和this关键字在jQuery中有何不同?操作题(1)用JavaScript和jQuery设计网页,实现多张图像自动或