jquery系列教程7-自定义jquery插件全解:对象函数、全局函数、选择器
点击打开:
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");
jquery系列教程7-自定义jquery插件全解:对象函数、全局函数、选择器的更多相关文章
- jquery系列教程4-事件操作全解
点击打开: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件操作全解 jquery系列教程5-动 ...
- jquery系列教程2-style样式操作全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件 ...
- jquery系列教程6-ajax的应用全解
点击打开: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件操作全解 jquery系列教程5-动 ...
- jquery系列教程3-DOM操作全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件 ...
- jquery系列教程1-选择器全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件 ...
- Spring 系列教程之自定义标签的解析
Spring 系列教程之自定义标签的解析 在之前的章节中,我们提到了在 Spring 中存在默认标签与自定义标签两种,而在上一章节中我们分析了 Spring 中对默认标签的解析过程,相信大家一定已经有 ...
- React Native实战系列教程之自定义原生UI组件和VideoView视频播放器开发
React Native实战系列教程之自定义原生UI组件和VideoView视频播放器开发 2016/09/23 | React Native技术文章 | Sky丶清| 4 条评论 | 1 ...
- Sql Server函数全解<五>之系统函数
原文:Sql Server函数全解<五>之系统函数 系统信息包括当前使用的数据库名称,主机名,系统错误消息以及用户名称等内容.使用SQL SERVER中的系统函数可以在需要的时候获取这些 ...
- Jquery系列教程
最近想重新温习下Jquery,发现园子里有个很棒的系列教材,所以Mark下来. 转载自:http://www.cnblogs.com/zhangziqiu/tag/jQuery%E6%95%99%E7 ...
随机推荐
- Core Java 谈谈HashMap
说起Java的HashMap相信大家都不是很陌生,但是对于HashMap内部结构有些同学可能不太了解,咱们下一步就将其展开. HashMap是基于Hash算法的,同理的还有HashSet和HashTa ...
- 发布一个Python小程序:ManHourCalendar
程序诞生的那些事儿 先聊聊背景资料档案.. 大约两年前,我只身前往岛国赚点外快.在那边的派遣制度工作中,存在一个大约叫每月的标准工作时间的概念,按照自家公司跟派遣目标公司(业界称为现场)的合同,规定了 ...
- JPG、PNG和GIF图片的基本原理及优…
JPG.PNG和GIF图片的基本原理及优化方法 一提到图片,我们就不得不从位图开始说起,位图图像(bitmap),也称为点阵图像或绘制图像,是由称作像素(图片元素)的单个点组成的.这些点可以进行不同的 ...
- 201521123091 《Java程序设计》第12周学习总结
Java 第十一周总结 第十一周的作业. 目录 1.本章学习总结 2.Java Q&A 3.码云上代码提交记录及PTA实验总结 4.课后阅读 1.本章学习总结 1.1 以你喜欢的方式(思维导图 ...
- 201521123017 《Java程序设计》第7周学习总结
1. 本周学习总结 2. 书面作业 Q1.ArrayList代码分析 1.1 解释ArrayList的contains源代码 1.2 解释E remove(int index)源代码 1.3 结合1. ...
- 学号:201521123116 《java程序设计》第三周学习总结
1. 本周学习总结 初学面向对象,会学习到很多碎片化的概念与知识.尝试学会使用思维导图将这些碎片化的概念.知识组织起来.请使用纸笔或者下面的工具画出本周学习到的知识点. 书面作业 Q1:代码阅读 pu ...
- 201521123044 《Java程序设计》第14周学习总结
1. 本章学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 友情提示:导图用ctrl+鼠标滚轮放大看更清楚些 2. 书面作业 1. MySQL数据库基本操作 建立数据库, ...
- 201521123073 《Java程序设计》第12周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 书面作业 将Student对象(属性:int id, String name,int age,doubl ...
- linux(CentOS5.8)环境下搭建Radius
本文记录了freeRadius在CentOS5.8环境下的基本搭建过程,未涉及mysql的加入及配置 freeradius官方地址:http://freeradius.org/ 环境:CentOS5. ...
- 子元素设定margin值会影响父元素
有些情况下,我们设定父元素下的子元素margin值时,父元素会被影响. 这是个常见问题,而且只在标准浏览器下 (FirfFox.Chrome.Opera.Sarfi)产生问题,IE下反而表现良好. 例 ...