DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JavaScript框架操作DOM改變網頁元素的內容和外觀
JavaScript框架操作DOM改變網頁元素的內容和外觀
編輯:關於JavaScript     

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved