简单几招学会如何制作jQuery插件

最新推荐文章于 2023-03-20 23:28:00 发布

gundumw100

最新推荐文章于 2023-03-20 23:28:00 发布

阅读量658

点赞数

本文链接：https://blog.csdn.net/gundumw100/article/details/69952312

版权

jQuery 同时被 3 个专栏收录

79 篇文章 0 订阅

订阅专栏

Ajax

26 篇文章 0 订阅

订阅专栏

Google

24 篇文章 0 订阅

订阅专栏

在使用jQuery[write less，do more]开发过程中我们会总结出很多非常实用的方法或函数，这些是我们工作中不可或缺的一部分，如果你有分享精神，愿意把你的实用方法或函数与全世界 jQuery使用者共享，那把这些方法或函数制作成一个插件吧！本文将以实例的方式谈谈如何制作jQuery插件，或许你会有很多的收获。

以dataForAjax插件为例[dataForAjax实例下载或查看dataForAjax在线实例]

第一招，制作一个什么样的插件

你打算制作一个什么样的插件，你知道它能拿来做什么？这是你制作jQuery插件的前提，回答好三个问题：制作什么插件，有什么用，怎么样？

实例说明：在使用jQuery.ajax提交表单时，需要获取表单数据data，如果一个一个获取表单数据非常麻烦，如jQuery('username').val()获取用户名等，制作一个可获取表单数据的插件，在使用jQuery.ajax提交时获取表单数据。

第二招，jQuery插件文件命名

给你的jQuery插件命一个名称，然后去jQuery官网http://plugins.jquery.com/查查是否有相同的插件，这很重要，如果已经存在类似的插件，或改进或换名(建议如果有的话就好好参考一个别人的，也许你的比它更好)，文件命名jquery.[你的插件名].js，如：jquery.dataForAjax.js。

第三招，书写插件代码

一，jQuery插件架构

现在正式开始你的插件代码书写，使用如下格式(参考)

   1. jQuery.fn.[第二招里的插件名称] = function(options){
   2. 这里是你插件代码部分 this
   3. }

实例说明：

   1. jQuery.fn.dataForAjax = function(options){
   2. 这里是你插件代码部分 this
   3. }

二，如何传入参数和参数的使用

如果需要传入参数如上options，可以是数组，字符等

使用jQuery内置jQuery.extend扩展jQuery对象本身这个方法，如dataForAjax插件需要传入两个参数，一个显示错误提示的ID(字符)和错误提示信息(数组)，实现方法如下：

   1. setting = jQuery.extend({
   2. showMessage:'showmessage',
   3. message:message,
   4. },options);

可设置默认值，如上的showMessage的默认ID为showmessage，message表示数组，默认为空。
当然，如果参数非常少，你可以直接传入参数

传入的参数如何使用？

使用参数非常简单，直接引用setting.showMessage

接下来就开始你的jQuery插件代码书写过程!

注意事项：
1，this对象
其中this对象，表示当前的引用对象，实例说明如下：

   1. <div id="biuuu"></div>

   1. jQuery("#biuuu").dataForAjax(options)

那么this就表示代表<div id="biuuu"></div>这个对象

2，学会this.each使用
循环获取每一个对象

3，尽量把$替换成jQuery，考虑通用性和冲突

第四招，测试jQuery插件

当你的插件书写完成后，就需要测试一下你的插件，在不同的浏览器下进行测试，如：IE7、IE8、Firefox、Safari、Google Chrome和Opera等等。

第五招，发布jQuery插件

1，打开jQuery.com
2，新注册一个用户http://plugins.jquery.com/user
3，增加一个插件，注意选好分类(ajax、Animation and Effects、Browser Tweaks等等)，插件名称，插件介绍等等
4，上传JS文件，如果条件允许可以制作一个在线演示页面(可增加你的网站访问哦)，同时你也可以发布在http://code.google.com中
5，是否还需要继续完善，并改进BUG和优化
6，版本完善(有改进或修复可以增加版本方式进行)

总结
通过上面几个步骤，学会如何制作一个jQuery插件，是不是觉得非常简单，那还等什么，开始你的jQuery插件之旅吧！

一个简单完整的jQuery插件实例，当你点击链接时使用ajax请求，将返回的内容显示在#content的容器中


;(function($){
	$.fn.ajaxLink = function(options){
		
		var defaults = {
			target		: "#content",
			dataType	: "html",
			method		: "post",
			cache		: false,
			async		: true,
			beforeSend	: false,
			complete	: false,
			error		: false
			
		};
		
		var options = $.extend(defaults, options);
		
		return this.each(function(){
			$(this).click(function(){
				$.ajax({
					type		: options.method,
					url			: $(this).attr('href'),
					dataType 	: options.dataType,
					cache		: options.cache,
					async		: options.async,
					data		: $(this).attr('data'),
					beforeSend	: function(){ 
									if(options.beforeSend) options.beforeSend(); 
					},
					complete	: function(XMLHttpReq, textStatus){
									if(options.complete) options.complete(XMLHttpReq, textStatus);
					},
					success		: function(data){
									$(options.target).html(data); 
					},
					error		: function (event, request, settings){ 
									if (options.error) options.error(event, request, settings); 
					}
				});
				return false;
			});
		});
	};
})(jQuery);


<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="javascript/jquery-ajaxLink.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$(".ajaxLink").ajaxLink();
	});
</script>
</head>
<body>
<a href="1.html" class="ajaxLink">链接1</a><br />
<a href="2.html" class="ajaxLink">链接2</a><br />
<div id="content" style="text-align: center" >
</div>
</body>
</html>

再来一个插件源码，该插件用来操作cookie


jQuery.cookie = function(name, value, options) {
    if (typeof value != 'undefined') { // name and value given, set cookie
        options = options || {};
        if (value === null) {
            value = '';
            options.expires = -1;
        }
        var expires = '';
        if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
            var date;
            if (typeof options.expires == 'number') {
                date = new Date();
                date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
            } else {
                date = options.expires;
            }
            expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
        }
        // CAUTION: Needed to parenthesize options.path and options.domain
        // in the following expressions, otherwise they evaluate to undefined
        // in the packed version for some reason...
        var path = options.path ? '; path=' + (options.path) : '';
        var domain = options.domain ? '; domain=' + (options.domain) : '';
        var secure = options.secure ? '; secure' : '';
        document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
    } else { // only name given, get cookie
        var cookieValue = null;
        if (document.cookie && document.cookie != '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) == (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
};