码迷,mamicode.com
首页 > Web开发 > 详细

jQuery插件编写

时间:2014-04-29 19:32:05      阅读:549      评论:0      收藏:0      [点我收藏+]

标签:des   com   class   blog   div   code   java   javascript   ext   log   string   

jQuery种类

1.封装对象方法的插件,这种插件是我们常用的插件,后面将会具体针对这种插件介绍,如:$("#div").parent();

2.封装全局函数的插件 如:jQuery.ajax() 3.选择器插件 如:$("ul li:eq(0)")

基本要点

1.所有的对象方法(第1种)都应该附加在jQuery.fn=jQuery.prototype,而所有的全局函数都应该附加在jQuery上

2.this在插件内部,是通过选择器获取的jQuery对象,而例如click(),内部指的的DOM元素

3.应该返回一个jQuery对象,以保证插件的可链式操作

封装对象方法的插件

1
2
3
4
5
6
7
8
9
10
11
(function($){
   $.fn.extent({
       jName:function(opt){
         var option={uername:"require"};   //默认的规则
         option=$.extend(option,opt);
         return this.each(){   //会依次匹配元素,return 返回对象,保证可链式操作
        这里写插件要做的操作
        }
      }<br>
  })
})(jQuery)

以上是一个基本的对象插件的模板,这里讲解下$.extend(option,opt);如果option,opt有相同属性,opt会覆盖option的值

1
2
3
option={uername:"require",age:22};
  opt={age:33};
  $.extend(option,opt)  //这时返回的option={ uername:"require", age:33}
jQuery的extend方法还有一个重载原型:extend(boolean,dest,src1,src2,src3...)第一个参数boolean代表是否进行深度拷贝,其余参数和前面介绍的一致,什么叫深层拷贝,我们看一个例子:
1
2
3
var result=$.extend( true, {},
{ name: "John", location: {city: "Boston",county:"USA"} },
{ last: "Resig", location: {state: "MA",county:"China"} } );

我们可以看出src1中嵌套子对象location:{city:"Boston"},src2中也嵌套子对象location:{state:"MA"},第一个深度拷贝参数为true,那么合并后的结果就是:

result={name:"John",last:"Resig",location:{city:"Boston",state:"MA",county:"China"}}

也就是说它会将src中的嵌套子对象也进行合并,而如果第一个参数boolean为false,我们看看合并的结果是什么,如下:

1
var result=$.extend( false, {},{ name: "John", location:{city: "Boston",county:"USA"} },{ last: "Resig", location: {state: "MA",county:"China"} });
那么合并后的结果就是:result={name:"John",last:"Resig",location:{state:"MA",county:"China"}}

全局函数的插件

1
2
3
4
5
6
(function($){
 $.extend({
  func:function(){
  return ;}
 })
})(jQuery)

选择器的插件

1
2
3
4
5
6
7
(function($){
 $.extend(jQuery.expr[":"],{
    between:function(a,i,m){  //第1个参数,当前遍历的DOM元素,第2个参数当前遍历的DOM元素的索引值,从0开始,第3个参数用正则表达式match匹配出来的数组
        return
    }
 })
})(jQuery)

jQuery插件编写,布布扣,bubuko.com

jQuery插件编写

标签:des   com   class   blog   div   code   java   javascript   ext   log   string   

原文地址:http://www.cnblogs.com/zengm/p/3698022.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!