JavaWeb20.4【JQuery基础：DOM之内容操作、属性操作】
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script src="../js/jquery-3.3.1.min.js"></script> 7 <script> 8 $(function () { 9 // 获取myinput 的value值 10 /*var value = $("#myinput").val(); 11 alert(value); //张三*/ 12 $("#myinput").val("李四"); //设置新内容 13 14 // 获取mydiv的标签体内容 15 /*var html = $("#mydiv").html(); 16 alert(html); //<p><a href="#">标题标签</a></p>*/ 17 $("#mydiv").html("<a href='#'>aaaa</a>"); //设置新内容 18 19 // 获取mydiv文本内容 20 /*var text = $("#mydiv").text(); 21 alert(text); //标题标签*/ 22 $("#mydiv").text("bbbb"); //设置新内容 <a href='#'>aaaa</a> --> bbbb 23 }); 24 </script> 25 </head> 26 <body> 27 <input id="myinput" type="text" name="username" value="张三" /><br /> 28 <div id="mydiv"><p><a href="#">标题标签</a></p></div> 29 </body> 30 </html>
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>获取属性</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <script src="../js/jquery-3.3.1.min.js"></script> 7 <style type="text/css"> 8 div,span{ 9 width: 140px; 10 height: 140px; 11 margin: 20px; 12 background: #9999CC; 13 border: #000 1px solid; 14 float:left; 15 font-size: 17px; 16 font-family:Roman; 17 } 18 div.mini{ 19 width: 30px; 20 height: 30px; 21 background: #CC66FF; 22 border: #000 1px solid; 23 font-size: 12px; 24 font-family:Roman; 25 } 26 div.visible{ 27 display:none; 28 } 29 </style> 30 <script type="text/javascript"> 31 $(function () { 32 //获取北京节点的name属性值 33 /*var name = $("#bj").attr("name"); 34 alert(name); //beijing*/ 35 36 //设置北京节点的name属性的值为dabeijing 37 /*$("#bj").attr("name", "dabeijing"); 38 alert($("#bj").attr("name")); //dabeijing*/ 39 40 //新增北京节点的discription属性 属性值是didu 41 /*$("#bj").attr("discription", "didu"); 42 alert($("#bj").attr("discription")); //didu*/ 43 44 //删除北京节点的name属性并检验name属性是否存在 45 $("#bj").removeAttr("name"); 46 47 //获得hobby的的选中状态 48 /*var prop = $("#hobby").prop("checked"); 49 alert(prop); //false*/ 50 /*var checked = $("#hobby").attr("checked"); 51 alert(checked); //undefined attr获取不到checked属性*/ 52 }); 53 </script> 54 </head> 55 <body> 56 <ul> 57 <li id="bj" name="beijing" xxx="yyy">北京</li> 58 <li id="tj" name="tianjin">天津</li> 59 </ul> 60 <input type="checkbox" id="hobby"/> 61 </body> 62 </html>
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>样式操作</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <script src="../js/jquery-3.3.1.min.js"></script> 7 <style type="text/css"> 8 .one{ 9 width: 200px; 10 height: 140px; 11 margin: 20px; 12 background: red; 13 border: #000 1px solid; 14 float:left; 15 font-size: 17px; 16 font-family:Roman; 17 } 18 div,span{ 19 width: 140px; 20 height: 140px; 21 margin: 20px; 22 background: #9999CC; 23 border: #000 1px solid; 24 float:left; 25 font-size: 17px; 26 font-family:Roman; 27 } 28 div .mini{ 29 width: 40px; 30 height: 40px; 31 background: #CC66FF; 32 border: #000 1px solid; 33 font-size: 12px; 34 font-family:Roman; 35 } 36 div .mini01{ 37 width: 40px; 38 height: 40px; 39 background: #CC66FF; 40 border: #000 1px solid; 41 font-size: 12px; 42 font-family:Roman; 43 } 44 /*待用的样式*/ 45 .second{ 46 width: 300px; 47 height: 340px; 48 margin: 20px; 49 background: yellow; 50 border: pink 3px dotted; 51 float:left; 52 font-size: 22px; 53 font-family:Roman; 54 } 55 </style> 56 <script type="text/javascript"> 57 $(function () { 58 //<input type="button" value="采用属性增加样式(改变id=one的样式)" id="b1"/> 59 $("#b1").click(function () { 60 $("#one").prop("class", "second"); 61 }); 62 63 //<input type="button" value=" addClass" id="b2"/> 64 $("#b2").click(function () { 65 $("#one").addClass("second"); 66 }); 67 68 //<input type="button" value="removeClass" id="b3"/> 69 $("#b3").click(function () { 70 $("#one").removeClass("second"); 71 }); 72 73 //<input type="button" value=" 切换样式" id="b4"/> 74 $("#b4").click(function () { 75 $("#one").toggleClass("second"); 76 }); 77 78 //<input type="button" value=" 通过css()获得id为one背景颜色" id="b5"/> 79 $("#b5").click(function () { 80 var backgroundColor = $("#one").css("backgroundColor"); 81 alert(backgroundColor); //rgb(153, 153, 204) 82 }); 83 84 //<input type="button" value=" 通过css()设置id为one背景颜色为绿色" id="b6"/> 85 $("#b6").click(function () { 86 $("#one").css("backgroundColor", "green"); 87 }); 88 }); 89 </script> 90 </head> 91 <body> 92 <input type="button" value="保存" class="mini" name="ok" class="mini" /> 93 <input type="button" value="采用属性增加样式(改变id=one的样式)" id="b1"/> 94 <input type="button" value=" addClass" id="b2"/> 95 <input type="button" value="removeClass" id="b3"/> 96 <input type="button" value=" 切换样式" id="b4"/> 97 <input type="button" value=" 通过css()获得id为one背景颜色" id="b5"/> 98 <input type="button" value=" 通过css()设置id为one背景颜色为绿色" id="b6"/> 99 <h1>有一种奇迹叫坚持</h1> 100 <h2>自信源于努力</h2> 101 <div id="one"> 102 id为one 103 </div> 104 <div id="two" class="mini" > 105 id为two class是 mini 106 <div class="mini" >class是 mini</div> 107 </div> 108 <div class="one" > 109 class是 one 110 <div class="mini" >class是 mini</div> 111 <div class="mini" >class是 mini</div> 112 </div> 113 <div class="one" > 114 class是 one 115 <div class="mini01" >class是 mini01</div> 116 <div class="mini" >class是 mini</div> 117 </div> 118 <span class="spanone"> span 119 </span> 120 </body> 121 </html>
