旅游網(wǎng)站模板改變網(wǎng)頁元素內(nèi)容

申請免費試用、咨詢電話：400-8352-114

    在此之前，你已經(jīng)看到j(luò)avascript框架使用選擇器和DOM遍歷可以很容易的獲得特定的元素。但是，為了改變 旅游網(wǎng)站模板上特定元素的內(nèi)容和外觀，你需要操作DOM并應(yīng)用改變。使用純粹的javascript將是一件繁重的工作，但幸運的是，大多數(shù)javascript框架提供有用的函數(shù)，可以很容易地做到這些。
    假設(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)容、移除元素、克隆元素等等。