1、text() ：设置或返回所选元素的文本内容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM操作</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
</script>
<script>
$(function(){
$("#b").click(function(){
alert($("#test").text());
});
});
</script>
</head>
<body>
<p id="test">海军军医大学第二附属医院（上海长征医院）举行了<b>“赴湖北抗击疫情誓师大会”</b>。该院首批医疗队60人已集结完毕，除夕之夜奔赴武汉。</p>
<button id="b">显示文本</button>
</body>
</html>
2、html() ： 设置或返回所选元素的内容（包括 HTML 标记）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM操作</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
</script>
<script>
$(function(){
$("#b").click(function(){
alert($("#test").html());
});
});
</script>
</head>
<body>
<p id="test">海军军医大学第二附属医院（上海长征医院）举行了<b>“赴湖北抗击疫情誓师大会”</b>。该院首批医疗队60人已集结完毕，除夕之夜奔赴武汉。</p>
<button id="b">显示文本</button>
</body>
</html>
3、val() ： 设置或返回表单字段的值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM操作</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
</script>
<script>
$(function(){
$("#b").click(function(){
alert($("#test").val());
});
});
</script>
</head>
<body>
<input type="text" id="test" value="新年快乐！"><br><br>
<button id="b">显示输入的文本内容</button>
</body>
</html>
4、attr() ：用于获取属性的值、
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM操作</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
</script>
<script>
$(function(){
$("#b").click(function(){
alert($("#test").attr("align"));
});
});
</script>
</head>
<body>
<table width="600" border="1" align="center" cellpadding="5" cellspacing="3" id="test">
<caption>成绩登记表</caption>
<thead>
<tr>
<th align="middle" >序号</th>
<th align="middle ">学号</th>
<th align="middle ">姓名</th>
<th align="middle ">平时成绩</th>
<th align="middle ">期末成绩</td>
<th align="middle ">学期总成绩</th>
</tr>
</thead>
<tbody>
<tr onmouseover="changeColor(‘tr1‘,‘over‘)" id="tr1" onmouseout="changeColor(‘tr1‘,‘out‘)">
<td align="middle ">1</td>
<td align="middle ">20100300201</td>
<td align="middle ">张小丽</td>
<td align="middle ">95</td>
<td align="middle ">95</td>
<td align="middle ">95</td>
</tr>
</tbody>
</table>
<center>
<button id="b">显示属性的值</button>
</center>
</body>
</html>
原文地址：https://www.cnblogs.com/zhai1997/p/12233084.html
时间： 2024-10-10 11:59:04