jquery插件

W1820743154

于 2022-04-05 22:52:45 发布

阅读量62

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/W1820743154/article/details/123979531

版权

自定义插件
1.$.extend
作用1：对象继承 $.extend(对象1，对象2)----对象1继承对象2

案例：对象间的继承（两个对象）

//定义一个对象
var person = {"name":"张三","sex":"男"};
var stu = {};
console.log(stu);
$.extend(stu,person);
console.log(stu);
//涉及到三个参数时
//第一个参数的对象会继承后面所有对象的属性
var person = {"name":"张三","sex":"男"};
var age = {"age":"12"};
var stu = {};
console.log(stu);
$.extend(stu,person,age);
console.log(stu);
作用2：扩展jQuery类方法： $.extend({方法名：function(){方法体}})多个方法之间用逗号隔开

案例：扩展$.max()和$.min()方法

$.extend({
// 此处可以通过键值对的形式创建jQuery的类方法将来可以通过$直接调用
"a":function(){
console.log("a");
},
"b":function(){
console.log("b");
}
});
$.a();
$.b();
// 案例2：扩展$.max()和$.min()方法
$.extend({
// arguments参数类似一个数组，存储参数的个数
// 扩展求最大值的类方法
"myMax":function(){//最大值
//打擂台的思想
var max = arguments[0];//假设数组的第一个数为最大值
for(var i=0;i<arguments.length;i++){
if(max < arguments[i]){
max = arguments[i];
}
}
return max;
},
"myMin":function(){//最小值
//打擂台的思想
var min = arguments[0];//假设数组的第一个数为最大值
for(var i=0;i<arguments.length;i++){
if(min > arguments[i]){
min = arguments[i];
}
}
return min;
}
});
console.log($.myMax(1,2,3,4,56));
console.log($.myMin(1,23,121,21));
2. $.fn.extend
作用：扩展jQuery对象方法：$.extend({方法名：function(){方法体}})多个方法之间用逗号隔开

案例：扩展复选框的全选和取消全选功能

$.fn.extend({
                   // 全选的对象方法
                   "demo1": function() {
                       // 在对象方法中，$(this)代表将来谁调用了，就代表谁
                       // console.log($(this));
                       // $(this).each(function(){
                       //    $(this).prop("checked",true);
                       // });
                       // jQuery的特性中有一个隐式迭代器
                       $(this).prop("checked", true);
                   },
                   "demo2": function() {
                       $(this).prop("checked", false);
                   }
               });
               $("#checkall").click(function() {
                   // 通过获取到复选框然后调用对象方法demo1 设置所有复选框选中
                   $("input:checkbox").demo1();
               });
               $("#qxcheckall").click(function() {
                   // 通过获取到复选框然后调用对象方法demo1 设置所有复选框选中
                   $("input:checkbox").demo2();
               });
第三方插件
1.插件名:jQuery Validation

2.使用步骤
2.1下载jQuery插件验证库 jquery.validate.js

2.2将类库引入页面

2.3两种方式使用验证

HTML标签属性方式

JS方式（推荐）

验证及错误信息：

$("表单元素").validate({rules:{字段验证规则},messages:{字段错误信息}})

错误样式

表格元素 label.error{样式}

案例：演示表单验证（用户名，密码，确认年龄，年龄，游戏，网址）

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style type="text/css">
           /* 设置错误信息样式 */
           #formRegister label {
               color: red;
               background-color: pink;
           }
       </style>
       <script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
       <script src="js/jquery.validate.js" type="text/javascript" charset="utf-8"></script>
       <script type="text/javascript">

           $(function() {
               $("#formRegister").validate({
                   rules: {
                       username: {
                           required: true, //判断不为空
                           rangelength: [5, 10] //五到十个字符判断
                       },
                       password: {

                           required: true,//判断不为空
                           minlength: 6 //不少于六位
                       },
                       email: {
                           required: true, //判断不为空
                           email: true //判断邮箱格式
                       },
                       moue:{
                           required: true,//判断不为空
                           dateISO:true //判断日期输入格式
                       }
                   },
                   //编写自定义错误信息
                   messages: {
                       username: {
                           required: "账号不能为空",
                           rangelength: "账号长度在5-10个字符"
                       },
                       password: {
                           required: "密码不能为空",
                           minlength: "密码不能少于6位数"
                       },
                       email: {
                           required: "邮箱必填",
                           email: "邮箱格式不正确"
                       },
                       moue:{
                           required: "^出生日期不能为空",
                           dateISO:"日期yyyy-mm-dd或者(/)输入格式不正确"
                       }
                   }

               })

           })
       </script>
   </head>
   <body>

       <form id="formRegister" action="index.html" method="get">

           账号：<input type="text" name="username">
           <br>
           密码 <input type="password" name="password" />
           <br>
           邮箱 <input type="text" name="email">
           <br>
           出生日期 <input type="text" name="moue">
           <br>

           <input type="submit" value="注册">
       </form>

   </body>
</html>

W1820743154

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery插件

自定义插件1.$.extend作用1：对象继承 $.extend(对象1，对象2)----对象1继承对象2案例：对象间的继承（两个对象）//定义一个对象var person = {"name":"张三","sex":"男"};var stu = {};console.log(stu);$.extend(stu,person);console.log(stu);//涉及到三个参数时//第一个参数的对象会继承后面所有对象的属性var person = {"name":"张三",".
复制链接

扫一扫