jQuery的简单入门练习

别先生

发布于 2017-12-29 18:26:27

9900

发布于 2017-12-29 18:26:27

文章被收录于专栏：别先生别先生

  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>