JavaScript+jQuery前端开发基础教程（第2版）（微课版）第9章

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()：切换类。若元素无指