jquery----语法扩展(导入js文件)

最新推荐文章于 2024-02-17 18:39:30 发布

weixin_30376453

最新推荐文章于 2024-02-17 18:39:30 发布

阅读量490

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yanxiaoge/p/10570130.html

版权

简单使用

第一步，新建js文件

第二步，在js文件中添加

$.extend({
      "GDP": function () {
         console.log("哈哈哈哈");
      }
   });

第三步，在html中使用

　　$.GDP() 即可

复杂(1,希望一些函数不可以被外部引用，不可以被修改$)

(function (jq) {
    jq.extend({
       "GDP":function () {
           foo();          //调用内部函数
          console.log("带小红花")
       },   //可以扩展多个（加上逗号在写几个）
        "SGS":function () {
          console.log("你蛤蟆")
    }
});
    function foo() {
        console.log("英语八级就是牛")
    }
})(jQuery);
(function (jq) {
    jq.fn.extend({
    "BJG":function () {
        foo2();
        console.log("就这样吧")
    }
});
    function foo2() {
        console.log("哎哎呀")
    }
})(jQuery);

练习----t.js 文件

// 匿名函数
(function (jq) {  //jq就相当于$
    jq.extend({
        "myValidate": function (form) {
            var formObj = jq(form) ;//赋一个变量，因为我们经常用到
            formObj.find("button").on("click", function () {
                console.log("-------------")
                formObj.find(".form-group").removeClass("has-error");
                formObj.find("span").text("");
                formObj.find(":input").each(function () {
                    if ($(this).val().length === 0) {
                        console.log("111")
                        var name = $(this).prev().text();
                        $(this).parent().addClass("has-error");
                        $(this).next().text(name + "不能为空");
                        return false
                    }
                });
                return false
            });
        }
    })
})(jQuery);

tjs

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作业1</title>
    <script src="jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
    <style>
        .container {
            margin-top: 50px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-4 col-md-offset-4">
            <form action="#"  novalidate id="login">
                <div class="form-group">
                    <label for="username">用户名</label>
                    <input type="text" class="form-control" id="username" placeholder="username" required="true">
                    <span id="helpBlock" class="help-block"></span>
                </div>
                <div class="form-group">
                    <label for="Password">密码</label>
                    <input type="password" class="form-control" id="Password" placeholder="Password">
                    <span id="helpBlock2" class="help-block"></span>
                </div>
                <button type="submit" class="btn btn-default submit">提交</button>
            </form>
        </div>
    </div>
</div>

<script src="t.js"></script>
<script>
    $.myValidate()
</script>
<!--<script>-->
    <!--$(".submit").on("click",function () {-->
        <!--$("form .form-group").removeClass("has-error");-->
        <!--$("form span").text("");-->
        <!--$(":input").each(function () {-->
            <!--if ($(this).val().length===0){-->
                <!--var name =  $(this).prev().text();-->
                <!--$(this).parent().addClass("has-error");-->
                <!--$(this).next().text(name+"不能为空");-->
                <!--return false-->
            <!--}-->
        <!--});-->
    <!--return false-->
    <!--})-->


<!--</script>-->
</body>
</html>