JavaScript+jQuery前端开发基础教程（第2版）（微课版）课件 刘凡馨 第9章 操作页面内容；第10章 jQuery事件处理

JavaScript+jQuery前端开发基础教程微课版第9章操作页面内容本章主要内容：元素内容操作插入内容包装内容替换内容删除内容复制内容样式操作9.1元素内容操作jQuery提供的html()、text()、val()和attr()等方法用于访问元素内容9.1.1html()和text()方法html()方法用于读取或设置元素的HTML内容。text()方法用于读取或设置HTML元素的纯文本内容。方法指定参数时，参数设置为元素的新内容。9.1.2val()方法val()方法用于读取或设置表单元素的值无参数时方法返回元素的值，有参数时将参数设置为元素值。9.1.3attr()方法使用attr()方法指定一个参数时，返回参数对应的元素属性值；同时指定第2个参数时，将设置指定属性的值9.2插入内容可用jQuery提供的append()、prepend()、appendTo()、prependTo()、after()、before()、insertAfter()和insertBefore()等方法向文档插入内容。9.2.1append()和appendTo()方法append()方法和appendTo()方法将参数添加到目标元素末尾，方法基本格式如下。$(选择器).append(参数1[,参数2]...)$(参数).appendTo(选择器)选择器匹配的元素作为目标元素。若匹配多个元素，则同时为这些元素添加相同内容。参数可以是HTML字符串、HTML元素、文本、数组或jQuery对象，也可以是返回这些内容的函数。参数是使用选择器匹配的页面元素时，可将对应元素移动到目标元素中。append()方法提供多个参数时，同时添加多个内容。9.2.2prepend()方法和prependTo()方法prepend()方法和prependTo()方法与append()方法和appendTo()方法类似，只是将内容添加到目标元素的最前面，方法基本格式如下。$(选择器).

prepend(参数1[,参数2]...)$(参数).prependTo(选择器)9.2.3after()方法和insertAfter()方法after()方法和insertAfter()方法将新内容作为兄弟节点内容添加到目标元素之后，方法基本格式如下。$(选择器).

after(参数1[,参数2]...)$(参数).

insertAfter(选择器)9.2.4before()方法和insertBefore()方法before()方法和insertBefore()方法将参数作为兄弟节点内容添加到目标元素之前，方法基本格式如下。$(选择器).

before(参数1[,参数2]...)$(参数).

insertBefore(选择器)9.3包装内容包装内容指用指定HTML结构包装现有元素，被包装元素成为结构的内容。9.3.1wrap()方法wrap()方法用指定HTML结构包装元素，参数可以是HTML字符串、选择器或者jQuery对象。匹配多个元素时，分别包装各个元素。9.3.2wrapAll()方法wrapAll()方法将所有选中的元素合并后包装在一个HTML结构中，参数可以是HTML字符串、选择器或者jQuery对象。9.3.3wrapInner()方法wrapInner()方法用指定HTML结构包装选中元素的内容。9.3.4unwrap()方法unwrap()方法执行wrap()方法的反向操作，即删除目标元素的父元素。9.4替换内容使用jQuery提供的replaceWith()方法和replaceAll()方法可将页面中的元素替换为新的内容。9.4.1replaceWith()方法replaceWith()方法用指定参数替换选中的元素，参数可以是HTML字符串、DOM元素、DOM元素数组或者jQuery对象。9.4.2replaceAll()方法replaceAll()和replaceWith()作用相同，但replaceAll()不返回被替换对象。9.5删除内容jQuery还提供了empty()、remove()和detach()等方法用于删除页面中的内容。9.5.1empty()方法empty()方法删除元素的全部内容，剩下空的元素。9.5.2remove()方法9.5.3detach()方法detach()方法与remove()方法类似，但detach()方法可返回被删除的内容，以便将其重新插入页面或做他用。被删除的内容重新插入页面时，原有的数据和事件处理器保持不变。9.6复制内容clone()方法可用于复制元素，并可修改其内容。9.7样式操作在HTML文档中，串联样式表（CascadingStyleSheets，CSS）用于格式化元素。jQuery提供了用于操作CSS的方法。9.7.1css()方法css()方法可获取或设置CSS样式。9.7.2CSS类操作方法jQuery提供了直接操作元素class属性的方法。addClass()：添加类。removeClass()：删除类。toggleClass()：切换类。若元素无指定类，则为其添加该类；若有指定类，则将其删除。9.8编程实践：jQuery版的选项卡切换本节综合应用本章所学知识，修改第8章中的编程实践，使用jQuery实现选项卡切换，鼠标指针指向选项卡标题时，显示对应的诗，如图9-25所示。JavaScript+jQuery前端开发基础教程微课版第10章

