jQuery ---- 插件

最新推荐文章于 2022-10-31 19:06:39 发布

白敬亭的鞋44ma

最新推荐文章于 2022-10-31 19:06:39 发布

阅读量1.1k

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/qq_66924116/article/details/123659702

版权

jquery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一、自定义插件

案例1：两个对象的继承

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

                        var s1={};
//                var s2={"name":"小小","age":20};
//                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);

案例2：求最大值(最小值)

1.2 $.extend()扩展jQuery类方法

方法：

         $.extend({
//                    abcd:function(){
//                        alert(2);
//                    },
//                    getMax:function(a,b){
//                        return a>b?a:b;
//                    },
//                    getMin:function(){
//                        return a<b?a:b;
//                    }
//                    });

最后调用类方法(必须接收或者大打印)

var max=$.getMax(12,34);
console.info(max);
// $.abcd();

1.3 $.fn.extend()扩展jQuery对象方法

        定义方法：
				$.fn.extend({
					xx:function(){//方法名
						//遍历
						$(this).each(function(i,ck){//ck每一个复选框 ,this指代调用方法的人即三个复选框
							ck.checked=true;//让其选中
						})
					},
					yy:function(){
						//遍历
						$(this).each(function(i,ck){//ck每一个复选框
							ck.checked=false;//让其选中
						})
					}
				})

案例3：实现全选效果

1.按钮实现全选：

1.按钮实现全选
	调用方法
				$("#ok").click(function(){
					$(".aaa").xx();
				}),
				
				$("#not").click(function(){
					$(".aaa").yy();
				})

2.复选框实现全选

2.复选框实现全选
				$("#qx").click(function(){
					//让其他复选框和全选框状态保持一致
					// console.info($("#qx").prop("checked"));
					// if($(this).prop("checked")){//说明全选选中
					if($(this).is(":checked")){
					$(".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);
               })

二、第三方插件:使用jQuery validation插件完成表单

案例4：表单验证(用户名、密码、确认密码、年龄、邮箱、网址url)

required：必填

$("#myForm").validate({
                   rules:{
                       //规则部分
                       uname:{
                           required:true,
                           rangelength:[6,10]//长度6-10之间
                       },
                       upwd1:"required",
                       upwd2:{
                           required:true,
                           equalTo:"#upwd1"
                       },
                       uemail:{
                           required:true,
                           email:true
                       },
                       uage:{
                           required:true,
                           range:[1,150]//1-150
                       },
                       uurl:{
                           required:true,
                           url:true
                       }
                   },
                   messages:{
                       //信息提示部分
                       uname:{
                           required:"用户名必填",
                           rangelength:"用户名长度必须在6-10之间"
                       },
                       upwd1:"密码必填",
                       upwd2:{
                           required:"新密码必填",
                           equalTo:"#upwd1"
                       },
                       uemail:{
                           required:"邮箱必填",
                           email:"邮箱格式不正确"
                       },
                       uage:{
                           required:"年龄必填",
                           range:"年龄要在1-150之间"//1-150
                       },
                       uurl:{
                           required:"网址必填",
                           url:"网址格式不正确"
                       }

                   }
               })