JQuery基本知识（3）
一、JQuery拥有可操作HTML元素和属性的强大方法。
1、JQuery DOM操作（DOM文档对象模型）
获取内容的方法:
text():设置或返回所选元素的文本内容
html():设置或返回所选元素的内容（包括HTML标记）
val():设置或返回表单字段的值。
attr():获取标签的属性值
它们有各自对应的回调函数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery操作DOM</title>
<script src="../js/jquery-3.1.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#btnText").click(function(){
alert("显示的文本是："+$("p").text());
});
$("#btnHtml").click(function(){
alert("显示的HTML是:"+$("p").html());
});
$("#btnVal").click(function(){
alert("显示值是："+$("#txt").val());
});
$("#btnAtt").click(function(){
alert("获取的属性值是："+$("#txt").attr("id"));
});
});
</script>
</head>
<body>
<p> <input type="text" id="txt" value="这是一个值" />这是一个富强*的国家</p>
<input type="button" value="text()" id="btnText"/>
<input type="button" value="html()" id="btnHtml"/>
<input type="button" value="val()" id="btnVal"/>
<input type="button" value="attr()" id="btnAtt"/>
</body>
</html>
设置内容的方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery设置DOM对象</title>
<script src="../js/jquery-3.1.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text("更换了text");
});
$("#btn2").click(function(){
$("#test2").html("<a href='#'>我是被添加的一个a标签</a>");
});
$("#btn3").click(function(){
$("#test3").val("我的val值被更换了");
});
$("#btn4").click(function(){
$("#test3").attr("value","我是属性值");
});
});
</script>
</head>
<body>
<p id="test1">段落1</p>
<p id="test2">段落1</p>
<p >段落3<input type="text" value="测试的值" id="test3"></p>
<input type="button" id="btn1" value="设置文本"/>
<input type="button" id="btn2" value="设置HTML"/>
<input type="button" id="btn3" value="设置值"/>
<input type="button" id="btn4" value="改变属性值"/>
</body>
</html>
2、JQuery的添加方法：
append():在被选元素的结尾插入内容
prepend():在备选要的开头插入内容
after():在被选元素之后插入内容
before():在被选之前插入内容
3、JQuery删除元素的方法
remove():删除被选元素及其子元素
empty():从被选元素中删除子元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../js/jquery-3.1.1.min.js" type="text/javascript"></script>
<title>JQuery添加的方法</title>
<script>
$(document).ready(function(){
//append方法在被选中元素的结尾添加
$("#btnAddL").click(function(){
$("p").append("<b>我的追加的文本哦</b>");
});
$("#btnList").click(function(){
$("ol").append("<li>我是新加的列表项</li>");
});
//prepend在被选中元素的开头进行添加
$("#btnpre").click(function(){
$("p").prepend("<b>我的追加的文本哦</b>");
});
$("#btnListpre").click(function(){
$("ol").prepend("<li>我是新加的列表项</li>");
});
//删除整个元素
$("#btnRemove").click(function(){
$("#div1").remove();
});
$("#btnEmpty").click(function(){
$("#div1").empty();
});
});
</script>
</head>
<body>
<div id="div1" style="border: 2px; width: 200px; height: 200px; background-color: dodgerblue;">
<!--<img src="http://pic2.cxtuku.com/00/02/31/b945758fd74d.jpg">-->
<p>这是一个段落</p>
<p>这是二个段落</p>
<ol>
<li>这是列表</li>
<li>这是列表</li>
<li>这是列表</li>
</ol>
</div>
<input type="button" value="追加文本append" id="btnAddL">
<input type="button" value="添加列表项append" id="btnList">
<input type="button" value="文本前追加prepend" id="btnpre">
<input type="button" value="列表前添加prepend" id="btnListpre">
<input type="button" value="remove方法删除整个DIV" id="btnRemove" />
<input type="button" value="empty清除选中元素的子元素" id="btnEmpty" />
</body>
</html>