HQuery中html結構及文本的修改

讀取、修改元素的html結構或者元素的文本內容是常見的DOM操作,jQuery針對這樣的處理提供了2個便捷的方法.html()與.text()
我們一起來看看。

.html()方法

獲取集合中第一個匹配元素的HTML內容或設置每一個匹配元素的html內容,具體有3種用法:
1..html() 不傳入值,就是獲取集合中第一個匹配元素的HTML內容
2..html( htmlString ) 設置每一個匹配元素的html內容
3..html( function(index, oldhtml) ) 用來返回設置HTML內容的一個函數

注意
.htm()方法內部使用的是DOM的innerHTML屬性來處理的,所以在設置與獲取上需要注意的一個最重要的問題,這個操作是針對整個HTML內容(不僅僅只是文本內容)

.text()方法

得到匹配元素集合中每個元素的文本內容結合,包括他們的後代,或設置匹配元素集合中每個元素的文本內容爲指定的文本內容。,具體有3種用法:
1..text() 得到匹配元素集合中每個元素的合併文本,包括他們的後代
2..text( textString ) 用於設置匹配元素內容的文本
3..text( function(index, text) ) 用來返回設置文本內容的一個函數

注意
.text()結果返回一個字符串,包含所有匹配元素的合併文本

.html與.text的異同:

1..html與.text的方法操作是一樣,只是在具體針對處理對象不同
2..html處理的是元素內容,.text處理的是文本內容。
3..html只能使用在HTML文檔中,.text 在XML 和 HTML 文檔中都能使用。
4.如果處理的對象只有一個子文本節點,那麼html處理的結果與text是一樣的。
5.火狐不支持innerText屬性,用了類似的textContent屬性,.text()方法綜合了2個屬性的支持,所以可以兼容所有瀏覽器。

具體實例:

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h3>.html()與.text()</h3>
    <div class="left first-div">
        <div class="div">
            <a>:first-child</a>
            <a>第二個元素</a>
            <a>:last-child</a>
        </div>  
        <div class="div">
            <a>:first-child</a>
            <a>第二個元素</a>
            <a>:last-child</a>
        </div>
    </div>

    <h4>顯示通過html方法獲取到的內容</h4>
    <p></p>

    <h4>顯示通過text方法獲取到的內容</h4>
    <p></p>


    <script type="text/javascript">
        //顯示出html方法獲取到的內容
        //.html()是整個html文檔結構
        $('p:first').text( $(".first-div").html() ) 
    </script>


    <script type="text/javascript">
        //顯示出text方法獲取到的內容
        //.text()是文本內容的合集
        $('p:last').text( $(".first-div").text() ) 
    </script>


    <script type="text/javascript">
        //通過.text()方法替換文本內容
        $(".left a:first").text('替換第一個a元素的內容')
    </script>


    <script type="text/javascript">
        //通過.html()方法替換html結構
        $(".left div:first").html('整個div的子節點都被替換了')
    </script>


    <script type="text/javascript">
        //通過.text()的回調,獲取原本的內容,修改,在重新賦值
        $(".left a:first").text(function(idnex,text){
            return '增加新的文本內容' + text
        })
    </script>



</body>

</html>

好好感悟!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章