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 相关文章推荐
javascript Ext JS 状态默认存储时间
Feb 15 Javascript
避免回车键导致的页面无意义刷新的解决方法
Apr 12 Javascript
jQuery ajax dataType值为text json探索分享
Sep 23 Javascript
jQuery插件简单实现方法
Jul 18 Javascript
JavaScript为事件句柄绑定监听函数实例详解
Dec 15 Javascript
详解JavaScript节流函数中的Throttle
Jul 16 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
Jul 26 Javascript
AngularJS 整理一些优化的小技巧
Aug 18 Javascript
详解react-router如何实现按需加载
Jun 15 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
Jul 13 Javascript
JavaScript Array对象基本方法详解
Sep 03 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
Nov 15 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
PHP写入WRITE编码为UTF8的文件的实现代码
2008/07/07 PHP
JpGraph php柱状图使用介绍
2011/08/23 PHP
正确的PHP匹配UTF-8中文的正则表达式
2015/05/13 PHP
PHP中的密码加密的解决方案总结
2016/10/26 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
laravel 创建命令行命令的图文教程
2019/10/23 PHP
javascript 字符串连接的性能问题(多浏览器)
2008/11/18 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
2015/10/27 Javascript
javaScript中定义类或对象的五种方式总结
2016/12/04 Javascript
微信小程序 slider 详解及实例代码
2017/01/10 Javascript
微信小程序 扎金花简单实例
2017/02/21 Javascript
浅谈react.js 之 批量添加与删除功能
2017/04/17 Javascript
Vue.js中轻松解决v-for执行出错的三个方案
2017/06/09 Javascript
vue.js移动端tab组件的封装实践实例
2017/06/30 Javascript
typescript nodejs 依赖注入实现方法代码详解
2019/07/21 NodeJs
基于Vue+ElementUI的省市区地址选择通用组件
2019/11/20 Javascript
Python设计模式之代理模式实例
2014/04/26 Python
Python中有趣在__call__函数
2015/06/21 Python
Python 正则表达式的高级用法
2016/12/04 Python
selenium+python实现自动登录脚本
2018/04/22 Python
详解python实现数据归一化处理的方式:(0,1)标准化
2019/07/17 Python
浅析PyTorch中nn.Linear的使用
2019/08/18 Python
python英语单词测试小程序代码实例
2019/09/09 Python
在pycharm中配置Anaconda以及pip源配置详解
2019/09/09 Python
pycharm显示远程图片的实现
2019/11/04 Python
Python通过Manager方式实现多个无关联进程共享数据的实现
2019/11/07 Python
Python如何实现强制数据类型转换
2019/11/22 Python
美国知名玩具品牌:Melissa & Doug
2016/08/16 全球购物
应届毕业生应聘自荐信
2013/12/07 职场文书
网络专业学生个人的自我评价
2013/12/16 职场文书
法律专业大学生职业生涯规划书:向目标一步步迈进
2014/09/22 职场文书
先进单位事迹材料
2014/12/25 职场文书
2015年社区科普工作总结
2015/05/13 职场文书
送给小学生的暑假礼物!小学生必背99首古诗
2019/07/02 职场文书
css3实现背景图片颜色修改的多种方式
2021/04/13 HTML / CSS
Nginx实现高可用集群构建(Keepalived+Haproxy+Nginx)
2021/05/27 Servers