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

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 = "";
}
if (!document.getElementById("check3").checked)
{
secondValue = "";
}
if (!document.getElementById("check4").checked)
{
lastValue = "";
}
alert(errorMessage.format(firstValue,secondValue,lastValue));
}
}
</script>
</head> <body> <form>
<input type="checkbox" id="check1" onclick="check()"></input>
<input type="checkbox" id="check2"></input>
<input type="checkbox" id="check3"></input>
<input type="checkbox" id="check4"></input>
</form> </body>
</html>

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>仿微信抢红包</title>
<style>
html,body,div{margin:;padding:;}
body{background:#EAEAEA;font:16px/1.8 "微软雅黑";padding-bottom:20px}
input{margin:;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: #;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: auto;margin-top:50px;text-decoration: none;transition:all .3s linear;border-radius: 2px;}
.btn:hover{opacity:.;}
.list{width:500px;border:1px solid #DBDBDB;padding:10px;BACKGROUND:#F5F5F5;text-align: center;}
.list p span {color: red; padding: 8px;}
.list p:empty{background: #;}
.list:empty{display: none;}
.link{position:fixed;height:20px;font-size: 12px;color:#;text-align: center;width: %;bottom:;line-height:20px;margin:;padding:; background: #EAEAEA;padding:5px ;}
.link a{font-size:12px;color:#;}
</style>
</head>
<body>
<h1 class="title">javascript实现仿微信抢红包</h1>
<div class="wrap">
<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>
<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>
<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 = ; 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 == ) {
alert("至少需要设置1个红包");
return false;
}
if (this.money <= ) {
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 == ) {
return;
}
if (packet.packNumber == ) {
var _lastMoney = Math.round(packet.money * ) / ;
packet.packNumber--;
packet.money = ;
return _lastMoney;
}
var min = 0.01
,
max = packet.money / packet.packNumber *
,
money = Math.random() * max;
money = money < min ? min : money;
money = Math.floor(money * ) / ;
packet.packNumber--;
packet.money = Math.round((packet.money - money) * ) / ;
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 || ;
console.log("========================================================================");
for (var i = ; i < num; i++) {
var _pack = getRandomMoney(packet);
str += "<p>第<span>" + i + "</span>个红包:: <span>" + _pack.toFixed() + "</span>元&emsp;&emsp;==剩余红包:: <span>" + packet.money.toFixed() + "</span> 元<p>";
console.log("第", i, "个红包::", _pack.toFixed(), "元 ==剩余红包::", packet.money.toFixed(), "元");
}
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学习系列六]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. 学习笔记001之[Android开发视频教学].01_15_Handler的使用(二)

    Handler 与线程 Bundle 的用法 在线程中处理消息的方法 待补充......

  2. Ubuntu下配置和使用github

    一.配置github环境 1.环境:Ubuntu14.04 2.申请github账号 3.安装配置git服务器: (1)安装ssh:sudo apt-get install openssh-serve ...

  3. Intellij Idea使用技巧、快捷键

    1.Idea设置字体大小:file -> setting -> editor -> colors&font -> save as并自定义 -> font -> ...

  4. nginx 的基础配置[转]

    nginx 的基础配置 分类: 工具软件2013-11-13 23:26 11人阅读 评论(0) 收藏 举报   目录(?)[-] 管理配置文件 全局配置 虚拟机server配置 location配置 ...

  5. dede列表页分页地址优化(不同url相同内容问题解决)<转自http://www.966266.com>

    <注明,完全转自http://www.966266.com/seoblog/?p=75> 存在问题 DEDE默认分类分页地址存在不同URL相同内容问题,导致内容重复,对SEO非常不利.情况 ...

  6. XE3随笔7:可以省略的双引号

    在 JSON 中, 字符串应该在双引号中; 从上个例子才发现: 原来这个双引号可以省略, 有空格都行 当然只是在程序代码中可以省略, 对象会自动识别添加的. 即如此, 下面写法都可以: uses Su ...

  7. tp 中关于大小写的问题

    ThinkPHP3.2.3升级的若干问题和注意事项(持续更新) 现把ThinkPHP3.2.2在升级到3.2.3的过程中需要注意和可能的问题整理如下: (无论如何,在升级之前请确认备份) 1.首先3. ...

  8. mybatis 打印sql 语句

    拦截器 package com.cares.asis.mybatis.interceptor; import java.text.DateFormat; import java.util.Date; ...

  9. 关于VMWARE 上对于不小心VMWare Tools Easy Install 后卡死的解决方法

    PS 要想修改首先开机的时候会进入命令行,输入用户名,密码后,可以用startx来进入图形界面(也有人将/etc/init.d/ligtmd start可以懂事本人那次是不行的) 通常网上人们的解决办 ...

  10. adb server is out of date killing... 的解决办法

    是adb server端口被占用了 你先执行adb nodaemon server ,查看adb server的端口是多少 1 2 C:\Users\xxxx>adb nodaemon serv ...