JQuery DOM内容操作

最新推荐文章于 2022-03-31 11:56:34 发布

Judian6974

最新推荐文章于 2022-03-31 11:56:34 发布

阅读量596

点赞数

分类专栏： jquery 文章标签： jquery dom

本文链接：https://blog.csdn.net/Judian6974/article/details/77267514

版权

jquery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

内容操作

（1）第一种方式：文本内容的操作text()

alert($("#p1").text());//要捕获的内容

作用：获取或设置文本内容（等价于DOM操作中的innerText属性）

$("#p1").text("更改为我");//更改为我

（2）html()：获取或设置元素中的所有内容(html的标签)

alert($("#p1").html());

这里写图片描述

alert($("#p1").html("<div style='color: aqua'>我是新设置的div</div>"));

这里写图片描述
例：建立一个表头

<body>
<table id="tblBook" border="1">
</table>
</body>
<script>
    var content = "<tr>";
    content += "<td>JavaScript</td>";
    content += "<td>SongChunMIn</td>";
    content += "<td>清华大学出版社</td>";
    content += "</tr>";
    $("#tblBook").html(content);
</script>

这里写图片描述
（3）val()：获取或设置表单中的值

<body>
<input type="text" id="txt1" value="请输入文本内容"/>
</body>
<script>
    $("#txt1").val("请删除所有输入的内容");
</script>

（4）attr()：获取或设置元素的属性值

<body>
<input type="text" id="txt1" name="第一章" value="请输入文本内容"/>
</body>
<script>
    alert($("#txt1").attr("name"));//弹窗弹出结果是“第一章”
$("#txt1").attr("name","第二章");//把name值换成了“第二章”
</script>