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 条评论
登录 后参与评论

相关文章

来自专栏西枫里博客

单数据和批量数据的删除操作

通常对某条数据的删除和某一批数据的删除分别采用两个成员方法。这样太累赘了一些,为了使用批量删除的成员方法,就需要构造单数据的结构。这里以ID为数组作为例子

793
来自专栏伪君子的梦呓

题解 ~ 简单的a+b ~ C++ 做法

864
来自专栏数值分析与有限元编程

Fortran关于默认数组读取的认识

有这样一组数据: 15 36 85 96 67 45 14 14 28 23 45 56 45 45 34 12 42 65 56 67 43 12 45 60...

32110
来自专栏用户2442861的专栏

限制QLineEdit的数值输入范围

QLineEdit *lineEdit = new QLineEdit(this);

611
来自专栏数据结构与算法

32:行程长度编码

32:行程长度编码 总时间限制: 1000ms 内存限制: 65536kB描述 在数据压缩中,一个常用的途径是行程长度压缩。对于一个待压缩的字符串而言,我们可...

3236
来自专栏Petrichor的专栏

tensorflow: Shapes and Shaping 探究

591
来自专栏前端说吧

CSS3-box-flex弹性盒布局

3328
来自专栏深度学习之tensorflow实战篇

把一个矩阵行优先展成一个向量,numpy.ravel() vs numpy.flatten()区别

首先声明两者所要实现的功能是一致的(将多维数组降位一维),两者的区别在于返回拷贝(copy)还是返回视图(view),numpy.flatten()返回一份拷贝...

3286
来自专栏和蔼的张星的图像处理专栏

162. 矩阵归零先找为零的位置,再分别置零

给定一个m×n矩阵,如果一个元素是0,则将其所在行和列全部元素变成0。 需要在原矩阵上完成操作。

771
来自专栏跟着阿笨一起玩NET

利用vertical-align:middle实现在整个页面居中

如果想让一个div或一张图片相对于整个页面居中,用vertical-align:middle可以很简单地解决。

591

扫码关注云+社区