jQuery HTML
1、捕获
2种方式：
index.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <script src="jquery-3.1.0.min.js"></script> 7 <script src="myjs7.js"></script> 8 </head> 9 <body> 10 <p id="text">this is my webpage<a>这是一个a标签</a></p> 11 <button id="btn1">click me</button> 12 </body> 13 </html>
第一种捕获方式：
$(document).ready(function(){ $("#btn1").click(function(){ alert("text:"+$("#text").text()); }); });
第二种捕获方式：
$(document).ready(function(){ $("#btn1").click(function(){ alert("text:"+$("#text").html()); }); });
两种方式的区别在于：
第一种执行结果：（只能获取具体的内容，不能获取标签）
第二种执行结果：（能获取标签和具体内容）
获取输入框的信息：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script src="jquery-3.1.0.min.js"></script> <script src="myjs7.js"></script> </head> <body> <p id="text">this is my webpage<a>这是一个a标签</a></p> <button id="btn1">click me</button> <p><input type="text" id="it" value="jikexueyuan"></p> </body> </html>
1 $(document).ready(function(){ 2 3 $("#btn1").click(function(){ 4 alert("text:"+$("#it").val()); 5 }); 6 });
结果：
获取属性
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <script src="jquery-3.1.0.min.js"></script> 7 <script src="myjs7.js"></script> 8 </head> 9 <body> 10 <p><a href="http://www.jikexueyuan.com" id="aid"></a></p> 11 <button id="btn2">click me</button> 12 </body> 13 </html>
1 $(document).ready(function(){ 2 3 $("#btn2").click(function(){ 4 alert("text:"+$("#aid").attr("href")); 5 }); 6 });
2、设置
index.html代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <script src="jquery-3.1.0.min.js"></script> 7 <script src="myjs8.js"></script> 8 </head> 9 <body> 10 <p id="p1">hello world</p> 11 <p id="p2">hello world</p> 12 <input type="text" id="i3" value="hello"> 13 <br/> 14 <br/> 15 <button id="btn1">按钮1</button> 16 <button id="btn2">按钮2</button> 17 <button id="btn3">按钮3</button> 18 <br/> 19 <br/> 20 <a title="asd" id="aid" href="http://www.baidu.com">最初是百度，接下来是极客学院</a> 21 <br/> 22 <button id="btn4">按钮4</button> 23 <br/> 24 <br/> 25 <p id="p5">hello world</p> 26 <br/> 27 <button id="btn5">按钮5</button> 28 </body> 29 </html>
js代码：
1 $(document).ready(function(){ 2 3 $("#btn1").click(function(){ 4 $("#p1").text("jikexueyuan");//修改p1内容为jikexueyuan 5 }); 6 7 $("#btn2").click(function(){ 8 $("#p2").html("<a href='http://www.jikexueyuan.com'>极客</a>"); 9 }); 10 11 $("#btn3").click(function(){ 12 $("#i3").val("jikexueyuan3"); 13 }); 14 15 $("#btn4").click(function(){//修改多个属性 16 $("#aid").attr({ 17 "href":"http://www.jikexueyuan.com", 18 "title":"hello" 19 }); 20 }); 21 22 $("#btn5").click(function(){//回调方法，一直添加 23 $("#p5").text(function(i,ot){ 24 return "old:"+ot+",new:这是新的内容"+i; 25 }); 26 }); 27 });
结果：
3、添加元素
index.html代码
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <script src="jquery-3.1.0.min.js"></script> 7 <script src="myjs9.js"></script> 8 </head> 9 <body> 10 <p id="p1">hello world</p> 11 <p id="p2">hello world</p> 12 <button id="btn1">按钮1</button> 13 <button id="btn2">按钮2</button> 14 <button onclick="apptendText()">按钮3</button> 15 </body> 16 </html>
js代码：
1 /* 2 * append 3 * prepend 4 * before 5 * after 6 */ 7 $(document).ready(function(){ 8 $("#btn1").click(function(){ 9 //$("#p1").append("append method");//append方法插入，在后面插入 10 $("#p1").prepend("prepend method");//prepend方法插入，在前面插入 11 12 }); 13 $("#btn2").click(function(){ 14 //$("#p2").before("before hello");//before方法插入，在前面先换行插入 15 $("#p2").after("after hello");//after方法插入，在后面先换行插入 16 }); 17 }); 18 function apptendText(){ //追加新的元素函数 19 /*3种方式 20 * html 21 * jquery 22 * DOM 23 */ 24 var text1 = "<p>iwen</p>"; 25 var text2 = $("<p></p>").text("ime"); 26 var text3 = document.createElement("p"); 27 text3.innerHTML = "acely"; 28 $("body").append(text1,text2,text3); 29 }
4、删除（注意remove、empty的不同）
index.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <script src="jquery-3.1.0.min.js"></script> 7 <script src="myjs10.js"></script> 8 </head> 9 <body> 10 <div id="div" style="height:200px;width:200px;border:1px solid black;background-color: aqua"> 11 hello 12 <p>hello world</p> 13 <p>hello</p> 14 </div> 15 <button id="btn">删除</button> 16 </body> 17 </html>
js：
1 /* 2 * 删除： 3 * remove 4 * empty 5 */ 6 $(document).ready(function(){ 7 $("#btn").click(function(){ 8 //$("#div").remove();//全部删除 9 $("#div").empty();//删除掉，里面的子元素 10 }); 11 });
