简单使用
第一步，新建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);
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>