jQuery中text(),html(),val()区别

最新推荐文章于 2024-07-22 17:45:58 发布

幻想＆逆风

最新推荐文章于 2024-07-22 17:45:58 发布

阅读量116

点赞数

分类专栏： JQuery

JQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

定义和用法

text() 方法方法设置或返回被选元素的文本内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="./js/jquery-1.12.4.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="div1">div有文本内容</div>
    <div id="div2">
        div2内的文本
        <span>span内有文本内容</span>
    </div>
    <input type="text" id="input1" value="这是一个input标签">
    <input type="text" name="" id="input2" placeholder="能成功获取">
    <button id="button1" value="这是一个button标签"></button>
    <script>
        console.log($("#div1").text());
        console.log($("#div2").text());
        console.log($("#div2 span").text()) ;
        console.log($("#input1").text());
        console.log($("#input2").text());
        console.log($("#button1").text());
    </script>
</body>
</html>

F12 console （控制台）显示效果
在这里插入图片描述
可以看出text()只输出标签内的文本内容，和js的innerText方法一样

定义和用法

html() 方法返回或设置被选元素的内容 (inner HTML)，包括标签。

如果该方法未设置参数，则返回被选元素的当前内容。

<body>
    <div id="div1">div有文本内容</div>
    <div id="div2">
        div2内的文本
        <span>span内有文本内容</span>
    </div>
    <input type="text" id="input1" value="这是一个input标签">
    <input type="text" name="" id="input2" placeholder="能成功获取">
    <button id="button1" value="这是一个button标签"></button>
    <script>
        console.log($("#div1").html());
        console.log($("#div2").html());
        console.log($("#div2 span").html());
        console.log($("#input1").html());
        console.log($("#input2").html());
        console.log($("#button1").html());
    </script>
</body>

F12 console （控制台）显示效果
在这里插入图片描述
打印当前标签内的文本内容，如果有子标签，则把子标签本身和子标签内的文本一起打印

这个和js的innerHTML差不多

定义和用法

元素的值是通过 value 属性设置的。该方法大多用于 input 元素。

方法主要用于获取表单元素的值

如果该方法未设置参数，则返回被选元素的当前值。

<body>
    <div id="div1">div有文本内容</div>
    <div id="div2">
        div2内的文本
        <span>span内有文本内容</span>
    </div>
    <input type="text" id="input1" value="这是一个input标签1">
    <input type="text" name="" id="input2" value="这是一个input标签2" placeholder="能成功获取">
    <button id="button1" value="这是一个button标签"></button>
    <script>
        console.log($("#div1").val());
        console.log($("#div2").val());
        console.log($("#div2 span").val());
        console.log($("#input1").val());
        console.log($("#input2").val());
        console.log($("#button1").val());
    </script>
</body>

通过控制台打印结果
在这里插入图片描述
val()是用来输出表单内的数据，可以看出div和span标签内的文本并没有被输出，我还测试了H5新标签placeholder

同样也没有被输出，所以这个val应该是只针对标签的value属性的

空行

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="./js/jquery-1.8.3.min.js"></script>
    </head>
    <body>
     <div id="box">
         年龄:<input type="text" name="age" id="x1" value="18"/> 
         <p>文本内容</p>
     </div>
     
     <div id="box1">
         <a href="#" id="link1" action="delete">删除</a>  
     </div>
     
    </body>
    <script type="application/javascript">
        $(function(){
        /*val()获取value的值*/
        var str1=$("#x1").val();
        console.log("使用val()方法获取的是属性value的值:"+str1);
        var str2= $("#x1").attr("name");
        console.log("使用attr()获取的是元素任意属性的值:"+str2);
        var str3= $("#x1").attr("value");
        console.log("使用attr()获取的是元素属性的值:"+str3);
        var str4 =$("#box").html();
        console.log("使用html()获取的是div中所有内容包含标签:"+str4);
        var str5=$("#box").text();
        console.log("使用text()方法获取的是div中内部的所有文本值:"+str5);
        /*attr()和prop()的区别：主要在于自定义属性和固有属性的区别*/
        var str6 = $("#link1").attr("action");
        console.log("使用attr()获取自定义属性的值："+str6);
        var str7 = $("#link1").prop("action");
        console.log("使用prop()获取自定属性的值:"+str7);
        });
    </script>
</html>

总结
val()方法获取的仅仅是标签中的value属性的值。
text（）方法获取的是标签中包含的仅仅是文本值，并不包含标签内的任何元素。
att()方法可以获取标签中任意属性的值。
html()方法获取的是标签中的内部的一切，包括文本。
att（）和prop()的区别在于标签中的自定义属性，对于标签中的固有属性两者的效果一样，对于自定义的属性att()可以获取到自定义属性的值而prop()获取到的自定义属性的值为underfined。
建议：在获取自定义属性的值时使用attr(),在获取固有属性的值时使用prop();