jQuery的屬性與樣式之html()及.text()


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


.html()方法


獲取集合中第一個匹配元素的HTML內容 或 設置每一個匹配元素的html內容,具體有3種用法:



  1. .html() 不傳入值,就是獲取集合中第一個匹配元素的HTML內容

  2. .html( htmlString )  設置每一個匹配元素的html內容

  3. .html( function(index, oldhtml) ) 用來返回設置HTML內容的一個函數


註意事項:


.html()方法內部使用的是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').?( $(".first-div").html() ) 

    </script>


<script type="text/javascript">

        //顯示出text方法獲取到的內容

        //.text()是文本內容的合集

        $('p:last').?( $(".first-div").text() ) 

    </script>


<script type="text/javascript">

        //通過.text()方法替換文本內容

        $(".left a:first").?('替換第一個a元素的內容')

    </script>


<script type="text/javascript">

        //通過.html()方法替換html結構

        $(".left div:first").?('整個div的子節點都被替換瞭')

    </script>


<script type="text/javascript">

        //通過.text()的回調,獲取原本的內容,修改,在重新賦值

        $(".left a:first").?(function(idnex,text){

            return '增加新的文本內容' + text

        })

    </script>


</body>


</html>

0 個評論

要回覆文章請先登錄註冊