【无标题】

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

• 前言
• 一、自定义插件言
• 二、第三方插件
• 总结

---

一、自定义插件

(1)  $.extend
概述：

        作用1——对象继承

        作用2——扩展jQuery类方法

代码如下（示例）：

//1.1 $.extend()实现对象继承
                //案例1：两个对象的继承
                var person = {
                    "name": "耶啵",
                    "sex": "男",
                    "age": 26
                };
                console.log($.type(person));
                var stu = {};
    //使用$.extend()来实现将stu继承person中的属性
                // $.extend(stu,person);
                // console.log(person);
                // console.log(stu); 
                //extend (三个参数)
                var wyb = {
                    "love": 100
                }
                console.log(wyb);
                $.extend(wyb, stu, person);
                $.extend(stu, person);
                console.log(person);
                console.log(stu);
                console.log(tqq);
    //1.2 $.extend()扩展jQuery类方法
                $.extend({
                    "mydemo": function() {
                        console.log("这就是我编写的类方法");
                    }
                });
                //调用扩展的类方法
                $.mydemo();

 (2)  $.fn.extend
概述：

        作用——扩展 jQuery 元素集来提供新的方法（通常用来制作插件）

代码如下（示例）：

    //案例3：实现全选效果
                //1.3 $.fn.extend()扩展jQuery对象方法(作用：实现全选)
                $.fn.extend({
                    "mycheck":function(){
                        console.log(123);
                    }
                });
                //为全选按钮设置一个点击事件并调用对象方法
                $("#qx").click(function() {
                    // $("input:checkbox") 得到的是所有的复选框
                });

————————————————
版权声明：本文为CSDN博主「名字太难～」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_67888923/article/details/123491770

二、第三方插件

 (1)  $.fn.extend
        1.1表单验证

概述：

        插件名——jQuery Validation

           使用步骤
                【1】.下载jQuery插件验证库
                                    jquery.validate.js
                【2】.将类库引入页面
                【3】.两种方式使用验证
                             HTML标签属性方式
                             JS方式【推荐】

代码如下（示例）：

<!-- 第三方插件（表单验证） -->
        <script type="text/javascript">
            $(document).ready(function(){
                // 获取表单标签调用设置插件的方法
                $("#myForm").validate({
                    // 规则rules
                    rules:{
                        // 账号username
                        username:{
                            required:true
                        },
                        // 验证邮箱规则
                        myeamil:{
                            required:true,
                            email:true
                        }
                    },
                    // 自定义错误信息messages
                    messages:{
                        // 账户的错误信息提示
                        username:{
                            required:"用户名不能为空"
                        },
                        myeamil:{
                            required:"邮箱不能为空",
                            email:"邮箱的格式不满足要求"
                        }
                    }
                });
            
            })
        </script>

---

总结