JQ插件开发

最新推荐文章于 2024-06-24 20:52:55 发布

KOLO86

最新推荐文章于 2024-06-24 20:52:55 发布

阅读量1.8k

点赞数

分类专栏：前端文章标签： JQ插件开发

本文链接：https://blog.csdn.net/daotiao0199/article/details/89705176

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一，问题

最近的业务问题，需要了解一下JQ插件的开发。所以去网上查了一下资料。总结如下。

二，解决方案

2.1 什么是JQ插件？

JQ插件就是用JQ代码编写的工具。就比如说我们用的模板，如EasyUi。我们只需要引入EasyUi的JS文件，然后调用它对应的方法，效果就出来了。

2.2 JQ插件有什么用？

实现代码的可重用性，以及功能解耦。方便我们使用，我们只需要引入JQ插件的.JS脚本，然后直接调用就可以了。例如EasyUi的那些效果。

2.3 JQ插件如何编写？

使用$.extend()，类似于给JQuery添加静态方法
①优缺点
优点：简单方便
缺点：不能将插件更好地引用在所选择的元素身上
②测试代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>测试JQ插件</title>
	<script type="text/javascript" src="./jquery-1.10.2.min.js"></script>
</head>
<body>

	<script type="text/javascript">
		//编写插件 
		$(function(){
			$.extend({
				say:function(){
					alert("默认的一句话");
				}
			})
		})
		//调用插件
		$(function(){
			$.say();
		})

	</script>

</body>
</html>

使用$.fn
①优点：可以对某个选择的元素进行修改
②测试代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" http-equiv="Content-Type" content="text/html">
	<title>测试JQ插件</title>
	<script type="text/javascript" src="./jquery-1.10.2.min.js"></script>
</head>
<body>

	<input type = "button" id = "test" value = "测试插件调用" /  >

	<script type="text/javascript">
		/*编写插件*/
		$(function () {
            $.fn.JQPlug = function (options) {
                //设置默认的事件和修改属性
                var defaults = {
                    Event : "click", //触发响应事件
                    msg : "默认显示的内容!" //显示内容
                };
                //合并代码：defaults与options进行比较，如果属性相同，则用options的覆盖前者。从后往前覆盖！
                var options = $.extend(defaults, options);
                var $this = $(this); //当然响应事件对象
                //功能代码部分
                //绑定事件
                $this.on(options.Event, function (e) {
                    alert(options.msg);
                });
            }
        });
        /*调用插件*/
        $(function () {
            //绑定元素事件
            $("#test").JQPlug({
                Event : "click", //触发响应事件
                msg : "重写的内容!" //显示内容
            });
        });

	</script>


</body>
</html>