标签：清除 函数 重写 demo yellow 十分 js框架 pre 属性
在学习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>
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> 149 <a href="#"> 150 <li>手机数码</li> 151 </a> 152 <a href="#"> 153 <li>家用电器</li> 154 </a> 155 <a href="#"> 156 <li>鞋靴箱包</li> 157 </a> 158 <a href="#"> 159 <li>孕婴保健</li> 160 </a> 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 174 <span style="font-size: 25px;">最新商品</span> 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 259 <span style="font-size: 25px;">热门商品</span> 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> 343 <a href="#">联系我们</a> 344 <a href="#">招贤纳士</a> 345 <a href="#">法律声明</a> 346 <a href="#">友情链接</a> 347 <a href="#">支付方式</a> 348 <a href="#">配送方式</a> 349 <a href="#">服务声明</a> 350 <a href="#">广告声明</a> 351 <p> 352 Copyright © 2005-2016 传智商城 版权所有 353 </p> 354 </div> 355 </div> 356 </body> 357 </html>
在完成了这个案例后，学习了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>
并且在这里面，使用了直接调用CSS中相关模型的代码，也就是直接调用美工写好的代码。
明天的任务：继续学习JQ的相关知识
标签：清除 函数 重写 demo yellow 十分 js框架 pre 属性
原文地址：https://www.cnblogs.com/wushenjiang/p/12231237.html
