jQ插件编写
参考文档:http://www.cnblogs.com/Dlonghow/p/4142034.html
编写插件最先接触到的就是jQuery.fn.extend 和jQuery.extend 这个两个属性,但是这两个东西是什么,干啥用的,还得先明白:
1、jQuery.extend(object)
a)、为jQuery添加静态方法
eg : jQuery.extend({
min:function(a,,b){return a<b?a:b},
max:function(a,b){return a>b?a:b}
});
jQuery.min(2,3) //2
b)、jQuery.extend(target,object1,[objectN]) 用一个对象或多个对象来扩充对象,最后返回扩充的对象
eg:
var target = {
name : 'zt',
age : 24
}
var object1 = {
name : 'zj',
age : '28',
address : 'ly'
}
console.log(jQuery.extend(target,object1)); // {name:'zj',age:'28',address:'ly'};
2、jQuery.fn.extend(object);
$.fn是什么?
$.fn是指jQuery的命名空间,fn上的成员(方法function及属性property),会对jQuery实例每一个有效。
查看jQuery代码,就不难发现。
jQuery.fn = jQuery.prototype = {
init: function( selector, context ) {//....
};
原来 jQuery.fn = jQuery.prototype.
所以,它是对jQuery.prototype进得扩展,就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。
比如我们要开发一个插件,做一个特殊的编辑框,当它被点击时,便alert 当前编辑框里的内容。可以这么做:
$.fn.extend({
doAlertWhileClick:function() {
$(this).click(function(){
alert($(this).val());
});
}
});
$("#input1").doAlertWhileClick(); // 页面上为:
$("#input1") 为一个jQuery实例{不太懂?},当它调用成员方法 doAlertWhileClick后,便实现了扩展,每次被点击时它会先弹出目前编辑里的内容。
3、在实际的开发项目中:{pluginName为插件名称}
开发插件,是$.fn.pluginName = function(options){ }; 如果pluginName 为变量, 则写成 $.fn[pluginName] = function(options){ }
第一步:定一个闭包区域,防止插件被污染
;(function ($, window,undefined) { //传入window,不需要去外部寻找,提高效率 ; undefined ,防止外部声明,影响内部变量
})(window.jQuery, window);
第二步:写入插件方法:
;(function ($, window,undefined) { //传入window,不需要去外部寻找,提高效率 ; undefined ,防止外部声明,影响内部变量
$.fn[pluginName] = function(options){
return this.each(function(){
}) //支持链式调用
}
})(window.jQuery, window);
jQ插件编写的更多相关文章
- 个人学习JQ插件编写成果:little酷炫的图片滑动切换效果
工作一个多月了,好久没来冒冒泡了,看了@wayong的JQ插件教程,自己编写了一个模仿拉勾网首页广告栏滑动特效的JQ插件,现在跟朋友们分享分享! 先上demo链接:http://runjs.cn/de ...
- jQuery插件编写学习中遇见的问题--attr prop
个人博客: https://chenjiahao.xyz 最近在学习jQuery的插件的编写,有两种方式,$.fn.extend以及$.extend,一种是作用于对象原型上,一种是直接作用于jQuer ...
- jQuery插件编写及链式编程模型小结
JQuery极大的提高了我们编写JavaScript的效率,让我们可以愉快的编写代码,做出各种特效.大多数情况下,我们都是使用别人开发的JQuery插件,今天我们就来看看如何把我们常用的功能做出JQu ...
- Wireshark插件编写
Wireshark插件编写 在抓包的过程中学习了使用wireshark,同时发现wireshark可以进行加载插件,便在网上学习了一下相应的插件开发技术. 需求编写一个私有协议名为SYC,使用UDP端 ...
- typecho插件编写教程1 - 从HelloWorld说起
typecho插件编写教程1 - 从HelloWorld说起 老高 187 5月25日 发布 推荐 0 推荐 收藏 2 收藏,189 浏览 最近老高正在编写一个关于typecho的插件,由于typec ...
- JQ插件之imgAreaSelect实现对图片的在线截图功能(java版)
前言:在做网站的时候经常用的功能就是,用户上传图片对自己上传的图片进行截图,DIV自己的头像.或者上传幻灯片大图进行DIV设置小图. 解决方案:目前我知道的解决方案有两个如下: 一.fla ...
- jq插件处女座 图片轮播
好久没写博客了,变得好懒呀,无地自容.最近一直在学sass和jq插件的写法,照猫画虎的谢了一个jq的插件,也算是第一次真正称得上插件的插件 ,废话不多说 上代码 (function($) { $.fn ...
- jq插件第二款来袭 图片滚动
这第二款也是非常实用的插件,也是与图片相关,关于图片的需求太多了,这个是图片滚动哦,不过不是无缝滚动,是左像右滚动,到头的话再往回滚动,利用scrollLeft实现的,支持自动滚动和每次滚动的个数默认 ...
- 【jQuery】使用JQ来编写面板的淡入淡出效果
本文与上一篇的<[jQuery]使用JQ来编写最主要的淡入淡出效果>(点击打开链接)为姊妹篇. 但上一篇仅仅是对文本的基本控制,本篇则是对面板元素进行控制. 尽管功能上很类似,可是所用到的 ...
随机推荐
- 关于js中的类型内容总结(类型识别)
JS 有7种数据类型: 6种原始类型:Boollean String Number Null Underfined Symbol 引用类型:Object 类型识别主要有以下四 ...
- HBASE学习笔记--配置信息
hbase的配置信息,在hbase-site.xml里面有详细说明. 可以按照需要查询相关的配置. <?xml version="1.0"?> <?xml-sty ...
- 此操作只能由 SQL Server 中拥有配置数据库读取权限的用户在已加入到某个服务器场的计算机上执行
错误提示:此操作只能由 SQL Server 中拥有配置数据库读取权限的用户在已加入到某个服务器场的计算机上执行.若要将此服务器连接到服务器场,请使用 SharePoint 产品配置向导,该向导可从 ...
- C#中的USB库 WinUSB
NET C#中的USB库WinUSB,的libusb - Win32和的libusb - 1.0.使用公共设备类,应用程序与所有未经修改的操作系统和驱动程序.大量的示例代码. http://sourc ...
- [C++]KMP算法实现
KMP算法说明:http://zh.wikipedia.org/wiki/%E5%85%8B%E5%8A%AA%E6%96%AF-%E8%8E%AB%E9%87%8C%E6%96%AF-%E6%99% ...
- RabbitMQ 消息队列
一:简介 RabbitMQ是一个在AMQP协议标准基础上完整的,可服用的企业消息系统.他遵循Mozilla Public License开源协议.采用 Erlang 实现的工业级的消息队列(MQ)服务 ...
- MAC环境下生成Apple证书教程
在MAC操作系统下,生成Apple证书比较简单,全图形化操作. 一.使用Keychain Access(钥匙串访问) MAC操作系统对证书的处理都采用了“Keychain Access”(中文系统名为 ...
- 关于继承UITableViewController若干问题
// // MSHomeCommentTableViewController.m // xiaoqu-ios // // Created by Charlie on 15/7/1. // Copyri ...
- Junit技巧
测试套件: @RunWith(Suite.class) @Suite.SuiteClasses({TaskTest1.class, TaskTest2.class, TaskTest3.class}) ...
- vs指定QT的工作目录(其它项目也是如此)
当一个工程依赖第三方动态库时,这时vs编译出来后,运行会提示缺少动态库.解决方法: 项目->属性->调试: 工作目录:指定程序运行时的目录 环境:指定程序运行时的环境变量 我们可以在环境变 ...