Jquery插件写法笔记整理


Posted in Javascript onSeptember 06, 2012

jQuery插件类型:
1. jQuery方法:
大部分jQuery插件都是这种类型的插件,由于这种插件是将对象方法封装起来,在jQuery选择器获取jQuery对象过程中进行操作,从而发挥jQuery强大的选择器优势。
2. 全局函数:
也可以把自定义的功能函数独立附加到jQuery命名空间下,从而作为jQuery作用域下的一个公共函数使用。但全局函数没有被绑定到jQuery对象上,故不能在选择器获取的jQuery对象上调用。需要通过jQuery.fn()或$.fn()方式进行引用。
3. 选择器:
觉得jQuery提供的选择器不够用,或不方便的话,可以考虑自定义选择器。
jQuery插件机制:
① jQuery.extend()方法:能够创建全局函数或选择器。
By:所谓全局函数,就是jQuery对象的方法,实际上就是位于jQuery命名空间内部的函数,有人把这类函数称为实用工具函数,这些函数都有一个共同特征,就是不直接操作DOM元素,而是操作Javascript的非元素对象,或者执行其他非对象的特定操作,如jQuery的each()函数和noConflict()函数
例:在jQuery命名空间上创建两个公共函数

jQuery.extend({ 
minValue : function(a,b){ 
return a<b?a:b; 
}, 
maxValue : function(a,b){ 
return a<b?b:a; 
} 
}) 
$(function(){ 
$("input").click(function(){ 
var a = prompt("请输入一个数值?"); 
var b = prompt("请再输入一个数值?"); 
var c = jQuery.minValue(a,b); 
var d = jQuery.maxValue(a,b); 
alert("你输入的最大值是:" + d + "\n你输入的最小值是:" + c); 
}); 
}) 
<input type="button" value="jQuery插件扩展测试" />

※ jQuery.extend()方法除了可以创建插件外,还可以用来扩展jQuery对象。
例如:调用jQuery.extend()方法把对象a和对象b合并为一个新的对象,并返回合并对象将其赋值给变量c
var a = {name : "zhu",pass : 123} 
var b = {name : "wang",pass : 456,age : 1} 
var c = jQuery.extend(a,b); 
$(function(){ 
for(var name in c){ 
$("div").html($("div").html() + "<br />"+ name + ":" + c[name]); 
} 
})

例:创建jQuery全局函数
jQuery.css8 = { 
minValue : function(a,b){ 
return a<b?a:b; 
}, 
maxValue : function(a,b){ 
return a<b?b:a; 
} 
} 
$(function(){ 
$("input").click(function(){ 
var a = prompt("请输入一个数值?"); 
var b = prompt("请再输入一个数值?"); 
var c = jQuery.css8.minValue(a,b); 
var d = jQuery.css8.maxValue(a,b); 
alert("你输入的最大值是:" + d + "\n你输入的最小值是:" + c); 
}); 
})

By:如果要向jQuery命名空间上添加一个函数,只需要将这个新函数制定为jQuery对象的一个属性即可。其中jQuery对象名也可以简写为$,jQuery.css8==$.css8
② jQuery.fn.extend()方法:能够创建jQuery对象方法。
例:来个最简单的jQuery对象方法
jQuery.fn.test = function(){ 
alert("这是jQuery对象方法!"); 
} 
$(function(){ 
$("div").click(function(){ 
$(this).test(); 
}); 
})
Javascript 相关文章推荐
使用onbeforeunload属性后的副作用
Mar 08 Javascript
jquery cookie插件代码类
May 26 Javascript
js function使用心得
May 10 Javascript
javascript 正则替换 replace(regExp, function)用法
May 22 Javascript
JavaScript高级程序设计 读书笔记之九 本地对象Array
Feb 27 Javascript
jQuery调取jSon数据并展示的方法
Jan 29 Javascript
jQuery绑定自定义事件的魔法升级版
Jun 30 Javascript
JS动态添加选项案例分析
Oct 17 Javascript
bootstrap——bootstrapTable实现隐藏列的示例
Jan 14 Javascript
JavaScript实现鼠标点击导航栏变色特效
Feb 08 Javascript
数组Array的排序sort方法
Feb 17 Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
Apr 02 Javascript
基于jquery的用鼠标画出可移动的div
Sep 06 #Javascript
js防止表单重复提交实现代码
Sep 05 #Javascript
javascript面向对象入门基础详细介绍
Sep 05 #Javascript
说说JSON和JSONP 也许你会豁然开朗
Sep 02 #Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
Sep 02 #Javascript
Javascript中的delete介绍
Sep 02 #Javascript
JS判断当前日期是否大于某个日期的实现代码
Sep 02 #Javascript
You might like
ip签名探针
2006/10/09 PHP
php木马攻击防御之道
2008/03/24 PHP
PHP随机数生成代码与使用实例分析
2011/04/08 PHP
Laravel5.4框架中视图共享数据的方法详解
2019/09/05 PHP
php让json_encode不自动转义斜杠“/”的方法
2020/04/27 PHP
JavaScript对象模型-执行模型
2008/04/28 Javascript
js的.innerHTML = &quot;&quot;IE9下显示有错误的解决方法
2013/09/16 Javascript
javascript设置金额样式转换保留两位小数示例代码
2013/12/04 Javascript
JS文字球状放大效果代码分享
2015/08/19 Javascript
极易被忽视的javascript面试题七问七答
2016/02/15 Javascript
深入浅析jQuery对象$.html
2016/08/22 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
2016/12/30 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
2017/03/10 Javascript
微信小程序中form 表单提交和取值实例详解
2017/04/20 Javascript
vue实现在一个方法执行完后执行另一个方法的示例
2018/08/25 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
2018/09/27 Javascript
JavaScript实现美化滑块效果
2019/05/17 Javascript
javascript获取元素的计算样式
2019/05/24 Javascript
[01:14:34]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第一局
2016/02/28 DOTA
python 回调函数和回调方法的实现分析
2016/03/23 Python
Python实现针对给定字符串寻找最长非重复子串的方法
2018/04/21 Python
python通过Windows下远程控制Linux系统
2018/06/20 Python
解决Python中list里的中文输出到html模板里的问题
2018/12/17 Python
Python多图片合并PDF的方法
2019/01/03 Python
Python写一个基于MD5的文件监听程序
2019/03/11 Python
python 执行终端/控制台命令的例子
2019/07/12 Python
Python3 assert断言实现原理解析
2020/03/02 Python
Python模拟登录和登录跳转的参考示例
2020/10/30 Python
意大利奢侈品多品牌集合店:TheDoubleF
2019/08/24 全球购物
专科毕业生就业推荐信
2013/11/01 职场文书
幼儿园毕业家长感言
2014/02/10 职场文书
个人总结怎么写
2015/02/26 职场文书
2015年圣诞节活动总结
2015/03/24 职场文书
MySQL里面的子查询的基本使用
2021/08/02 MySQL
Mysql实现简易版搜索引擎的示例代码
2021/08/30 MySQL
mysql数据库隔离级别详解
2022/06/16 MySQL