JQuery的使用案例(二级联动,隔行换色,轮播图,广告插入)
JQuery的使用案例
(一)利用JQuery完成省市二级联动
第一步:确定事件(change事件),在绑定的函数里面获取用户选择的省份
第二步:创建二维数组来存储省份和城市
第三步:遍历二维数组中的省份(与用户选择的省份进行比较)【使用JQ的遍历操作】
第四步:接着遍历数组中的城市
第五步:创建一个城市文本节点
第六步:创建option元素节点
第七步:将文本节点添加到元素节点中【使用JQ的文档操作方法】
第八步:获取第二个下拉列表并将option元素节点添加进去
第九步:清除第二个下拉列表的option内容
代码实现:
- <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
- <script>
- $(function(){
- //2.创建二维数组用于存储省份和城市
- var cities = new Array(3);
- cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
- cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
- cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
- cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");
- $("#province").change(function(){
- //9.清除第二个下拉框里的内容
- $("#city").empty();
- //1.获取选择的省份
- var val=this.value;
- //3.进行省份的遍历,找出其下标
- $.each(cities,function(i,n) {
- if(val==i)
- {
- //4.遍历数组中的城市
- $.each(cities[i],function (j,m) {
- //5.创建城市文本节点
- var t=document.createTextNode(m);
- //6.创建option元素节点
- var x=document.createElement("option");
- //7.将文本节点添加到元素节点中
- $(x).append(t);
- //8.将元素节点添加到第二个下拉框下
- $(x).appendTo($("#city"));
- });
- }
- });
- });
- });
- </script>
html代码:
- <div id="contanier">
- <div id="content">
- <table border="1" align="center" cellpadding="0" cellspacing="0" width="70%" height="70%" bgcolor="white">
- <form method="get" action="#" onsubmit="return checkForm()">
- <tr>
- <td colspan="2" align="center">
- <font size="5">会员注册</font>
- </td>
- </tr>
- <tr>
- <td>
- 用户名
- </td>
- <td>
- <input type="text" name="username" id="username" onfocus="showTips('username','必须以字母开头')" onblur="check('username','用户名不能为空')" /><span id="usernamespan"></span>
- </td>
- </tr>
- <tr>
- <td>密码</td>
- <td>
- <input type="password" name="password" id="password" onfocus="showTips('password','密码长度不能低于6位!')" onblur="check('password','密码不能为空!')" /><span id="passwordspan"></span>
- </td>
- </tr>
- <tr>
- <td>确认密码</td>
- <td>
- <input type="password" name="repassword" />
- </td>
- </tr>
- <tr>
- <td>email</td>
- <td>
- <input type="text" name="email" id="email" />
- </td>
- </tr>
- <tr>
- <td>姓名</td>
- <td>
- <input type="text" name="name" />
- </td>
- </tr>
- <!--1.编写HTML文件部分的内容-->
- <tr>
- <td>籍贯</td>
- <td>
- <!--2.确定事件,通过函数传参的方式拿到改变后的城市-->
- <select id="province">
- <option>--请选择--</option>
- <option value="0">湖北</option>
- <option value="1">湖南</option>
- <option value="2">河北</option>
- <option value="3">河南</option>
- </select>
- <select id="city">
- </select>
- </td>
- </tr>
- <tr>
- <td>性别</td>
- <td>
- <input type="radio" name="sex" value="男"/>男
- <input type="radio" name="sex" value="女"/>女
- </td>
- </tr>
- <tr>
- <td>出生日期</td>
- <td>
- <input type="text" name="birthday" />
- </td>
- </tr>
- <tr>
- <td>验证码</td>
- <td>
- <input type="text" name="yanzhengma" />
- <img src="img/yanzhengma.png" />
- </td>
- </tr>
- <tr>
- <td colspan="2">
- <input type="submit" value="注册" />
- </td>
- </tr>
- </form>
- </table>
- </div>
- </div>
成功的截图:
当选择省份后:
(二)利用JQuery来实现表格隔行换色和全选操作
隔行换色的实现:
第一步:引入jquery的类库
第二步:直接写页面加载函数
第三步:直接使用jquery的选择器(组合选择)拿到需要操作的元素(奇数行和偶数行)
第四步:分别使用CSS的方法(css(name,value))对奇数行和偶数行设置背景颜色。
全选操作:
第一步:引入jquery文件
第二步:书写页面加载函数
第三步:为上面的复选框绑定单击事件
第四步:将下面所有的复选框的选中状态设置成跟上面的一致!(attr)
上代码:
- <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
- <script>
- //1.页面加载
- $(function(){
- //第一种方法实现隔行换色
- /*$("tbody tr:even").css("background-color","yellow");
- $("tbody tr:odd").css("background-color","pink");*/
- //第二种方法利用写好的css实现隔行换色
- $("tbody tr:even").addClass("even");
- $("tbody tr:odd").addClass("odd");
- //实现全选
- $("#check").click(function(){
- $(".checkOne").attr("checked",this.checked);
- });
- });
- </script>
html代码:
- <table border="1" width="500" height="50" align="center" id="tbl" id="tbl">
- <thead>
- <tr>
- <th>
- <input type="checkbox" id="check" />
- </th>
- <th>编号</th>
- <th>姓名</th>
- <th>年龄</th>
- </tr>
- </thead>
- <tbody>
- <tr >
- <td>
- <input type="checkbox" class="checkOne"/>
- </td>
- <td>1</td>
- <td>张三</td>
- <td>22</td>
- </tr>
- <tr >
- <td>
- <input type="checkbox" class="checkOne"/>
- </td>
- <td>2</td>
- <td>李四</td>
- <td>25</td>
- </tr>
- <tr >
- <td>
- <input type="checkbox" class="checkOne"/>
- </td>
- <td>3</td>
- <td>王五</td>
- <td>27</td>
- </tr>
- <tr >
- <td>
- <input type="checkbox" class="checkOne"/>
- </td>
- <td>4</td>
- <td>赵六</td>
- <td>29</td>
- </tr>
- <tr >
- <td>
- <input type="checkbox" class="checkOne"/>
- </td>
- <td>5</td>
- <td>田七</td>
- <td>30</td>
- </tr>
- <tr >
- <td>
- <input type="checkbox" class="checkOne"/>
- </td>
- <td>6</td>
- <td>汾九</td>
- <td>20</td>
- </tr>
- </tbody>
- </table>
实现截图:
全选后:
(三)轮播图的设置与广告的定时播放与隐藏
广告的定时播放与隐藏
第一步:引入jQuery相关的文件
第二步:书写页面加载函数
第三步:在页面加载函数中,获取显示广告图片的元素。
第四步:设置定时操作(显示广告图片的函数)
第五步:在显示广告图片的函数中,使用jQuery的方法让广告图片显示(show())
第六步:清除显示广告图片的定时操作
第七步:设置定时操作(隐藏广告图片的函数)
第八步:在隐藏广告图片的函数中,使用jQuery的方法让广告图片隐藏(hide())
第九步:清除隐藏广告图片的定时操作
轮播图的设置
第一步:书写轮图片显示的定时操作
第二步:获取图片位置并设置src属性值
代码:
- <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
- <script>
- //广告的播放和隐藏
- $(function(){
- //1.书写广告的定时操作
- time = setInterval("changeShow()",3000);
- });
- function changeShow()
- {
- //2.获取广告并让其显示
- $("#img2").show(1000);
- //3.清除显示图片定时操作
- clearInterval(time);
- //4.设置隐藏图片的定时操作
- time = setInterval("hidden()",3000);
- }
- function hidden()
- {
- //5.获取图片并隐藏
- $("#img2").hide();
- //6.清楚隐藏的定时操作
- clearInterval(time);
- }
- function init(){
- //1.书写轮图片显示的定时操作
- setInterval("changeImg()",2000);
- }
- //2.书写函数
- var i=0
- function changeImg(){
- i++;
- //3.获取图片位置并设置src属性值
- document.getElementById("img1").src="img/"+i+".jpg";
- if(i==3){
- i=0;
- }
- }
- </script>
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
对于今天的JQuery的学习做个简要的总结:
首先其功能很强大,还有很多未知的东西值得探索,不过掌握最基本的语法后,再结合相关的操作,就可以按照自己的意图去实现一些东西
继续加油!!!!
JQuery的使用案例(二级联动,隔行换色,轮播图,广告插入)的更多相关文章
- jQuery应用实例2:表格隔行换色
这里是用JS实现的:http://www.cnblogs.com/xuyiqing/p/8376312.html 接下来利用上一篇提到的选择器利用jQuery实现: 发现原来多行代码这里只需要两行: ...
- jQuery入门——实现列表的显示隐藏与实现轮播图
列表的显示与隐藏 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head& ...
- JavaScript的案例(数据校验,js轮播图,页面定时弹窗)
1.数据校验 步骤 1.确定事件(onsubmit)并绑定一个函数 2.书写这个函数,获取数据,并绑定id 3. ...
- Atitit.隔行换色 变色 css3 结构性伪类选择器
Atitit.隔行换色 变色 css3 结构性伪类选择器 1.1. css3隔行换色扩展阅读 1 1.2. 结构伪选择器 1 1.3. jQuery 选择器2 1.1. css3隔行换色扩展阅读 原 ...
- JS实现自定义工具类,隔行换色、复选框全选、隔行高亮等
很多功能都可以放在js的工具类中,在使用的时候直接调用 本次实现的功能包括: /** 0.当点击表的整行的任意位置时,第一列的复选框或者单选框均选中 1.隔行换色 2.复选框的全选效果 3.实现表格 ...
- jQuery淡入淡出效果轮播图
用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div. html结构如下: & ...
- jQuery实现简易轮播图的效果
(图片素材取自于小米官网) 刚开始接触jQuery的学习,个人觉得如果为了实现多数的动态效果,jQuery的确很简易方便. 下面简易的轮播图效果,还请前辈多多指教~ (努力学习react vue an ...
- JQuery案例一:实现表格隔行换色
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jQuery实现表格隔行换色且感应鼠标高亮行变色
jQuery插件实现表格隔行换色且感应鼠标高亮行变色 http://www.jb51.net/article/41568.htm jquery 操作DOM的基本用法分享http://www.jb51. ...
随机推荐
- rhel7 学习第二天
参加<Linux就该这么学>在线培训的第二天,学习了虚拟环环境的搭建和红帽7的安装,同时也学习了rhel7的基本命令格式,以及systemctl的使用.
- 交叉编译用于生成aarch64指令的GCC (9.2)
参考 Building GCC as a cross compiler for Raspberry Pi How to Build a GCC Cross-Compiler 环境 PC: ubuntu ...
- lua使用ffi调用c程序的函数
参考: https://blog.csdn.net/weiwangchao_/article/details/16880401 http://luajit.org/ext_c_api.html h ...
- Kustomize安装配置入门文档
一,简介 kustomize是sig-cli的一个子项目,它的设计目的是给kubernetes的用户提供一种可以重复使用同一套配置的声明式应用管理,从而在配置工作中用户只需要管理和维护kubernet ...
- nginx 缓存服务
1.nginx 缓存 upstream imooc { server 116.62.103.228:8001; server 116.62.103.228:8002; server 116.62.10 ...
- springtask 基本使用和 cron 表达式
springtask 的基本使用和 cron 表达式 spring 容器依赖 <dependency> <groupId>org.springframework</gro ...
- jQuery中关于Ajax的详解
原文来自:http://developer.51cto.com/art/201205/335732.htm Ajax让用户页面丰富起来, 增强用户体验. Ajax是所有Web开发的必修课. 虽然Aja ...
- 9-3 deepsort在win10配置
win10+python3.5+tensorflow https://blog.csdn.net/Draw_1999/article/details/79735677 deep-sort https: ...
- Pandas | 16 聚合
当有了滚动,扩展和ewm对象创建了以后,就有几种方法可以对数据执行聚合. DataFrame应用聚合 可以通过向整个DataFrame传递一个函数来进行聚合,或者通过标准的获取项目方法来选择一个列. ...
- Pandas | 03 DataFrame 数据帧
数据帧(DataFrame)是二维数据结构,即数据以行和列的表格方式排列. 数据帧(DataFrame)的功能特点: 潜在的列是不同的类型 大小可变 标记轴(行和列) 可以对行和列执行算术运算 结构体 ...