JQuery的使用案例

(一)利用JQuery完成省市二级联动

第一步:确定事件(change事件),在绑定的函数里面获取用户选择的省份

第二步:创建二维数组来存储省份和城市

第三步:遍历二维数组中的省份(与用户选择的省份进行比较)【使用JQ的遍历操作】

第四步:接着遍历数组中的城市

第五步:创建一个城市文本节点

第六步:创建option元素节点

第七步:将文本节点添加到元素节点中【使用JQ的文档操作方法】

第八步:获取第二个下拉列表并将option元素节点添加进去

第九步:清除第二个下拉列表的option内容

代码实现:

  1. <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
  2. <script>
  3. $(function(){
  4. //2.创建二维数组用于存储省份和城市
  5. var cities = new Array(3);
  6. cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
  7. cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
  8. cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
  9. cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");
  10.  
  11. $("#province").change(function(){
  12. //9.清除第二个下拉框里的内容
  13. $("#city").empty();
  14. //1.获取选择的省份
  15. var val=this.value;
  16. //3.进行省份的遍历,找出其下标
  17. $.each(cities,function(i,n) {
  18. if(val==i)
  19. {
  20. //4.遍历数组中的城市
  21. $.each(cities[i],function (j,m) {
  22. //5.创建城市文本节点
  23. var t=document.createTextNode(m);
  24. //6.创建option元素节点
  25. var x=document.createElement("option");
  26. //7.将文本节点添加到元素节点中
  27. $(x).append(t);
  28. //8.将元素节点添加到第二个下拉框下
  29. $(x).appendTo($("#city"));
  30.  
  31. });
  32. }
  33. });
  34. });
  35. });
  36. </script>

html代码:

  1. <div id="contanier">
  2. <div id="content">
  3. <table border="1" align="center" cellpadding="0" cellspacing="0" width="70%" height="70%" bgcolor="white">
  4. <form method="get" action="#" onsubmit="return checkForm()">
  5. <tr>
  6. <td colspan="2" align="center">
  7. <font size="5">会员注册</font>
  8. </td>
  9.  
  10. </tr>
  11. <tr>
  12. <td>
  13. 用户名
  14. </td>
  15. <td>
  16. <input type="text" name="username" id="username" onfocus="showTips('username','必须以字母开头')" onblur="check('username','用户名不能为空')" /><span id="usernamespan"></span>
  17. </td>
  18. </tr>
  19. <tr>
  20. <td>密码</td>
  21. <td>
  22. <input type="password" name="password" id="password" onfocus="showTips('password','密码长度不能低于6位!')" onblur="check('password','密码不能为空!')" /><span id="passwordspan"></span>
  23. </td>
  24. </tr>
  25. <tr>
  26. <td>确认密码</td>
  27. <td>
  28. <input type="password" name="repassword" />
  29. </td>
  30. </tr>
  31. <tr>
  32. <td>email</td>
  33. <td>
  34. <input type="text" name="email" id="email" />
  35. </td>
  36. </tr>
  37. <tr>
  38. <td>姓名</td>
  39. <td>
  40. <input type="text" name="name" />
  41. </td>
  42. </tr>
  43. <!--1.编写HTML文件部分的内容-->
  44. <tr>
  45. <td>籍贯</td>
  46. <td>
  47. <!--2.确定事件,通过函数传参的方式拿到改变后的城市-->
  48. <select id="province">
  49. <option>--请选择--</option>
  50. <option value="0">湖北</option>
  51. <option value="1">湖南</option>
  52. <option value="2">河北</option>
  53. <option value="3">河南</option>
  54. </select>
  55. <select id="city">
  56.  
  57. </select>
  58. </td>
  59. </tr>
  60. <tr>
  61. <td>性别</td>
  62. <td>
  63. <input type="radio" name="sex" value="男"/>
  64. <input type="radio" name="sex" value="女"/>
  65. </td>
  66. </tr>
  67. <tr>
  68. <td>出生日期</td>
  69. <td>
  70. <input type="text" name="birthday" />
  71. </td>
  72. </tr>
  73. <tr>
  74. <td>验证码</td>
  75. <td>
  76. <input type="text" name="yanzhengma" />
  77. <img src="img/yanzhengma.png" />
  78. </td>
  79. </tr>
  80. <tr>
  81. <td colspan="2">
  82. <input type="submit" value="注册" />
  83. </td>
  84. </tr>
  85. </form>
  86. </table>
  87. </div>
  88. </div>

成功的截图:

当选择省份后:

(二)利用JQuery来实现表格隔行换色和全选操作

隔行换色的实现:

第一步:引入jquery的类库

