jQuery獲取文字內容和原生JS的異同之處

2022-05-14 13:00:46

前言

hello hello，我們學習原生 JS 時已經學習掌握了兩種獲取和設定文字的辦法，大家還記得嗎？那就是 innerHTML 與 innerText，對吧，這兩個基本原生方法的使用想必大家已經有些混淆了吧？不要慌張！下面我會帶大家複習一下這兩個方法的。

對於本篇文章，將帶大家認識 jQuery 的獲取設定文字內容的方法，向 jQuery 的深淵邁步吧！！！

一：html() 與 innerHTML

html() 是 jQuery 的方法，它等同於 innerHTML，二者均可以識別 HTML 標籤，所以列印時會將元素標籤一起列印出來

1.1 html() 對於內容的獲取

獲取我們直接無引數即可，並且內容中的標籤也會得到

<body>
    <div>
        <p>我是一段文字</p>
    </div>
    <script>
        console.log($('div').html());
    </script>
</body>

輸出結果：

可以看到 html() 將標籤也輸出了出來

1.2 html() 對於內容的設定

設定的話只需要將引數設定為我們要更改的文字即可

<body>
    <div>
        <p>我是一段文字</p>
    </div>
    <script>
        $('div').html('1234567890');
    </script>
</body>

輸出結果：

可以看到我們的文字內容已經改成了我們想要設定的內容

1.3 innerHTML 的設定與獲取【原生JS 複習鞏固】

下面我們來複習一下效果等價於 jQuery 的 html() 方法的原生 innerHTML

1.3.1 innerHTML 對文字內容的獲取

<body>
    <div>
        <p>我是一段文字</p>
    </div>
    <script>
        var ele=document.querySelector('div')
       console.log(ele.innerHTML);
    </script>
</body>

輸出結果：

innerHTML 也會將標籤列印出來

1.3.2 innerHTML 對文字內容的設定

<body>
    <div>
        <p>我是一段文字</p>
    </div>
    <script>
        var ele=document.querySelector('div')
        ele.innerHTML='123456'
    </script>
</body>

輸出結果：

文字內容已經改成了我們想要設定的內容

二：text() 與 innerText

text() 是 jQuery 的方法，它等同於 innerText，二者不會識別 HTML 標籤，所以列印時不會將元素標籤一起列印出來，與前面二者不同需要注意！！

2.1 text() 對於內容的獲取

獲取的話我們一樣直接無引數即可，注意不同之處在於內容中的 標籤不會得到

<body>
    <div>
        <p>我是一段文字</p>
    </div>
    <script>
        console.log($('div').text());
    </script>
</body>

輸出結果：

內容被列印了出來，內容中的標籤沒有被列印出來

2.2 text() 對於內容的設定

設定的話只需要將引數設定為我們要更改的文字即可

<body>
    <div>
        <p>我是一段文字</p>
    </div>
    <script>
        $('div').text('1234');
    </script>
</body>

輸出結果：

文字內容被改變為了我們想要設定的值

2.3 innerText 的設定與獲取【原生JS 複習鞏固】

然後下面我們複習一下效果等價於 jQuery 的 text() 方法的原生 innerText

2.3.1 innerText 對文字內容的獲取

<body>
    <div>
        <p>我是一段文字</p>
    </div>
    <script>
        var ele=document.querySelector('div')
        console.log(ele.innerText);
    </script>
</body>

輸出結果：

innerText 不會將標籤打出來

2.3.2 innerText 對文字內容的設定

<body>
    <div>
        <p>我是一段文字</p>
    </div>
    <script>
        var ele=document.querySelector('div')
        ele.innerText='123';
    </script>
</body>

輸出結果：

內容被改為了想要設定的值