|
DOM操作
在此之前，你已經(jīng)看到JavaScript框架使用選擇器和DOM遍歷可以很容易的獲得特定的元素。但是，為了改變網(wǎng)頁(yè)上特定元素的內(nèi)容和外觀，你需要操作DOM并應(yīng)用改變。使用純粹的JavaScript將是一件繁重的工作，但幸運(yùn)的是，大多數(shù)JavaScript框架提供有用的函數(shù)，可以很容易地做到這些。
假設(shè)你有一個(gè)ID為the-box的盒子。
<div id="the-box">Message goes here</div>
使用jQuery將其文本改變?yōu)椤癕essage goes here”，可以很簡(jiǎn)單的這樣使用：
$('#the-box').html('This is the new message!');
事實(shí)上，你可以在函數(shù)中使用HTML代碼，它能被瀏覽器解析，例如：
$('#the-box').html('This is the <strong>new</strong> message!');
在本例中，DIV元素中的內(nèi)容看起來(lái)像這樣：
<div id="the-box">This is the <strong>new</strong> message!'</div>
當(dāng)然，在實(shí)例中你需要使用大于或小于等特殊字符，而不是指定特殊的HTML實(shí)體代碼。你可以使用jQuery的text函數(shù)來(lái)代替：
$('#the-box').text('300 >200');
div元素更新后代碼如下：
<div id="the-box">300 > 200</div>
在上面的例子中，現(xiàn)有的內(nèi)容被替換為新的內(nèi)容。如果你只想給文本附加一些信息該怎么辦？幸運(yùn)的是，jQuery提供append函數(shù)達(dá)到此目的。
$('#the-box').append(', here goes message');
對(duì)原始的div作如上操作后，div元素里的內(nèi)容看起來(lá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框架通常還包含幾個(gè)函數(shù)操作元素的樣式和class。例如，你有一個(gè)表格，當(dāng)鼠標(biāo)經(jīng)過(guò)時(shí)高亮顯示某行。你可以創(chuàng)建一個(gè)特殊的類名hover，你可以將該類動(dòng)態(tài)的添加到某行。利用YUI你可以使用下面的代碼判斷該行是否擁有hover類名，有則免之，無(wú)則加之。
if(row.hasClass('hover')) row.removeClass('hover'); else row.addClass('hover');
同樣，大多數(shù)JavaScript框架都擁有操作CSS的內(nèi)置函數(shù)。
本文鏈接：http://www.95time.cn/tech/web/2010/7531.asp 
出處：
責(zé)任編輯：bluehearts
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
