jQury(自定义插件)

news/2024/7/11 1:28:53 标签: jquery, html
htmledit_views">

jQuery(插件)

什么是插件呢?相比代码的新手还不晓得,其实插件就是函数我们直接下载过来用的意思。

如图所示:

一、自定义插件

1.两个对象的继承

$.extend()实现对象继承

var person = {"name":"东方不败","sex":"女"};
                var stu = {};
                console.log($.type(stu));
                console.log(stu);
                // 通过$.extend();为stu继承person中的所有属性
                $.extend(stu,person);
                console.log(stu);

运行结果:

 

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

作用:扩展jQuery对象方法:$.extend({方法名:function(){方法体}})多个方法之间用逗号隔开

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

 $.extend({
                    // 此处可以通过键值对的形式创建jQuery的类方法  将来可以通过$直接调用
                    "sb": function() {
                        console.log("这是我自定义的类方法");
                    },
                    "nb": function() {
                        console.log(123);
                    }
                });
                // $.sb();
                // $.nb();

案例:求最大值(最小值)

   $.extend({
                    // arguments参数 类似一个数组,存储参数的个数
                    // 扩展求最大值的类方法
                    "myMax1": function(a, b) {
                        return a > b ? a : b;
                    },
                    "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($.myMax2(12, 2, 3, 56));
                console.log($.myMax2(1));
                console.log($.myMax2());
                console.log($.myMax2(1, 2, 3, 4, 5, 6, 6, 7));
                console.log($.myMin(22, 3, 2));

案例:全选和取消全选功能

  $.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插件验证库 html" title=jquery>jquery.validate.js

2.2将类库引入页面

2.3两种方式使用验证

HTML标签属性方式

JS方式(推荐)


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

     // 获取表单标签调用插件激活的方法
            $("#formRegister").validate({
                // 插件的使用:2个模块,规则模块,错误信息模块
                rules: {
                    // 账号必须有,不能为空
                    username: {
                        required: true,//required 必填字段
                        minlength: 10
                    },
                    email: {
                        required: true,
                        email: true
                    }
                },
                // 编写自定义错误信息
                messages: {
                    // 账号必须有,不能为空
                    username: {
                        required: "账号不能为空",
                        minlength: "账号必须10以上"
                    },
                    email: {
                        required: "必填",
                        email: "邮箱格式不正确"
                    }
                }
            });
        });

运行结果:

 


http://www.niftyadmin.cn/n/1830651.html

相关文章

JavaWEB(WEB环境的搭建)

今天分享的内容是JavaWeb入门之Web环境搭建。下面上思维导图&#xff1a; 一、jdk1.8的介绍、下载、安装、配置 1、JDK是什么&#xff1f; JDK是Java语言的软件开发工具包&#xff0c;是用于移动设备、嵌入式设备上的java应用程序。JDK是整个java开发的核心&#xff0c;包含了…

Sublime Text 2的快速入门和常用技巧

Sublime Text 2的快速入门和常用技巧 1. 安装扩展器包管理器Package Control组件点击菜单 View -> Show Console 调出控制台或者按快捷键 “Ctrl ”&#xff08;1左边的符号&#xff0c;可能和QQ拼音输入法和搜狗浏览器的快捷键有冲突&#xff0c;改下就可以&#xff09;输…

会员管理系统全部源代码(C#+EF+SQLite+Winforms实现)

会员管理系统全部源代码&#xff0c;VS2010开发&#xff0c;使用Ado.net实体框架EF&#xff0c;简化数据库访问层&#xff0c;并能方便的移植到其他数据库。利用数据绑定减少编码量&#xff0c;提高程序的可维护性和可读性。使用Winfoms方便快速界面开发和修改。简洁的界面设计…

JavaWEB(jsp基本语法表单的提交方式request请求对象)

目录 一.JSP基本使用 1.什么是JSP&#xff1f; 3.JSP的工作原理&#xff1f; 5.jsp中的 注释 二、表单的提交 三、JSP的内置对象使用 JSP九大内置对象 1.out对象 2.request请求对象 一.JSP基本使用 1.什么是JSP&#xff1f; &#xff08;0&#xff09;全称&#xff…

Domino和Java技术杂烩

1、Domino服务器控制台上&#xff0c;输入“show tasks”&#xff0c;获知domino服务器所有的信息。2、Domino数据迁移案例&#xff1a;http://blog.csdn.net/zh2qiang/article/details/68547673、IBM资料库相关资料&#xff1a;&#xff08;1&#xff09;Java access to the D…

JavaScript常用函数大全

为什么80%的码农都做不了架构师&#xff1f;>>> ##新打开窗口 利用form标签 如利用以下的HTML <form method"get" target"_blank" action"http://www.baidu.com/" id"g-form"><input type"hidden" nam…

javaweb(JSP页面跳转方式以及JDBC数据交互)

目录 让我们先来看看今天的思维导图&#xff1a; 1.JSP页面跳转方式 1.1 form表单提交跳转 1.2 超链接标签页面跳转 1.4 js中location页面跳转 5 java的方式跳转 2.JDBC数据库交互 让我们先来看看今天的思维导图&#xff1a; 1.JSP页面跳转方式 跳转方式如下&#xff1a…

JAVA入门学习: 方法参数的传递(函数传参问题)

引言&#xff1a;我们知道C中拥有两种参数传递方式&#xff0c; 值调用和引用调用。 有些程序员认为JAVA程序设计语言对对象采用的是引用调用&#xff0c;实际上&#xff0c;这种理解是不对的。 由于这种误解存在普遍性&#xff0c;所以下面将阐述一下这个问题。 所以用一段简单…