jquery系列教程7-自定义jquery插件全解:对象函数、全局函数、选择器
2017-08-05 15:34
639 查看
点击打开:
jquery系列教程1-选择器全解
jquery系列教程2-style样式操作全解
jquery系列教程3-DOM操作全解
jquery系列教程4-事件操作全解
jquery系列教程5-动画操作全解
jquery系列教程6-ajax的应用全解
jquery系列教程7-自定义jquery插件全解
jquery系列教程8-jquery插件大全
2、插件应该返回一个jquery对象,以保证链式操作。或者返回需要获取的量。插件内部不要使用$作为jquery对象的别名。
3、所有的对象方法附加到jQuery.fn对象上,所有的全局函数,附加到jQuery对象上。
4、插件内部,this指向通过选择器获取的jquery对象,可以通过this.each遍历所有元素。
5、基本定义方法
6、基本扩展方法
jquery系列教程1-选择器全解
jquery系列教程2-style样式操作全解
jquery系列教程3-DOM操作全解
jquery系列教程4-事件操作全解
jquery系列教程5-动画操作全解
jquery系列教程6-ajax的应用全解
jquery系列教程7-自定义jquery插件全解
jquery系列教程8-jquery插件大全
自定义jquery插件详解:
1、插件名称最好为jquery.[插件名].js。所有方法和函数插件都应该以分号结尾。插件开头也应该添加分号。2、插件应该返回一个jquery对象,以保证链式操作。或者返回需要获取的量。插件内部不要使用$作为jquery对象的别名。
3、所有的对象方法附加到jQuery.fn对象上,所有的全局函数,附加到jQuery对象上。
4、插件内部,this指向通过选择器获取的jquery对象,可以通过this.each遍历所有元素。
5、基本定义方法
;(function($){ //最前端的分号为了更好的兼容性, 将$作为匿名函数的形参 //此处编写jquery插件代码,可以将$作为jquery的缩写别名 })(jQuery); //这里就将jquery作为实参传递给匿名函数
6、基本扩展方法
options = jQuery.extend({ //extend扩展对象属性,extent收集多个对象参数的属性集合,属性的值以最晚出现的为准 name:"name1", //既可以用于为对象设置属性默认值,又可以用来扩展对象 age:12 },options); //当oprions属性和默认属性重叠时,值以越晚出现的为准
封装jquery对象函数
;(function($){ $.fn.extend({ //对jquery.fn对象进行扩展 "color":function(value){ //自定义color函数,设置无参和有参时的调用 if(value==undefined) return this.css("color"); //没有参数时返回颜色 this表示jquery选择器选择的元素对象 else return this.css("color",value); //有参数时设置颜色 }, "myfun": function (options) { //多个自定函数,以映射的形式存在于一个字典中 options = $.extend({name:"name1",age:12},options); //对传递参数可能不全的情况进行兼容,设置默认值 //使用options进行后续函数 return this; //返回this,使方法可链 }, "max":function(){ //选择器选择的元素可能有多个,通过this传递过来就是元素列表 return this.each(function () { //通过each对选择的元素列表进行遍历 }); } }); })(jQuery);
调用对象函数
$("div").color("red"); //设置颜色
封装jquery全局函数
;(function($){ $.extend({ //全部函数,不需要fn,对jquery自己进行扩展 myfun1:function(text){ return text; }, myfun2:function(value){} }); })(jQuery);
调用全局函数
jQuery.myfun1("111111");
自定义jquery选择器
;(function($) { $.extend(jQuery.expr[":"],{ //自定义选择器是jQuery.expr[":"]对象的一部分,所以对该对象进行扩展 between: function(a,i,m){ //自定义between选择器, a表示遍历到的当前DOM元素,i表示DOM元素的索引,从0开始,m是一个数组。 //以$("div:gt(1)")为例。m[0]表示进一步要匹配的内容:gt(1) m[1]表示选择器引导符: m[2]表示选择器函数get m[3]表示选择器函数参数1 var tmp=m[3].split(","); //以逗号为分隔符,这里自己定义分隔符 return tmp[0]-0<i && i<tmp[1]-0; //当元素索引在两个参数之间,返回true,表示选中 } }); })(jQuery);
应用自定义选择器
$("div:between(2,5)").css("color","red");
相关文章推荐
- javascript复习-定义对象/命名函数/对象字面量/jquery自定义插件
- 全局级别定义全局函数and 对象级别的插件开发,即给jQuery对象添加方法
- jquery 插件开发 $.extend $.fn.extend 全局对象 全局函数
- jQuery插件制作之全局函数
- 40款非常棒的jQuery 插件和制作教程(系列二)
- Web优化 页面性能优化 自定义函数延迟触发 jquery插件
- 40款非常棒的 jQuery 插件和制作教程【系列四】
- 40款非常棒的 jQuery 插件和制作教程(系列一)
- jquery的2.0.3版本源码系列(6)-2880-3042行,回调对象,对函数的统一管理
- 对象参数深入分析jQuery.prototype.init选择器源码 Strut2教程-java教程
- Fastify 系列教程四 (求对象、响应对象和插件)
- jquery使用jquery.zclip插件复制对象的实例教程
- jQuery基础教程之强大的选择器(过滤选择器-表单对象属性过滤选择器)
- jquery使用jquery.zclip插件复制对象的实例教程
- 01-老马jQuery教程-jQuery入口函数及选择器
- 40款非常棒的jQuery 插件和制作教程(系列一)
- jQuery2.0+中自定义选择器插件
- 全局函数插件 jquery
- jQuery自定义插件开发基础1——jQuery实用函数的实现
- jQuery插件制作之全局函数