`

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

阅读更多
在使用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;
    }
};
分享到:
评论

相关推荐

    jquery插件库(jquery.treeview插件库)

    jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery....

    jquery插件库大全(200个).zip

    jquery插件库大全(200个): jqueryQQ表情插件 jquery下拉菜单导航 jquery下拉菜单栏 jquery仿Windows系统选中图标效果 jquery仿京东商品详情页图片放大效果 jquery仿百度新闻焦点轮播 jquery分离布局模版 jquery...

    orgchart.js 组织架构图之JQuery插件

    组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件...

    jQuery插件 简单日期设置

    本主题聚焦于"jQuery插件 简单日期设置",这通常指的是利用jQuery来创建一个简单易用的日历插件,只用于选择日期,不涉及时间选择,适用于那些只需要日期输入的场景。 首先,我们了解jQuery插件的基本结构。一个...

    jQuery插件,jQuery插件

    创建一个jQuery插件通常涉及到以下几个步骤: 1. **封装函数**:首先,你需要将你的功能封装成一个函数,这个函数接收jQuery对象作为参数,以便于操作选中的DOM元素。 2. **扩展jQuery**:然后,使用`.fn`(即`...

    很好用的Jquery插件

    本文将深入探讨“很好用的Jquery插件”,并介绍几个常用插件及其简单使用方法,这对于在项目中提升用户体验具有显著帮助。 首先,jQuery库的核心优势在于它的API设计,它提供了丰富的选择器、DOM操作、事件处理和...

    简单jQuery加载等待转圈页面插件

    "简单jQuery加载等待转圈页面插件"就是为了解决这个问题而设计的,它能提供一个优雅的、可视化的等待提示,让用户知道后台正在忙碌并期待即将完成的操作。 jQuery是一个广泛使用的JavaScript库,它简化了HTML文档...

    JQuery插件的写法 最常用的jquery插件开发方式(教程合集).zip

    JQuery插件的写法 最常用的jquery插件开发方式(教程合集) jquery插件的例子 jQuery插件开发教程_看这一本就行了 JQuery插件写法 jq插件最常用的写法

    jQuery插件jQuery插件

    jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件

    jquery插件

    5. **Ajax交互**:`jQuery.ajax()`和相关的方法使得异步数据交换变得简单,而插件如`jQuery Form Plugin`则专门处理表单提交,包括异步上传文件。 6. **表单验证**:像`jQuery Validation Plugin`这样的工具提供了...

    Ddreamweaver的jquery插件

    Ddreamweaver jquery 插件 Ddreamweaver jquery 插件Ddreamweaver jquery 插件 Ddreamweaver jquery 插件 Ddreamweaver jquery 插件 Ddreamweaver jquery 插件 Ddreamweaver jquery 插件

    jquery插件资源包

    要使用一个jQuery插件,通常需要以下几个步骤: 1. **引入jQuery库**: 在HTML文件中,首先需要引入jQuery的核心库,通常通过`&lt;script&gt;`标签从CDN(内容分发网络)获取。 2. **引入插件**: 将插件的JavaScript文件也...

    eclipse上支持jquery插件

    3. **jQuery插件**:对于Eclipse,有几种插件可以实现jQuery支持,例如“JSDT (JavaScript Development Tools)”和“WTP (Web Tools Platform)”。它们通过集成jQuery的库信息,提供了代码完成、语法高亮和错误检测...

    jquery 插件

    一个完整的jQuery插件通常包括以下几个部分: 1. **命名空间**:使用IIFE(Immediately Invoked Function Expression)避免污染全局命名空间。 2. **接收参数**:通过`options`对象接收用户自定义的配置项。 3. **...

    通用 JQuery 插件 开发

    2. **函数结构**:一个简单的jQuery插件通常包含以下结构: ```javascript (function($){ $.fn.myPlugin = function(options) { // 插件代码 }; })(jQuery); ``` 这里的匿名函数保证了`$`符号代表jQuery,并...

    jQuery的车牌插件

    5. **易于集成**:作为一款jQuery插件,它应该提供简单的API接口和配置选项,以便开发者轻松地将其集成到现有的项目中。 6. **响应式设计**:考虑到可能在不同尺寸的设备上使用,插件应该具备响应式布局,确保在...

    jsontree (jquery.treeview.js) jQuery插件版 treeview1.0

    jsontree (jquery.treeview.js) jQuery插件版 treeview1.0jsontree (jquery.treeview.js) jQuery插件版 treeview1.0jsontree (jquery.treeview.js) jQuery插件版 treeview1.0jsontree (jquery.treeview.js) jQuery...

    JQuery插件 IP地址输入框

    对于这个jQuery插件,它的核心功能可能包括以下几个方面: 1. **自动分段输入**:当用户输入IP地址时,插件会自动在每一段之间插入点号(.),以符合IPv4的标准格式(例如,192.168.0.1)。 2. **格式验证**:插件...

Global site tag (gtag.js) - Google Analytics