RIA應(yīng)用開發(fā)：4-jQuery文檔處理

1、第四章 jQuery文檔處理回顧篩選元素遍歷DOM元素學(xué)習(xí)目標(biāo)DOM元素操作創(chuàng)建元素插入元素刪除元素替換元素復(fù)制元素包裝元素DOM屬性操作設(shè)置和獲取DOM屬性設(shè)置和切換CSS類CSS屬性操作設(shè)置和獲取樣式屬性設(shè)置和獲取元素的位置和大小4.1.1 創(chuàng)建元素使用工廠函數(shù)($()可以根據(jù)原始HTML字符串動態(tài)創(chuàng)建由jQuery對象包裝的DOM元素。所創(chuàng)建的元素可以包含文本，也可以帶有各種HTML屬性和CSS樣式屬性，甚至還可以包含事件和方法。jQuery(html, ownerDocument) 根據(jù)HTML 標(biāo)記字符串，動態(tài)創(chuàng)建由 jQuery 對象包裝的 DOM 元素。 $(Hello).app

2、endTo(body); 4.1.1 創(chuàng)建元素jQuery(html, props) 根據(jù)HTML 標(biāo)記字符串動態(tài)創(chuàng)建由 jQuery 對象包裝的 DOM 元素。同時設(shè)置一系列的屬性、事件等。 $(, class:test, “text”:Click me!, “click”:function() $(this).toggleClass(test); ).appendTo(body); 4.1.2 內(nèi)部插入4.1.2 內(nèi)部插入.html()不提供參數(shù)時獲取匹配元素集合中第一個元素的html內(nèi)容并返回字符串。根據(jù)傳遞的字符串(函數(shù))來設(shè)置匹配元素集合中每個元素的HTML內(nèi)容并返回jQuery對象

3、。4.1.2 內(nèi)部插入.text()不提供參數(shù)時獲取匹配元素集合中每個元素（包括其后代元素）的組合文本內(nèi)容并返回字符串。根據(jù)傳遞的字符串(函數(shù))來設(shè)置匹配元素集合中每個元素的文本內(nèi)容并返回jQuery對象。4.1.2 內(nèi)部插入例1： $(body).append();$(body).append(桃花潭水深千尺，);$().text(不及汪倫送我情。).appendTo(body);$().appendTo(#container);$(span).appendTo(p);$(#container).prepend();$(body).prepend(忽聞岸上踏歌聲。);$().html(李白乘

4、舟將欲行，).prependTo(body);$(span:first,span:eq(1).prependTo(p:first);$().html(贈 汪 倫唐 李白) .prependTo(body);4.1.3 外部插入4.1.4 刪除元素.remove(expr)方法從DOM中刪除所有匹配的元素。方法的返回值是一個指向已被刪除的節(jié)點的引用，因此可以在以后再使用這些元素。.detach(expr)方法從DOM中刪除所有匹配的元素。 與remove()不同的是，所有綁定的事件、附加的數(shù)據(jù)等都會保留下來。.empty()方法 刪除匹配的元素集合中所有的子節(jié)點。 4.1.4 刪除元素例2：$(

5、#remove).click(function() if ($(:checkbox:checked).length = 0)alert(請選擇要刪除的行！);return;$(tr).remove(:has(:checkbox:checked);if ($(tbody tr).length = 0) $(tbody).remove(););$(#clear).click(function() $(table).empty(););4.1.5 替換元素.replaceWith()方法：將所有匹配的元素替換成指定的HTML或DOM元素 。.replaceAll()方法：用匹配的元素替換掉所有匹配到

6、的元素。$(p).replaceWith(Paragraph. ); $(Paragraph. ).replaceAll(p); 4.1.6 復(fù)制元素.clone()方法：克隆匹配的DOM元素并且選中這些克隆的副本 。想把DOM文檔中元素的副本添加到其他位置時這個函數(shù)非常有用。 4.1.7 包裝元素.wrap()方法：使用指定的HTML結(jié)構(gòu)來包裝匹配元素集合中的每個元素，并返回jQuery對象。Test Paragraph. $(p).wrap(); Test Paragraph. .unwrap()方法：從DOM中刪除匹配元素中每個元素的父元素，而使匹配元素保留在其原來的位置并返回jQuer

7、y對象。 Hello cruel World $(p).unwrap() Hello cruel World 4.1.7 包裝元素.wrapAll()方法：使用一個HTML結(jié)構(gòu)包裝在所有匹配元素的周圍，并返回jQuery對象。HellocruelWorld $(p).wrapAll(document.createElement(div); HellocruelWorld .wrapInner()方法：使用一個HTML結(jié)構(gòu)包裝匹配集合中每個元素的內(nèi)容。HellocruelWorld $(p).wrapInner(); HellocruelWorld 綜合應(yīng)用超鏈接提示$(a.tooltip).m

8、ouseover(function(e) this.myTitle = this.title;this.title = ; var tooltip = + this.myTitle +; $(body).append(tooltip);$(#tooltip).css(top: (e.pageY+y) + px,left: (e.pageX+x) + px).show(fast); )$(a.tooltip). mouseout(function()this.title = this.myTitle;$(#tooltip).remove(); )$(a.tooltip). mousemove(f

9、unction(e)$(#tooltip).css(top: (e.pageY+y) + px, left: (e.pageX+x) + px“);); 設(shè)置和獲取DOM屬性.attr()方法獲取匹配元素集合中第一個元素的屬性值并返回一個字符串。 $(“a”).attr(“href”);設(shè)置匹配元素中每個元素的屬性值。 $(“#greatphoto”).attr(“src”,”GreatWall.jpg”); $(“#greatphoto”).attr(“alt”,”萬里長城”); $(“#greatphoto”) .attr(src:” GreatWall.jpg”,alt:”萬里長城”);

10、 設(shè)置和獲取DOM屬性.removeAttr()方法 從匹配元素中刪除一個屬性并返回jQuery對象。 $(“p”).removeAttr(“align”);.val()方法 獲取或設(shè)置表單元素的value屬性時，可以直接使用.val()方法。 $(input).val(); $(input).val(hello world!); 設(shè)置和切換CSS類.addClass()方法：為每個匹配的元素添加指定的類名。 $(p).addClass(selected); .hasClass()方法：檢查當(dāng)前的元素是否含有某個特定的類，如果有則返回true。.removeClass()方法：從所有匹配的元素

11、中刪除全部或者指定的類。 $(p).removeClass(selected); .toggleClass()方法：如果存在（不存在）就刪除（添加）一個類。 設(shè)置和獲取樣式屬性.css()方法當(dāng)傳遞一個屬性名做為參數(shù)時，可以從匹配元素集合中獲取第一個元素的樣式屬性值并返回字符串。 $(p).css(color); 對匹配元素集合中每個元素的樣式屬性進行設(shè)置，并返回一個jQuery對象。$(p).css(color,red); $(p).css( color: #ff0011, background: blue ); 設(shè)置和獲取元素的位置.offset()方法獲取匹配元素集合中第一個元素相對于文

12、檔的當(dāng)前坐標(biāo)，并返回一個包含top和left屬性的對象。 var p = $(p:last); var offset = p.offset(); p.html( left: + offset.left + , top: + offset.top ); 根據(jù)傳遞的參數(shù)，對匹配元素集合中每一個元素指定相對于文檔的當(dāng)前坐標(biāo)。 $(p:last).offset( top: 10, left: 30 ); 設(shè)置和獲取元素的位置.position()方法 獲取匹配元素集合中第一個元素相對于父元素的當(dāng)前偏移坐標(biāo)，并返回一個包含left和top屬性的對象。.scrollLeft()方法 獲取或設(shè)置匹配元素的水

13、平滾動條位置。.scrollTop()方法 獲取或設(shè)置匹配元素的垂直滾動條位置。設(shè)置和獲取元素的大小.height()方法：獲取或設(shè)置匹配元素的高度值。.width()方法：獲取或設(shè)置匹配元素的寬度值。.innerHeight()方法：獲取或設(shè)置匹配元素的內(nèi)部高度。.innerWidth()方法：獲取或設(shè)置匹配元素的內(nèi)部寬度。.outerHeight(options)方法：獲取或設(shè)置匹配元素的外部高度。.outerWidth(options) 方法：獲取或設(shè)置匹配元素的外部寬度。 綜合應(yīng)用網(wǎng)頁選項卡 var $div_li =$(div.tab_menu ul li); $div_li.cli

14、ck(function()$(this).addClass(selected) /當(dāng)前元素高亮 .siblings().removeClass(“selected”); /去掉其它同輩元素的高亮 / 獲取當(dāng)前點擊的元素在全部li元素中的索引 var index = $div_li.index(this); /選取子節(jié)點。 $(div.tab_box div) .eq(index).show() /顯示 元素對應(yīng)的元素 .siblings().hide(); /隱藏其它幾個同輩的元素)綜合應(yīng)用圖片提示效果綜合應(yīng)用$(a.tooltip).mouseover(function(e)this.myTitle = this.title;this.title = ;var imgTitle = this.myTitle? + this.myTitle : ; var tooltip = “ ”+imgTitle+“”; $(body).append(tooltip);$(#tooltip).css(top: (e.pageY+y) + px, left: (e.pageX+x) + px) .show(fast)