第二步:直接写页面加载函数

第三步:直接使用jquery的选择器(组合选择)拿到需要操作的元素(奇数行和偶数行)

第四步:分别使用CSS的方法(css(name,value))对奇数行和偶数行设置背景颜色。

全选操作:

第一步:引入jquery文件

第二步:书写页面加载函数

第三步:为上面的复选框绑定单击事件

第四步:将下面所有的复选框的选中状态设置成跟上面的一致!(attr)

上代码:

  1. <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
  2. <script>
  3. //1.页面加载
  4. $(function(){
  5. //第一种方法实现隔行换色
  6. /*$("tbody tr:even").css("background-color","yellow");
  7. $("tbody tr:odd").css("background-color","pink");*/
  8.  
  9. //第二种方法利用写好的css实现隔行换色
  10. $("tbody tr:even").addClass("even");
  11. $("tbody tr:odd").addClass("odd");
  12. //实现全选
  13. $("#check").click(function(){
  14. $(".checkOne").attr("checked",this.checked);
  15. });
  16. });
  17. </script>

html代码:

  1. <table border="1" width="500" height="50" align="center" id="tbl" id="tbl">
  2. <thead>
  3. <tr>
  4. <th>
  5. <input type="checkbox" id="check" />
  6. </th>
  7. <th>编号</th>
  8. <th>姓名</th>
  9. <th>年龄</th>
  10. </tr>
  11. </thead>
  12. <tbody>
  13. <tr >
  14. <td>
  15. <input type="checkbox" class="checkOne"/>
  16. </td>
  17. <td>1</td>
  18. <td>张三</td>
  19. <td>22</td>
  20. </tr>
  21. <tr >
  22. <td>
  23. <input type="checkbox" class="checkOne"/>
  24. </td>
  25. <td>2</td>
  26. <td>李四</td>
  27. <td>25</td>
  28. </tr>
  29. <tr >
  30. <td>
  31. <input type="checkbox" class="checkOne"/>
  32. </td>
  33. <td>3</td>
  34. <td>王五</td>
  35. <td>27</td>
  36. </tr>
  37. <tr >
  38. <td>
  39. <input type="checkbox" class="checkOne"/>
  40. </td>
  41. <td>4</td>
  42. <td>赵六</td>
  43. <td>29</td>
  44. </tr>
  45. <tr >
  46. <td>
  47. <input type="checkbox" class="checkOne"/>
  48. </td>
  49. <td>5</td>
  50. <td>田七</td>
  51. <td>30</td>
  52. </tr>
  53. <tr >
  54. <td>
  55. <input type="checkbox" class="checkOne"/>
  56. </td>
  57. <td>6</td>
  58. <td>汾九</td>
  59. <td>20</td>
  60. </tr>
  61. </tbody>
  62. </table>

实现截图:

全选后:

(三)轮播图的设置与广告的定时播放与隐藏

广告的定时播放与隐藏

第一步:引入jQuery相关的文件

第二步:书写页面加载函数

第三步:在页面加载函数中,获取显示广告图片的元素。

第四步:设置定时操作(显示广告图片的函数)

第五步:在显示广告图片的函数中,使用jQuery的方法让广告图片显示(show())

第六步:清除显示广告图片的定时操作

第七步:设置定时操作(隐藏广告图片的函数)

第八步:在隐藏广告图片的函数中,使用jQuery的方法让广告图片隐藏(hide())

第九步:清除隐藏广告图片的定时操作

轮播图的设置

第一步:书写轮图片显示的定时操作

第二步:获取图片位置并设置src属性值

代码:

  1. <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
  2. <script>
  3. //广告的播放和隐藏
  4. $(function(){
  5. //1.书写广告的定时操作
  6. time = setInterval("changeShow()",3000);
  7. });
  8. function changeShow()
  9. {
  10. //2.获取广告并让其显示
  11. $("#img2").show(1000);
  12. //3.清除显示图片定时操作
  13. clearInterval(time);
  14. //4.设置隐藏图片的定时操作
  15. time = setInterval("hidden()",3000);
  16. }
  17. function hidden()
  18. {
  19. //5.获取图片并隐藏
  20. $("#img2").hide();
  21. //6.清楚隐藏的定时操作
  22. clearInterval(time);
  23. }
  24.  
  25. function init(){
  26. //1.书写轮图片显示的定时操作
  27. setInterval("changeImg()",2000);
  28. }
  29.  
  30. //2.书写函数
  31. var i=0
  32. function changeImg(){
  33. i++;
  34. //3.获取图片位置并设置src属性值
  35. document.getElementById("img1").src="img/"+i+".jpg";
  36. if(i==3){
  37. i=0;
  38. }
  39. }
  40. </script>

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

