jQuery的简单入门练习

  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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏云端架构

【云端架构】前端必备“层叠样式表”精选

大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX、PD

41313
来自专栏一“技”之长

iOS开发UINavigation系列二——UINavigationItem

        UINavigationItem是导航栏上用于管理导航项的类,在上一篇博客中,我们知道导航栏是通过push与pop的堆栈操作来对item进行管理...

902
来自专栏ShaoYL

Autolayout

3206
来自专栏前端之路

–探索CSS3动画、过渡

965
来自专栏程序员的知识天地

div 等块级标签横向排列的方法总结

块级标签的默认文档流是上下排列的,再配上横向排列的方法,请过适当的嵌套,可以应对几乎所有常见的布局需求,因此,我决定总结一下 div 横向排列的方法。这也是我初...

642
来自专栏HTML5学堂

CSS选择器优先级

HTML5学堂:CSS优先级所谓优先级是指CSS样式在浏览器中被解析的先后顺序。 CSS选择器的优先级:id > class > tagname。具体我们来看看...

2623
来自专栏Keegan小钢

Android样式的开发:Property Animation篇

前篇文章说过,Android框架还提供了两种动画体系,前一篇已经总结了视图动画(View Animation)的用法,本篇则接着总结另一种动画体系——属性动画(...

663
来自专栏Web项目聚集地

Javascript将HTML转成PDF并下载「支持多页」

由于html2canvas只能将它能处理的生成canvas image,因此渲染出来的结果并不是100%与原来一致。但它不需要服务器参与,整个图片都由客户端浏览...

1032
来自专栏偏前端工程师的驿站

CSS魔法堂:更丰富的前端动效by CSS Animation

 在《CSS魔法堂:Transition就这么好玩》中我们了解到对于简单的补间动画,我们可以通过transition实现。那到底多简单的动画适合用transti...

1534
来自专栏SHERlocked93的前端小站

JS 中的offset、scroll、client总结

经常碰到offset、scroll、client这几个关键字,每次都要各种实验,这里总结一下。

633

扫码关注云+社区