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关于select的相关操作说明
Jan 13 Javascript
JQuery 中几个类选择器的简单使用介绍
Mar 14 Javascript
jquery 实现二级/三级/多级联动菜单的思路及代码
Apr 08 Javascript
jQuery bxCarousel实现图片滚动切换效果示例代码
May 15 Javascript
jQuery实现鼠标划过修改样式的方法
Apr 14 Javascript
js插件Jcrop自定义截取图片功能
Oct 14 Javascript
JS实现的数组去除重复数据算法小结
Nov 17 Javascript
Angular2.0实现modal对话框的方法示例
Feb 18 Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
Aug 14 Javascript
JavaScript生成随机验证码代码实例
Sep 28 Javascript
React学习之受控组件与数据共享实例分析
Jan 06 Javascript
Javascript执行上下文顺序的深入讲解
Nov 04 Javascript
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采集时被封ip的解决方法
2010/08/29 PHP
50个PHP程序性能优化的方法
2014/06/02 PHP
PHP+MYSQL实现读写分离简单实战
2017/03/13 PHP
PHP fprintf()函数用法讲解
2019/02/16 PHP
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
2007/02/03 Javascript
javascript arguments 传递给函数的隐含参数
2009/08/21 Javascript
兼容IE和FF的js脚本代码小结(比较常用)
2010/12/06 Javascript
JavaScript高级程序设计 读书笔记之八 Function类及闭包
2012/02/27 Javascript
js操作textarea 常用方法总结
2012/12/03 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
2014/04/20 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
2014/07/29 Javascript
jquery使用$(element).is()来判断获取的tagName
2014/08/24 Javascript
jquery幻灯片插件bxslider样式改进实例
2014/10/15 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
2016/05/12 Javascript
微信小程序 网络请求(post请求,get请求)
2017/01/17 Javascript
Vue.js 60分钟快速入门教程
2017/03/28 Javascript
在使用JSON格式处理数据时应该注意的问题小结
2017/05/20 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
2017/09/14 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
2020/08/09 Javascript
layui的table单击行勾选checkbox功能方法
2018/08/14 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
2018/11/25 Javascript
解决layer.confirm快速点击会重复触发事件的问题
2019/09/23 Javascript
vue项目中极验验证的使用代码示例
2019/12/03 Javascript
[01:01:52]完美世界DOTA2联赛PWL S2 GXR vs Magma 第二场 11.25
2020/11/26 DOTA
Python随机生成数模块random使用实例
2015/04/13 Python
Python实现连接两个无规则列表后删除重复元素并升序排序的方法
2018/02/05 Python
python微信公众号开发简单流程
2018/03/23 Python
Python Django实现layui风格+django分页功能的例子
2019/08/29 Python
Pytorch根据layers的name冻结训练方式
2020/01/06 Python
Python实现对adb命令封装
2020/03/06 Python
Python 微信公众号文章爬取的示例代码
2020/11/30 Python
matplotlib 使用 plt.savefig() 输出图片去除旁边的空白区域
2021/01/05 Python
详解使用HTML5的classList属性操作CSS类
2017/10/13 HTML / CSS
元旦红领巾广播稿
2014/02/19 职场文书
寄语学生的话
2014/04/10 职场文书
小学语文教师研修日志
2015/11/13 职场文书