<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#myForm label.error {
color: red;
font-size: ;
}
</style>
<!-- 引入jQuery库 -->
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入jQuery表单验证引入 -->
<script src="js/jquery.validate.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/*jQuery第五次课*/
$(function() {
/* var s1={};
var s2={"name":"欧阳","sex":"女"};
console.info(s1.name,s1.sex);
console.info(s2.name,s2.sex);
//开始继承
$.extend(s1,s2);//s1继承自s2
console.info(s1.name,s1.sex);
console.info(s2.name,s2.sex); */
//1.2
//案例2:求最大值(最小值)
/* $.extend({
abcd:function(){
alert(1234);
},
getMax:function(a,b){
return a>b?a:b;
},
getMin:function(a,b){
return a<b?a:b;
}
}); */
//调用类方法
/* var max=$.getMax(39,5);
console.info(max); */
// console.info($.getMin(22,34));
// $.absc();
//1.3 $.fn.extend()扩展jQuery对象方法
$.fn.extend({
xx: function() {
//遍历
$(this).each(function(i, ck) { //ck指每一个复选框
ck.checked = true; //让其选中
})
},
yy: function() {
//遍历
$(this).each(function(i, ck) { //ck指每一个复选框
ck.checked = false; //让其选中
})
}
})
//案例3:实现全选效果
$("#ok").click(function() {
$(".aaa").xx();
})
$("#nook").click(function() {
$(".aaa").yy();
})
//复选框实现全选
$("#qx").on("click", function() {
//让其复选框的状态跟全选框保持一致
// console.info($("#qx").porp("checked"));
// if($(this).prop("checked")){//说明全选框是选中的
if ($(this).is(":checked")) {
$(".aaa").xx(); //让其他复选框选中
} else {
$(".aaa").yy();
}
})
//完善全选
$(".aaa").click(function() {
//遍历
$(".aaa").each(function(i, ck) { //ck指的是每一个复选框
if (ck.checked == flase) { //只要有任何一个没有选中
f = false;
}
//给全选框重新赋值
$("#qx").prop("checked")
})
})
// 二,第三方插件:表单验证插件
//案例4:表单验证(用户名,密码,确认密码,年龄,邮件,网址url)
$("#myForm").validate({
rules: {
//字段的规则部分
uname: {
required: true,
rengelength: [6, 10]
},
upwd1: "required",
upwd2: {
requored: true,
equalTo: "#upwd1"
},
uemail: {
required: true,
email: true
},
uage: {
required: true,
range: [1, 150]
},
uurl: {
required: true,
url: true
}
},
messages: {
//错误信息提示部分
uname: {
required: "用户名必填",
rengelength: "长度要在6-10之间"
},
upwd1: "密码必填",
upwd2: {
requored: "确定密码必填",
equalTo: "两次密码不一致"
},
uemail: {
required: "邮件必填",
email: "邮箱格式错误"
},
uage: {
required: "年龄必填",
range: "年龄在1-150岁之间"
},
uurl: {
required: "网址必填",
url: "网址输入错误"
}
}
})
})
</script>
</head>
<body>
<h2>案例3:自定义插件实现全选功能</h2>
<input type="button" value="全选" id="ok" />
<input type="button" value="取消全选" id="nook" />
<input type="checkbox" id="qx" value="全选" />全选
<input type="checkbox" class="aaa" value="躺着听网课" />躺着听网课
<input type="checkbox" class="aaa" value="吃辣条" />吃辣条
<input type="checkbox" class="aaa" value="玩soul" />玩soul
<h2>案例4:使用jQuery validation插件完成表单验证</h2>
<form id="myForm">
用户名:<input type="text" name="uname" /><br />
密码:<input type="text" name="upwd1" /><br />
确认密码:<input type="text" name="upwd2" /><br />
邮箱:<input type="text" name="uemail" /><br />
年龄:<input type="text" name="uage" /><br />
网址:<input type="text" name="uurl" /><br />
<input type="submit" value="提交" />
</form>
</body>
</html>
jQuey_05笔记
自己理解才是王道