记账本开发记录——第六天（2020.1.22）

在学习JQ之前，我上网百度了一下，看看是否有学习该部分的必要。根据网友所说，虽然JQ的使用率不比以前，但作为一个十分经典的框架，仍然值得学习。现在很多框架都依赖于JQ，这点也是不容忽略的。在JQ中的AJAX也是个很多公司需要的功能。总的来说对于初学者来说学习JQ还是很有必要的。

在学习了一部分JS的基础上，今天学习了jQuery的基本操作。jQuery其实就是js query(查询)，从名字可以看到，jQuery是对JS代码的一个简单化的框架。运用JQ可以很简单的编写出用JS来说比较复杂的案例。今天的学习主要是熟悉了JQ里面的基本操作，以及使用JQ重写了前几天用JS的写的几个案例。以下是代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JS与JQ页面加载区别</title>
        <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
        <script>
            window.onload = function(){
                alert("张三");
            }
            //传统的方式页面加载会存在覆盖问题,加载比JQ慢(整个页面加载完毕<包括里面的其他内容>)
            window.onload = function(){
                alert("老王");
            }
            //JQ的加载比JS加载要快！（当整个DOM树结构绘制完毕就会加载）
            jQuery(document).ready(function(){
            alert("李四");
            });
            //JQ不存在覆盖问题，加载的时候顺序执行
            $(document).ready(function(){
                alert("王五");
            });
            //简写方式
            $(function(){
                alert("周五");
            });
        </script>
    </head>
    <body>
    </body>
</html>

JS和JQ加载的区别

JQ是一个JS框架，在使用前需要导入JQ的js文件。据视频中讲述，JQ有很多版本，目前常使用的为1.8.4。在这个小DEMO中，我们可以看到JQ的加载方式要比JS简单的多，同时也有效的解决了JS的一部分固定问题。

