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>
时间： 2024-11-05 06:25:12