jQuery——text()、html()、val() 、attr()获取及写入标签元素的内容

最新推荐文章于 2021-11-05 19:57:56 发布

YUHUI01

最新推荐文章于 2021-11-05 19:57:56 发布

阅读量5k

点赞数

分类专栏： jQuery 文章标签：获取属性内容

本文链接：https://blog.csdn.net/YUHUI01/article/details/80871941

版权

jQuery 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

1.text()

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">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
    <div>
        this is my <i>Element</i>
    </div>
</body>
</html>
<script>
    console.log($("div").text())   //输出：this is my Element
</script>

  console.log($("div").text("div"))   //输出：div

</script>

2.html()

html() ，该方法获取目标元素的所有内容，包含子元素标签以及文本信息，,在方法中添加参数，可以改变元素的文本信息

<!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">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
    <div>
        this is my <i>Element</i>
    </div>
</body>
</html>
<script>
    console.log($("div").html())   //输出： this is my <i>Element</i>
</script>

  console.log($("div").html("div"))   //输出： div

</script>

3.val()

val(),类似于原生JS中的value()，获取元素的value属性值，,在方法中添加参数，可以改变元素的文本信息

<!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">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
    <input type="text" value="我是input标签">
</body>
</html>
<script>
    console.log($("input").val())  //输出：我是input标签
</script>

  console.log($("input").val("my input"))  //输出：my input

</script>

4.attr()

attr() 传一个参数的时候类似原生JS中的getAttribute()，能获取元素属性的值，传两个参数的时候类似于setAttribute()，能够改变属性的值（如果没有找到该属性，该方法会把属性添加到元素中），如果需要同时设置多个属性，可以传入一个JSON

<!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">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
    <form method="GET" action="#">
        <input type="text" value="我是input标签">
    </form>
</body>
</html>
<script>
    console.log($("input").attr("type"))  //输出text
</script>

$("input").attr("type","file")        //文本框变为文件上传标签

$("input").attr({
   "title":"attr",
    "alt":"attr"
})

YUHUI01

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jQuery——text()、html()、val() 、attr()获取及写入标签元素的内容

1.text()text()，该方法能获取到目标元素及子元素的文本信息（过滤掉标签）,在方法中添加参数，可以改变元素的文本信息&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" co
复制链接

扫一扫