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

前言

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!

推薦閱讀: