本文介绍了jQuery中用于DOM操作的三个核心方法：text()、html()和val()的使用方法及示例。同时，还展示了如何利用attr()方法获取和修改元素属性。
获得内容 - text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法：
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包括 HTML 标记）
- val() - 设置或返回表单字段的值
下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容：
<!DOCTYPE html>
<html>
<head>
<meta
charset="UTF-8">
<title></title>
<!--引入js-->
<script
src="../js/jquery-3.1.1.min.js"
type="text/javascript"
charset="utf-8"></script>
<script
type="text/javascript">
$(function(){
//获取div标签内部的元素
// alert($("#d").html())
//修改div标签里的内容
// $("#d").html('<span>skfksd</span><h1>sfdfgsdds</h1>gfddd');
//获取div标签内部的文本
// alert($("#d").text())
//修改div标签里的文本
// $("#d").text('<p>dfsdfsd</p>123434343')
//
//获取输入框的value值
// alert($("#t").val());
//修改value属性值
$("#t").val('12345657')
})
</script>
</head>
<body>
<div
id="d">
<p>12323423423</p>
<a>!@^%@&@&@</a>
<!--把标签当作普通文本进行解析-->
<xmp><p>dsafsdfsfdsdfs</p></xmp>
fsdfdsfsdfsfsd
<input
type="text"
id="t"
value="fsfsdfsdfsdfsddf"
/>
</div>
</body>
</html>
获取属性 - attr()：获取和修改属性值 案例：
<!DOCTYPE html>
<html
lang="en">
<head>
<meta
charset="UTF-8">
<title>Title</title>
<script
src="jquery-3.1.1.min.js"></script>
</head>
<body>
<input
type="text"name="123"value="">
</body>
<script>
$(function
() {
/*获取name属性值*/
// alert($("input").attr('name'));
// alert($("input").attr('value'))
//
修改name属性值
// $("input").attr('name','321');
// $("input").attr('type','password');
// $("input").attr('id','test');
/*修改元素的所有属性值*/
/*多个属性值一起修改*/
/*调用attr方法，把所有要修改的属性放在{}里*/
/*属性之间用逗号分隔*/
/*属性名与属性值用冒号分隔*/
$("input").attr({'name':'321','type':'password'})
})
</script>
</html>
扫一扫
2075
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
