jquery-然后制定自己的query插件

extend扩展插件

jQuery.extend(object)
jQuery的命名空间下添加新的功能。多用于插件开发者向 jQuery 中添加新函数时使用。

jQuery.fn.extend(object)
一个对象的内容合并到jQuery的原型,以提供新的jQuery实例方法。

<body>

<input type="text">

<script src="jquery-3.2.1.min.js"></script>

<script> // 给jQuery扩展方法 $.extend({ method1:function () { console.log("我喜欢烧热水!"); } }); // 给jQuery对象扩展方法 $.fn.extend({ method2: function () { console.log("喜欢喝热水!"); } }) </script>
</body>

浏览器测试如下:

$.method1()
我喜欢烧热水!
jquery.html:18:12
undefined

$("input").method2()
喜欢喝热水!
jquery.html:24:12
undefined

extend通用写法

扩展如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery扩展</title>
</head>
<body>

<input type="text">

<script src="jquery-3.2.1.min.js"></script>

<script> (function () { function f() { console.log("我是来自扩展1里面的f"); } $.extend({ method: function () { f(); } }); })(); </script>
</body>
</html>

浏览器测试如下:

$.method()
我是来自扩展1里面的f
jquery.html:16:9
undefined

或者如下的方式:
// 把我这个jQuery插件里面用到的所有变量、函数都封装在一个自执行函数里,这样就不会污染全局作用域
// 又因为$是全局变量,为了防止被修改,我们把jQuery当成参数传到我们的自执行函数中

<script> (function (jq) { function f() { console.log("我是来自扩展2里面的f"); } jq.extend({ method: function () { f(); } }); })(jQuery); </script>

登陆校验插件版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录校验jQuery版</title>
    <style> .error { color: red; } </style>
</head>
<body>

<form action="" novalidate>
    <div>
        <label for="name">姓名</label>
        <input id="name" type="text" name="username" egon="true" autocomplete="off">
        <span class="error"></span>
    </div>
    <div>
        <label for="pwd">密码</label>
        <input id="pwd" type="password" name="password" egon="true" autocomplete="off">
        <span class="error"></span>
    </div>
    <div>
        <label for="mobile">手机</label>
        <input id="mobile" type="text" name="mobile" egon="true" autocomplete="off">
        <span class="error"></span>
    </div>
    <div>
        <label for="address">地址</label>
        <input id="address" type="text" name="address" autocomplete="off">
        <span class="error"></span>
    </div>
    <div>
        <input id="submit" type="submit" value="登录">
    </div>
</form>
<script src="jquery-3.2.1.min.js"></script>
<script src="02-checkPlugin.js"></script>
<!--下面引用很多很多别人写好的jQuery插件-->
<script> $.validate(); </script>

</body>
</html>

插件代码如下:

/** * Created by Administrator on 2018/1/5. */


(function ($) {
    $.extend({
        validate: function () {
            check();
        }
    });
    function check() {
    $("form :submit").on("click", function () {
        // 先把上一次的错误提示信息清空
        $("form span.error").text("");
        // 设置一个阻止submit默认提交事件执行的标志位
        var flag = true;
        // 开始校验
        // 1. 找到所有要填写的input
        $("form input[type!='submit']").each(function () {
            // this 指的是具体的每一个input
            var inputName = $(this).attr("name");
            // 取input的值
            var inputValue = $(this).val();
            // 取出当前input筐的label文本
            var inputLabel = $(this).prev().text();
            var errMsg;  // 提前申明一个错误信息的变量
            // 1.5 只有必填项才做校验
            if ($(this).attr("egon")) {
                // 是必填项
                // 2. 针对inputVlaue做判断
                if (inputValue.length === 0) {
                    // 当前这个input没有值
                    errMsg = inputLabel + "不能为空";
                    // 把错误信息填到span标签中
                    $(this).next().text(errMsg);
                    flag = false;
                    return false;  // 跳出each循环
                }
                // 如果这个input筐是password,需要多做一个判断:密码位数不能少于6位
                if (inputName === "password") {
                    if (inputValue.length < 6) {
                        errMsg = inputLabel + "不能少于6位";
                        // 把错误信息填到span标签中
                        $(this).next().text(errMsg);
                        flag = false;
                        return false;  // 跳出each循环
                    }
                }
                // 如果inpur框是mobile,需要加一个判断|:判断手机号是不是合法的手机号
                if (inputName === "mobile") {
                    if (!/^1[345678]\d{9}$/.test(inputValue)) {
                        errMsg = inputLabel + "格式不正确";
                        // 把错误信息填到span标签中
                        $(this).next().text(errMsg);
                        flag = false;
                        return false;  // 跳出each循环
                    }
                }
            }
        });
        return flag;
    })
}
})(jQuery);

登陆校验插件升级版本

<script> $.validate({ "username": {"required": true}, "password": {"required": true, "minLength": 9}, "mobile": {"required": true} }); </script>

插件代码如下:

/** * Created by Administrator on 2018/1/5. */
(function ($) {
    $.extend({
        validate: function (arg) {
            check(arg);
        }
    });
    function check(arg) {
    $("form :submit").on("click", function () {
        // 先把上一次的错误提示信息清空
        $("form span.error").text("");
        // 设置一个阻止submit默认提交事件执行的标志位
        var flag = true;
        // 开始校验
        // 1. 找到所有要填写的input
        $("form input[type!='submit']").each(function () {
            // this 指的是具体的每一个input
            var inputName = $(this).attr("name");
            // 取input的值
            var inputValue = $(this).val();
            // 取出当前input筐的label文本
            var inputLabel = $(this).prev().text();
            var errMsg;  // 提前申明一个错误信息的变量
            // 1.5 只有必填项才做校验
            if (arg[inputName]  && arg[inputName]["required"]) {
                // 是必填项
                // 2. 针对inputVlaue做判断
                if (inputValue.length === 0) {
                    // 当前这个input没有值
                    errMsg = inputLabel + "不能为空";
                    // 把错误信息填到span标签中
                    $(this).next().text(errMsg);
                    flag = false;
                    return false;  // 跳出each循环
                }
                // 如果这个input框是password,需要多做一个判断:密码位数不能少于6位
                if (inputName === "password") {
                    if (inputValue.length < arg["password"]["minLength"]) {
                        errMsg = inputLabel + "不能少于"+ arg["password"]["minLength"] +"位";
                        // 把错误信息填到span标签中
                        $(this).next().text(errMsg);
                        flag = false;
                        return false;  // 跳出each循环
                    }
                }
                // 如果inpur框是mobile,需要加一个判断|:判断手机号是不是合法的手机号
                if (inputName === "mobile") {
                    if (!/^1[345678]\d{9}$/.test(inputValue)) {
                        errMsg = inputLabel + "格式不正确";
                        // 把错误信息填到span标签中
                        $(this).next().text(errMsg);
                        flag = false;
                        return false;  // 跳出each循环
                    }
                }
            }
        });
        return flag;
    })
}
})(jQuery);
相关文章
相关标签/搜索