譯文：JavaScript框架比較（三）

在此之前，你已經看到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

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