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控制CSS样式,并且取消Css样式(如背景色,有实例)
Jul 09 Javascript
javascript遍历控件实例详细解析
Jan 10 Javascript
jquery实现ajax提交form表单的方法总结
Mar 03 Javascript
jQuery对于显示和隐藏等常用状态的判断方法
Dec 13 Javascript
个人总结的一些JavaScript技巧、实用函数、简洁方法、编程细节
Jun 10 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
Jun 08 Javascript
移动适配的几种方案(三种方案)
Nov 25 Javascript
javascript数据结构之串的概念与用法分析
Apr 12 Javascript
mpvue将vue项目转换为小程序
Sep 30 Javascript
axios使用拦截器统一处理所有的http请求的方法
Nov 02 Javascript
layui使用label标签的方法
Sep 14 Javascript
three.js 制作动态二维码的示例代码
Jul 31 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开发中常用的8个小技巧
2008/08/27 PHP
将数组写入txt文件 var_export
2009/04/21 PHP
10款PHP开源商城系统汇总介绍
2015/07/23 PHP
ThinkPHP5实现作业管理系统中处理学生未交作业与已交作业信息的方法
2016/11/12 PHP
PHP输出图像imagegif、imagejpeg与imagepng函数用法分析
2016/11/14 PHP
PHP利用pdo_odbc实现连接数据库示例【基于ThinkPHP5.1搭建的项目】
2019/05/13 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
jquery 插件学习(五)
2012/08/06 Javascript
JQuery.Ajax之错误调试帮助信息介绍
2013/07/04 Javascript
js处理自己不能定义二维数组的方法详解
2014/03/03 Javascript
在Firefox下js select标签点击无法弹出
2014/03/06 Javascript
轻松创建nodejs服务器(8):非阻塞是如何实现的
2014/12/18 NodeJs
JQuery实现动态添加删除评论的方法
2015/05/18 Javascript
jquery使用经验小结
2015/05/20 Javascript
纯js实现无限空间大小的本地存储
2015/06/18 Javascript
JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端
2016/10/08 Javascript
快速掌握jQuery插件WebUploader文件上传
2016/11/07 Javascript
详解webpack和webpack-simple中如何引入css文件
2017/06/28 Javascript
vue点击input弹出带搜索键盘并监听该元素的方法
2018/08/25 Javascript
详解mpvue开发微信小程序基础知识
2019/09/23 Javascript
Javascript异步流程控制之串行执行详解
2020/09/27 Javascript
Python程序员鲜为人知但你应该知道的17个问题
2014/06/04 Python
python复制文件的方法实例详解
2015/05/22 Python
Python机器学习k-近邻算法(K Nearest Neighbor)实例详解
2018/06/25 Python
Python lxml模块的基本使用方法分析
2019/12/21 Python
Python自动化测试笔试面试题精选
2020/03/12 Python
基于virtualenv创建python虚拟环境过程图解
2020/03/30 Python
python_matplotlib改变横坐标和纵坐标上的刻度(ticks)方式
2020/05/16 Python
茵宝(Umbro)英国官方商店:英国足球服装生产商
2016/12/29 全球购物
佳能德国网上商店:Canon德国
2017/03/18 全球购物
京东港澳售:京东直邮港澳台
2018/01/31 全球购物
Godiva巧克力英国官网:比利时歌帝梵巧克力
2018/08/28 全球购物
大学生通用个人的自我评价
2014/02/10 职场文书
群众路线教育实践活动方案
2014/10/31 职场文书
学生会招新宣传语
2015/07/13 职场文书
2016党员干部反腐倡廉心得体会
2016/01/13 职场文书