1、设置值：
text() ：设置或返回所选元素的文本内容
html() ：设置或返回所选元素的内容（包括 HTML 标记）
val() ：设置或返回表单字段的值
attr() ：设置或返回属性值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>值的设置</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
</script>
<script>
$(function(){
$("#b").click(function(){
$("#test").text("新年好！");
});
});
</script>
</head>
<body>
<p id="test">我是一个文本！</p>
<button id="b">设置文本的值</button>
</body>
</html>
刚开始是文本的初始值：
点击按键后，对文本重新赋值，文本的值发生了改变：
2、DOM对象和JQ对象的转换：
（1）DOM对象转换为JQ对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM对象和JQ对象的转换</title>
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<script>
function test(){
var test = document.getElementById("test");
$(test).html("新年好！");
}
</script>
</head>
<body>
<span id="test">大家好，我是一个文本！</span>
<input type="button" value="DOM对象转换为JQ对象" onclick="test()"/>
</body>
</html>
2、DOM对象转换为JQ对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM对象和JQ对象的转换</title>
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<script>
function test(){
var test = document.getElementById("test");
$(test).html("新年好！");
}
</script>
</head>
<body>
<span id="test">大家好，我是一个文本！</span>
<input type="button" value="DOM对象转换为JQ对象" onclick="test()"/>
</body>
</html>
3、JQ对象转换为DOM对象：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQ对象转换为DOM对象</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
$("#button").click(function(){
$("#test").get(0).innerHTML="新年好！";
});
});
</script>
</head>
<body>
<span id="test">大家好，我是一个文本！</span>
<input type="button" value="JQ对象转换为DOM对象" id="button"/>
</body>
</html>
原文地址：https://www.cnblogs.com/zhai1997/p/12233218.html
时间： 2024-10-22 07:27:52