Jquery例子1_占位符使用
需求: 点击第一个按钮后 自动去check 后面是否有按钮没有选中, 如有则提示错误消息.
<html><head><script type="text/javascript">function check(){ ???String.prototype.format = function(){ ???????????var args = arguments; ???????????return this.replace(/\{(\d+)\}/g, ???????????????????????????????function(m,i){ ???????????????????return args[i]; ???????????}); ???????} ?????????var errorMessage = "项目{0} {1} {2}没有被勾选!"; ????var firstValue = ""; ???var secondValue = ""; ???var lastValue = ""; ???if (document.getElementById("check1").checked) ???{ ???????if (!document.getElementById("check2").checked) ???????{ ???????????firstValue = "2"; ???????} ???????if (!document.getElementById("check3").checked) ???????{ ???????????secondValue = "3"; ???????} ???????if (!document.getElementById("check4").checked) ???????{ ???????????lastValue = "4"; ???????} ???????alert(errorMessage.format(firstValue,secondValue,lastValue)); ???}}</script></head> <body><form> <input type="checkbox" id="check1" onclick="check()">1</input> <input type="checkbox" id="check2">2</input> <input type="checkbox" id="check3">3</input> <input type="checkbox" id="check4">4</input></form></body></html>Jquery例子2_模拟微信红包(摘自网络)
需求: 模拟微信抢红包
<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title>仿微信抢红包</title> ???????<style> ???????????html,body,div{margin:0;padding:0;} ???????????body{background:#EAEAEA;font:16px/1.8 "微软雅黑";padding-bottom:20px} ???????????input{margin:0;display:inline-block;border:1px solid #ddd;padding:4px 2px;font-size:16px;font-family:"微软雅黑";margin-right: 5px;} ???????????input:focus{border-color:#3C9BD1;outline:none;} ???????????????????????.wrap,.list { margin: 50px auto; width: 300px;} ???????????.title{ ??font-size: 42px; ??color: #464646;text-align: center;} ???????????.line{height:40px;line-height:40px;text-align: center;} ???????????.btn{display:block;background:#3C9BD1;color:#fff;line-height: 40px;height:40px;text-align: center;width:200px;margin:0 auto;margin-top:50px;text-decoration: none;transition:all .3s linear;border-radius: 2px;} ???????????.btn:hover{opacity:.9;} ???????????.list{width:500px;border:1px solid #DBDBDB;padding:10px;BACKGROUND:#F5F5F5;text-align: center;} ???????????.list p span {color: red; padding: 0 8px;} ???????????.list p:empty{background: #000000;} ???????????.list:empty{display: none;} ???????????.link{position:fixed;height:20px;font-size: 12px;color:#999;text-align: center;width: 100%;bottom:0;line-height:20px;margin:0;padding:0; ???background: #EAEAEA;padding:5px 0;} ???????????.link a{font-size:12px;color:#999;} ???????</style> ???</head> ???<body> ???????<h1 class="title">javascript实现仿微信抢红包</h1> ???????<div class="wrap"> ???????????<div class="line">红包个数：<input type="text" name="packetNumber" value="5" onkeyup="this.value=this.value.replace(/\D/g,‘‘)" onafterpaste="this.value=this.value.replace(/\D/g,‘‘)" maxlength="10">个</div> ???????????<div class="line">总 金 额：<input type="text" name="money" value="5" onkeyup="if(isNaN(value))execCommand(‘undo‘)" onafterpaste="if(isNaN(value))execCommand(‘undo‘)" maxlength="10">元</div> ???????????<div class="line"><a class="btn" href="javascript:;">发红包</a></div> ???????</div> ???????<div class="list"></div> ???????<p class="link">参考<a target="_blank" href="https://www.zybuluo.com/yulin718/note/93148">《微信红包的架构设计简介》</a>文章</p><script> "use strict";var _createClass = function() { ???function defineProperties(target, props) { ???????for (var i = 0; i < props.length; i++) { ???????????var descriptor = props[i]; ???????????descriptor.enumerable = descriptor.enumerable || false; ???????????descriptor.configurable = true; ???????????if ("value" in descriptor) ???????????????descriptor.writable = true; ???????????Object.defineProperty(target, descriptor.key, descriptor); ???????} ???} ???return function(Constructor, protoProps, staticProps) { ???????if (protoProps) ???????????defineProperties(Constructor.prototype, protoProps); ???????if (staticProps) ???????????defineProperties(Constructor, staticProps); ???????return Constructor; ???} ???;}();function _classCallCheck(instance, Constructor) { ???if (!(instance instanceof Constructor)) { ???????throw new TypeError("Cannot call a class as a function"); ???}}var MoneyPacket = function() { ???function MoneyPacket(packNumber, money) { ???????_classCallCheck(this, MoneyPacket); ???????????????this.min = 0.01; ???????this.flag = true; ???????this.packNumber = packNumber; ???????this.money = money; ???????if (!this.checkPackage()) { ???????????this.flag = false; ???????????return { ???????????????"flag": this.flag ???????????}; ???????} ???} ???????_createClass(MoneyPacket, [{ ???????key: "checkPackage", ???????value: function checkPackage() { ???????????if (this.packNumber == 0) { ???????????????alert("至少需要设置1个红包"); ???????????????return false; ???????????} ???????????if (this.money <= 0) { ???????????????alert("红包总金额不能小于0"); ???????????????return false; ???????????} ???????????if (this.packNumber * this.min > this.money) { ???????????????alert("单个红包金额不可低于0.01元"); ???????????????return false; ???????????} ???????????return true; ???????} ???}]); ???????return MoneyPacket;}();var getRandomMoney = function getRandomMoney(packet) { ???if (packet.packNumber == 0) { ???????return; ???} ???if (packet.packNumber == 1) { ???????var _lastMoney = Math.round(packet.money * 100) / 100; ???????packet.packNumber--; ???????packet.money = 0; ???????return _lastMoney; ???} ???var min = 0.01 ?????, ????max = packet.money / packet.packNumber * 2 ?????, ????money = Math.random() * max; ???money = money < min ? min : money; ???money = Math.floor(money * 100) / 100; ???packet.packNumber--; ???packet.money = Math.round((packet.money - money) * 100) / 100; ???return money;};(function() { ???var oBtn = document.querySelector(".btn"); ???var oList = document.querySelector(".list"); ???????oBtn.onclick = function() { ???????var packetNumber = +document.querySelector("input[name=packetNumber]").value; ???????var money = +document.querySelector("input[name=money]").value; ???????var str = ""; ???????????????var packet = new MoneyPacket(packetNumber,money) ?????????, ????????num = packet.flag && packet.packNumber || 0; ???????console.log("========================================================================"); ???????for (var i = 0; i < num; i++) { ???????????var _pack = getRandomMoney(packet); ???????????str += "<p>第<span>" + i + "</span>个红包:: <span>" + _pack.toFixed(2) + "</span>元  ==剩余红包:: <span>" + packet.money.toFixed(2) + "</span> 元<p>"; ???????????console.log("第", i, "个红包::", _pack.toFixed(2), "元 ?????==剩余红包::", packet.money.toFixed(2), "元"); ???????} ???????str !== "" && (oList.innerHTML = str); ???} ???;})();</script> ???</body></html>Jquery例子3_三级联动
需求: 实现省市县三级联动
<h3> ???您的地址是：</h3><select id="Province" onchange="SelectValueChanged(‘Province‘, ‘Get_City‘)"> ???<option id="Not_data1">Province</option> ???<option id="GuangDong" value="GuangDong">GuangDong</option> ???<option id="ShanDong" value="ShanDong">ShanDong</option> ???<option id="HuNan" value="HuNan">HuNan</opetion></select><select id="City" onchange="SelectValueChanged(‘City‘, ‘Get_Country‘)"> ???<option id="Not_data2">City</option></select><select id="Country"> ???<option id="Not_data3">Country</option></select>"use strict"//初始化的数据var placeDictionary = { ???"GuangDong":{ ???????"GuangZhou":["PanYu","HuangPu","TianHe"], ???????"QingYuan":["QingCheng","YingDe","LianShan"], ???????"FoShan":["NanHai","ShunDe","SanShui"] ???}, ???"ShanDong":{ ???????"JiNan":["LiXia","ShiZhong","TianQiao"], ???????"QingDao":["ShiNan","HuangDao","JiaoZhou"] ???}, ???"HuNan":{ ???????"ChangSha":["KaiFu","YuHua","WangCheng"], ???????"ChenZhou":["BeiHu","SuXian","YongXian"] ???}};//通过province或city的变化连动function SelectValueChanged(idType, perpose) { ???var selectedValue = GetSelectedId(idType); ???if(perpose == "Get_City") ???{ ???????AddCity(selectedValue); ???} ???else if(perpose == "Get_Country") ???{ ???????AddCountry(selectedValue); ???}}function GetSelectedId(id){ ???var prop = document.getElementById(id); ???var selectedValue = prop.options[prop.selectedIndex].id; ???return selectedValue;}function AddCity(provinceSelectedValue){ ???//保持联动的一致性， 当Province的index变化时都需要清空City和Country的值 ???$("#City").empty(); ???$("#City").append("<option>City</option>"); ???$("#Country").empty(); ???$("#Country").append("<option>Country</option>"); ???var cityNames = placeDictionary[provinceSelectedValue]; ???for(var city in cityNames) ???{ ???????//这里遍历的值直接是value ???????var value = "<option id=‘"+ city +"‘>" + city + "</option>"; ???????$("#City").append(value); ???}}function AddCountry(citySelectedValue) { ???//保持联动一致性，当City的index变化时需要清空Country中的值 ???$("#Country").empty(); ???$("#Country").append("<option>Country</option>"); ???var provinceSelectedId = GetSelectedId("Province"); ???//获得城市列表 ???var countries = placeDictionary[provinceSelectedId][citySelectedValue]; ???for(var index in countries) ???{ ???????//这里index获取的是id 值 ???????var value = "<option id=‘"+ countries[index] +"‘>" + countries[index] + "</option>"; ???????$("#Country").append(value); ???}}jQuery小案例
原文地址：http://www.cnblogs.com/Jansens520/p/7845301.html