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

Posted on by

前言

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>

輸出結果：

內容被改為瞭想要設置的值

總結

到此這篇關於jQuery獲取文本內容和原生JS的異同之處的文章就介紹到這瞭,更多相關jQuery獲取文本內容內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：