之后，学习了JQ的基本操作和知识后，进行了首页定时弹出广告的重构。使用了JQ自带的一些方法：

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8">
  5         <title>首页</title>
  6         <style>
  7             #father {
  8                 border: 0px solid red;
  9                 width: 1300px;
 10                 height: 2000px;
 11                 margin: auto;
 12             }
 13
 14             #logo {
 15                 border: 0px solid black;
 16                 width: 1300px;
 17                 height: 50px;
 18             }
 19
 20             .top {
 21                 border: 0px solid blue;
 22                 width: 431px;
 23                 height: 50px;
 24                 float: left;
 25             }
 26
 27             #top {
 28                 padding-top: 12px;
 29                 height: 38px;
 30             }
 31
 32             #menu {
 33                 border: 0px solid red;
 34                 width: 1300px;
 35                 height: 50px;
 36                 background-color: black;
 37                 margin-bottom: 10px;
 38             }
 39
 40             ul li {
 41                 display: inline;
 42                 color: white;
 43             }
 44
 45             #product {
 46                 border: 0px solid red;
 47                 width: 1300px;
 48                 height: 558px;
 49             }
 50
 51             #product_top {
 52                 border: 0px solid blue;
 53                 width: 100%;
 54                 height: 45px;
 55                 padding-top: 8px;
 56             }
 57
 58             #product_bottom {
 59                 border: 0px solid green;
 60                 width: 100%;
 61                 height: 500px;
 62             }
 63
 64             #product_bottom_left {
 65                 border: 0px solid red;
 66                 width: 200px;
 67                 height: 500px;
 68                 float: left;
 69             }
 70
 71             #product_bottom_right {
 72                 border: 0px solid blue;
 73                 width: 1094px;
 74                 height: 500px;
 75                 float: left;
 76             }
 77
 78             #big {
 79                 border: 0px solid red;
 80                 width: 544px;
 81                 height: 248px;
 82                 float: left;
 83             }
 84
 85             .small {
 86                 border: 0px solid blue;
 87                 width: 180px;
 88                 height: 248px;
 89                 float: left;
 90                 /* 让内部内容居中 */
 91                 text-align: center;
 92             }
 93
 94             #bottom {
 95                 text-align: center;
 96             }
 97
 98             a {
 99                 text-decoration: none;
100             }
101         </style>
102         <script src="../js/jquery-1.8.3.js"></script>
103         <script>
104             $(function(){
105                 //1.书写显示广告图片的定时操作
106                 time = setInterval("showAd()",3000);
107             });
108             //2.书写显示广告图片的函数
109             function showAd(){
110                 //3.获取广告图片,并让其显示
111                 $("#img2").fadeIn(4000);
112                 //4.清除显示图片的定时操作
113                 clearInterval(time);
114                 //5.设置隐藏图片的定时操作
115                 time = setInterval("hiddenAd()",3000);
116             }
117             function hiddenAd(){
118                 //6.获取广告图片,并让其隐藏
119                 $("#img2").fadeOut(4000);
120                 //7.清除隐藏图片的定时操作
121                 clearInterval(time);
122             }
123         </script>
124     </head>
125     <body onload="init()">
126         <div id="father">
127             <!-- 定时弹出广告图片位置 -->
128             <img src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%" style="display: none;" id="img2">
129             <!-- 1.logo部分 -->
130             <div id="logo">
131                 <div class="top">
132                     <img src="../img/logo2.png" height="46px">
133                 </div>
134                 <div class="top">
135                     <img src="../img/header.png" height="46px">
136                 </div>
137                 <div class="top" id="top">
138                     <a href="#">登录</a>
139                     <a href="#">注册</a>
140                     <a href="#">购物车</a>
141                 </div>
142             </div>
143             <!-- 2.导航栏部分 -->
144             <div id="menu">
145                 <ul>
146                     <a href="#">
147                         <li style="font-size:20px">首页</li>
148                     </a>&nbsp;&nbsp;&nbsp;&nbsp;
149                     <a href="#">
150                         <li>手机数码</li>
151                     </a>&nbsp;&nbsp;&nbsp;&nbsp;
152                     <a href="#">
153                         <li>家用电器</li>
154                     </a>&nbsp;&nbsp;&nbsp;&nbsp;
155                     <a href="#">
156                         <li>鞋靴箱包</li>
157                     </a>&nbsp;&nbsp;&nbsp;&nbsp;
158                     <a href="#">
159                         <li>孕婴保健</li>
160                     </a>&nbsp;&nbsp;&nbsp;&nbsp;
161                     <a href="#">
162                         <li>奢侈品</li>
163                     </a>
164                 </ul>
165             </div>
166             <!-- 3.轮播图部分 -->
167             <div>
168                 <img src="../img/1.jpg" width="100%" id="img1">
169             </div>
170             <!-- 4.最新商品 -->
171             <div id="product">
172                 <div id="product_top">
173                     &nbsp;&nbsp;&nbsp;
174                     <span style="font-size: 25px;">最新商品</span>&nbsp;&nbsp;&nbsp;
175                     <img src="../img/title2.jpg">
176                 </div>
177                 <div id="product_bottom">
178                     <div id="product_bottom_left">
179                         <img src="../img/big01.jpg" width="100%" height="100%">
180                     </div>
181                     <div id="product_bottom_right">
182                         <div id="big">
183                             <a href="#"><img src="../img/middle01.jpg" width="100%" height="100%"></a>
184                         </div>
185                         <div class="small">
186                             <img src="../img/small03.jpg">
187                             <a href="#">
188                                 <p style="color:gray;">电炖锅</p>
189                             </a>
190                             <p style="color:red">￥399</p>
191                         </div>
192                         <div class="small">
193                             <img src="../img/small03.jpg">
194                             <a href="#">
195                                 <p style="color:gray;">电炖锅</p>
196                             </a>
197                             <p style="color:red">￥399</p>
198                         </div>
199                         <div class="small">
200                             <img src="../img/small03.jpg">
201                             <a href="#">
202                                 <p style="color:gray;">电炖锅</p>
203                             </a>
204                             <p style="color:red">￥399</p>
205                         </div>
206                         <div class="small">
207                             <img src="../img/small03.jpg">
208                             <a href="#">
209                                 <p style="color:gray;">电炖锅</p>
210                             </a>
211                             <p style="color:red">￥399</p>
212                         </div>
213                         <div class="small">
214                             <img src="../img/small03.jpg">
215                             <a href="#">
216                                 <p style="color:gray;">电炖锅</p>
217                             </a>
218                             <p style="color:red">￥399</p>
219                         </div>
220                         <div class="small">
221                             <img src="../img/small03.jpg">
222                             <a href="#">
223                                 <p style="color:gray;">电炖锅</p>
224                             </a>
225                             <p style="color:red">￥399</p>
226                         </div>
227                         <div class="small">
228                             <img src="../img/small03.jpg">
229                             <a href="#">
230                                 <p style="color:gray;">电炖锅</p>
231                             </a>
232                             <p style="color:red">￥399</p>
233                         </div>
234                         <div class="small">
235                             <img src="../img/small03.jpg">
236                             <a href="#">
237                                 <p style="color:gray;">电炖锅</p>
238                             </a>
239                             <p style="color:red">￥399</p>
240                         </div>
241                         <div class="small">
242                             <img src="../img/small03.jpg">
243                             <a href="#">
244                                 <p style="color:gray;">电炖锅</p>
245                             </a>
246                             <p style="color:red">￥399</p>
247                         </div>
248                     </div>
249                 </div>
250             </div>
251             <!-- 5.广告图片 -->
252             <div>
253                 <img src="../img/ad.jpg" width="100%" height="100%">
254             </div>
255             <!-- 6.热门商品 -->
256             <div id="product">
257                 <div id="product_top">
258                     &nbsp;&nbsp;&nbsp;
259                     <span style="font-size: 25px;">热门商品</span>&nbsp;&nbsp;&nbsp;
260                     <img src="../img/title2.jpg">
261                 </div>
262                 <div id="product_bottom">
263                     <div id="product_bottom_left">
264                         <img src="../img/big01.jpg" width="100%" height="100%">
265                     </div>
266                     <div id="product_bottom_right">
267                         <div id="big">
268                             <a href="#"><img src="../img/middle01.jpg" width="100%" height="100%"></a>
269                         </div>
270                         <div class="small">
271                             <img src="../img/small03.jpg">
272                             <a href="#">
273                                 <p style="color:gray;">电炖锅</p>
274                             </a>
275                             <p style="color:red">￥399</p>
276                         </div>
277                         <div class="small">
278                             <img src="../img/small03.jpg">
279                             <a href="#">
280                                 <p style="color:gray;">电炖锅</p>
281                             </a>
282                             <p style="color:red">￥399</p>
283                         </div>
284                         <div class="small">
285                             <img src="../img/small03.jpg">
286                             <a href="#">
287                                 <p style="color:gray;">电炖锅</p>
288                             </a>
289                             <p style="color:red">￥399</p>
290                         </div>
291                         <div class="small">
292                             <img src="../img/small03.jpg">
293                             <a href="#">
294                                 <p style="color:gray;">电炖锅</p>
295                             </a>
296                             <p style="color:red">￥399</p>
297                         </div>
298                         <div class="small">
299                             <img src="../img/small03.jpg">
300                             <a href="#">
301                                 <p style="color:gray;">电炖锅</p>
302                             </a>
303                             <p style="color:red">￥399</p>
304                         </div>
305                         <div class="small">
306                             <img src="../img/small03.jpg">
307                             <a href="#">
308                                 <p style="color:gray;">电炖锅</p>
309                             </a>
310                             <p style="color:red">￥399</p>
311                         </div>
312                         <div class="small">
313                             <img src="../img/small03.jpg">
314                             <a href="#">
315                                 <p style="color:gray;">电炖锅</p>
316                             </a>
317                             <p style="color:red">￥399</p>
318                         </div>
319                         <div class="small">
320                             <img src="../img/small03.jpg">
321                             <a href="#">
322                                 <p style="color:gray;">电炖锅</p>
323                             </a>
324                             <p style="color:red">￥399</p>
325                         </div>
326                         <div class="small">
327                             <img src="../img/small03.jpg">
328                             <a href="#">
329                                 <p style="color:gray;">电炖锅</p>
330                             </a>
331                             <p style="color:red">￥399</p>
332                         </div>
333                     </div>
334                 </div>
335             </div>
336             <!-- 7.广告图片 -->
337             <div>
338                 <img src="../img/footer.jpg" width="100%">
339             </div>
340             <!-- 8.友情链接和版权信息 -->
341             <div id="bottom">
342                 <a href="#">关于我们</a>&nbsp;&nbsp;
343                 <a href="#">联系我们</a>&nbsp;&nbsp;
344                 <a href="#">招贤纳士</a>&nbsp;&nbsp;
345                 <a href="#">法律声明</a>&nbsp;&nbsp;
346                 <a href="#">友情链接</a>&nbsp;&nbsp;
347                 <a href="#">支付方式</a>&nbsp;&nbsp;
348                 <a href="#">配送方式</a>&nbsp;&nbsp;
349                 <a href="#">服务声明</a>&nbsp;&nbsp;
350                 <a href="#">广告声明</a>
351                 <p>
352                     Copyright © 2005-2016 传智商城 版权所有
353                 </p>
354             </div>
355         </div>
356     </body>
357 </html>

