前言
最后在这里po上jQuery的几个小案例.

Jquery例子1_占位符使用
需求: 点击第一个按钮后 自动去check 后面是否有按钮没有选中, 如有则提示错误消息.

  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function check()
  5. {
  6.     String.prototype.format = function(){
  7.         var args = arguments;
  8.         return this.replace(/\{(\d+)\}/g,
  9.             function(m,i){
  10.                 return args[i];
  11.             });
  12.     }  
  13.  
  14.     var errorMessage = "项目{0} {1} {2}没有被勾选!";
  15.     var firstValue = "";
  16.     var secondValue = "";
  17.     var lastValue = "";
  18.     if (document.getElementById("check1").checked)
  19.     {
  20.         if (!document.getElementById("check2").checked)
  21.         {
  22.             firstValue = "";
  23.         }
  24.         if (!document.getElementById("check3").checked)
  25.         {
  26.             secondValue = "";
  27.         }
  28.         if (!document.getElementById("check4").checked)
  29.         {
  30.             lastValue = "";
  31.         }
  32.         alert(errorMessage.format(firstValue,secondValue,lastValue));
  33.     }
  34. }
  35. </script>
  36. </head>
  37.  
  38. <body>
  39.  
  40. <form>
  41.  <input type="checkbox" id="check1" onclick="check()"></input>
  42.  <input type="checkbox" id="check2"></input>
  43.  <input type="checkbox" id="check3"></input>
  44.  <input type="checkbox" id="check4"></input>
  45. </form>
  46.  
  47. </body>
  48. </html>

