jquery插件开发方法(初学者)


Posted in Javascript onFebruary 03, 2012

jQuery为开发插件提拱了两个方法,分别是:

jQuery.fn.extend(object);
jQuery.extend(object);

jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。
jQuery.fn.extend(object);给jQuery对象添加方法。

fn 是什么东西呢。查看jQuery代码,就不难发现。

jQuery.fn = jQuery.prototype = { 
 init: function( selector, context ) {//....  

 //...... 
};

原来 jQuery.fn = jQuery.prototype.对prototype肯定不会陌生啦。

虽然 javascript 没有明确的类的概念,但是用类来理解它,会更方便。
jQuery便是一个封装得非常好的类,比如我们用 语句 $("#btn1") 会生成一个 jQuery类的实例。

jQuery.extend(object); 为jQuery类添加添加类方法,可以理解为添加静态方法。如:

$.extend({ 
add:function(a,b){return a+b;} 
});

便为 jQuery 添加一个为 add 的 “静态方法”,之后便可以在引入 jQuery 的地方,使用这个方法了,
$.add(3,4); //return 7

jQuery.fn.extend(object); 对jQuery.prototype进得扩展,就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。
比如我们要开发一个插件,做一个特殊的编辑框,当它被点击时,便alert 当前编辑框里的内容。可以这么做:
Java代码

$.fn.extend({ 
alertWhileClick:function(){ 
$(this).click(function(){ 
alert($(this).val()); 
}); 
} 
}); 
$("#input1").alertWhileClick(); //页面上为:<input id="input1" type="text"/> 
$.fn.extend({ 
alertWhileClick:function(){ 
$(this).click(function(){ 
alert($(this).val()); 
}); 
} 
}); 
$("#input1").alertWhileClick(); //页面上为:<input id="input1" type="text"/>

$("#input1") 为一个jQuery实例,当它调用成员方法 alertWhileClick后,便实现了扩展,每次被点击时它会先弹出目前编辑里的内容。

真实的开发过程中,当然不会做这么小白的插件,事实上jQuery提拱了丰富的操作文档,事件,CSS ,Ajax、效果的方法,结合这些方法,便可以开发出更加 Niubility 的插件。

Javascript 相关文章推荐
javascript 建设银行登陆键盘
Jun 10 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
Sep 06 Javascript
jquery中交替点击事件toggle方法的使用示例
Dec 08 Javascript
JS实现很实用的对联广告代码(可自适应高度)
Sep 18 Javascript
Javascript简写条件语句(推荐)
Jun 12 Javascript
纯JS打造网页中checkbox和radio的美化效果
Oct 13 Javascript
原生js实现移动端触摸轮播的示例代码
Dec 22 Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
Jun 25 Javascript
vue2.0的虚拟DOM渲染思路分析
Aug 09 Javascript
小程序关于请求同步的总结
May 05 Javascript
vue导入.md文件的步骤(markdown转HTML)
Dec 31 Vue.js
vue 中 get / delete 传递数组参数方法
Mar 23 Vue.js
jquery插件制作简单示例说明
Feb 03 #Javascript
jQuery数组处理代码详解(含实例演示)
Feb 03 #Javascript
8款非常棒的响应式jQuery 幻灯片插件推荐
Feb 02 #Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
Feb 02 #Javascript
JavaScript初学者应注意的七个细节小结
Jan 30 #Javascript
面向对象的Javascript之三(封装和信息隐藏)
Jan 27 #Javascript
面向对象的Javascript之二(接口实现介绍)
Jan 27 #Javascript
You might like
深入PHP变量存储的详解
2013/06/13 PHP
PHP生成静态HTML页面最简单方法示例
2015/04/09 PHP
Yii框架表单提交验证功能分析
2017/01/07 PHP
tp5框架的增删改查操作示例
2019/10/31 PHP
PHP实现简单注册登录系统
2020/12/28 PHP
window.location和document.location的区别分析
2008/12/23 Javascript
当鼠标移动时出现特效的JQuery代码
2013/11/08 Javascript
JS获得浏览器版本和操作系统版本的例子
2014/05/13 Javascript
Javascript 中创建自定义对象的方法汇总
2014/12/04 Javascript
JavaScript闭包详解
2015/02/02 Javascript
深入理解JavaScript系列(37):设计模式之享元模式详解
2015/03/04 Javascript
jquery判断单选按钮radio是否选中的方法
2015/05/05 Javascript
jquery中trigger()无法触发hover事件的解决方法
2015/05/07 Javascript
JavaScript中的对象与JSON
2015/07/03 Javascript
jQuery ztree实现动态树形多选菜单
2016/08/12 Javascript
微信小程序 传值取值的几种方法总结
2017/01/16 Javascript
JS解决移动web开发手机输入框弹出的问题
2017/03/31 Javascript
AngularJS实现图片上传和预览功能的方法分析
2017/11/08 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
2018/05/04 Javascript
教你使用python实现微信每天给女朋友说晚安
2018/03/23 Python
使用Scrapy爬取动态数据
2018/10/21 Python
django数据关系一对多、多对多模型、自关联的建立
2019/07/24 Python
python学习之使用Matplotlib画实时的动态折线图的示例代码
2021/02/25 Python
英国钻石公司:British Diamond Company
2020/02/16 全球购物
后勤主管工作职责
2013/12/07 职场文书
客房主管岗位职责
2013/12/09 职场文书
大学新生军训方案
2014/05/03 职场文书
推荐信怎么写
2014/05/09 职场文书
党员群众路线对照检查材料
2014/08/31 职场文书
2015年医务人员医德医风自我评价
2015/03/03 职场文书
2015年度员工自我评价范文
2015/03/11 职场文书
2015年世界无车日活动总结
2015/03/23 职场文书
老兵退伍感言
2015/08/03 职场文书
2016初一新生军训心得体会
2016/01/11 职场文书
熟背这些句子,让您的英语口语突飞猛进(135句)
2019/09/06 职场文书
常用的文件对应的MIME类型汇总
2022/04/26 HTML / CSS