jQuery插件

最新推荐文章于 2023-09-27 16:13:24 发布

绥彼岸

最新推荐文章于 2023-09-27 16:13:24 发布

241

分类专栏：笔记文章标签： jquery html javascript

本文链接：https://blog.csdn.net/qq_62217605/article/details/123650196

版权

笔记专栏收录该内容

50 篇文章 0 订阅

订阅专栏

jQuery插件

自定义插件：
第三方插件(表单验证)：

自定义插件：

$是jQuery

而$(“xx”)是jQuery对象

$.extend：

对象继承：$.extend(对象1,对象2)---->对象1继承对象2
扩展jQuery类方法：$.extend（方法名：function（）{方法体}）
注意多个方法之间用逗号隔开

$.fn.extend：

扩展jQuery对象方法：$.fn.extend（方法名：function（）{方法体}）

注意多个方法之间用逗号隔开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.5.1.js"></script>
</head>
<body>
<script>
    //$.extend
    let ext={
        "hi":function () {
            console.log("hello world")
        }
    }
    let ext1={
        "hi1":function () {
            console.log("world hello")
        }
    }
    $.extend(ext,ext1)
    ext.hi()
    ext.hi1()

    //$.fn.extend
    $.fn.extend({
        test:()=>{
            console.log("hello world")
        }
    })
    //$是jQuery
    //而$("xx")是jQuery对象
    $("").test()
</script>
</body>
</html>

效果如下：

第三方插件(表单验证)：

插件名：jQuery Validation

官方网站：https://jqueryvalidation.org/

下载完成后将类库引用到页面

表单验证的插件在jquery-validation文件夹下的dist文件夹内,其文件为jquery.validate.js（也可以使用jquery.validate.min.js）

使用JS方法进行表单验证：

验证及错误信息：$(“表单元素”).validate({

rules:{ 字段验证规则 },

messages:{ 字段错误后的提示信息 }

})

错误样式：表单元素 label.error{ 样式 }

验证规则：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.5.1.js"></script>
<!--应用了表单验证的插件-->
    <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.js"></script>
</head>
<style>
    /*设置错误提示信息的样式*/
    label.error{
        color: red;
    }
</style>
<body>
<form action="">
    <p><input type="text" name="username" placeholder="用户名"></p>
    <p><input type="password" name="password" placeholder="密码"></p>
    <p>
        <button type="submit">登录</button>
        <button type="reset">取消</button>
    </p>
</form>
<script>
    $("form").validate({
        //设置表单验证的规则
        rules:{
            username:{
                required:true,
                rangelength:[5,10]
            },
            password:{
                required: true,
                rangelength: [5,10]
            }
        },
        //设置错误提示信息
        messages:{
            password: {
                required:"你密码没填",
                rangelength:"你密码错了"
            }
        }
    })
</script>
</body>
</html>