jQuery实战:首页广告弹出与表格样式等操作
第四章WEB04_jQuery篇主要讲解了如何利用jQuery这个JavaScript轻量级框架在网页开发中实现一系列功能,包括页面动态交互。本章涉及的具体任务包括: 1. **页面定时广告弹出**: 需求是在首页logo上方定时显示和隐藏广告图片,使用`setInterval`函数配合jQuery的`show()`和`hide()`方法实现。开发者需要理解jQuery的选择器机制,如ID选择器(例如`$("#adImage")`)、元素选择器和类选择器,以及如何将jQuery对象与DOM对象转换以正确操作页面元素。 2. **表格隔行换色**: 通过遍历表格行,利用CSS或jQuery的`css()`方法改变行的背景颜色,使得表格的显示更易阅读。 3. **复选框全选效果**: jQuery的属性操作在此处应用,可能涉及到`.prop()`方法来控制复选框的checked状态,实现全选或反选功能。 4. **省市联动效果**: 通过遍历DOM,实现当用户选择省级行政区时,联动更新对应的市级选项。这需要对DOM结构有深入理解,并利用jQuery的事件处理函数如`change()`。 5. **列表左右选择**: 用户交互事件处理,例如通过`click()`或`on('click', '.listItem')`来触发左侧或右侧的选择操作,可能涉及jQuery的DOM操作,如`.prev()`或`.next()`。 6. **表单校验**: 使用jQuery的验证插件或者自定义逻辑,检查表单输入是否符合规则,确保数据的准确性。 7. **jQuery的引入与使用**: 强调了在HTML页面中引入jQuery库的重要性,区分了不同版本(学习阶段和项目阶段)的选择。同时,所有jQuery代码应放在页面加载完成后执行的函数中,确保浏览器解析完HTML后再运行脚本。 8. **Toggle的使用**: 提到了`toggle()`方法,这是一个双向切换显示/隐藏元素的方法,适用于上述广告图片的隐藏和显示操作。 总结起来,本章重点在于实战训练jQuery的选择器、事件处理、DOM操作和基础功能应用,通过这些任务帮助读者提升对jQuery在网页开发中的实际运用能力。
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>订单信息查看</title> <link href="<%=SystemParam.getSiteRoot()%>/admin/css/web2table.css" rel="stylesheet" type="text/css" /> <link href="<%=SystemParam.getSiteRoot()%>/admin/css/layout.css" rel="stylesheet" type="text/css" /> <link href="<%=SystemParam.getSiteRoot()%>/admin/css/menu.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="<%=SystemParam.getSiteRoot()%>/webui/jquery/jquery-1.9.0.js"></script> </head> <body> 订单管理-> 查看订单
订单管理-> 查看订单
订单号: | ${requestScope.dingdan.ddno} | 下单时间: | ${requestScope.dingdan.xiadantime} |
下单人: | ${requestScope.dingdan.xiadanren} | 总价格: | ${requestScope.dingdan.totalprice} |
状态: | ${requestScope.dingdan.status} | 收货地址: | ${requestScope.dingdan.shouhuodizhi} |
收货人电话: | ${requestScope.dingdan.shrtel} | 收货人姓名: | ${requestScope.dingdan.shrname} |