18-Jquery的html()、text()、val()方法

html()方法
这个方法类似JavaScript中innerHTML属性，可以用来获取或设置元素中的HTML内容。
实例1：使用html（）方法获取内容

<!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>

实例2：使用html()设置内容

<!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()方法

实例3：使用text()方法获取指定元素中的文本

<!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>

实例4：使用text()设置内容

<!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>

注意html()和text（）的区别：
html():获取指定元素中的内容：内容包括html。
给指定的元素设置内容：内容包括html标签，并且会将内容中html标签使用浏览器解析。
text():获取指定元素的内容：内容不包含html，只获取其中的文本.
给指定的元素设置内容，注意这个内容包含html，但是会将内容中的html当做普通的字符串对待（浏览器不会解析）。
val()方法
这个方法类似JavaScript的表单元素中的value属性，可以用来获取和设置表单元素中value属性的值。无论元素是文本、下拉列表还单选框都可以返回元素value属性的值。如果是多选框，则返回一个包含所有选中的值的数组。
实例5：使用val()方法获取表单元素的值

<!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>

实例6：使用val()方法给表单元素设置value属性的值

<!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的html()、text()、val()方法

猜你喜欢