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; 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>