標籤：
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="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的簡單入門練習
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
