JQuery 自定义JQuery插件

最新推荐文章于 2020-12-02 02:17:43 发布

houyanhua1

最新推荐文章于 2020-12-02 02:17:43 发布

阅读量236

点赞数 1

分类专栏： JQuery JavaScript 文章标签： jquery 插件

本文链接：https://blog.csdn.net/houyanhua1/article/details/79617571

版权

JavaScript 同时被 2 个专栏收录

140 篇文章 4 订阅

订阅专栏

JQuery

57 篇文章 0 订阅

订阅专栏

demo.html：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.1.js"></script>   <!--先引入JQuery对象-->
    <script src="jquery.my.min.js"></script>   <!--引入自定义的JQuery插件-->
    <script>
        $(function () {
            //调用插件中的方法
            //第一种制作方法
//            $("button").on("click", function () {
//                $("button").setColorRed();
//            })


            //第二种绑定方法
            $("button").on("click", function () {
                $.setColorRed($(this));
            })

        })
    </script>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<button>按钮6</button>
</body>
</html>

jquery.my.min.js（自定义的JQuery插件）：

//绑定到原型上,调用者是jquery对象
$.fn.setColorRed = function () {
    this.css({"color":"red"});
}


//绑定到$上，调用者是$
$.setColorRed = function (e) {
    e.css({"color":"red"});
}

jquery.becomeYellow.js（自定义的jquery插件）：

//自定义的jquery的插件(引入自定义的插件之前必须先引入jquery)
//第一种方式定义自定义函数    调用方式 $("body").becomeYellow();
$.fn.extend({
	becomeYellow:function() {  // 函数的命名一般和插件的名字一样，方便使用
		var $_this = this;   // this就是调用该函数的JQuery对象,为了避免和DOM中的this混淆,所以放在了$_this中。
		$_this.css({backgroundColor:"yellow"});
		return $_this;   // 返回对象本身是为了链式编程。
	}
});

//第二种方式定义自定义函数   调用方式 $.eatFood();
$.extend({
	eatFood:function() {
		console.log("吃饭中。。。");
	}
});