jQuery5

最新推荐文章于 2024-07-18 11:48:33 发布

陈峰806

最新推荐文章于 2024-07-18 11:48:33 发布

阅读量1k

点赞数 2

文章标签： javascript 前端开发语言 jquery

本文链接：https://blog.csdn.net/weixin_65768991/article/details/123713517

版权

jQuery5插件

自定义插件
- $.extend
- $.fn.extend
第三方插件

自定义插件

提示：这里可以添加本文要记录的大概内容：

$.extend

对象继承 $.extent(对象1,对象2) 对象1继承对象2

let 1 = {
        "hh": function () {
            console.log("哈哈")
        }
    }

    let 2 = {
        "ch": function () {
            console.log("吃好")
        }
    }
//当你定义了俩个不同对象并对象1要继承对象2中的属性时
$.extend(1,2)

1.hh()
1.ch()

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

let 1 = {
        "hh": function () {
            console.log("哈哈")
        }
    }

    let 2 = {
        "ch": function () {
            console.log("吃好")
        }
    }

$.fn.extend

扩展jQuery对象方法 $.fn.extent( {方法名: function(){方法体}} )

   // 拓展的jquery对象上

    $.fn.extend({
        test:()=>{
            console.log("haha")
        }
    })

    // $ 是jquery
    // $("xx") 是jquery对象

第三方插件

在这里插入图片描述

表单验证
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.5.1.js"></script>
    <!--表单验证插件是基于jquery的 再导入插件之前需要先导入jquery-->
    <script src="js/jquery-validation-1.19.0/dist/jquery.validate.js"></script>
    <script src="js/jquery-validation-1.19.0/dist/localization/messages_zh_TW.js"></script>
    <style>
        label.error{
            color: red;
        }
    </style>
</head>
<body>
<form action="">
    <p>
        <input type="text" name="username" placeholder="用户名">
    </p>
    <p>
        <input type="text" name="password" placeholder="用户密码">
    </p>
    <p>
        <button>登录</button>
        <button type="reset">取消</button>
    </p>
</form>
<script>
    //表单验证写完了
    $("form").validate({
        rules: {
            username: {
                required: true, //必填
                rangelength:[5,10]
            },
            password: "required"
        },
        messages:{
            password:{
                required:"xxxx"
            }
        }
    })
</script>
</body>
</html>

陈峰806

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery5

jQuery5插件自定义插件$.extend二、使用步骤1.引入库2.读入数据总结自定义插件提示：这里可以添加本文要记录的大概内容：$.extend对象继承 $.extent(对象1,对象2) 对象1继承对象2let 1 = { "hh": function () { console.log("哈哈") } } let 2 = { "ch": function () { con
复制链接

扫一扫