18-Jquery's html(), text(), val() methods

html() method
This method is similar to the innerHTML attribute in JavaScript and can be used to get or set the HTML content of an element.
Example 1: Use html() method to get content

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>html()方法的获取使用</title>
    <script src="jquery-1.11.3.js"></script>
</head>
<body>
    <p id="fruit"><strong>喜欢的水果？</strong>苹果</p>
    <script>
        $(function(){
     
     
            /*获取指定元素中的内容：内容包括html*/
           var $_html= $("#fruit").html();
            alert($_html);
        });
    </script>
</body>
</html>

Example 2: Use html() to set content

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>html()方法的设置使用</title>
    <script src="jquery-1.11.3.js"></script>
</head>
<body>
    <p id="fruit"><strong>喜欢的水果？</strong>苹果</p>
    <script>
        $(function(){
     
     
            /*给指定的元素设置内容：内容包括html标签，并且会将内容中html标签使用浏览器解析。*/
            $("#fruit").html("<b>喜欢的运动？<b>游泳");
        });
    </script>
</body>
</html>

text() method

Example 3: Use the text() method to get the text in the specified element

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>text()方法的获取使用</title>
    <script src="jquery-1.11.3.js"></script>
</head>
<body>
    <p id="fruit"><strong>喜欢的水果？</strong>苹果</p>
    <script>
        $(function(){
     
     
            /*text():获取指定元素的内容：内容不包含html，只获取其中的文本*/
           var $_text= $("#fruit").text();
            alert($_text);
        });
    </script>
</body>
</html>

Example 4: Use text() to set content

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>text()方法的设置使用</title>
    <script src="jquery-1.11.3.js"></script>
</head>
<body>
    <p id="fruit"><strong>喜欢的水果？</strong>苹果</p>
    <script>
        $(function(){
     
     
        /*text（）:给指定的元素设置内容，注意这个内容包含html，但是会将内容中的html当做普通的字符串对待（浏览器不会解析）*/
           $("#fruit").text("<b>喜欢的运动？</b>游泳");

        });
    </script>
</body>
</html>

Note the difference between html() and text():
html(): Get the content of the specified element: the content includes html.
Set the content for the specified element: the content includes html tags, and the html tags in the content will be parsed by the browser.
text(): Get the content of the specified element: the content does not contain html, only the text in it.
Set the content for the specified element. Note that this content contains html, but the html in the content will be treated as a normal string (browser Will not parse).
val() method
This method is similar to the value attribute in the form element of JavaScript, which can be used to get and set the value of the value attribute in the form element. Whether the element is text, a drop-down list or a single-select box, it can return the value of the element's value attribute. If it is a check box, an array containing all selected values is returned.
Example 5: Use the val() method to get the value of the form element

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>val()方法的获取值</title>
    <script src="jquery-1.11.3.js"></script>
</head>
<body>
    username:<input type="text" id="username" value="admin" placeholder="请输入用户名"><br>
    <script>
        $(function(){
     
     
            /*val()：获取指定表单元素value属性的值*/
          var name=  $("#username").val();
            alert(name);
        });
    </script>
</body>
</html>

Example 6: Use the val() method to set the value attribute of the form element

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>val()方法的设置值</title>
    <script src="jquery-1.11.3.js"></script>
</head>
<body>
    username:<input type="text" id="username" value="admin" placeholder="请输入用户名"><br>
    <script>
        $(function(){
     
     
            /*给指定的表单元素设置value属性的值*/
            $("#username").val("小明");
        });
    </script>
</body>
</html>

18-Jquery's html(), text(), val() methods

Guess you like