譯文：JavaScript框架比較（三）

在此之前，你已經(jīng)看到JavaScript框架使用選擇器和DOM遍歷可以很容易的獲得特定的元素。但是，為了改變網(wǎng)頁上特定元素的內(nèi)容和外觀，你需要操作DOM并應用改變。使用純粹的JavaScript將是一件繁重的工作，但幸運的是，大多數(shù)JavaScript框架提供有用的函數(shù)，可以很容易地做到這些。

假設你有一個ID為the-box的盒子。

<div id="the-box">Message goes here</div>
使用jQuery將其文本改變?yōu)?ldquo;Message goes here”，可以很簡單的這樣使用：

$('#the-box').html('This is the new message!');
事實上，你可以在函數(shù)中使用HTML代碼，它能被瀏覽器解析，例如：

$('#the-box').html('This is the <strong>new</strong> message!');
在本例中，DIV元素中的內(nèi)容看起來像這樣：

<div id="the-box">This is the <strong>new</strong> message!'</div>
當然，在實例中你需要使用大于或小于等特殊字符，而不是指定特殊的HTML實體代碼。你可以使用jQuery的text函數(shù)來代替：

$('#the-box').text('300 >200');
div元素更新后代碼如下：

<div id="the-box">300 > 200</div>
在上面的例子中，現(xiàn)有的內(nèi)容被替換為新的內(nèi)容。如果你

只想給文本附加一些信息該怎么辦？幸運的是，jQuery提供append函數(shù)達到此目的。

$('#the-box').append(', here goes message');
對原始的div作如上操作后，div元素里的內(nèi)容看起來是這樣的：

<div id="the-box">Message goes here, here goes message</div>
除了追加，你可以在前面追加內(nèi)容，將其插入到現(xiàn)存內(nèi)容的前面而不是后面。此外，jQuery提供的函數(shù)可以在給定元素內(nèi)插入內(nèi)容，要么在前要么在后。還有函數(shù)替換內(nèi)容、清空內(nèi)容、移除元素、克隆元素等等。

除了DOM操作函數(shù)外，JavaScript框架通常還包含幾個函數(shù)操作元素的樣式和class。例如，你有一個表格，當鼠標經(jīng)過時高亮顯示某行。你可以創(chuàng)建一個特殊的類名hover，你可以將該類動態(tài)的添加到某行。利用YUI你可以使用下面的代碼判斷該行是否擁有hover類名，有則免之，無則加之。

if(row.hasClass('hover')) row.removeClass('hover'); else row.addClass('hover');
同樣，大多數(shù)JavaScript框架都擁有操作CSS的內(nèi)置函數(shù)。

轉(zhuǎn)載地址：http://www.denisdeng.com/?p=712

原文地址：http://www.ibm.com/developerworks/web/library/wa-jsframeworks/index.html

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對您的學習有所幫助,可以手機掃描二維碼進行捐贈