JavaScript+jQuery前端開發(fā)基礎(chǔ)教程（第2版）（微課版）第9章

JavaScript+jQuery前端開發(fā)基礎(chǔ)教程微課版第9章操作頁面內(nèi)容本章主要內(nèi)容：元素內(nèi)容操作插入內(nèi)容包裝內(nèi)容替換內(nèi)容刪除內(nèi)容復(fù)制內(nèi)容樣式操作9.1元素內(nèi)容操作jQuery提供的html()、text()、val()和attr()等方法用于訪問元素內(nèi)容9.1.1html()和text()方法html()方法用于讀取或設(shè)置元素的HTML內(nèi)容。text()方法用于讀取或設(shè)置HTML元素的純文本內(nèi)容。方法指定參數(shù)時(shí)，參數(shù)設(shè)置為元素的新內(nèi)容。9.1.2val()方法val()方法用于讀取或設(shè)置表單元素的值無參數(shù)時(shí)方法返回元素的值，有參數(shù)時(shí)將參數(shù)設(shè)置為元素值。9.1.3attr()方法使用attr()方法指定一個(gè)參數(shù)時(shí)，返回參數(shù)對(duì)應(yīng)的元素屬性值；同時(shí)指定第2個(gè)參數(shù)時(shí)，將設(shè)置指定屬性的值9.2插入內(nèi)容可用jQuery提供的append()、prepend()、appendTo()、prependTo()、after()、before()、insertAfter()和insertBefore()等方法向文檔插入內(nèi)容。9.2.1append()和appendTo()方法append()方法和appendTo()方法將參數(shù)添加到目標(biāo)元素末尾，方法基本格式如下。$(選擇器).append(參數(shù)1[,參數(shù)2]...)$(參數(shù)).appendTo(選擇器)選擇器匹配的元素作為目標(biāo)元素。若匹配多個(gè)元素，則同時(shí)為這些元素添加相同內(nèi)容。參數(shù)可以是HTML字符串、HTML元素、文本、數(shù)組或jQuery對(duì)象，也可以是返回這些內(nèi)容的函數(shù)。參數(shù)是使用選擇器匹配的頁面元素時(shí)，可將對(duì)應(yīng)元素移動(dòng)到目標(biāo)元素中。append()方法提供多個(gè)參數(shù)時(shí)，同時(shí)添加多個(gè)內(nèi)容。9.2.2prepend()方法和prependTo()方法prepend()方法和prependTo()方法與append()方法和appendTo()方法類似，只是將內(nèi)容添加到目標(biāo)元素的最前面，方法基本格式如下。$(選擇器).

prepend(參數(shù)1[,參數(shù)2]...)$(參數(shù)).prependTo(選擇器)9.2.3after()方法和insertAfter()方法after()方法和insertAfter()方法將新內(nèi)容作為兄弟節(jié)點(diǎn)內(nèi)容添加到目標(biāo)元素之后，方法基本格式如下。$(選擇器).

after(參數(shù)1[,參數(shù)2]...)$(參數(shù)).

insertAfter(選擇器)9.2.4before()方法和insertBefore()方法before()方法和insertBefore()方法將參數(shù)作為兄弟節(jié)點(diǎn)內(nèi)容添加到目標(biāo)元素之前，方法基本格式如下。$(選擇器).

before(參數(shù)1[,參數(shù)2]...)$(參數(shù)).

insertBefore(選擇器)9.3包裝內(nèi)容包裝內(nèi)容指用指定HTML結(jié)構(gòu)包裝現(xiàn)有元素，被包裝元素成為結(jié)構(gòu)的內(nèi)容。9.3.1wrap()方法wrap()方法用指定HTML結(jié)構(gòu)包裝元素，參數(shù)可以是HTML字符串、選擇器或者jQuery對(duì)象。匹配多個(gè)元素時(shí)，分別包裝各個(gè)元素。9.3.2wrapAll()方法wrapAll()方法將所有選中的元素合并后包裝在一個(gè)HTML結(jié)構(gòu)中，參數(shù)可以是HTML字符串、選擇器或者jQuery對(duì)象。9.3.3wrapInner()方法wrapInner()方法用指定HTML結(jié)構(gòu)包裝選中元素的內(nèi)容。9.3.4unwrap()方法unwrap()方法執(zhí)行wrap()方法的反向操作，即刪除目標(biāo)元素的父元素。9.4替換內(nèi)容使用jQuery提供的replaceWith()方法和replaceAll()方法可將頁面中的元素替換為新的內(nèi)容。9.4.1replaceWith()方法replaceWith()方法用指定參數(shù)替換選中的元素，參數(shù)可以是HTML字符串、DOM元素、DOM元素?cái)?shù)組或者jQuery對(duì)象。9.4.2replaceAll()方法replaceAll()和replaceWith()作用相同，但replaceAll()不返回被替換對(duì)象。9.5刪除內(nèi)容jQuery還提供了empty()、remove()和detach()等方法用于刪除頁面中的內(nèi)容。9.5.1empty()方法empty()方法刪除元素的全部?jī)?nèi)容，剩下空的元素。9.5.2remove()方法9.5.3detach()方法detach()方法與remove()方法類似，但detach()方法可返回被刪除的內(nèi)容，以便將其重新插入頁面或做他用。被刪除的內(nèi)容重新插入頁面時(shí)，原有的數(shù)據(jù)和事件處理器保持不變。9.6復(fù)制內(nèi)容clone()方法可用于復(fù)制元素，并可修改其內(nèi)容。9.7樣式操作在HTML文檔中，串聯(lián)樣式表（CascadingStyleSheets，CSS）用于格式化元素。jQuery提供了用于操作CSS的方法。9.7.1css()方法css()方法可獲取或設(shè)置CSS樣式。9.7.2CSS類操作方法jQuery提供了直接操作元素class屬性的方法。addClass()：添加類。removeClass()：刪除類。toggleClass()：切換類。若元素?zé)o指