text() - 设置或返回所选元素的文本内容html() - 设置或返回所选元素的内容（包括 HTML 标记）val() - 设置或返回表单字段的值attr() - 获取指定属性的值removeAttr() - 移除指定的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="operateDOM.css">
<script src="jquery-3.3.1.js"></script>
<script src="operateDOM.js"></script>
<style>
p{
width: 250px;
height: 100px;
background-color: aqua;
}
</style>
</head>
<body>
<button>设置属性</button>
<button>获取属性</button>
<button>移除属性</button>
<button>设置值</button>
<button>获取值</button>
<button>设置html内容</button>
<button>获取html内容</button>
<button>设置text内容</button>
<button>获取text内容</button>
<div>
<input type="text" id="txt"/>
</div>
</body>
</html>
$(document).ready(function () {
//设置属性
$("button:eq(0)").click(function () {
$(this).attr("title","我是一个按钮");
});
//获取属性
$("button:eq(1)").click(function () {
var a = $("button:eq(0)").attr("title");
console.log(a);
});
//移除属性
$("button:eq(2)").click(function () {
$("button:eq(0)").removeAttr("title");
});
//设置值 有一个参数为设置值
$("button:eq(3)").click(function () {
$("#txt").val("我是val设置输入的内容");
});
//获取值 没有参数为获取值
$("button:eq(4)").click(function () {
console.log($("#txt").val());
});
//设置html内容
$("button:eq(5)").click(function () {
$("div").html("<p>通过html（）方法设置html内容</p>");
});
//获取html内容
$("button:eq(6)").click(function () {
console.log($("div").html());
});
//设置text内容
$("button:eq(7)").click(function () {
$("div").text("通过text（）方法设置文本内容");
});
//获取text内容
$("button:eq(8)").click(function () {
console.log($("div").text());
});
});
通过html（）方法获取html内容，会连带p标签一起输出，结果如下：
通过text（）方法获取文本内容，只输出文本内容。
