程序员人生 网站导航

译文:JavaScript框架比较(三)

栏目:jscript时间:2014-01-28 08:04:50
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 <strong>new</strong> message!');
在本例中,DIV元素中的内容看起来像这样:

<div id="the-box">This is the <strong>new</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提供的函数可以在给定元素内插入内容,要么在前要么在后。还有函数替换内容、清空内容、移除元素、克隆元素等等。

除了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

------分隔线----------------------------
------分隔线----------------------------

最新技术推荐