首页 > 代码库 > jQuery的简单入门练习
jQuery的简单入门练习
1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>jQuery的练习</title> 5 <script src="http://www.mamicode.com/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="http://www.mamicode.com/柠檬学院"/>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="http://www.mamicode.com/柠檬学院"/><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="http://www.mamicode.com/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="width: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="width: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>
jQuery的简单入门练习
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。