对于今天的JQuery的学习做个简要的总结:

首先其功能很强大,还有很多未知的东西值得探索,不过掌握最基本的语法后,再结合相关的操作,就可以按照自己的意图去实现一些东西

继续加油!!!!

JQuery的使用案例(二级联动,隔行换色,轮播图,广告插入)的更多相关文章

  1. jQuery应用实例2:表格隔行换色

    这里是用JS实现的:http://www.cnblogs.com/xuyiqing/p/8376312.html 接下来利用上一篇提到的选择器利用jQuery实现: 发现原来多行代码这里只需要两行: ...

  2. jQuery入门——实现列表的显示隐藏与实现轮播图

    列表的显示与隐藏 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head& ...

  3. JavaScript的案例(数据校验,js轮播图,页面定时弹窗)

    1.数据校验            步骤            1.确定事件(onsubmit)并绑定一个函数            2.书写这个函数,获取数据,并绑定id            3. ...

  4. Atitit.隔行换色  变色 css3 结构性伪类选择器

    Atitit.隔行换色  变色 css3 结构性伪类选择器 1.1. css3隔行换色扩展阅读 1 1.2. 结构伪选择器 1 1.3. jQuery 选择器2 1.1. css3隔行换色扩展阅读 原 ...

  5. JS实现自定义工具类,隔行换色、复选框全选、隔行高亮等

    很多功能都可以放在js的工具类中,在使用的时候直接调用 本次实现的功能包括: /** 0.当点击表的整行的任意位置时,第一列的复选框或者单选框均选中  1.隔行换色 2.复选框的全选效果 3.实现表格 ...

  6. jQuery淡入淡出效果轮播图

    用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div. html结构如下: & ...

  7. jQuery实现简易轮播图的效果

    (图片素材取自于小米官网) 刚开始接触jQuery的学习,个人觉得如果为了实现多数的动态效果,jQuery的确很简易方便. 下面简易的轮播图效果,还请前辈多多指教~ (努力学习react vue an ...

  8. JQuery案例一:实现表格隔行换色

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. jQuery实现表格隔行换色且感应鼠标高亮行变色

    jQuery插件实现表格隔行换色且感应鼠标高亮行变色 http://www.jb51.net/article/41568.htm jquery 操作DOM的基本用法分享http://www.jb51. ...

随机推荐

  1. rhel7 学习第二天

    参加<Linux就该这么学>在线培训的第二天,学习了虚拟环环境的搭建和红帽7的安装,同时也学习了rhel7的基本命令格式,以及systemctl的使用.

  2. 交叉编译用于生成aarch64指令的GCC (9.2)

    参考 Building GCC as a cross compiler for Raspberry Pi How to Build a GCC Cross-Compiler 环境 PC: ubuntu ...

  3. lua使用ffi调用c程序的函数

    参考: https://blog.csdn.net/weiwangchao_/article/details/16880401   http://luajit.org/ext_c_api.html h ...

  4. Kustomize安装配置入门文档

    一,简介 kustomize是sig-cli的一个子项目,它的设计目的是给kubernetes的用户提供一种可以重复使用同一套配置的声明式应用管理,从而在配置工作中用户只需要管理和维护kubernet ...

  5. nginx 缓存服务

    1.nginx 缓存 upstream imooc { server 116.62.103.228:8001; server 116.62.103.228:8002; server 116.62.10 ...

  6. springtask 基本使用和 cron 表达式

    springtask 的基本使用和 cron 表达式 spring 容器依赖 <dependency> <groupId>org.springframework</gro ...

  7. jQuery中关于Ajax的详解

    原文来自:http://developer.51cto.com/art/201205/335732.htm Ajax让用户页面丰富起来, 增强用户体验. Ajax是所有Web开发的必修课. 虽然Aja ...

  8. 9-3 deepsort在win10配置

    win10+python3.5+tensorflow https://blog.csdn.net/Draw_1999/article/details/79735677 deep-sort https: ...

  9. Pandas | 16 聚合

    当有了滚动,扩展和ewm对象创建了以后,就有几种方法可以对数据执行聚合. DataFrame应用聚合 可以通过向整个DataFrame传递一个函数来进行聚合,或者通过标准的获取项目方法来选择一个列. ...

  10. Pandas | 03 DataFrame 数据帧

    数据帧(DataFrame)是二维数据结构,即数据以行和列的表格方式排列. 数据帧(DataFrame)的功能特点: 潜在的列是不同的类型 大小可变 标记轴(行和列) 可以对行和列执行算术运算 结构体 ...