jQuery事件处理本章主要内容：jQuery事件对象附加和解除事件处理函数事件快捷方法10.1jQuery事件对象jQuery事件对象封装了浏览器差异，并按照W3C标准进行了规范和统一，确保在所有浏览器中采用统一的处理方法。10.1.1事件对象构造函数jQuery的Event()构造函数用事件名称作为参数来创建事件对象。使用构造函数创建事件对象时，可不使用new关键字。var

e1

=

$.Event('click')

//创建事件对象var

e2

=

new

$.Event('click')

//创建事件对象事件对象可作为trigger()方法的参数来触发事件。$('body').trigger(e1)

//触发事件10.1.2事件对象属性event.currentTarget：事件冒泡过程中的当前DOM元素。event.data：事件对象存储的附加数据。event.pageX、event.pageY：鼠标事件发生时，鼠标指针在浏览器窗口中的坐标。event.relatedTarget：和事件有关的其他DOM元素，如鼠标指针离开的对象。event.result：事件处理函数的最新返回值。event.target：最初发生事件的DOM元素。event.timeStamp：事件发生的时间戳，单位为毫秒。event.type：事件类型。event.which：在发生键盘事件时，属性返回按键的ASCII值。发生鼠标事件时，属性返回所按下的鼠标按键。10.1.3事件对象方法事件对象的常用方法如下。event.preventDefault()：阻止事件默认行为。event.stopImmediatePropagation()：停止执行元素的所有事件处理函数，同时阻止事件冒泡。event.stopPropagation()：阻止事件冒泡。10.2附加和解除事件处理函数附加事件处理函数指将函数和事件关联起来，在发生事件时执行该函数来处理事件。解除事件处理函数则是解除函数和事件的关联关系。10.2.1附加事件处理函数on()方法为事件关联处理函数，早期的bind()方法已被弃用。on()方法的基本语法格式如下。$('selector').on('eventname',func)$('selector')为要附加事件处理函数的目标对象。eventname为事件名称，如click。func可以是函数名或者匿名函数，可以为元素的同一个事件附加多个处理函数。10.2.2解除事件处理函数off()方法用于解除附加到元素的事件处理函数，其基本语法格式如下。$('selector').off('eventname',func)$('selector')为要解除事件处理函数的目标对象，为其解除eventname事件附加的func()函数。不带参数的off()方法解除匹配元素所有的事件处理函数。10.3事件快捷方法jQuery提供了一系列事件快捷方法来处理事件处理函数。例如，click()方法可以为对象附加click事件处理函数，不带参数时则可触发click事件。10.3.1浏览器事件快捷方法resize()：带参数时，为对象附加resize事件处理函数。scroll()：带参数时，为对象附加scroll事件处理函数。10.3.2表单事件快捷方法blur()：带参数时为对象附加blur事件处理函数。change()：带参数时为对象附加change事件处理函数。focus()：带参数时为对象附加focus事件处理函数。focusin()：带参数时为对象附加focusin事件处理函数。focusout()：带参数时为对象附加focusout事件处理函数。select()：带参数时为对象附加select事件处理函数。submit()：带参数时为对象附加submit事件处理函数。10.3.3键盘事件快捷方法keydown()：带参数时附加keydown事件处理函数。keypress()：带参数时附加keypress事件处理函数。keyup()：带参数时附加keyup事件处理函数。另外，无参数的方法触发对象的对应事件。10.3.4鼠标事件快捷方法click()：带参数时附加click事件处理函数。contextmenu()：带参数时附加contextmenu事件处理函数。dblclick()：带参数时附加dblclick事件处理函数。hover()：只带一个参数时附加mouseleave事件处理函数；带两个参数时，第1个为mouseenter事件处理函数，第2个为mouseleave事件处理函数。mousedown()：带参数时附加mousedown事件处理函数。10.3.4鼠标事件快捷方法mouseenter()：带参数时附加mouseenter事件处理函数。mouselea