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 相关文章推荐
jquery URL参数判断,确定菜单样式
May 31 Javascript
js解析json读取List中的实体对象示例
Mar 11 Javascript
angular.element方法汇总
Jan 07 Javascript
jQuery实现简洁的导航菜单效果
Nov 23 Javascript
移动端脚本框架Hammer.js
Dec 15 Javascript
angularjs使用directive实现分页组件的示例
Feb 07 Javascript
jQuery中的deferred使用方法
Mar 27 jQuery
浅析Node.js非对称加密方法
Jan 29 Javascript
微信小程序实现全国机场索引列表
Jan 31 Javascript
vue中使用cropperjs的方法
Mar 01 Javascript
详解element-ui设置下拉选择切换必填和非必填
Jun 17 Javascript
Javascript作用域和作用域链原理解析
Mar 03 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之第八天
2006/10/09 PHP
PHP反射基础知识回顾
2020/09/10 PHP
JavaScript中的稀疏数组与密集数组[译]
2012/09/17 Javascript
javascript中的if语句使用介绍
2013/11/20 Javascript
jquery通过visible来判断标签是否显示或隐藏
2014/05/08 Javascript
node.js中的console.dir方法使用说明
2014/12/10 Javascript
jQuery选择器之基本选择器与层次选择器
2015/03/03 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
2015/10/28 Javascript
JQuery fileupload插件实现文件上传功能
2016/03/18 Javascript
JavaScript获取服务器时间的方法详解
2016/12/11 Javascript
bootstrap警告框使用方法解析
2017/01/13 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
2017/01/21 Javascript
基于Bootstrap的网页设计实例
2017/03/01 Javascript
jquery网页加载进度条的实现
2017/06/01 jQuery
three.js 入门案例详解
2018/01/23 Javascript
JS通用方法触发点击事件代码实例
2020/02/17 Javascript
javascript实现京东快递单号的查询效果
2020/11/30 Javascript
聊聊Python中的pypy
2018/01/12 Python
python 常用的基础函数
2018/07/10 Python
python实现C4.5决策树算法
2018/08/29 Python
Python函数基础实例详解【函数嵌套,命名空间,函数对象,闭包函数等】
2019/03/30 Python
python 弹窗提示警告框MessageBox的实例
2019/06/18 Python
树莓派3 搭建 django 服务器的实例
2019/08/29 Python
python利用dlib获取人脸的68个landmark
2019/11/27 Python
python 遗传算法求函数极值的实现代码
2020/02/11 Python
基于matplotlib中ion()和ioff()的使用详解
2020/06/16 Python
用python批量下载apk
2020/12/29 Python
基于注解实现 SpringBoot 接口防刷的方法
2021/03/02 Python
HTML5的革新 结构之美
2011/06/20 HTML / CSS
SQL注入攻击的种类有哪些
2013/12/30 面试题
如何利用cmp命令比较文件
2016/04/11 面试题
《唯一的听众》教学反思
2014/02/20 职场文书
《池塘边的叫声》教学反思
2014/04/12 职场文书
买房子个人收入证明
2014/10/12 职场文书
2015教师个人工作总结范文
2015/03/31 职场文书
MySQL创建管理KEY分区
2022/04/13 MySQL