JQuery-05

最新推荐文章于 2024-03-26 10:27:32 发布

一个没学懂Java的YT

最新推荐文章于 2024-03-26 10:27:32 发布

阅读量95

点赞数

分类专栏： jQuery 文章标签： java

本文链接：https://blog.csdn.net/javajsjsh/article/details/123696621

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

回顾上一节：
click 点击事件 mouseover 鼠标移入事件 mouseout 鼠标移出事件

focus 获取焦点事件 blur失去焦点事件 keyup 按键事件

自定义插件：
// $.extend(); $.fn.extend();

$.extend()实现对象继承：
var person = {"name":"东方不败","sex":"女"};
               var stu = {};
               console.log($.type(stu));
               console.log(stu);
               // 通过$.extend()；为stu继承person中的所有属性
               $.extend(stu,person);
               console.log(stu);
测试结果：

涉及到三个参数的继承：
第一个参数的对象会继承后面所有对象的属性（wjq会有继承所有的属性）：

$.extend()扩展jQuery类方法：
$.extend({
                   // arguments参数类似一个数组，存储参数的个数
           此处可以通过键值对的形式创建jQuery的类方法将来可以通过$直接调用
                   "myMax2":function(){
                       // console.log(arguments.length);
                       // 打擂台的思想
                       var max = arguments[0];//假设这个arguments数组中的第一个值为最大值
                       // console.log(arguments[0]);
                       for(var i = 0;i<arguments.length;i++){
                           if(max < arguments[i]){
                               max = arguments[i];
                           }
                       }
                       return max;
                   },
                   "myMin":function(){
                       // console.log(arguments.length);
                       // 打擂台的思想
                       var min = arguments[0];//假设这个arguments数组中的第一个值为最小值
                       // console.log(arguments[0]);
                       for(var i = 0;i<arguments.length;i++){
                           if(min > arguments[i]){
                               min = arguments[i];
                           }
                       }
                       return min;
                   }
               });

测试
console.log("12,2,3,56数字中最大值是");
console.log($.myMax2(12,2,3,56));
console.log("22,3,2数字中最小值是");
console.log($.myMin(22,3,2));
测试结果：

$.fn.extend() 扩展jQuery对象方法：
$.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();
               });


           })
第三方插件:表单验证插件：
需要下载 jquery\validate 插件：

jQuery的表单验证代码：
<!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>