JQ添加扩展 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            color: red;
            font-size: 12px;
        }
    </style>
</head>
<body>
<form id="f1" action="">
    <label for="d1">账号</label>
    <input class="len" id="d1" type="text">
    <p class="c1"></p>
    <label for="d2">密码</label>
    <input class="len" id="d2" type="password">
    <p class="c1"></p>
    <p><label for="d3"><input id="d3" type="submit"></label></p>
</form>
<form id="f2" action="">
    <label for="d1">账号</label>
    <input class="len" id="d1" type="text">
    <p class="c1"></p>
    <label for="d2">密码</label>
    <input class="len" id="d2" type="password">
    <p class="c1"></p>
    <p><label for="d3"><input id="d3" type="submit"></label></p>
</form>
</body>
<script src="jquery-3.2.1.min.js"></script>
<script>
    function validate(arg) {
        var $bd=arg;
        var flag = true;
        $bd.find("#d3").on("click", function () {
            $bd.find(".c1").each(function () {
                $(this).text("")
            });
            $bd.find(".len").each(function () {
                var input_now = $(this);
                if (input_now.val().length === 0) {
                    input_now.next().text(input_now.prev().text() + "不能为空");
                    flag = false;
                    return false
                }
                else {
                    flag = true
                }
            });
            return flag
        });
    }


    $(document).ready(function () {
        $("#f1").check();
        $("#f2").check()
    });

    $.fn.extend({
        check: function () {
            validate(this);
        }
    })
</script>
</html>

先给jQuery对象添加一个叫check的扩展

这样所有的jQuery对象都能调用这个方法

文档加载完成后执行这个方法，调用check函数

Check函数后执行一个validate(this)的函数，this表示当前操作的标签

 也可以把下面这段放进直接创建的js文件里

function validate(arg) {
        var $bd=arg;
        var flag = true;
        $bd.find("#d3").on("click", function () {
            $bd.find(".c1").each(function () {
                $(this).text("")
            });
            $bd.find(".len").each(function () {
                var input_now = $(this);
                if (input_now.val().length === 0) {
                    input_now.next().text(input_now.prev().text() + "不能为空");
                    flag = false;
                    return false
                }
                else {
                    flag = true
                }
            });
            return flag
        });
    }


    $(document).ready(function () {
        $("#f1").check();
        $("#f2").check()
    });

    $.fn.extend({
        check: function () {
            validate(this);
        }
    })

 

 


**注意**：
我们给form表单里面的submit按钮绑定事件的时候|：
我们的事件（校验的那段功能）先执行，接着执行默认事件（提交的事件）
在我们的事件中最后return false,就可以组织后续默认事件的执行


- 自己写插件
- 全局变量污染 --> JS中函数限制变量的作用域 --> 用函数包裹我们扩展的那些变量和函数


全局不可以访问函数内部定义的变量
函数内部可以访问全局变量



- 如何防止$被修改 --> 用传参的方式 --> 我们显式的把jQuery传进去，在函数内部用jq表示jQuery

- 用匿名函数来简化我们保存自己变量或函数的操作

具体看day61视频

posted @ 2017-11-20 20:51  hello沃德  阅读(146)  评论(0)    收藏  举报