JQ完成首页定时弹出广告

在完成了这个案例后，学习了JQ选择器的相关知识。在JQ中，有五种选择器：基本选择器，层级选择器，过滤选择器，属性选择器，表单选择器，并就每个选择器进行了DEMO示例，这里不再贴代码了，没什么技术含量。

完成了学习JQ选择器的知识后，直接开始重构实现表格隔行换色的功能。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>使用jQuery完成表格隔行换色</title>
        <link rel="stylesheet" href="../css/style.css">
        <script src="../js/jquery-1.8.3.js"></script>
        <script>
            // 1.页面加载
            $(function(){
                // 2.获取tbody下面的偶数行并设置颜色
                // $("tbody>tr:even").css("background-color","yellow");
                // // 3.获取tbody下面的奇数行并设置颜色
                // $("tbody>tr:odd").css("background-color","red");

                // 2.获取tbody下面的偶数行并设置颜色
                $("tbody tr:even").addClass("even");
                // 3.获取tbody下面的奇数行并设置颜色
                $("tbody tr:odd").addClass("odd");
            });
        </script>
    </head>
    <body>
        <table border="1" width="500" height="50" align="center" id="tbl" id="tbl">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                </tr>
            </thead>
            <tbody>
                <tr >
                    <td>1</td>
                    <td>张三</td>
                    <td>22</td>
                </tr>
                <tr >
                    <td>2</td>
                    <td>李四</td>
                    <td>25</td>
                </tr>
                <tr >
                    <td>3</td>
                    <td>王五</td>
                    <td>27</td>
                </tr>
                <tr >
                    <td>4</td>
                    <td>赵六</td>
                    <td>29</td>
                </tr>
                <tr >
                    <td>5</td>
                    <td>田七</td>
                    <td>30</td>
                </tr>
                <tr >
                    <td>6</td>
                    <td>汾九</td>
                    <td>20</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

