今天图老师小编给大家介绍下JavaScript框架操作DOM改变网页元素的内容和外观，平时喜欢JavaScript框架操作DOM改变网页元素的内容和外观的朋友赶紧收藏起来吧！记得点赞哦~
【 tulaoshi.com - Web开发 】
DOM操作
在此之前，你已经看到JavaScript框架使用选择器和DOM遍历可以很容易的获得特定的元素。但是，为了改变网页上特定元素的内容和外观，你需要操作DOM并应用改变。使用纯粹的JavaScript将是一件繁重的工作，但幸运的是，大多数JavaScript框架提供有用的函数，可以很容易地做到这些。
假设你有一个ID为the-box的盒子。
div id="the-box"Message goes here/div
使用jQuery将其文本改变为Message goes here，可以很简单的这样使用：
$('#the-box').html('This is the new message!');
事实上，你可以在函数中使用HTML代码，它能被浏览器解析，例如：
$('#the-box').html('This is the strongnew/strong message!');
在本例中，DIV元素中的内容看起来像这样：
（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）div id="the-box"This is the strongnew/strong message!'/div
当然，在实例中你需要使用大于或小于等特殊字符，而不是指定特殊的HTML实体代码。你可以使用jQuery的text函数来代替：
$('#the-box').text('300 200');
div元素更新后代码如下：
div id="the-box"300 200/div
在上面的例子中，现有的内容被替换为新的内容。如果你只想给文本附加一些信息该怎么办？幸运的是，jQuery提供append函数达到此目的。
$('#the-box').append(', here goes message');
对原始的div作如上操作后，div元素里的内容看起来是这样的：
div id="the-box"Message goes here, here goes message/div
除了追加，你可以在前面追加内容，将其插入到现存内容的前面而不是后面。此外，jQuery提供的函数可以在给定元素内插入内容，要么在前要么在后。还有函数替换内容、清空内容、移除元素、克隆元素等等。
（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）除了DOM操作函数外，JavaScript框架通常还包含几个函数操作元素的样式和class。例如，你有一个表格，当鼠标经过时高亮显示某行。你可以创建一个特殊的类名hover，你可以将该类动态的添加到某行。利用YUI你可以使用下面的代码判断该行是否拥有hover类名，有则免之，无则加之。
if(row.hasClass('hover')) row.removeClass('hover'); else row.addClass('hover');
同样，大多数JavaScript框架都拥有操作CSS的内置函数。
译文地址：http://www.denisdeng.com/？p=712 原文地址：http://www.ibm.com/developerworks/web/library/wa-jsframeworks/index.html来源:http://www.tulaoshi.com/n/20160220/1633284.html
看过《JavaScript框架操作DOM改变网页元素的内容和外观》的人还看了以下文章 更多>>
