1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>jQuery的练习</title> 5 <script src="jquery.js"></script> 6 7 <script language="javascript"> 8 $("document").ready(function(){ 9 $("#p1").click(function(){ 10 alert($("#p3").text()); 11 }); 12 13 $("#p2").click(function(){ 14 alert($("#p3").html()); 15 }); 16 17 $("#b1").click(function(){ 18 alert($("#b2").val()); 19 }); 20 21 $("#a1").click(function(){ 22 alert($("#a2").attr("href")); 23 }); 24 25 $(".b1").click(function(){ 26 $(".p1").text("欢迎加入柠檬"); 27 }); 28 29 $(".b2").click(function(){ 30 $(".p2").html("也欢迎你加入柠檬"); 31 }); 32 33 $(".b3").click(function(){ 34 $(".p3").val("柠檬棒棒哒"); 35 }); 36 37 $(".s1").click(function(){ 38 $(".s2").append("<b>棒棒哒;</b>"); 39 }); 40 41 $(".f1").click(function(){ 42 $(".f2").prepend("<b>柠檬人;</b>"); 43 }); 44 45 $("#q1").click(function(){ 46 $("img").before("<i>美女;</i>"); 47 }); 48 49 $("#q2").click(function(){ 50 $("img").after("<i>帅哥;</i>"); 51 }); 52 53 $("#g1").click(function(){ 54 $("#g2").remove(); 55 }); 56 57 $("#k1").click(function(){ 58 $("#k2").empty(); 59 }); 60 61 $("#c1").click(function(){ 62 $("h2,i").addClass("col"); 63 }); 64 65 66 $("#c2").click(function(){ 67 $("h2").removeClass("col"); 68 }); 69 70 $("#c3").click(function(){ 71 $("h4").toggleClass("col"); 72 }); 73 74 $("#d1").click(function(){ 75 //$("p").css("background-color","purple"); 76 $("p").css({"background-color":"purple","font-size":"26px"}); 77 }); 78 79 }); 80 </script> 81 <style type="text/css"> 82 .col{ 83 color:red; 84 font-size:28px; 85 } 86 87 </style> 88 </head> 89 <body> 90 <h3>1:text() - 设置或返回所选元素的文本内容; 91 html() - 设置或返回所选元素的内容（包括 HTML 标记） 92 </h3> 93 <div> 94 <p id="p3">这是段落中的<b>粗体</b>文本</p> 95 <button id="p1">显示文本</button> 96 <button id="p2">显示HTML</button> 97 </div> 98 <br/><hr> 99 <h3>2:val() - 设置或返回表单字段的值</h3> 100 <div> 101 名称：<input type="text" id="b2" value="柠檬学院"/> 102 <button id="b1">显示值</button> 103 </div> 104 <h3>3:获取属性 - attr();jQuery attr() 方法用于获取属性值。</h3> 105 <div> 106 <a id="a2" href="http://www.bjlemon.com">柠檬学院</a><br/> 107 <button id="a1">显示href属性的值</button> 108 </div> 109 <br><hr> 110 <h3>4:设置内容 - text()、html() 以及 val(); 111 text() - 设置或返回所选元素的文本内容; 112 html() - 设置或返回所选元素的内容（包括 HTML 标记）; 113 val() - 设置或返回表单字段的值 114 </h3> 115 <div> 116 <p class="p1">这是一个段落</p> 117 <p class="p2"><b>这是另一个段落</b></p> 118 输入框：<input class="p3" type="text" value="柠檬学院"/><br/><br/> 119 <button class="b1">设置文本</button> 120 <button class="b2">设置HTML</button> 121 <button class="b3">设置值</button> 122 </div> 123 <br/><hr> 124 <h3>5:append() - 在被选元素的结尾插入内容; 125 prepend() - 在被选元素的开头插入内容; 126 after() - 在被选元素之后插入内容; 127 before() - 在被选元素之前插入内容 128 </h3> 129 <p class="s2">柠檬学院</p> 130 <button class="s1">末尾添加文本</button> 131 <p class="f2">柠檬学院</p> 132 <button class="f1">开头插入文本</button> 133 <br/> 134 <img src="index.jpg"/><br/> 135 <button id="q1">之前</button> 136 <button id="q2">之后</button> 137 <br><hr> 138 <h3>6:remove() - 删除被选元素（及其子元素）;empty() - 从被选元素中删除子元素 139 </h3> 140 <div id="g2" style="200px;height:200px;background-color:pink"> 141 <p>柠檬学院棒棒哒</p> 142 <p>我要成为柠檬人</p> 143 <p>为了柠檬而奋斗</p> 144 </div> 145 <button id="g1">删除</button> 146 <hr> 147 <div id="k2" style="200px;height:200px;background-color:pink"> 148 <p>柠檬学院棒棒哒</p> 149 <p>我要成为柠檬人</p> 150 <p>为了柠檬而奋斗</p> 151 </div> 152 <button id="k1">删除</button> 153 <br><hr> 154 <h3>7:addClass() - 向被选元素添加一个或多个类; 155 removeClass() - 从被选元素删除一个或多个类; 156 toggleClass() - 对被选元素进行添加/删除类的切换操作; 157 css() - 设置或返回样式属性; 158 </h3> 159 <h2>柠檬学院</h2> 160 <i>柠檬人</i><br/> 161 <button id="c1">为元素添加css样式</button> 162 <button id="c2">删除元素的css样式</button><br/> 163 <h4>柠檬人加油！！！</h4> 164 <button id="c3">切换css</button> 165 <br><hr> 166 <h3> 167 8:css() 方法设置或返回被选元素的一个或多个样式属性。 168 </h3> 169 <div> 170 <p style="background-color:red;">柠檬学院</p> 171 <p style="background-color:yellow;">柠檬学院</p> 172 <p style="background-color:pink;">柠檬学院</p> 173 <p style="background-color:blue;">柠檬学院</p> 174 </div> 175 <button id="d1">设置css样式</button> 176 177 </body> 178 </html>
