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 相关文章推荐
JS DOM 操作实现代码
Aug 01 Javascript
人人网javascript面试题 可以提前实现下
Jan 05 Javascript
JQuery中如何传递参数如click(),change()等具体实现
Apr 28 Javascript
js为鼠标添加右击事件防止默认的右击菜单弹出
Jul 29 Javascript
jQuery :first选择器使用介绍
Aug 09 Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
Oct 21 Javascript
javascript电商网站抢购倒计时效果实现
Nov 19 Javascript
javascript中的replace函数(带注释demo)
Jan 07 Javascript
vue实现跳转接口push 转场动画示例
Nov 01 Javascript
Vuex,iView UI面包屑导航使用扩展详解
Nov 04 Javascript
es6数组的flat(),flatMap()函数用法实例分析
Apr 18 Javascript
JavaScript实现移动端弹窗后禁止滚动
May 25 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析构函数的简单使用说明
2015/08/24 PHP
PHP编程获取图片的主色调的方法【基于Imagick扩展】
2017/08/02 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
JavaScript QueryString解析类代码
2010/01/17 Javascript
ExtJs3.0中Store添加 baseParams 的Bug
2010/03/10 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
2012/10/12 Javascript
JQuery动画和停止动画实例代码
2013/03/01 Javascript
jqGrid读取选择的多行的某个属性代码
2014/05/18 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
2014/09/06 Javascript
使用jQuery获得内容以及内容的属性
2015/02/26 Javascript
json对象与数组以及转换成js对象的简单实现方法
2016/06/24 Javascript
利用Vue.js指令实现全选功能
2016/09/08 Javascript
jQuery实现级联下拉框实战(5)
2017/02/08 Javascript
JS 实现随机验证码功能
2017/02/15 Javascript
vue.js $refs和$emit 父子组件交互的方法
2017/12/20 Javascript
vue获取当前点击的元素并传值的实例
2018/03/09 Javascript
js+html5实现手机九宫格密码解锁功能
2018/07/30 Javascript
JS常见构造模式实例对比分析
2018/08/27 Javascript
微信小程序非跳转式组件授权登录的方法示例
2019/05/22 Javascript
JS实现数据动态渲染的竖向步骤条
2020/06/24 Javascript
17个Python小技巧分享
2015/01/23 Python
Python处理RSS、ATOM模块FEEDPARSER介绍
2015/02/18 Python
Python从零开始创建区块链
2018/03/06 Python
linux系统下pip升级报错的解决方法
2021/01/31 Python
MADE法国:提供原创设计师家具
2018/09/18 全球购物
.net C#面试题
2012/08/28 面试题
光盘行动倡议书
2014/02/02 职场文书
期中考试反思800字
2014/05/01 职场文书
2014年采购工作总结
2014/11/20 职场文书
2014年企业团支部工作总结
2014/12/10 职场文书
教师考核鉴定意见
2015/06/05 职场文书
小人国观后感
2015/06/11 职场文书
导游词之黄帝陵景区
2019/09/16 职场文书
go设置多个GOPATH的方式
2021/05/05 Golang
MYSQL主从数据库同步备份配置的方法
2021/05/26 MySQL
Ruby使用Mysql2连接操作MySQL
2022/04/19 Ruby