jQuery 插件写法
一、jQuery插件的类型
1. jQuery方法
很大一部分的jQuery插件都是这种类型,由于此类插件是将对象方法封装起来,在jQuery选择器获取jQuery对象过程中进行操作,从而发挥jQuery强大的选择器优势。
2. 全局函数法
可以把自定义的功能函数独立附加到jQuery命名空间下,从而作为jQuery作用域下的一个公共函数使用。
但全局函数没有被绑定到jQuery对象上,故不能在选择器获取的jQuery对象上调用。需要通过jQuery.fn()或$.fn()方式进行引用。
3. 选择器法
如果觉得jQuery提供的选择器不够用或不方便的话,可以考虑自定义选择器。
二、jQuery插件的机制
1. jQuery.extend()方法
这种方法能够创建全局函数或选择器。
所谓全局函数,就是jQuery对象的方法,实际上就是位于jQuery命名空间内部的函数,有人把这类函数称为实用工具函数,这些函数都有一个共同特征,就是不直接操作DOM元素,而是操作Javascript的非元素对象,或者执行其他非对象的特定操作,如jQuery的each()函数和noConflict()函数。
例如,在jQuery命名空间上创建两个公共函数:
jQuery.extend({ min : function(a,b){ return a<b?a:b; }, max : function(a,b){ return a<b?b:a; } }) $(function(){ $("input").click(function(){ var a = prompt("请输入一个数:"); var b = prompt("再输入一个数:"); var c = jQuery.min(a,b); var d = jQuery.max(a,b); alert("最大值是:" + d + "\n最小值是:" + c); }); }) <input type="button" value="jQuery扩展测试" />
jQuery.extend()方法除了可以创建插件外,还可以用来扩展jQuery对象。
例如,调用jQuery.extend()方法把对象a和对象b合并为一个新的对象,并返回合并对象将其赋值给变量c:
var a = {name : "aaa",pass : 777}; var b = {name : "bbb",pass : 888,age : 9}; var c = jQuery.extend(a,b); $(function(){ for(var name in c){ $("div").html($("div").html() + "<br />"+ name + ":" + c[name]); } })
如果要向jQuery命名空间上添加一个函数,只需要将这个新函数制定为jQuery对象的一个属性即可。其中jQuery对象名也可以简写为$,jQuery.smalluv==$.smalluv。
例如,创建jQuery全局函数:
jQuery.smalluv = { min : function(a,b){ return a<b?a:b; }, max : function(a,b){ return a<b?b:a; } } $(function(){ $("input").click(function(){ var a = prompt("请输入一个数:"); var b = prompt("再输入一个数:"); var c = jQuery.smalluv.min(a,b); var d = jQuery.smalluv.max(a,b); alert("最大值是:" + d + "\n最小值是:" + c); }); })
2. jQuery.fn.extend()方法
这种方法能够创建jQuery对象方法。
举一个最简单的jQuery对象方法例子:
jQuery.fn.test = function(){ alert("jQuery对象方法"); } $(function(){ $("div").click(function(){ $(this).test(); }); })
三、总结
- 在jQuery匿名函数中,采用jQuery.extend();方法创建jQuery插件
- 在jQuery匿名函数中,采用对象.属性=函数的方式创建jQuery插件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head><title>最简单的jquery插件</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script type="text/javascript" src="../res/jquery/jquery-1.4.4.min.js"></script><script type="text/javascript">(function($) {jQuery.extend({//写法1a: function(h){$("#ad").html(h);},b:function(h){alert(h);}})})(jQuery);(function($) {//写法2jQuery.a=function(h){$("#ad").html(h);}jQuery.b=function(h){alert(h);}})(jQuery);$(document).ready(function(){$.a("abc");$.b("xyz");});</script></head><body><h3>最简单的jQuery插件</h3><div id="ad"></div></body> </html>
转载于:https://www.cnblogs.com/kt520/p/5672969.html
jQuery 插件写法相关推荐
- jQuery插件写法
jQuery核心的方法有两个: 1.$.extend(object)可以理解为jQuery添加一个静态方法. 2.$.fn.extend(object)可以理解为jQuery实例添加一个方法. 基本的 ...
- JQuery插件的写法和规范
JQuery插件写法的总结 最近Web应用程序中越来越多地用到了JQuery等Web前端技术.这些技术框架有效地改善了用户的操作体验,同时也提高了开发人员构造丰富客户端UI的效率.JQuery本身提供 ...
- 用一个案例介绍jQuery插件的使用和写法
我们在做web的时候都会用到很多jQuery插件,这些插件可以很方便的使用.但对于初学者来说想要修改插件中的一些功能,或者想要自定义插件却不是容易的事情.自己也刚好在学习这部分的知识,这里用一个案例来 ...
- jQuery插件的写法以及使用
如今做web开发,jquery 几乎是必不可少的,同时jquery插件也是不断的被大家所熟知,以及运用.最近在搞这个jquery插件,发现它的牛逼之处,所以讲一讲jQuery插件的写法以及使用 (fu ...
- jquery插件的写法
一.JQuery的插件主要分为3种: 1.封装对象方法的插件. 如JQuery的parent()方法,appendTo()方法,addClass()方法等. 2.封装全局函数的插件. 如JQuery. ...
- 自己动手开发jQuery插件
因为工作需要,所以这几天琢磨了一下关于jQuery插件开发的问题,经过一天鏖战,终于完成自己动手做的第一个jQuery插件,对于俺这种见了css就蛋疼菊紧的人来说,一天时间8小时,保守估计有5个小时在 ...
- jQuery插件simplePagination的使用-踩坑记_03
jQuery插件simplePagination的使用 正在熟悉项目上的代码,新添加了一个需要,需要对表单进行分页,之前的代码中是有分页的代码的,看了老半天,也没看太明白.之前的项目比较久远,继续熟悉 ...
- jQuery插件开发方式
一.jQuery扩展 1.$.extend(object) 类似于.Net的扩展方法,用于扩展jQuery.然后就可以用$.的方式调用. $(function(){$.extend({ fun1: f ...
- 尝试jquery插件的开发
尝试jquery插件的开发 今天,尝试了一下jquery插件的开发,先看效果图: 就是鼠标点击下面三张缩略图的时候,显示大图和文字. $(document).ready(function() { $( ...
最新文章
- 【AI学院】新手如何学CV?老司机带学有三书籍《深度学习之图像识别》,赠书8本...
- 使用uuid作为数据库主键,被技术总监怼了!
- python怎么播放本地录音_Python播放音频与录音
- 怎样应对“需求不确定型项目”?
- 【HTML简易版“冒险岛”小游戏】(游戏效果展示+全部源代码分享)
- 玩转oracle视频教程(四)百度云
- 基于matlab的音频处理论文,基于Matlab的语音信号处理与仿真设计毕业论文
- 防御DDoS措施抓住这一要点,让你从此不再为DDoS头疼
- XP系统计算机桌面图标不见,xp系统桌面计算机快捷图标不见了的设置方法
- 分散式云存储,元宇宙数据存储基建
- Laya 实现一个轻量高效好用的Tween库并支持Laya.Ease方法
- Pytorch 多线程 运行卡死
- 【课程·研】软件工程 | 结对编程:建造金字塔(1157)
- Jenkins用户密码重置
- 八百八十岁也没活明白
- Linux 命令之 jq
- 计算机教室100字介绍,描写教室的作文100字
- 百战终破黄金甲,不破楼兰终不还!
- matlab hobject,GUI中更新句柄guidata(hObject,handles)问题!!!
- C# Connection:连接数据库
热门文章
- sql 大于某个日期_图解面试题:如何比较日期数据?
- setnx是原子操作吗_Redis面试七连问,你能扛得住吗?
- 台达伺服驱动器说明书_干货:伺服调机实例讲解
- Linux管道函数使用
- Rwordseg安装
- Eclipse创建springboot项目的方式
- 【Flink】Flink中流动的四种元素
- 95-32-015-ChannelPipeline-DefaultChannelPipeline
- 【Flink】Flink 的 slotSharingGroup 有什么用
- 【ElasticSearch】ElasticSearch在数十亿级别数据下,如何提高查询效率? 性能优化