Jquery的DOM操作
$说明
Jquery-day03
Jquery DOM操作
Jquery的text方法，html方法，val方法。
1.获取操作text. html. val.
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JQ-DOM</title> 6 <script type="text/javascript" src="jquery-3.3.1.js"></script> 7 <script> 8 $(document).ready(function () { 9 $("#bval").click(function () { 10 alert("val:" + $("#text").val()); 11 }); 12 $("#btext").click(function () { 13 $("#btext").text("text()方法") 14 }); 15 $("#bhtml").click(function () { 16 $("#bhtml").html("html()方法") //改变原属性的值 17 }); 18 19 //text() - 设置或返回所选元素的文本内容 20 //html() - 设置或返回所选元素的内容（包括 HTML 标记） 21 //val() - 设置或返回表单字段的值 22 //attr() 方法用于获取属性值。 23 }) 24 25 </script> 26 </head> 27 <body> 28 输入：<input type="text" value="" name="text" id="text"><br><hr> 29 <button id="bval">显示值</button> 30 <button id="btext">显示文本</button> 31 <button id="bhtml">显示HTML内容</button> 32 </body> 33 </html>
2.Jquery的回调函数
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JQ-回调函数</title> 6 <script type="text/javascript" src="jquery-3.3.1.js"></script> 7 <script> 8 $(document).ready(function () { 9 $("#button").click(function () { 10 $("#p").text(function (i,origText) { 11 //i是前面元素集合的顺序，origText是元素的内容 12 return "old text:" + origText + ":new text" + ":" + i; 13 //每调用一次改变一次origtext的值 14 //attr() 的回调函数 可以改变href title属性值等 15 }) 16 }) 17 }) 18 </script> 19 </head> 20 <body> 21 <p id="p">回调函数</p> 22 <button id="button">触发回调</button> 23 </body> 24 </html>
红色部分为回调函数的核心方法，每调用一次更新origtext的内容。
3.添加元素方法： prepend 和 append
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JQ-add Element</title> 6 <script type="text/javascript" src="jquery-3.3.1.js"></script> 7 <script> 8 $(document).ready(function () { 9 $("#button2").click(function () { 10 $("#text").append("append后缀。。"); //拼接后缀 11 }); 12 $("#button1").click(function () { 13 $("#text").prepend("prepend。。"); //前部 14 }); 15 16 // append() - 在被选元素的结尾插入内容 17 // prepend() - 在被选元素的开头插入内容 18 19 }) 20 </script> 21 </head> 22 <body> 23 <P id="#prepend">prepend。。 (拼接元素)</P> 24 <P id="append">append后缀。。(拼接元素)</P> 25 <P id="text">固定</P> 26 27 <button id="button1">添加前部分</button> 28 <button id="button2">拼接后部分</button> 29 </body> 30 </html>
4.添加元素方法：after 和 before
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JQ-add Element</title> 6 <script type="text/javascript" src="jquery-3.3.1.js"></script> 7 <script> 8 $(document).ready(function () { 9 $("#button2").click(function () { 10 $("#text").after("after.."); //前部插入 11 }); 12 $("#button1").click(function () { 13 $("#text").before("before.."); //后步插入 14 }); 15 16 //after() - 在被选元素之后插入内容 17 //before() - 在被选元素之前插入内容 18 19 }) 20 </script> 21 </head> 22 <body> 23 24 <P id="text1">固定1</P><br> 25 <P id="text">固定</P><br> 26 <P id="text2">固定2</P><br> 27 28 <button id="button1">添加前部分</button> 29 <button id="button2">拼接后部分</button> 30 </body> 31 </html>
$注意：
append 和 prepend 与 after 和 before 的区别：
append 和 prepend 是在被选元素中的结尾和开头添加 -----------在被选元素的div内部进行
after 和 before 是在被选元素的前后进行插入 -----------不再被选元素的div中进行
