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解决常见浏览器兼容问题的12种方法
Jan 04 Javascript
js取消单选按钮选中并判断对象是否为空
Nov 14 Javascript
JS实现的通用表单验证插件完整实例
Aug 20 Javascript
解决Linux无法正常安装与卸载Node.js的方法
Jan 19 Javascript
JS实现的DOM插入节点操作示例
Apr 04 Javascript
vue中子组件调用兄弟组件方法
Jul 06 Javascript
vue移动端实现红包雨效果
Jun 23 Javascript
监听angularJs列表数据是否渲染完毕的方法示例
Nov 07 Javascript
JS实现移动端在线签协议功能
Aug 22 Javascript
JavaScript编码小技巧分享
Sep 17 Javascript
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 Vue.js
使用vuex-persistedstate本地存储vuex
Apr 29 Vue.js
基于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伪静态页面函数附使用方法
2008/06/20 PHP
如何在Ubuntu下启动Apache的Rewrite功能
2013/07/05 PHP
CodeIgniter实现更改view文件夹路径的方法
2014/07/04 PHP
Codeigniter(CI)框架分页函数及相关知识
2014/11/03 PHP
PHP PDOStatement::columnCount讲解
2019/01/30 PHP
PHP7内核之Reference详解
2019/03/14 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
php解析非标准json、非规范json的方式实例
2020/12/10 PHP
IE与Firefox在JavaScript上的7个不同写法小结
2009/09/14 Javascript
捕获键盘事件(且兼容各浏览器)
2013/07/03 Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
2013/09/02 Javascript
jquery实现树形二级菜单实例代码
2013/11/20 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
2015/08/21 Javascript
Bootstrap实现响应式导航栏效果
2015/12/28 Javascript
详解js树形控件—zTree使用总结
2016/12/28 Javascript
es6学习之解构时应该注意的点
2017/08/29 Javascript
angular4 共享服务在多个组件中数据通信的示例
2018/03/30 Javascript
理顺8个版本vue的区别(小结)
2018/09/17 Javascript
用Nodejs实现在终端中炒股的实现
2020/10/18 NodeJs
微信小程序实现多行文字滚动
2020/11/18 Javascript
python itchat实现微信自动回复的示例代码
2017/08/14 Python
python 全局变量的import机制介绍
2017/09/07 Python
python调用c++ ctype list传数组或者返回数组的方法
2019/02/13 Python
Mac 使用python3的matplot画图不显示的解决
2019/11/23 Python
Python chardet库识别编码原理解析
2020/02/18 Python
Melijoe英国官网:法国儿童时尚网站
2016/11/18 全球购物
Strathberry苏贝瑞中国官网:西班牙高级工匠手工打造
2020/10/19 全球购物
财务出纳员岗位职责
2013/11/26 职场文书
教师专业自荐书范文
2014/02/10 职场文书
保护环境建议书400字
2014/05/13 职场文书
致百米运动员广播稿5篇
2014/10/13 职场文书
民主生活会批评与自我批评总结
2014/10/17 职场文书
mysql获取指定时间段中所有日期或月份的语句(不设存储过程,不加表)
2021/06/18 MySQL
自动在Windows中运行Python脚本并定时触发功能实现
2021/09/04 Python
Spring中的@Transactional的工作原理
2022/06/05 Java/Android
springboot创建的web项目整合Quartz框架的项目实践
2022/06/21 Java/Android