jQuery操作DOM
jQuery捕获
- text()方法，设置或返回所选元素的文本内容
- html()方法，设置或返回所选元素的内容，包括内容里面的html标签
- val()方法，设置或返回表单字段的值
- attr()方法，获取元素的属性值，无论是标签固有属性还是自定义的属性都能获取(标签的固有属性：标签自身携带的属性，就是W3C标准里面包含的，也可以说IDE里智能提示出来的；自定义属性：W3C里面不包含的，你自己定义的属性)
- prop()方法，获取元素的属性值，和attr()用法一致，只能获取标签的固有属性。
上代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
</head>
<style>
input,p{
display:none;
}
button{
display:block;
margin:20px auto;
}
</style>
<body>
<button id="btn1">显示文本</button>
<button id="btn2">显示文本(包含文本内的HTML标签)</button>
<button id="btn3">显示表单字段的值</button>
<button id="btn4">显示input标签的属性</button>
<button id="btn5">显示p标签的属性</button>
<p href="#">文字<b>粗体</b></p>
<input type="text" id="text" value="我是表单的值"/>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
alert($("p").text());
});
$("#btn2").click(function(){
alert($("p").html());
});
$("#btn3").click(function(){
alert($("#text").val());
});
$("#btn4").click(function(){
alert($("#text").prop("type"));
});
$("#btn5").click(function(){
alert($("p").attr("href"));
});
});
</script>
</body>
</html>
jQuery设置内容和属性
- text(替换的值) 修改文本内容
- html(替换的值(可包含html标签))修改文本内容，可包含html标签
- val(要修改的值)修改表单字段的值
- attr(“属性名”,“属性值”)修改标签的属性
上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
<style>
</style>
</head>
<body>
<p class="p1">段落一</p>
<p class="p2">段落二</p>
<input type="text" id="t1" value="段落三"/>
<button class="btn1">设置文本</button>
<button class="btn2">设置HTML</button>
<button class="btn3">设置值</button>
<button class="btn4">改类型</button>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$(".p1").text("Hello!");
});
$(".btn2").click(function(){
$(".p2").html("<b>Hello!</b>");
});
$(".btn3").click(function(){
$("#t1").val("Hello!");
});
$(".btn4").click(function(){
$("#t1").attr("type","password");
});
});
</script>
</body>
</html>