Jquery例子2_模拟微信红包(摘自网络)
需求: 模拟微信抢红包

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>仿微信抢红包</title>
  6.         <style>
  7.             html,body,div{margin:;padding:;}
  8.             body{background:#EAEAEA;font:16px/1.8 "微软雅黑";padding-bottom:20px}
  9.             input{margin:;display:inline-block;border:1px solid #ddd;padding:4px 2px;font-size:16px;font-family:"微软雅黑";margin-right: 5px;}
  10.             input:focus{border-color:#3C9BD1;outline:none;}
  11.  
  12.             .wrap,.list { margin: 50px auto; width: 300px;}
  13.             .title{   font-size: 42px;   color: #;text-align: center;}
  14.             .line{height:40px;line-height:40px;text-align: center;}
  15.             .btn{display:block;background:#3C9BD1;color:#fff;line-height: 40px;height:40px;text-align: center;width:200px;margin: auto;margin-top:50px;text-decoration: none;transition:all .3s linear;border-radius: 2px;}
  16.             .btn:hover{opacity:.;}
  17.             .list{width:500px;border:1px solid #DBDBDB;padding:10px;BACKGROUND:#F5F5F5;text-align: center;}
  18.             .list p span {color: red; padding:  8px;}
  19.             .list p:empty{background: #;}
  20.             .list:empty{display: none;}
  21.             .link{position:fixed;height:20px;font-size: 12px;color:#;text-align: center;width: %;bottom:;line-height:20px;margin:;padding:;    background: #EAEAEA;padding:5px ;}
  22.             .link a{font-size:12px;color:#;}
  23.         </style>
  24.     </head>
  25.     <body>
  26.         <h1 class="title">javascript实现仿微信抢红包</h1>
  27.         <div class="wrap">
  28.             <div class="line">红包个数：<input type="text" name="packetNumber" value="" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" maxlength="">个</div>
  29.             <div class="line">总&ensp;金&ensp;额：<input type="text" name="money" value="" onkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execCommand('undo')" maxlength="">元</div>
  30.             <div class="line"><a class="btn" href="javascript:;">发红包</a></div>
  31.         </div>
  32.         <div class="list"></div>
  33.         <p class="link">参考<a target="_blank" href="https://www.zybuluo.com/yulin718/note/93148">《微信红包的架构设计简介》</a>文章</p>
  34.  
  35. <script>
  36.  "use strict";
  37.  
  38. var _createClass = function() {
  39.     function defineProperties(target, props) {
  40.         for (var i = ; i < props.length; i++) {
  41.             var descriptor = props[i];
  42.             descriptor.enumerable = descriptor.enumerable || false;
  43.             descriptor.configurable = true;
  44.             if ("value" in descriptor)
  45.                 descriptor.writable = true;
  46.             Object.defineProperty(target, descriptor.key, descriptor);
  47.         }
  48.     }
  49.     return function(Constructor, protoProps, staticProps) {
  50.         if (protoProps)
  51.             defineProperties(Constructor.prototype, protoProps);
  52.         if (staticProps)
  53.             defineProperties(Constructor, staticProps);
  54.         return Constructor;
  55.     }
  56.     ;
  57. }();
  58.  
  59. function _classCallCheck(instance, Constructor) {
  60.     if (!(instance instanceof Constructor)) {
  61.         throw new TypeError("Cannot call a class as a function");
  62.     }
  63. }
  64.  
  65. var MoneyPacket = function() {
  66.     function MoneyPacket(packNumber, money) {
  67.         _classCallCheck(this, MoneyPacket);
  68.  
  69.         this.min = 0.01;
  70.         this.flag = true;
  71.         this.packNumber = packNumber;
  72.         this.money = money;
  73.         if (!this.checkPackage()) {
  74.             this.flag = false;
  75.             return {
  76.                 "flag": this.flag
  77.             };
  78.         }
  79.     }
  80.  
  81.     _createClass(MoneyPacket, [{
  82.         key: "checkPackage",
  83.         value: function checkPackage() {
  84.             if (this.packNumber == ) {
  85.                 alert("至少需要设置1个红包");
  86.                 return false;
  87.             }
  88.             if (this.money <= ) {
  89.                 alert("红包总金额不能小于0");
  90.                 return false;
  91.             }
  92.             if (this.packNumber * this.min > this.money) {
  93.                 alert("单个红包金额不可低于0.01元");
  94.                 return false;
  95.             }
  96.             return true;
  97.         }
  98.     }]);
  99.  
  100.     return MoneyPacket;
  101. }();
  102.  
  103. var getRandomMoney = function getRandomMoney(packet) {
  104.     if (packet.packNumber == ) {
  105.         return;
  106.     }
  107.     if (packet.packNumber == ) {
  108.         var _lastMoney = Math.round(packet.money * ) / ;
  109.         packet.packNumber--;
  110.         packet.money = ;
  111.         return _lastMoney;
  112.     }
  113.     var min = 0.01
  114.       ,
  115.     max = packet.money / packet.packNumber *
  116.       ,
  117.     money = Math.random() * max;
  118.     money = money < min ? min : money;
  119.     money = Math.floor(money * ) / ;
  120.     packet.packNumber--;
  121.     packet.money = Math.round((packet.money - money) * ) / ;
  122.     return money;
  123. }
  124. ;
  125.  
  126. (function() {
  127.     var oBtn = document.querySelector(".btn");
  128.     var oList = document.querySelector(".list");
  129.  
  130.     oBtn.onclick = function() {
  131.         var packetNumber = +document.querySelector("input[name=packetNumber]").value;
  132.         var money = +document.querySelector("input[name=money]").value;
  133.         var str = "";
  134.  
  135.         var packet = new MoneyPacket(packetNumber,money)
  136.           ,
  137.         num = packet.flag && packet.packNumber || ;
  138.         console.log("========================================================================");
  139.         for (var i = ; i < num; i++) {
  140.             var _pack = getRandomMoney(packet);
  141.             str += "<p>第<span>" + i + "</span>个红包:: <span>" + _pack.toFixed() + "</span>元&emsp;&emsp;==剩余红包:: <span>" + packet.money.toFixed() + "</span> 元<p>";
  142.             console.log("第", i, "个红包::", _pack.toFixed(), "元      ==剩余红包::", packet.money.toFixed(), "元");
  143.         }
  144.         str !== "" && (oList.innerHTML = str);
  145.     }
  146.     ;
  147. })();
  148.  
  149. </script>
  150.     </body>
  151. </html>

Jquery例子3_三级联动

需求: 实现省市县三级联动

  1. <h3>
  2.     您的地址是：
  3. </h3>
  4. <select id="Province" onchange="SelectValueChanged('Province', 'Get_City')">
  5.     <option id="Not_data1">Province</option>
  6.     <option id="GuangDong" value="GuangDong">GuangDong</option>
  7.     <option id="ShanDong" value="ShanDong">ShanDong</option>
  8.     <option id="HuNan" value="HuNan">HuNan</opetion>
  9. </select>
  10. <select id="City" onchange="SelectValueChanged('City', 'Get_Country')">
  11.     <option id="Not_data2">City</option>
  12. </select>
  13. <select id="Country">
  14.     <option id="Not_data3">Country</option>
  15. </select>
  16.  
  17. "use strict"
  18. //初始化的数据
  19. var placeDictionary = {
  20.     "GuangDong":{
  21.         "GuangZhou":["PanYu","HuangPu","TianHe"],
  22.         "QingYuan":["QingCheng","YingDe","LianShan"],
  23.         "FoShan":["NanHai","ShunDe","SanShui"]
  24.     },
  25.     "ShanDong":{
  26.         "JiNan":["LiXia","ShiZhong","TianQiao"],
  27.         "QingDao":["ShiNan","HuangDao","JiaoZhou"]
  28.     },
  29.     "HuNan":{
  30.         "ChangSha":["KaiFu","YuHua","WangCheng"],
  31.         "ChenZhou":["BeiHu","SuXian","YongXian"]
  32.     }
  33. };
  34.  
  35. //通过province或city的变化连动
  36. function SelectValueChanged(idType, perpose) {
  37.     var selectedValue = GetSelectedId(idType);
  38.     if(perpose == "Get_City")
  39.     {
  40.         AddCity(selectedValue);
  41.     }
  42.     else if(perpose == "Get_Country")
  43.     {
  44.         AddCountry(selectedValue);
  45.     }
  46. }
  47.  
  48. function GetSelectedId(id){
  49.     var prop = document.getElementById(id);
  50.     var selectedValue = prop.options[prop.selectedIndex].id;
  51.     return selectedValue;
  52. }
  53.  
  54. function AddCity(provinceSelectedValue){
  55.     //保持联动的一致性， 当Province的index变化时都需要清空City和Country的值
  56.     $("#City").empty();
  57.     $("#City").append("<option>City</option>");
  58.     $("#Country").empty();
  59.     $("#Country").append("<option>Country</option>");
  60.     var cityNames = placeDictionary[provinceSelectedValue];
  61.     for(var city in cityNames)
  62.     {
  63.         //这里遍历的值直接是value
  64.         var value = "<option id='"+ city +"'>" + city + "</option>";
  65.         $("#City").append(value);
  66.     }
  67. }
  68.  
  69. function AddCountry(citySelectedValue) {
  70.     //保持联动一致性，当City的index变化时需要清空Country中的值
  71.     $("#Country").empty();
  72.     $("#Country").append("<option>Country</option>");
  73.     var provinceSelectedId = GetSelectedId("Province");
  74.     //获得城市列表
  75.     var countries = placeDictionary[provinceSelectedId][citySelectedValue];
  76.     for(var index in countries)
  77.     {
  78.         //这里index获取的是id 值
  79.         var value = "<option id='"+ countries[index] +"'>" + countries[index] + "</option>";
  80.         $("#Country").append(value);
  81.     }
  82. }

[jQuery学习系列六]6-jQuery实际操作小案例的更多相关文章

  1. jquery学习笔记(二)：DOM元素操作

    内容来自[汇智网]jquery学习课程 2.1 元素属性操作 1.获取元素的属性 语法:attr(name) 参数name表示属性的名称 2.设置元素的属性 单个属性设置语法:attr(key,val ...

  2. Python学习系列（五）(文件操作及其字典)

    Python学习系列(五)(文件操作及其字典) Python学习系列(四)(列表及其函数) 一.文件操作 1,读文件      在以'r'读模式打开文件以后可以调用read函数一次性将文件内容全部读出 ...

  3. Html5 学习系列（四）文件操作API

    原文:Html5 学习系列(四)文件操作API 引言 在之前我们操作本地文件都是使用flash.silverlight或者第三方的activeX插件等技术,由于使用了这些技术后就很难进行跨平台.或者跨 ...

  4. PHP中的MySQLi扩展学习（六）MySQLI_result对象操作

    在之前的文章中,我们就已经接触过 MYSQLI_result 相关的内容.它的作用其实就是一个查询的结果集.不过在 PDO 中,一般直接通过 query() 或者 PDOStatement 对象进行查 ...

  5. [jQuery学习系列二 ]2-JQuery学习二-数组操作

    前言 上一篇内容 已经对于Jquery 有了一些认识, 包括Jquery的选择器和DOM对象, 那么这一篇继续来看下Jquery中很实用的Jquery对于数组的操作. Jquery中对数组的操作大致有 ...

  6. jQuery学习之------对标签属性的操作

    jQuery学习之------标签的属性 <a href=””>链接</a>此处的href就是该a标签带有的属性 在js中对标签的属性的操作方法有 1.1getAttribut ...

  7. [jQuery学习系列一]1-选择器与DOM对象

    前言: 好久没有更新博客了, 最近想复习下 之前学过的JS的相关内容, 也算是自己的一种总结. 知识长时间不用就会忘记, 多学多记多用!! 下面的程序都可以在下面的网站进行在线调试: http://w ...

  8. Jquery学习笔记：获取jquery对象的基本方法

    jquery最大的好处是将js对html页面的操作(读写)进行了封装,隔离了浏览器的差异性,并简化了操作,和提供了强大的功能. 在web页面中,所有的js操作都是围绕操作dom对象来的.而jquery ...

  9. 08 LaTeX学习系列之---Latex 的中文操作

    目录 目录: (一)方法一:导入 ctex 宏包 1.说明: 2.源代码: 3.效果展示: (二)使用ctex的文档类 1.说明: 2.源代码: 3.显示效果: (三)查看帮助 1.Ctex的使用手册 ...

随机推荐

  1. MySQL安装常见问题(找不到文件,系统服务无法启动...)

    在安装mysql时总是会遇到问题,每次重新安装都会花很多时间来排查.在网上其实有很多相关的文章,但很多都只讲了方法,但没讲具体细节问题,导致无法解决问题.其实有时候知道问题的原因,但总是因为一些细节问 ...

  2. VirtualBox中的虚拟机要如何设置，才能够上网

    VirtualBox中有4种网络连接方式:1. NAT2. Bridged Adapter3. Internal4. Host-only Adapter 一般设置成NAT网路就可以,但是由于我在公司上 ...

  3. javascript 网页运行代码效果

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  4. andorid SQLite数据库的增删改查 和事务操作

    .xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android ...

  5. 基于Jquery-ui的自动补全

    1.添加CSS和JS引用 <script type="text/javascript" src="javascript/jquery-1.7.min.js" ...

  6. 遇到的check the manual that corresponds to your MySQL server version for the right syntax错误

    遇到的check the manual that corresponds to your MySQL server version for the right syntax错误. 结果发现是SQL关键 ...

  7. javascript arguments与javascript函数重载

    1.所 有的函数都有属于自己的一个arguments对象,它包括了函所要调用的参数.他不是一个数组,如果用typeof arguments,返回的是’object’.虽然我们可以用调用数据的方法来调用 ...

  8. 自定义安装php开发环境(1)--apache和php整合

    第一步:安装apache 第二步:下载php核心包php-5.3.3-Win32-VC6-x86.zip.并放入开发环境文件夹C:/phpenv/文件夹下 第三步: 将apache 和php 整合 也 ...

  9. Python学习第四天集合

    集合定义: 无序排列,可哈希 支持集合关系测试 成员关系测试 in not in 迭代 不支持:索引.元素获取.切片 集合的类型:set(),frozenset() 集合没有特定语法格式,只能通过工厂 ...

  10. linux 下 oracle 11g r2 的卸载

    1.停止oracle服务 [oracle@OracleTest oracle]$ sqlplus /nolog SQL> connect / as sysdba SQL> shutdown ...