表格隔行变色

可以看到，在JS中需要使用循环的功能，在JQ下直接一行代码就可实现，足可体现JQ的强大功能。

之后，重构了全选和全不选的功能

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>使用jQuery完成复选框的全选和全不选</title>
        <script src="../js/jquery-1.8.3.js"></script>
        <script>
            $(function(){
                $("#select").click(function(){
                    //获取下面所有的复选框并将其选中状态设置跟编号前面的复选框一致
                    //attr方法与JQ的版本有关.在1.8.3及以下有效.
                    $(".selectOne").attr("checked",this.checked);
                });
            });
        </script>
    </head>
    <body>
        <table border="1" width="500" height="50" align="center" id="tbl" >
            <thead>
                <tr>
                    <td colspan="4">
                        <input type="button" value="添加" />
                        <input type="button" value="删除" />
                    </td>
                </tr>
                <tr>
                    <th><input type="checkbox" id="select"></th>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                </tr>
            </thead>
            <tbody>
                <tr >
                    <td><input type="checkbox" class="selectOne"/></td>
                    <td>1</td>
                    <td>张三</td>
                    <td>22</td>
                </tr>
                <tr >
                    <td><input type="checkbox" class="selectOne"/></td>
                    <td>2</td>
                    <td>李四</td>
                    <td>25</td>
                </tr>
                <tr >
                    <td><input type="checkbox" class="selectOne"/></td>
                    <td>3</td>
                    <td>王五</td>
                    <td>27</td>
                </tr>
                <tr >
                    <td><input type="checkbox" class="selectOne"/></td>
                    <td>4</td>
                    <td>赵六</td>
                    <td>29</td>
                </tr>
                <tr >
                    <td><input type="checkbox" class="selectOne"/></td>
                    <td>5</td>
                    <td>田七</td>
                    <td>30</td>
                </tr>
                <tr >
                    <td><input type="checkbox" class="selectOne"/></td>
                    <td>6</td>
                    <td>汾九</td>
                    <td>20</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

JQ实现表格全选和全不选

并且在这里面，使用了直接调用CSS中相关模型的代码，也就是直接调用美工写好的代码。

明天的任务：继续学习JQ的相关知识

原文地址：https://www.cnblogs.com/wushenjiang/p/12231237.html

时间： 2024-09-28 22:22:38

记账本开发记录——第六天（2020.1.22）的相关文章

