1. jQuery 拥有可操作 HTML 元素和属性的强大方法
获得内容 - text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法:
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容(包括 HTML 标记)
val() - 设置或返回表单字段的值
注意他们是有区别的,text获取的是元素的文本内容,html获取的是所选择元素里面的内容,val获取的是表单的文本内容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
</head>
<body>
<p class="p">我是一个p标签</p>
<div class="div1" style="width: 100px; height: 100px; background: skyblue;">
<p>div1里面的文本内容</p>
<span>div1里面的span文本内容</span>
</div>
<input type="text" value="username" name="username" class="username"/><br />
<button id="btn1" >获取所选元素的内容</button>
<button id="btn2" >获取所选元素的文本内容</button>
</body>
<script type="text/javascript">
$("#btn1").click(function(){
alert($(".p").html());
alert($(".div1").html());
});
$("#btn2").click(function(){
alert($(".p").text());
alert($(".div1").text());
});
alert($(".username").val());
</script>
</html>
2. ①设置内容 - text()、html() 以及 val()
text() - 设置所选元素的文本内容
html() - 设置所选元素的内容(包括 HTML 标记)
val() - 设置表单字段的值
下面是具体的例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
</head>
<body>
<p class="p"></p>
<div class="div1" style="width: 100px; height: 100px; background: skyblue;">
</div>
<input type="text" name="username" class="username"/><br />
<button id="btn1" >设置所选元素的内容</button>
<button id="btn2" >设置所选元素的文本内容</button>
<button id="btn3" >设置所选元素的文本内容</button>
</body>
<script type="text/javascript">
$("#btn1").click(function(){
$(".div1").html("<p>div1里面的文本内容</p>");
});
$("#btn2").click(function(){
$(".p").text("我是一个p标签");
});
$("#btn3").click(function(){
$(".username").val("username");
});
</script>
</html>
②Jquery attr() 方法也用于设置/改变属性值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery-3.3.1.js" ></script>
</head>
<body>
<input type="text" class="username"/>
<button id="btn1">使用attr来设置属性</button>
</body>
<script type="text/javascript">
$("#btn1").click(function(){
$(".username").attr("value", "username");
});
</script>
</html>