<!DOCTYPE html>
<html>
<head>
插件
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<script src="" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// jQuerry第五次课
// 区分java的类方法以及对象方法
// --类(静态)方法:六DBHelper.getCon()
//--对象方法:stuDao sd=new StuDao;sd.addStu();
$(function(){
//一·自定义插件
//1.1$.extend()实现对象继承
/* //案例1 两个对象的继承
var s1={};
var s2={"name":"大炮","age":38};
console.info("继承前："+s1.name,s1.age);
console.info("继承前："+s2.name,s2.age);
//开始继承
$.extend(s1,s2);//s1继承s2
console.info("继承后："+s1.name,s1.age);
console.info("继承后："+s2.name,s2.age); */
// 1.2 $.extend()扩展jQuery类方法
//案例 求最大值(最小值)
/* $.extend({
abcd:function(){
alert(1234);
},
getMax:function(a,b){
return a>b?a:b;
},
getMin:function(a,b){
return a<b?a:b;
}
}); */
// $.abcd();
// var max= $.getMax(10,40);
// console.info(max);
// console.info($.getMin(10,30));
// 1.3$.fn.extend()扩展jQuery对象方法
/* $.fn.extend({
xx.Function(){
$(this).each(function(i,ck){//下标,ck指每一个复选框
ck.checked=true;
})
}
})
//取消全选方法
$.fn.extend({
yy.Function(){
$(this).each(function(i,ck){//下标,ck指每一个复选框
ck.checked=false;
})
}
})
//案例3:实现全选效果
//用按钮实现
//全选
$("#ok").click(function(){
$(".aaa").xx();
})
//取消全选
$("#ok").click(function(){
$(".aaa").yy();
})
//用复选框实现
$("#qx").on("click",function(){
//判断全选框是否选中
// 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==false){
f=false;
}
})
$("#qx").prop("checked",f);
})
*/
// 二.第三方插件:表单验证插件,
//案例4 表单验证 (用户名.密码.确认密码.年龄.邮箱.网址url)
$("#myForm").validate({
rules:{
uname:{
required:true,
rangelength:[6,10]
},
upwd1:"required",
upwd2:{
required:true,
equalTo:"#upwd1"
},
uage{
required:true,
email:[1,140]
},
},
messages:{
}
})
})
</script>
</head>
<body>
<h2>案例3：自定义插件实现全选功能</h2>
<input type="button" name="" id="ok" value="全选" />
<input type="button" name="" id="nook" value="取消全选" />
<input type="checkbox" name="" id="qx" value="全选" />
<input type="checkbox" name="" class="aaa" value="看美女" />看美女
<input type="checkbox" name="" class="aaa" value="打王者" />打王者
<input type="checkbox" name="" class="aaa" value="上网课" />上网课
<h2>案例4 使用jQuery validation插件完成表单验证</h2>
<form id="myFom">
用户名<input type="text" name="uname" id="" value="" /><br>
密码<input type="text" name="upwd1" id="upwd1" value="" /><br>
确认密码<input type="text" name="upwd2" id="" value="" /><br>
邮箱<input type="text" name="uemail" id="" value="" /><br>
年龄<input type="text" name="uage" id="" value="" /><br>
网址<input type="text" name="uurl" id="" value="" /><br>
<input type="submit" name="" id="" value="提交" />
</form>
</body>
</html>
258
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
