欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2022年05月14日 12:16:20   作者：卡卡西最近怎么樣  
jQuery擁有可操作HTML元素和屬性的強大方法,下面這篇文章主要給大家介紹了關于jQuery獲取文本內容和原生JS的異同之處,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下

前言

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

對于本篇文章，將帶大家認識 jQuery 的獲取設置文本內容的方法，向 jQuery 的深淵邁步吧?。。?/p>

一：html() 與 innerHTML

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

1.1 html() 對于內容的獲取 

獲取我們直接無參數(shù)即可，并且內容中的標簽也會得到

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

輸出結果：

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

 1.2 html() 對于內容的設置

設置的話只需要將參數(shù)設置為我們要更改的文本即可

<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 標簽，所以打印時不會將元素標簽一起打印出來，與前面二者不同需要注意?。?/p>

2.1 text() 對于內容的獲取 

 獲取的話我們一樣直接無參數(shù)即可，注意 不同之處 在于內容中的 標簽不會得到

<body>
    <div>
        <p>我是一段文本</p>
    </div>
    <script>
        console.log($('div').text());
    </script>
</body>
輸出結果：

內容被打印了出來，內容中的標簽沒有被打印出來 

 2.2 text() 對于內容的設置

 設置的話只需要將參數(shù)設置為我們要更改的文本即可

<body>
    <div>
        <p>我是一段文本</p>
    </div>
    <script>
        $('div').text('1234');
    </script>
</body>
輸出結果：

文本內容被改變?yōu)榱宋覀兿胍O置的值

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獲取文本內容內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論