current position：Home>What are the similarities and differences between jQuery and native JS?

What are the similarities and differences between jQuery and native JS?

2022-04-29 13:49:43【How's Kakashi doing】

 hello hello, We learn to be original JS I have learned and mastered two ways to get and set text , Do you remember ？ That's it innerHTML And innerText, Right , The use of these two basic native methods must have been somewhat confused ？ Don't panic ！ Now I'll take you to review these two methods .

  For this article , I'll show you jQuery Method to get and set text content , towards jQuery Step into the abyss ！！！

 

List of articles ：

One ：html() And innerHTML

1.1 html() For content acquisition  

Output results ： 

 1.2 html() Settings for content

Output results ： 

1.3 innerHTML Set and get 【 Native JS Review and consolidate 】 

1.3.1 innerHTML Acquisition of text content

1.3.2 innerHTML Setting of text content

Two ：text() And innerText 

2.1 text() For content acquisition  

Output results ：

 2.2 text() Settings for content

Output results ：

  2.3 innerText Set and get 【 Native JS Review and consolidate 】 

1.3.1 innerText Acquisition of text content  

1.3.2 innerText Setting of text content  

One ：html() And innerHTML

html() yes jQuery Methods , It is equivalent to innerHTML, Both can be identified HTML label , Therefore, when printing, the element labels will be printed together

1.1 html() For content acquisition  

We can get it directly without parameters , And the tags in the content will also get 

<body>
    <div>
        <p> I am a text </p>
    </div>
    <script>
        console.log($('div').html());
    </script>
</body>

Output results ： 

You can see html() The label is also output

 1.2 html() Settings for content

If you set it, you only need to set the parameter to the text we want to change 

<body>
    <div>
        <p> I am a text </p>
    </div>
    <script>
        $('div').html('1234567890');
    </script>
</body>

Output results ： 

You can see that our text content has been changed to the content we want to set

1.3 innerHTML Set and get 【 Native JS Review and consolidate 】 

Now let's review that the effect is equivalent to jQuery Of html() Methodical Native innerHTML

1.3.1 innerHTML Acquisition of text content 

<body>
    <div>
        <p> I am a text </p>
    </div>
    <script>
        var ele=document.querySelector('div')
       console.log(ele.innerHTML);
    </script>
</body>

Output results ：

innerHTML The label will also be printed

1.3.2 innerHTML Setting of text content 

<body>
    <div>
        <p> I am a text </p>
    </div>
    <script>
        var ele=document.querySelector('div')
        ele.innerHTML='123456'
    </script>
</body>

Output results ：

The text content has been changed to what we want to set

 

Two ：text() And innerText 

text() yes jQuery Methods , It is equivalent to innerText, They don't recognize HTML label , Therefore, the element labels will not be printed together when printing , Different from the previous two, we need to pay attention to ！！

2.1 text() For content acquisition  

  We can get it directly without parameters , Be careful The difference In the content   Labels won't get 

<body>
    <div>
        <p> I am a text </p>
    </div>
    <script>
        console.log($('div').text());
    </script>
</body>

Output results ：

The content was printed out , The label in the content is not printed  

 2.2 text() Settings for content

  If you set it, you only need to set the parameter to the text we want to change 

<body>
    <div>
        <p> I am a text </p>
    </div>
    <script>
        $('div').text('1234');
    </script>
</body>

Output results ：

The text content is changed to the value we want to set

  2.3 innerText Set and get 【 Native JS Review and consolidate 】 

  Then let's review that the effect is equivalent to jQuery Of text() Methodical Native innerText

1.3.1 innerText Acquisition of text content  

<body>
    <div>
        <p> I am a text </p>
    </div>
    <script>
        var ele=document.querySelector('div')
        console.log(ele.innerText);
    </script>
</body>

Output results ：

innerText Won't type the label

1.3.2 innerText Setting of text content  

<body>
    <div>
        <p> I am a text </p>
    </div>
    <script>
        var ele=document.querySelector('div')
        ele.innerText='123';
    </script>
</body>

Output results ：

The content is changed to the value you want to set

【 It's not easy to create , Give me a compliment before you go , thank you ！！】 

 

copyright notice
author[How's Kakashi doing],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/119/202204291211305395.html

The sidebar is recommended

guess what you like

Random recommended