jquery----jquery继承

使用

1、新建js文件

2、在js文件中添加

//$:指jquery，$.extend给jquery扩展方法
$.extend({
      "GDP": function () {
         console.log("哈哈哈哈");
      }
});

3、使用

//在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>
html

 

posted @ 2019-03-21 10:53  小名的同学  阅读(2784)  评论(0)    收藏  举报