家庭记账本开发记录（1）

这个寒假前面的时间一直在学习web前端,因为之前开发JavaWeb时,一些界面应用太粗糙,所以利用前段时间系统了解了一下前端技术,以便接下来后端开发的界面美观.再就是今天的关于家庭记账本软件的开发,确定了一下设计思路,其中主要是对数据库的操作比较重要,因为记账的收入支出需要进行数据汇总,一段时间以后用可视化数据报表进行呈现.对收入支出的费用又各有分类,收入有薪资.理财.红包.借入.收债.其他,支出消费.餐饮.购物.住房.交通.通讯.娱乐.医疗.教育.红包.旅行.投资.借出.还债.其他,至于对数据

记账本开发记录——第五天（2020.1.22）

今天继续学习了javascript的相关内容,同时学习了关于表格标签的一些新标签. 首先,学习了如何使表格隔行换色.整体的思路不算复杂,用java里的思路就可以大致理解,以下是效果和代码: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表格隔行换色</title> 6 <script> 7 window.onl

记账本开发记录——第八天（2020.1.26）

在疫情如此严重的现在,在家安心学习. 昨天初一守夜无聊的时候学完了JQ剩下的部分.这里讲到了一个插件validate.使用这个插件可以很方便的进行表单的检验,并且具有很好看的效果样式.以下是代码: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>网站注册页面</title> 6 <style> 7 #contan

记账本开发记录——第三天（2020.1.20）

本来按照今天的原计划来说,应该学习完javascript的基础内容.但今天一天都在干活,到晚上八点才坐到电脑前,已经精疲力尽了.于是简单设计了一下网站的几个页面和大体结构.以下是具体: 网站主界面: 开始记账界面: (希望实现:点击加号后弹出一个界面进行增) (删除时要弹出确认提示) (改时可以更改所有信息,也是弹出一个界面) 账单汇总 (选择汇总条件,目前只计划添加某时间段,如果时间允许增加种类等属性) (查找后输出在某段时间内总花费) 图表数据(尝试使用百度的smartart功能,生成一段时

记账本开发记录——第四天（2020.1.21）

总结:今天学习完了javascript的第一部分基础知识(昨天没学完的)并尝试使用div+css编写了记账本的index.html.以下是具体: 首先,使用javascript完成了首页轮播图效果,使用了setInterval.下面是代码:(实现较为低级) 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>首页</title>

记账本开发记录——第十天（2020.1.28）

今天,简单学习了JDBC连接池的概念和自定义连接池. 所谓连接池,就是连接完后不close,而是归还到连接池内,可以解决数据库连接的性能问题. 对于自定义连接池,我们可以自己创建连接池,然后通过这个连接池进行连接.如下代码: 1 public class MyDataSource implements DataSource{ 2 // 创建一个List集合用于存放多个连接对象. 3 private List<Connection> list = new ArrayList<Connect

记账本开发记录——第七天（2020.1.24）

今天由于除夕以及各种乱七八糟的事,并没有学习完JQ的知识.下面是我学习到的案例: 首先,了解了使用JQ的遍历操作.在JQ中,有两种遍历方法,这里采用的是第二种方法.通过JQ重写了JS的省市二级联动.下面是代码: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用jQuery完成省市二级联动</title> 6 <st

记账本开发记录——第十一天（2020.1.29）

今天,学习了XML的相关知识和反射.其实就是servlet的底层逻辑和运行步骤.为什么我们能通过配置web.xml来让servlet那样运行呢?今天其实就学习了这样的一个问题. 首先,是XML,XML和HTML相似,但不同的是XML可以自定义标签(比如html中规定了a标签就是超链接,但xml中没有任何规定) xml规定每个开始的标签必须有结束标签.比如<hello></hello>,且必须依次对应,如<b><i>hello</b></i&

记账本开发记录——第十二天（2020.1.30）

今天,学习了HTTP协议的相关内容和Servlet的运行原理.HTTP协议,全称叫做超文本传输协议,是一种网络协议,用来定义WEB浏览器与WEB服务器之间交换数据的过程. 在HTTP协议中,分为HTTP请求和HTTP响应(request和response)在HTTP请求中,根据请求方式的不同,内容也有所不同.对于get请求,会将内容放在浏览器URL内,不如post请求安全.post请求会把内容放到request内,而不会显示在浏览器URL内,相对来说要更加的安全. 在请求中有很多固定的参数,作为