A-A+

jquery中自定义插件开发教程

2016年01月08日 web前端设计 暂无评论 阅读 5 views 次

jquery插件有很多我们一般使用系统自带的插件了,如果自己要开发插件如何做呢?下面111cn小编整理了一个jquery中自定义插件开发教程供各位参考

一、全局函数的扩展

全局函数是将独立的函数添加到JQuery的命名空间中区。在使用的时候,可以通过$.fucnName(param)或者jQuery.funcName(param)方式进行调用。

1、直接在JQuery上添加:在jQuery上添加一个全局函数sayHello,代码如下:

  1. jQuery.sayHello=function(name)  
  2. {  
  3. alert(name+"您好");  
  4. };  

调用方式,代码如下:

  1. jQuery.sayHello("张子涵");     
  2. //或者用$.sayHello("张子涵");     

2、jQuery.extend():其作用是用一个或者多个对象来扩展一个对象,返回被扩展的对象。

2.1 jQuery.extend(dsc,src1,src2…):将src1,src2扩展到dsc对象,并返回扩展后的dsc对象(合并对象)

2.2 jQuery.extend(object):对jQuery命名空间本身进行扩展,结果就是在jQuery命名空间上增加函数,代码如下:

  1. //在jQuery命名空间上增加两个函数。  
  2. jQuery.extend({  
  3.   min: function(a, b) { return a < b ? a : b; },  
  4.   max: function(a, b) { return a > b ? a : b; }  
  5. });  

调用方式,代码如下:

jQuery.min(2,3); // => 2

jQuery.max(4,5); // => 5

二、对象方法的扩展

对象方法的扩展可以让所有jQuery对象调用的方法。

1、jQuery.fn,代码如下:

  1. //在jQuery对象上添加sayHello方法  
  2. jQuery.fn.sayHello=function(name)  
  3. {  
  4. alert(name+"您好");  
  5. }  

调用:$("div").sayHello("dwqs");

2、jQuery.fn.extend

扩展 jQuery 元素集来提供新的方法(通常用来制作插件),代码如下:

  1. //增加两个插件方法。  
  2.   
  3. jQuery.fn.extend({  
  4.   check: function() {  
  5.     return this.each(function() { this.checked = true; });  
  6.   },  
  7.   uncheck: function() {  
  8.     return this.each(function() { this.checked = false; });  
  9.   }  
  10. });  

调用:

  1. $("input[type=checkbox]").check();  
  2. $("input[type=radio]").uncheck();  
标签:

给我留言