jQuery05插件

最新推荐文章于 2024-03-14 07:00:00 发布

原创最新推荐文章于 2024-03-14 07:00:00 发布 · 154 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

本文介绍了如何使用jQuery自定义插件实现全选功能，以及如何通过jQuery验证插件进行表单字段校验，包括用户名、密码等常见输入验证。

<!DOCTYPE html>

<html>

<head>

#myForm lable.error{

color:red;

font-size:14px;

}

</style>

/* jQuery第五次课☞插件 */

* 区分java的类方法以及对象方法

* --类(静态)方法：例如DBHelper.getCon()

* --对象方法：StuDao sd = new StuDao(); sd.addStu();

$(function(){

/* 一、自定义插件 */

//1.1 $.extend()实现对象继承

//案例1：两个对象的继承

// var s1={};

// var s2={"name":"小炮","age":28};

// 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类方法

//案例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(10,40);

// console.info(max);

// console.info($.getMin(10,50));

//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($(this).prop("checked"));

// // if($(this).prop("checked")){//选中了

// if($(this).is(":checkbox")){

// $(".aaa").xx();//让其他的复选框也选中

// }

// else{

// $(".aaa").yy();

// }

// })

// // 给其他复选框添加点击事件

// $(".aaa").click(function(){

// var f=true;//假设全选框没有选中的

// $(".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"

uemail:{

required:true,

email:true

uage:{

required:true,

range:[1,150]

uurl:{

required:true,

url:true

}

maessages:{

// 错误信息提示

uname:{

required:"用户名必填",

rangelength:"用户名长度必须在6-10位之间"

}

});

})

</script>

</head>

<body>

<h2>案例3:自定义插件实现全选功能</h2>

<input type="checkbox" id="qx"/>全选

<input type="checkbox" value="看美女" class="aaa"/>看美女

<input type="checkbox" value="打王者" class="aaa"/>打王者

<input type="checkbox" value="上网课" class="aaa"/>上网课

<h2>案例4:使用jQuery validation插件完成表单验证</h2>

用户名:<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/>

</form>

</body>

</html>