Web前端-jQuery（四）
2024-05-13 07:36:57
文章目录
- 一、认识jQuery
- 1.2 jQuery的引入及使用
- 1.3 jQuery对象和JS对象的互转
- 1.4 jQuery动画效果
- 1.4.1 知识汇总
- 二、jQuery选择器
- 2.1 基本选择器
- 2.2 使用jQuery重写弹出广告案例
- 2.3 层级选择器（了解）
- 2.4、属性选择器（了解）
- 2.5、基本过滤选择器（了解）
- 2.6、表单属性选择器（了解）
- 三、重写隔行换色(jQuery)
- 3.1 使用jQuery 重写隔行换色
- 3.1.1 知识穿插（jQuery操作class属性）
- 3.1.2 隔行换色实现
- 四、重写全选全不选、反选(jQuery)
- 4.1使用jQuery 重写全选全不选、反选
- 4.1.1 需求说明及分析
- 4.1.2 知识点：jQuery
- 4.1.3 反选知识点
- 4.1.4 使用jQuery 重写全选全不选、反选
- 五、 重写省市联动(jQuery)
- 5.1 元素value属性操作
- 5.2 追加元素内容体
- 5.3 重写省市联动
- 六、倒计时效果
- 6.1 需求说明及分析
- 6.2 案例实现
- 七、数组内容显示到下拉列表
- 7.1 需求说明及分析
- 7.2 案例实现
- 八、列表左右选择
- 8.1 需求说明及分析
- 8.2 案例实现
- 九、jQuery常见事件
- 十、重写表单校验(jQuery)
- 10.1 需求说明与分析
- 10.2、走进知识点-JQuery
- 10.2.1、JQuery插件-validation
- 10.2.1.1、插件简述
- 10.2.1.2、插件导入
- 10.2.1.3、自定义校验规则（扩展-了解）
- 10.3 重写表单校验
一、认识jQuery
核心理念:write Less, Do More 写的少,做的多
1.2 jQuery的引入及使用
jQuery版本有很多，不同版本的jQuery之间方法和功能有一定改变。
点我下载jQuery的所需版本
非压缩版和压缩版的区别:
功能上没有任何区别,区别在与将回车, 换行 ,注释全部删掉了(文件大小改变了)
压缩版: 适合开发中使用
非压缩版:学习阶段使用
（1）引入jQuery（全文所需jQuery导入和引入都一样，详见如下：）
案例代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jQuery的获取方式</title><script type="text/javascript" src="../js/jquery-3.3.1.js"></script><script>/*js获取*/function run() {//alert(document.getElementById("aa").value);/*jQuery第一种方式获取*/// alert( jQuery("#aa").val());/*jQuery第二种方式获取*/alert($("#aa").val())}</script>
</head>
<body><input type="text" value="Daniel" id="aa"><br /><input type="button" value="获取值" onclick="run()"></body>
</html>
效果显示
1.3 jQuery对象和JS对象的互转
案例代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jQuery与js的互转</title><script type="text/javascript" src="../js/jquery-3.3.1.js"></script><script>function run() {//jq对象var jq = $("#aa");//js对象var js = jq[0];// alert(js.value);//js转jQueryvar jq2 = $(js);alert(jq2.val())}</script>
</head>
<body><input type="text" value="Daniel" id="aa"><br /><input type="button" value="获取值" onclick="run()">
</body>
</html>
效果显示
1.3 jQuery页面加载完执行的代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jQuery页面加载事件</title><script type="text/javascript" src="../js/jquery-3.3.1.js"></script><script>/*第一种方式不常用*/$(document).ready(function () {alert(111);});/*第二种方式常用*/$(function () {alert(222)})</script>
</head>
<body>
</body>
</html>
效果显示
1.4 jQuery动画效果
1.4.1 知识汇总
以下所有动画效果方法中都有两个参数：
speed 动画效果的持续时间，单位：毫秒
一般快速效果设置500，正常效果设置1000即可
fn 动画效果成功展示完成后，回来调用的函数。(回调函数)
基本效果：（放大缩小滑动）
滑动效果：（上下滑动）
淡入淡出效果：（改变透明度的效果）
(1)案例素材
<style>#d1{background-color:lightskyblue;width:300px;height:300px;}
</style><script>//展示function run1(){}//隐藏function run2(){}//切换显示/隐藏function run3(){}</script>
<div id="d1"></div><input type="button" value="展示" onclick="run1()" /><input type="button" value="隐藏" onclick="run2()" /><input type="button" value="切换显示/隐藏" onclick="run3()" />
（2）js源码
<script>//展示function run1(){//$("#d1").show();// $("#d1").slideDown(2000);$("#d1").fadeIn(2000,function () {alert("显示成功")})}//隐藏function run2(){// $("#d1").hide();//$("#d1").slideUp(2000);$("#d1").fadeOut(2000,function () {alert("隐藏成功")})}//切换显示/隐藏function run3(){//$("#d1").toggle();//$("#d1").slideToggle(2000);$("#d1").fadeToggle(2000,function () {alert("切换成功")})}</script>
（3）完整代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="../js/jquery-3.3.1.js"></script><style>#d1{background-color:lightskyblue;width:300px;height:300px;}</style><script>//展示function run1(){//$("#d1").show();// $("#d1").slideDown(2000);$("#d1").fadeIn(2000,function () {alert("显示成功")})}//隐藏function run2(){// $("#d1").hide();//$("#d1").slideUp(2000);$("#d1").fadeOut(2000,function () {alert("隐藏成功")})}//切换显示/隐藏function run3(){//$("#d1").toggle();//$("#d1").slideToggle(2000);$("#d1").fadeToggle(2000,function () {alert("切换成功")})}</script>
</head>
<body><div id="d1"></div><input type="button" value="展示" onclick="run1()" /><input type="button" value="隐藏" onclick="run2()" /><input type="button" value="切换显示/隐藏" onclick="run3()" />
</body>
</html>
运行效果显示
二、jQuery选择器
2.1 基本选择器
jQuery也有和CSS一样，也有选择器概念，即 选择性获取某些标签对象
jQuery有大量复杂选择器，这里先介绍三个基本选择器。
ID选择器 $(“#id”)
元素选择器 $(“元素名”)
类选择器 $(“.类名”)
案例代码素材：
<script>$(function(){//页面加载完成时，获取对应的标签对象//获取id为r01的标签对象//获取标签名为input的标签对象//获取class属性值为hehe的标签对象});</script><input type="radio" name="hobby" value="敲代码" id="r01"/><input type="radio" name="hobby" value="调试bug" class="hehe"/><input type="radio" name="hobby" value="谈需求" class="hehe"/>
案例代码实现：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="../js/jquery-3.3.1.js"></script><script>$(function(){//页面加载完成时，获取对应的标签对象//获取id为r01的标签对象var ele = $("#r01");alert(ele.val());//获取标签名为input的标签对象var ale = $("input");alert(ale.length);//获取class属性值为hehe的标签对象var ble = $(".hehe");alert(ble.length);});</script>
</head><body><input type="radio" name="hobby" value="敲代码" id="r01"/><input type="radio" name="hobby" value="调试bug" class="hehe"/><input type="radio" name="hobby" value="谈需求" class="hehe"/></body>
</html>
运行效果显示
2.2 使用jQuery重写弹出广告案例
结构：
（1）案例代码准备
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="../js/jquery-3.3.1.js"></script></head><body><table width="100%"><!-- 网站顶部广告 --><tr><td><img id="ad" src="img/f001.jpg" width="100%" style="display:none;"></td></tr><!-- 网站头部 图片 --><tr><td><table width="100%"><tr><td><img src="img/logo.jpg" /></td><td><img src="img/header.png" /></td><td><a href="">登录</a><a href="">注册</a><a href="">购物车</a></td></tr></table></td></tr><!-- 网站黑色导航 --><tr><td><table width="100%" bgcolor="black"><tr><td><a href=""><font color="white" size="5">首页</font></a><a href=""><font color="white" size="5">手机数码</font></a><a href=""><font color="white" size="5">电脑办公</font></a><a href=""><font color="white" size="5">家具家居</font></a></td></tr></table></td></tr><!-- 网站大轮播图 --><tr><td><img src="img/1.jpg" width="100%"/></td></tr></table></body>
</html>
（2）图片素材导入
（3）Js&jQuery代码编写
<script>$(function () {setTimeout(showImg(),2000);});function showImg() {$("#ad").slideDown(function () {setTimeout(hide(),2000)});}function hide() {$("#ad").slideUp(2000);}</script>
（4）完整代码
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="../js/jquery-3.3.1.js"></script><script>$(function () {setTimeout(showImg(),2000);});function showImg() {$("#ad").slideDown(function () {setTimeout(hide(),2000)});}function hide() {$("#ad").slideUp(2000);}</script></head><body><table width="100%"><!-- 网站顶部广告 --><tr><td><img id="ad" src="img/f001.jpg" width="100%" style="display:none;"></td></tr><!-- 网站头部 图片 --><tr><td><table width="100%"><tr><td><img src="img/logo.jpg" /></td><td><img src="img/header.png" /></td><td><a href="">登录</a><a href="">注册</a><a href="">购物车</a></td></tr></table></td></tr><!-- 网站黑色导航 --><tr><td><table width="100%" bgcolor="black"><tr><td><a href=""><font color="white" size="5">首页</font></a><a href=""><font color="white" size="5">手机数码</font></a><a href=""><font color="white" size="5">电脑办公</font></a><a href=""><font color="white" size="5">家具家居</font></a></td></tr></table></td></tr><!-- 网站大轮播图 --><tr><td><img src="img/1.jpg" width="100%"/></td></tr></table></body>
</html>运行效果为：
2.3 层级选择器（了解）
和CSS层级选择器类似，可以通过层级关系获取对应标签对象。
A B 获取A元素内部的所有B的后代元素 (父子关系 祖孙关系)
A>B 获取A元素下边的所有B子元素 (父子关系)
A+B 获取A元素下边的同级B元素 (下一个兄弟)
A~B 获取A元素之后的所有B元素 (所有弟弟)
（1）案例素材：
<script>$(function(){//1、获取id为main的span标签 内 所有的div标签//2、获取id为main的span标签 内 子元素div标签//3、获取id为main的span标签 后 第一个div兄弟标签//4、获取id为main的span标签 后 所有的div兄弟标签});</script><span id="main"><div>111111</div><div>222222</div><div>333333</div><span><div>44444</div></span>
</span><div>55555</div><span><div>66666</div></span><div>77777</div>
（2）编写jQuery代码
<script>$(function(){//1、获取id为main的span标签 内 所有的div标签/*var ale = $("#main div")for (var i = 0; i < ale.length; i++) {alert(ale[i].innerHTML)}*///2、获取id为main的span标签 内 子元素div标签/*var ale = $("#main>div")for (var i = 0; i < ale.length; i++) {alert(ale[i].innerHTML)}*///3、获取id为main的span标签 后 第一个div兄弟标签/* var ale = $("#main+div")for (var i = 0; i < ale.length; i++) {alert(ale[i].innerHTML)}*///4、获取id为main的span标签 后 所有的div兄弟标签var ale = $("#main~div")for (var i = 0; i < ale.length; i++) {alert(ale[i].innerHTML)}});
</script>
完整代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="../js/jquery-3.3.1.js"></script><script>$(function(){//1、获取id为main的span标签 内 所有的div标签/*var ale = $("#main div")for (var i = 0; i < ale.length; i++) {alert(ale[i].innerHTML)}*///2、获取id为main的span标签 内 子元素div标签/*var ale = $("#main>div")for (var i = 0; i < ale.length; i++) {alert(ale[i].innerHTML)}*///3、获取id为main的span标签 后 第一个div兄弟标签/* var ale = $("#main+div")for (var i = 0; i < ale.length; i++) {alert(ale[i].innerHTML)}*///4、获取id为main的span标签 后 所有的div兄弟标签var ale = $("#main~div")for (var i = 0; i < ale.length; i++) {alert(ale[i].innerHTML)}});</script>
</head>
<body><span id="main"><div>111111</div><div>222222</div><div>333333</div><span><div>44444</div></span></span><div>55555</div><span><div>66666</div></span><div>77777</div>
</body>
</html>
运行效果为：
2.4、属性选择器（了解）
我们可以通过属性选择器，以属性名或者值来匹配对应标签
<input type="radio" name="hobby" value="敲代码" id="r01" />
[属性名] 获取有指定属性名的标签对象 $(“name”)
[属性名=值] 获取指定属性名等于属性值 $(“name=hobby”)
[属性名*=值] 获取指定属性名 含有 指定值的标签对象 $(“name*=o”)
多个属性选择器可以组合使用
[选择器1][选择器2][选择器3] ，多个属性同时过滤。
(1)案例素材
<script>$(function(){//1、获取所有存在type属性的标签//2、获取所有type属性为radio的标签//3、获取所有type属性含有o的标签//4、获取所有input标签中的单选框，且name为sex的标签});</script>用户名：<input type="text" name="uname" value="小刘"/><br />密码：<input type="password" name="pwd" value="123"/><br />性别：<input type="radio" name="sex" value="man" />男<input type="radio" name="sex" value="woman" />女<br />是否VIP：<input type="radio" name="vip" value="no" />不是<input type="radio" name="vip" value="yes" />是<br />
(2)编写jQuery代码
<script>$(function(){//1、获取所有存在type属性的标签var ele1 = $("[type]");//alert(ele1.length);//7//为什么是7呢，因为上面引入jQuery的标签内部还有个type//2、获取所有type属性为radio的标签var ele2 = $("[type=radio]");//alert(ele2.length)//4//3、获取所有type属性含有o的标签var ele3 = $("[type*=o]");//alert(ele3.length);//5//4、获取所有input标签中的单选框，且name为sex的标签var ele4 = $("input[type=radio][name=sex]");//2alert(ele4.length)});
</script>
(3)完整代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="../js/jquery-3.3.1.js"></script><script>$(function(){//1、获取所有存在type属性的标签var ele1 = $("[type]");//alert(ele1.length);//7//为什么是7呢，因为上面引入jQuery的标签内部还有个type//2、获取所有type属性为radio的标签var ele2 = $("[type=radio]");//alert(ele2.length)//4//3、获取所有type属性含有o的标签var ele3 = $("[type*=o]");//alert(ele3.length);//5//4、获取所有input标签中的单选框，且name为sex的标签var ele4 = $("input[type=radio][name=sex]");//2alert(ele4.length)});</script>
</head><body>用户名：<input type="text" name="uname" value="小刘"/><br />密码：<input type="password" name="pwd" value="123"/><br />性别：<input type="radio" name="sex" value="man" />男<input type="radio" name="sex" value="woman" />女<br />是否VIP：<input type="radio" name="vip" value="no" />不是<input type="radio" name="vip" value="yes" />是<br /></body>
</html>
运行效果为：
2.5、基本过滤选择器（了解）
通常我们在获取到一系列标签对象之后，会有一些筛选需求，
这里就可以使用基本过滤选择器。
:first 第一个
:last 最后一个
:even 偶数 索引是从0开始计数
:odd 奇数
:not(…) 除了指定内容 abcd:not(ab) == > cd
:eq(index) 获取指定索引
:gt(index) 大于指定索引
:lt(index) 小于指定索引
案例代码：
<script>$(function(){//1、在所有DIV标签中，获取第一个div//2、在所有DIV标签中，获取最后一个div//3、在所有DIV标签中，获取所有偶数位的div//4、在所有DIV标签中，获取所有奇数位的div//5、在所有DIV标签中，获取除了第一位以外所有的div//6、在所有DIV标签中，获取索引等于1的div//7、在所有DIV标签中，获取索引大于1的div//8、在所有DIV标签中，获取索引小于1的div});</script><div>11111111，索引是0</div><div>22222222，索引是1</div><div>33333333，索引是2</div><div>44444444，索引是3</div><div>55555555，索引是4</div><div>66666666，索引是5</div><div>77777777，索引是6</div><div>88888888，索引是7</div>
(2)编写jQuery代码
<script>$(function(){//1、在所有DIV标签中，获取第一个div// alert($("div:first")[0].innerHTML);//alert($("div:eq(0)")[0].innerHTML);//2、在所有DIV标签中，获取最后一个div//alert($("div:last")[0].innerHTML);//3、在所有DIV标签中，获取所有偶数位的div/* var arr = $("div:even");for (var i = 0; i < arr.length; i++) {alert(arr[i].innerHTML);}*///4、在所有DIV标签中，获取所有奇数位的div/*var arr = $("div:odd");for (var i = 0; i < arr.length; i++) {alert(arr[i].innerHTML);}*///5、在所有DIV标签中，获取除了第一位以外所有的div/*var arr1 = $("div:not(div:first)")for (var i = 0; i < arr1.length; i++) {alert(arr1[i].innerHTML)}*///6、在所有DIV标签中，获取索引等于1的div// alert($("div:eq(1)")[0].innerHTML)//7、在所有DIV标签中，获取索引大于1的div//alert($("div:gt(1)")[0].innerHTML)//8、在所有DIV标签中，获取索引小于1的divalert($("div:lt(1)")[0].innerHTML)});
</script>
(3)完整代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="../js/jquery-3.3.1.js"></script><script>$(function(){//1、在所有DIV标签中，获取第一个div// alert($("div:first")[0].innerHTML);//alert($("div:eq(0)")[0].innerHTML);//2、在所有DIV标签中，获取最后一个div//alert($("div:last")[0].innerHTML);//3、在所有DIV标签中，获取所有偶数位的div/* var arr = $("div:even");for (var i = 0; i < arr.length; i++) {alert(arr[i].innerHTML);}*///4、在所有DIV标签中，获取所有奇数位的div/*var arr = $("div:odd");for (var i = 0; i < arr.length; i++) {alert(arr[i].innerHTML);}*///5、在所有DIV标签中，获取除了第一位以外所有的div/*var arr1 = $("div:not(div:first)")for (var i = 0; i < arr1.length; i++) {alert(arr1[i].innerHTML)}*///6、在所有DIV标签中，获取索引等于1的div// alert($("div:eq(1)")[0].innerHTML)//7、在所有DIV标签中，获取索引大于1的div//alert($("div:gt(1)")[0].innerHTML)//8、在所有DIV标签中，获取索引小于1的divalert($("div:lt(1)")[0].innerHTML)});</script>
</head>
<body><div>11111111，索引是0</div><div>22222222，索引是1</div><div>33333333，索引是2</div><div>44444444，索引是3</div><div>55555555，索引是4</div><div>66666666，索引是5</div><div>77777777，索引是6</div><div>88888888，索引是7</div>
</body>
</html>
运行效果为：
2.6、表单属性选择器（了解）
:checked 选中（单选radio ，多选checkbox）
<input type="..." checked="checked">
:selected 选择（下列列表 ）<option selected="selected">
:enabled 可用
:disabled 不可用。<xxx disabled="disabled"> | <xxx disabled=" "> | <xxx disabled>
（1）案例素材：
<script>$(function(){//获取可用的表单输入项//获取不可用的表单输入项//获取选中的复选框//获取国家下拉框中，被选中的option });</script><h1>不可用的表单输入项</h1><input type="text" disabled="disabled" /><input type="button" value="不可用按钮" disabled="disabled" /><h1>复选框</h1><input type="checkbox" name="hobby" value="code"/>编程<input type="checkbox" name="hobby" value="swimming" checked="checked"/>游泳<input type="checkbox" name="hobby" value="reading" checked="checked"/>阅读<hr /><h1>下拉选择框</h1>城市：<select id="city"><option value="">请选择</option><option value="bj">北京</option><option value="sh">上海</option></select><hr />国家：<select id="country" multiple="multiple"><option value="China" selected="selected">中国</option><option value="America" selected="selected">美国</option><option value="Russia">俄罗斯</option><option value="England">英国</option></select>
（2）编写jQuery代码
<script>$(function(){//获取可用的表单输入项//alert($("input:enabled").length);//获取不可用的表单输入项//alert($("input:disabled").length);//获取选中的复选框//alert($("input[type=checkbox]:checked").length);//获取国家下拉框中，被选中的optionalert($("#country optiona:selected").length);});
</script>
（3）完整代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="../js/jquery-3.3.1.js"></script><script>$(function(){//获取可用的表单输入项//alert($("input:enabled").length);//获取不可用的表单输入项//alert($("input:disabled").length);//获取选中的复选框//alert($("input[type=checkbox]:checked").length);//获取国家下拉框中，被选中的optionalert($("#country optiona:selected").length);});</script></head><body><h1>不可用的表单输入项</h1><input type="text" disabled="disabled" /><input type="button" value="不可用按钮" disabled="disabled" /><h1>复选框</h1><input type="checkbox" name="hobby" value="code"/>编程<input type="checkbox" name="hobby" value="swimming" checked="checked"/>游泳<input type="checkbox" name="hobby" value="reading" checked="checked"/>阅读<hr /><h1>下拉选择框</h1>城市：<select id="city"><option value="">请选择</option><option value="bj">北京</option><option value="sh">上海</option></select><hr />国家：<select id="country" multiple="multiple"><option value="China" selected="selected">中国</option><option value="America" selected="selected">美国</option><option value="Russia">俄罗斯</option><option value="England">英国</option></select></body>
</html>
运行效果为：
三、重写隔行换色(jQuery)
3.1 使用jQuery 重写隔行换色
3.1.1 知识穿插（jQuery操作class属性）
addClass( ) 给指定标签的class属性追加样式
removeClass( ) 给指定标签的class属性移除样式
案例代码：
<style>.blueDiv{background-color: #87CEFA;width:300px;height:300px;}.redDiv{background-color: red;width:300px;height:300px;}</style><script>$(function(){//1、设置d1这个div标签样式为blueDiv//2、移除d2这个div标签的redDiv样式});</script><div id="d1">11111</div><div id="d2" class="redDiv">22222</div>
（2）编写jQuery代码
<script>$(function(){//1、设置d1这个div标签样式为blueDiv$("#d1").addClass("blueDiv");//2、移除d2这个div标签的redDiv样式$("#d2").removeClass();});
</script>
（3）完整代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="../js/jquery-3.3.1.js"></script><style>.blueDiv{background-color: #87CEFA;width:300px;height:300px;}.redDiv{background-color: red;width:300px;height:300px;}</style><script>$(function(){//1、设置d1这个div标签样式为blueDiv$("#d1").addClass("blueDiv");//2、移除d2这个div标签的redDiv样式$("#d2").removeClass();});</script>
</head><body><div id="d1">11111</div><div id="d2" class="redDiv">22222</div></body>
</html>
运行显示效果为：
3.1.2 隔行换色实现
（1）案例素材源码：
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title><script type="text/javascript" src="../js/jquery-3.3.1.js"></script><style>.blue{background-color: lightskyblue;}</style></head>
<body>
<table border="1" cellpadding="0" cellspacing="0" width="80%"><tr><th></th><th>序号</th><th>商品名称</th><th>商品描述</th><th>操作</th></tr><tr><td><input type="checkbox"/></td><td>1</td><td>手机数码</td><td>手机数码商品信息</td><td><a href="#">修改</a><a href="#">删除</a></td></tr><tr><td><input type="checkbox"/></td><td>2</td><td>电脑办公</td><td>电脑办公商品信息</td><td><a href="#">修改</a><a href="#">删除</a></td></tr><tr><td><input type="checkbox"/></td><td>3</td><td>鞋靴箱包</td><td>鞋靴箱包商品信息</td><td><a href="#">修改</a><a href="#">删除</a></td></tr><tr><td><input type="checkbox"/></td><td>4</td><td>家居饰品</td><td>家居饰品商品信息</td><td><a href="#">修改</a><a href="#">删除</a></td></tr>
</table>
</body>
</html>
（2）jQuery代码编写
<script>$(function () {$("tr:gt(0):odd").addClass("blue")})
</script>（4）完整代码：
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title><script type="text/javascript" src="../js/jquery-3.3.1.js"></script><style>.blue{background-color: lightskyblue;}</style><script>$(function () {$("tr:gt(0):odd").addClass("blue")})</script>
</head>
<body><table border="1" cellpadding="0" cellspacing="0" width="80%"><tr><th></th><th>序号</th><th>商品名称</th><th>商品描述</th><th>操作</th></tr><tr><td><input type="checkbox"/></td><td>1</td><td>手机数码</td><td>手机数码商品信息</td><td><a href="#">修改</a><a href="#">删除</a></td></tr><tr><td><input type="checkbox"/></td><td>2</td><td>电脑办公</td><td>电脑办公商品信息</td><td><a href="#">修改</a><a href="#">删除</a></td></tr><tr><td><input type="checkbox"/></td><td>3</td><td>鞋靴箱包</td><td>鞋靴箱包商品信息</td><td><a href="#">修改</a><a href="#">删除</a></td></tr><tr><td><input type="checkbox"/></td><td>4</td><td>家居饰品</td><td>家居饰品商品信息</td><td><a href="#">修改</a><a href="#">删除</a></td></tr></table>
</body>
</html>四、重写全选全不选、反选(jQuery)
4.1使用jQuery 重写全选全不选、反选
4.1.1 需求说明及分析
4.1.2 知识点：jQuery
prop(“属性名”); 获取指定属性的值 等价于 attr(“属性名”)
prop(“属性名”,属性值); 设置指定属性的值为第二个参数(属性值)
removeProp(“属性名”); 移除指定属性的值 (jq3.X版本之后就把removeProp干掉了) removeAttr(“属性名”)
（1）案例素材源码；
<style>.blueDiv{background-color: #87CEFA;width:300px;height:300px;}.redDiv{background-color: red;width:300px;height:300px;}</style><script>$(function(){//1、获取d2这个div标签的class值//2、设置d1这个div标签样式为blueDiv//3、移除d2这个div标签的redDiv样式});</script><div id="d1">11111</div><div id="d2" class="redDiv">22222</div>
（2）编写jQuery代码
<script>$(function(){//1、获取d2这个div标签的class值//alert($("#dd").val());var arr = $("input").prop("value","Wendy");var ar = $("#d2").prop("class");//alert(ar)//2、设置d1这个div标签样式为blueDiv$("#d1").prop("class","blueDiv");//3、移除d2这个div标签的redDiv样式$("#d2").removeAttr("class");});
</script>
（3）完整代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="../js/jquery-3.3.1.js"></script><style>.blueDiv{background-color: #87CEFA;width:300px;height:300px;}.redDiv{background-color: red;width:300px;height:300px;}</style><script>$(function(){//1、获取d2这个div标签的class值//alert($("#dd").val());var arr = $("input").prop("value","Wendy");var ar = $("#d2").prop("class");//alert(ar)//2、设置d1这个div标签样式为blueDiv$("#d1").prop("class","blueDiv");//3、移除d2这个div标签的redDiv样式$("#d2").removeAttr("class");});</script>
</head><body><input type="text" value="Daniel" id="dd"><div id="d1">11111</div><div id="d2" class="redDiv">22222</div>
</body>
</html>
效果显示为：
4.1.3 反选知识点
数组遍历：
在JS中，我们使用普通FOR循环即可遍历数组。
在JQuery中，我们可以使数组的遍历变得更为简单。
Fn: 回调函数(数组每次遍历都会执行一次这个函数)
Function(index){//index:遍历的索引//this:当前遍历的元素对象
}
4.1.4 使用jQuery 重写全选全不选、反选
(1)案例源码：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script></script></head><body><table border="1" cellpadding="0" cellspacing="0" width="80%"><tr><th><input type="button" value="全选" onclick=""/><input type="button" value="全不选" onclick=""/></th><th>序号</th><th>商品名称</th></tr><tr><td><input type="checkbox" class="itemSelect" /> </td><td>1</td><td>手机数码</td></tr><tr><td><input type="checkbox" class="itemSelect" /> </td><td>2</td><td>电脑办公</td></tr><tr><td><input type="checkbox" class="itemSelect" /> </td><td>3</td><td>鞋靴箱包</td></tr><tr><td><input type="checkbox" class="itemSelect" /> </td><td>4</td><td>家居饰品</td></tr></table></body>
</html>
（2）编写jQuery代码
<script>function quan() {$(".itemSelect").prop("checked",true);}function bu() {$(".itemSelect").prop("checked",false);}function fan() {var arr = $(".itemSelect");arr.each(function () {var temp = $(this).prop("checked");$(this).prop("checked",!temp);})}
</script>
（3）完整代码
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="../js/jquery-3.3.1.js"></script><script>function quan() {$(".itemSelect").prop("checked",true);}function bu() {$(".itemSelect").prop("checked",false);}function fan() {var arr = $(".itemSelect");arr.each(function () {var temp = $(this).prop("checked");$(this).prop("checked",!temp);})}</script></head><body><table border="1" cellpadding="0" cellspacing="0" width="80%"><tr><th><input type="button" value="全选" onclick="quan()"/><input type="button" value="全不选" onclick="bu()"/><input type="button" value="反选" onclick="fan()"/></th><th>序号</th><th>商品名称</th></tr><tr><td><input type="checkbox" class="itemSelect" /> </td><td>1</td><td>手机数码</td></tr><tr><td><input type="checkbox" class="itemSelect" /> </td><td>2</td><td>电脑办公</td></tr><tr><td><input type="checkbox" class="itemSelect" /> </td><td>3</td><td>鞋靴箱包</td></tr><tr><td><input type="checkbox" class="itemSelect" /> </td><td>4</td><td>家居饰品</td></tr></table></body>
</html>五、 重写省市联动(jQuery)
5.1 元素value属性操作
获取value属性值
Js方式: js对象.value
Jq方式: jq对象.prop(“value”)
jQuery中，还有一种快捷操作方式：
（1）案例素材代码：
<input type="text" id="uname" value="黄蓉" /><br />
<input type="button" value="点击获取输入框的value值" onclick="run1()" />
<input type="button" value="点击设置输入框的value值" onclick="run2()" />
（2）jQuery代码编写
<script>//点击获取输入框的value值function run1(){alert($("#uname").val());}//点击设置输入框的value值function run2() {$("#uname").val("Kendra")}
（3）完整代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="../js/jquery-3.3.1.js"></script><script>//点击获取输入框的value值function run1(){alert($("#uname").val());}//点击设置输入框的value值function run2() {$("#uname").val("Kendra")}</script>
</head>
<body><input type="text" id="uname" value="Daniel" /><br /><input type="button" value="点击获取输入框的value值" onclick="run1()" /><input type="button" value="点击设置输入框的value值" onclick="run2()" />
</body>
</html>
运行显示为：
5.2 获取/设置元素内容体
1、获取/设置元素内容体HTML代码
2、获取/设置元素内容体纯文本
（1）案例素材源码：
<div id="d1"><font color="red">你好</font>
</div>
<hr />
<input type="button" value="点我获取内容体代码" onclick="run1()"/>
<input type="button" value="点我设置内容体代码为蓝色字体" onclick="run2()"/>
<hr />
<input type="button" value="点我获取内容体纯文本" onclick="run3()"/>
<input type="button" value="点我设置内容体纯文本" onclick="run4()"/>
（2）编写jQuery代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="../js/jquery-3.3.1.js"></script><script>//点我获取内容体代码 JQ对象.html()function run1() {alert($("#d1").html());}//点我设置内容体代码为蓝色字体 JQ对象.html("HTML代码")function run2() {$("#d1").html("<font color='green'>你好</font>");}//点我获取内容体纯文本 JQ对象.text()function run3() {alert($("#d1").text())}//点我设置内容体纯文本 JQ对象.text("纯文本")function run4() {$("#d1").text(" <font color='#663399'>我不好</font>")}</script>
</head><body><div id="d1"><font color="red">你好</font></div><hr /><input type="button" value="点我获取内容体代码" onclick="run1()"/><input type="button" value="点我设置内容体代码为蓝色字体" onclick="run2()"/><hr /><input type="button" value="点我获取内容体纯文本" onclick="run3()"/><input type="button" value="点我设置内容体纯文本" onclick="run4()"/></body>
</html>
效果显示为：
5.2 追加元素内容体
通常我们涉及到追加内容体，使得效果可以层层叠加。
以下两句效果相同，写法不同
A.append(B) , 向A的末尾追加B
B.appendTo(A) ，将B追加到A的末尾
（1） 案例素材源码：
以下两句效果相同，写法不同
A.prepend(B) , 向A的头部追加B
B.prependTo(A) ， 将B追加到A的头部
（1）案例素材源码：
<ul id="rank"><li>Php</li><li>Android</li><li>Ios</li>
</ul>
<hr /><input type="button" value="列表头部追加Java" onclick="run1()" /><input type="button" value="列表尾部追加Java" onclick="run2()" />
（2）完整代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="../js/jquery-3.3.1.js"></script><script>//列表头部追加Java A.prepend(B) , 向A的头部追加Bfunction run1() {$("#rank").prepend("<li>java</li>");}//列表尾部部追加Java B.prependTo(A) ， 将B追加到A的头部function run2() {$("#rank").append("<li>C#</li>");}</script>
</head><body><ul id="rank"><li>Php</li><li>Android</li><li>Ios</li></ul><hr /><input type="button" value="列表头部追加Java" onclick="run1()" /><input type="button" value="列表尾部追加Java" onclick="run2()" /></body>
</html>
运行结果显示为：
5.3 重写省市联动
（1）案例素材准备
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><script>// 定义二维数组,存储城市信息var cities = new Array();cities[0] = new Array("海淀区","房山区","朝阳区");cities[1] = new Array("长春市","吉林市","松原市","延边市");cities[2] = new Array("济南市","青岛市","烟台市","潍坊市","淄博市");cities[3] = new Array("石家庄市","唐山市","邯郸市","廊坊市");cities[4] = new Array("南京市","苏州市","扬州市","宿迁市");</script><body><select id="province" style="width:150px"><option value="">----请-选-择-省----</option><option value="0">北京</option><option value="1">吉林省</option><option value="2">山东省</option><option value="3">河北省</option><option value="4">江苏省</option></select><select id="city" style="width:150px"><option>----请-选-择-市----</option></select></body>
</html>（2）添加onchange方法
οnchange="changeCity(this.value)"
（3）编写jQuery代码：
<script>function changeCity(obj) {//1.根据obj获取城市信息var arr = cities[obj];//alert(arr);//2.获取请选择市的元素对象var city = $("#city");//4.清空（原始状态）city.html("<option>----请-选-择-市----</option>");//3.遍历出城市信息，然后追加请选择市的下拉框内$(arr).each(function () {city.append("<option >"+this+"</option>")})}</script>
（4）完整代码：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><script type="text/javascript" src="../js/jquery-3.3.1.js"></script><script>function changeCity(obj) {//1.根据obj获取城市信息var arr = cities[obj];//alert(arr);//2.获取请选择市的元素对象var city = $("#city");//4.清空（原始状态）city.html("<option>----请-选-择-市----</option>");//3.遍历出城市信息，然后追加请选择市的下拉框内$(arr).each(function () {city.append("<option >"+this+"</option>")})}</script><script>// 定义二维数组,存储城市信息var cities = new Array();cities[0] = new Array("海淀区","房山区","朝阳区");cities[1] = new Array("长春市","吉林市","松原市","延边市");cities[2] = new Array("济南市","青岛市","烟台市","潍坊市","淄博市");cities[3] = new Array("石家庄市","唐山市","邯郸市","廊坊市");cities[4] = new Array("南京市","苏州市","扬州市","宿迁市");</script><body><select id="province" style="width:150px" onchange="changeCity(this.value)"><option value="">----请-选-择-省----</option><option value="0">北京</option><option value="1">吉林省</option><option value="2">山东省</option><option value="3">河北省</option><option value="4">江苏省</option></select><select id="city" style="width:150px"><option>----请-选-择-市----</option></select></body>
</html>完成效果显示：
六、倒计时效果
6.1 需求说明及分析
在页面中有按钮,实现5秒以后才可以点击,有倒计时效果; (5秒之后图1变为图2)：
图1：(注:开始是灰色不可点击)
图2：(注:5秒之后内容变更为同意, 且可以点击)
6.2 案例实现
（1）案例素材源码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title><script type="text/javascript" src="js/jquery-3.3.1.js" ></script><script></script></head><body><input type="button" id="btnShow" value="请仔细阅读协议(5)" /></body>
</html>
（2）编写jQuery代码：
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script><script>var id;$(function () {//1.按钮变成不可点击（disabled）$("#btnShow").prop("disabled",true);id = setInterval("daoji()",1000);})var count=4;function daoji() {if(count == 0){//将按钮的值改变为同意，可点击，并且停止定时器$("#btnShow").val("同意");$("#btnShow").prop("disabled",false);//清楚定时器clearInterval(id)}else{$("#btnShow").val("请仔细阅读协议("+count+")")}count --;}</script>
（3）完整代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title><script type="text/javascript" src="../js/jquery-3.3.1.js"></script><script>var id;$(function () {//1.按钮变成不可点击（disabled）$("#btnShow").prop("disabled",true);id = setInterval("daoji()",1000);})var count=4;function daoji() {if(count == 0){//将按钮的值改变为同意，可点击，并且停止定时器$("#btnShow").val("同意");$("#btnShow").prop("disabled",false);//清楚定时器clearInterval(id)}else{$("#btnShow").val("请仔细阅读协议("+count+")")}count --;}</script></head><body><input type="button" id="btnShow" value="请仔细阅读协议(5)" /></body>
</html>
显示效果为：
七、数组内容显示到下拉列表
7.1 需求说明及分析
当页面加载完成后，就将数组的内容显示到下拉列表
7.2 案例实现
(1)素材源码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript" src="js/jquery-1.11.3.min.js"></script></head>
<body><select id="s1"><option value="">四大姊妹
</option></select>
</body>
</html>
(2)完整源码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="../js/jquery-3.3.1.js"></script><script>var arr = ["Daniel","Wendy","Kendra","Guoguo"];$(function () {$(arr).each(function () {$("#add").append("<option value=''>"+this+"</option>")})})</script>
</head><body><select id="add"><option value="">四大姊妹</option></select></body>
</html>
运行显示为：
八、列表左右选择
8.1 需求说明及分析
8.2 案例实现
（1）素材源码：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script></script></head><body><select id="leftSelectId" multiple="multiple" style="width: 100px;height: 200px;"><option>左1</option><option>左2</option><option>左3</option><option>左4</option><option>左5</option></select><input type="button" value="》" /><input type="button" value="》》"/> <input type="button" value="《" /><input type="button" value="《《" /><select id="rightSelectId" multiple="multiple" style="width: 100px;height: 200px;"><option>右1</option><option>右2</option><option>右3</option><option>右4</option><option>右5</option></select><hr /></body>
</html>
(2)添加四个方法run1(),run2(),run3(),run4
(3)完整源码
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="../js/jquery-3.3.1.js"></script><script>//将左边选中的数据追加到右边列表末尾function run1() {$("#leftSelectId option:selected" ).appendTo($("#rightSelectId"));}//将左边全部的数据追加到右边列表末尾function run2() {$("#leftSelectId option" ).appendTo($("#rightSelectId"));}//将右边选中的数据追加到左边列表的末尾function run3() {$("#rightSelectId option:selected" ).appendTo($("#leftSelectId"));}//将右边全部数据追加到左边列表的末尾function run4() {$("#rightSelectId option" ).appendTo($("#leftSelectId"));}</script></head><body><select id="leftSelectId" multiple="multiple" style="width: 100px;height: 200px;"><option>左1</option><option>左2</option><option>左3</option><option>左4</option><option>左5</option></select><input type="button" value="》" onclick="run1()" /><input type="button" value="》》" onclick="run2()"/> <input type="button" value="《" onclick="run3()" /><input type="button" value="《《" onclick="run4()" /><select id="rightSelectId" multiple="multiple" style="width: 100px;height: 200px;"><option>右1</option><option>右2</option><option>右3</option><option>右4</option><option>右5</option></select><hr /></body>
</html>
（4）效果完成：
效果二：
完成效果
九、jQuery常见事件
jQuery事件比js事件少写了一个on
6.2、jQuery事件定义方式
我们以鼠标移入、移出和点击事件为例讲解：
鼠标移入：mouseover
鼠标移出：mouseout
点击事件：click
格式：jQuery对象.mouseover(fn);
其中: Fn: 当鼠标移入时会调用这个函数( 回调函数 )
(1)素材准备
<style>#d1{background-color: #87CEFA;width:300px;height:300px;}#d2{background-color:bisque;width:300px;height:300px;}</style><script>$(function(){//页面加载完成时，//为d1加入鼠标移入和点击事件//为d2加入鼠标移出事件});
</script><div id="d1">我是div1</div><div id="d2">我是div2</div>
(2) 完整实现
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#d1{background-color: #87CEFA;width:300px;height:300px;}#d2{background-color:bisque;width:300px;height:300px;}</style><script type="text/javascript" src="../js/jquery-3.3.1.js"></script><script>$(function(){//页面加载完成时，//为d1加入鼠标移入和点击事件$("#d1").mouseover(function () {alert("鼠标移入了");}).click(function () {alert("鼠标点击了");//鼠标移入后点击或按键盘空格才起作用})//为d2加入鼠标移出事件$("#d2").mouseout(function () {alert("鼠标移出了")})});</script>
</head>
<body><div id="d1">我是div1</div><div id="d2">我是div2</div>
</body>
</html>
(3)实现效果：
十、重写表单校验(jQuery)
10.1 需求说明与分析
要求:
1.用户名 密码 确认密码 邮箱 出生日期不能为空
2.用户名的长度在6—12之间
3.密码和确认密码必须保持一致
4.Email必须符合邮箱的格式
5.出生日期必须符合日期格式
10.2、走进知识点-JQuery
10.2.1、JQuery插件-validation
10.2.1.1、插件简述
插件简述
10.2.1.2、插件导入
点我下载
导入顺序
jQuery.validate.js所在位置：
jQuery-validation插件\jquery-validation-1.15.0\dist\ jQuery.validate.js
messages_zh.js所在位置：
jQuery-validation插件\jquery-validation-1.15.0\dist\localization\messages_zh.js
（1）案例素材源码
为指定表单加入校验
validate需要手动的声明，对那个表单进行校验，及需要手动调用validate()方法。
<script type="text/javascript">$(function () {//为指定表单加入校验$("#表单ID").validate();});
</script>
为校验加入规则
validate()方法中可以指定添加规则
<script type="text/javascript">$(function () {//为指定表单加入校验$("#表单ID").validate({rules:{name1:{ 规则1:规则值,规则2：规则值},name2:{规则1:规则值,规则2：规则值}}});});
</script>
规则速查表
（2）完整源码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="../js/jquery-3.3.1.js"></script><script type="text/javascript" src="../js/jquery.validate.js"></script><script type="text/javascript" src="../js/messages_zh.js"></script><script type="text/javascript">$(function () {//为指定表单加入校验$("#f1").validate({rules:{username:{required:true,rangelength:[6,10]},email:{email:true},birthday:{date:true},sal:{number:true},workForday:{range:[6,16]},pwd:{required:true},repwd:{required:true,equalTo:"#pwd"}}});});</script>
</head><body><form id="f1"><table border="1" width="100%" cellpadding="0" cellspacing="0"><tr><td colspan="3"><font color="cornflowerblue" size="5">测试表单</font></td></tr><tr><td>用户名（必填字段，长度范围6~10）</td><td colspan="2"><input type="text" name="username" /></td></tr><tr><td>Email（符合邮件格式）</td><td colspan="2"><input type="text" name="email" /></td></tr><tr><td>出生日期（日期格式）</td><td colspan="2"><input type="text" name="birthday" /></td></tr><tr><td>薪资（数字）</td><td colspan="2"><input type="text" name="sal" /></td></tr><tr><td>一天工作时长（值范围6~16）</td><td colspan="2"><input type="text" name="workForday" /></td></tr><tr><td>密码（必须填写）</td><td colspan="2"><input type="text" name="pwd" id="pwd"/></td></tr><tr><td>确认密码（必须填写，且与密码值要相同）</td><td colspan="2"><input type="text" name="repwd" /></td></tr><tr><td></td><td colspan="2"><input type="submit" value="注册" /></td></tr></table></form></body>
</html>
（3）效果显示：
（4）需求：将错误提示信息改为红色
通过F12查找都为lable标签所以直接添加：
直接添加即可：
<style>label{color: red;}
</style>
为规则自定义错误信息
messages可以为已经定好的规则自定义错误信息
<script type="text/javascript">$(function () {//为指定表单加入校验$("#表单ID").validate({rules:{name1:{规则1:规则值,规则2:规则值}},messages:{name1:{规则1:"自定义错误信息"}}});});
</script>
上述代码追加：
messages:{username:{required:"亲，这是必填字段哦",rangelength:"必须要填6到10位字哦，狗崽！"}
}
显示：
动态取值:
{0}: 动态取值第一个值
{1}: 动态取值第二个值
10.2.1.3、自定义校验规则（扩展-了解）
如果希望自定义校验规则，需要在为表单加入校验之前，使用$.validator.addMethod完成。
$.validator.addMethod(name , method , message);参数1：name，校验规则的名称。例如：required range参数2：method，执行校验时调用的函数。//参数value：表单项的value值。例如：<input value="">//参数ele：被校验的表单项对象。 一般不用//参数params：使用当前校验规则传递的值。例如：rules : { 规则1: 规则值params }function(value , ele , params ){//该方法必须返回true或者false//返回true，意味着符合规则//返回false，意味着不符合规则，阻止表单提交，同时展示错误信息} 参数3：message，校验未通过时的提示信息
(1)案例实现代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="../js/jquery-3.3.1.js"></script><script type="text/javascript" src="../js/jquery.validate.js"></script><script type="text/javascript" src="../js/messages_zh.js"></script><style>label{color: red;}</style><script type="text/javascript">$(function () {//为指定表单加入校验//自定义校验规则//第一个参数: 校验规则名称//第二个参数: 执行逻辑判断//第三个参数:提示错误信息$.validator.addMethod("Daniel" ,function (value,ele,param) {//文件中去下载 身份证正则表达式var reg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;var iCard = reg.test(value);return iCard;}, "请输入合适的身份证号");$("#f1").validate({rules:{iCard:{Daniel:true}}});});</script>
</head><body><form id="f1"><table border="1" width="100%" cellpadding="0" cellspacing="0"><tr><td colspan="3"><font color="cornflowerblue" size="5">测试表单</font></td></tr><tr><td>身份证校验</td><td colspan="2"><input type="text" name="iCard" /></td></tr><tr><td></td><td colspan="2"><input type="submit" value="注册" /></td></tr></table></form></body>
</html>
实现效果：
正确输入
10.3 重写表单校验
（1）案例源码：里面图片下载
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">body{height:400px;}#divFormId{border: 5px solid #999;width: 640px;margin: 0 auto;padding: 20px;background-color: #fff;}#divbg{background: url(img/regist_bg_20190806_115335.jpg);height:100%;padding-top: 80px;}td{padding-top: 10px;}</style><script></script></head><body><div id="divbg"><div id="divFormId"><form action="#" method="get" id="form"><table width="660"><tr><td colspan="3"><font color="#3164af" size="5">会员注册</font> USER REGISTER</td></tr><tr><td align="right">用户名</td><td colspan="2"><input type="text" id="username" name="username" size="35"/></td></tr><tr><td align="right">密码</td><td colspan="2"><input type="password" id="pwd" name="pwd" size="35"/></td></tr><tr><td align="right">确认密码</td><td colspan="2"><input type="password" id="repwd" name="repwd" size="35"/></td></tr><tr><td align="right">Email</td><td colspan="2"><input type="text" id="email" name="email" size="35"/> </td></tr><tr><td align="right">性别</td><td colspan="2"><input type="radio" name="sex" value="man" checked="checked" />男<input type="radio" name="sex" value="woman" />女</td></tr><tr><td align="right">出生日期</td><td colspan="2"><input type="text" id="birthday" name="birthday" size="35"/> </td></tr><tr><td width="80" align="right">验证码</td><td width="100"><input type="text" id="verifyCode" name="verifyCode" /> </td><td><img src="img/verifyCode.jpg" /> </td></tr><tr><td></td><td colspan="2"><input type="image" src="img/submit.jpg" /></td></tr></table></form></div></div></body>
</html>(2)引入插件：
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="../js/jquery.validate.js"></script>
<script type="text/javascript" src="../js/messages_zh.js"></script>
(3) 添加提示错误信息字样式
<style>label{color: red;}
</style>
（4）添加id（缺啥补啥）
(4)编写jQuery代码：
<script>$(function () {$("#form").validate({rules:{username:{required:true,rangelength:[6,12]},pwd:{required:true},repwd:{required:true,equalTo:"#pwd"},email:{required:true,email:true,},birthday:{required:true,dateISO:true}}})})</script>
（5）完整代码：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="../js/jquery-3.3.1.js"></script><script type="text/javascript" src="../js/jquery.validate.js"></script><script type="text/javascript" src="../js/messages_zh.js"></script><style>label{color: red;}</style><script>$(function () {$("#form").validate({rules:{username:{required:true,rangelength:[6,12]},pwd:{required:true},repwd:{required:true,equalTo:"#pwd"},email:{required:true,email:true,},birthday:{required:true,dateISO:true}}})})</script><style type="text/css">body{height:400px;}#divFormId{border: 5px solid #999;width: 640px;margin: 0 auto;padding: 20px;background-color: #fff;}#divbg{background: url(img/regist_bg_20190806_115335.jpg);height:100%;padding-top: 80px;}td{padding-top: 10px;}</style><script></script></head><body><div id="divbg"><div id="divFormId"><form action="#" method="get" id="form"><table width="660"><tr><td colspan="3"><font color="#3164af" size="5">会员注册</font> USER REGISTER</td></tr><tr><td align="right">用户名</td><td colspan="2"><input type="text" id="username" name="username" size="35"/></td></tr><tr><td align="right">密码</td><td colspan="2"><input type="password" id="pwd" name="pwd" size="35"/></td></tr><tr><td align="right">确认密码</td><td colspan="2"><input type="password" id="repwd" name="repwd" size="35"/></td></tr><tr><td align="right">Email</td><td colspan="2"><input type="text" id="email" name="email" size="35"/> </td></tr><tr><td align="right">性别</td><td colspan="2"><input type="radio" name="sex" value="man" checked="checked" />男<input type="radio" name="sex" value="woman" />女</td></tr><tr><td align="right">出生日期</td><td colspan="2"><input type="text" id="birthday" name="birthday" size="35"/> </td></tr><tr><td width="80" align="right">验证码</td><td width="100"><input type="text" id="verifyCode" name="verifyCode" /> </td><td><img src="img/verifyCode.jpg" /> </td></tr><tr><td></td><td colspan="2"><input type="image" src="img/submit.jpg" /></td></tr></table></form></div></div></body>
</html>(6)效果显示：
Web前端-jQuery（四）相关推荐
- Web前端JQuery面试题（三）
Web前端JQuery面试题(三) 1.怎么阻止冒泡过程? stopPropagation(); // 阻止冒泡过程 2.ready()方法和onload()方法的区别? onload()方法要等页面 ...
- Web前端——jQuery库
Web前端笔记 第七部分:jQuery 1. jQuery介绍 jQuery是目前使用最广泛的javascript函数库. 据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库 ...
- WEB前端.jQuery
持续更新呢,莫(mo)急(yu)....ヽ(￣▽￣)ﾉヽ(￣▽￣)ﾉ 后续会补全代码块注释,并加入body标签内容 篇首节 README: 定位:WEB前端 目的:适合有jQuery知识基础萌新阅读. ...
- Web前端JQuery入门实战案例
前端jquery入门到实战 为什么要学习Jquery?因为生活. 案例: <!DOCTYPE html> <html lang="zh-CN"> <h ...
- 转载 web前端进阶四阶段
前端工程的四个阶段 转载自:http://www.cnblogs.com/lanlanlan00/p/7155663.html 写在前面:引用别人的,在我看来说得比较浅显易懂的. 现在的前端开发倒也并 ...
- Web前端 jQuery
1.初始jQuery 1.1.jQuery是什么? jQuery由美国人John Resig于2006年创建,jQuery 是一个快速.简洁的 JavaScript 库,其设计的宗旨是"wr ...
- Web前端-jQuery
目录 1 前言 2 概述 2.1 jQuery是什么 2.2 jQuery在js中的使用 2.3 dom对象和jQuery对象 3 jQuery的基本语法 3.1 选择器 3.2 表单选择器 3.3 ...
- web前端----jQuery属性操作
知识点总结 1.属性 属性(如果你的选择器选出了多个对象,那么默认只会返回出第一个属性). attr(属性名|属性值) - 一个参数是获取属性的值,两个参数是设置属性值 - 点击加载图片示例 remo ...
- Web前端—— JQuery迷你版实现以及使用
JQuery迷你版实现以及使用 tiny_jquery.js var $ = function (selector) {var ele = document.querySelector(selecto ...
最新文章
- 【原创】TimeSten安装与配置
- 一位刚刚成功上岸的智能车队员对于参赛经历总结与对比赛的建议
- linux 三大利器 grep sed awk sed
- pytorch 笔记：torch_geometric （1）创建一张图
- debian 文件夹中文件大小_debian 记录用到的命令 文件夹 目录等操作
- Django在admin.py中设置date_hierarchy时报错
- 生物信息学概论_大学专业详解系列83——生物信息学（理学学士）
- ASP.Net 附加调试,aspnet_wp.exe进程不能启动解决办法 .
- 网络（9）-HTTPS协议
- Three.js 基础
- Shiro入门视频课程——笔记（一）
- 如何给自定义控件添加自定义属性
- centos7 Rsync服务端和windows cwRsync实现数据同步(增量备份)
- 使用medusa破解密码
- Windows 10 版本 1507 中的新 AppLocker 功能
- 作为一个面试官，我是怎么来面试测试人员的？
- android绘制半圆弧线_android canvas使用line画半圆
- java anon,shiro anon 不生效
- Zookeeper分布式锁
- TAOCP作者的高德纳--------有神有关的故事