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来编写最主要的淡入淡出效果>(点击打开链接)为姊妹篇. 但上一篇仅仅是对文本的基本控制,本篇则是对面板元素进行控制. 尽管功能上很类似,可是所用到的 ...
随机推荐
- jquery.ellipsis.js段落超出省略号插件
为了实现在段落尾部超出文字替换为省略号,自己写的插件,并作了简单的优化. 下面给出脚本演示页面及注释,在此之前介绍一下插件参数 1.lineNum:数字.限制段落的行数 2.english:布尔.英文 ...
- bootstrap注意事项(四)表格
1.基本实例 为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补(padding)和水平方向的分隔线.这种方式看起来很多余!?但是我们觉得,表格元素使 ...
- js基础——属性操作
html属性:属性名——属性值 操作:读 . 写 读操作:用来获取.找到属性名对应的属性值,方法:元素.属性名 例如:var oBtn = document.getElementById('btn1' ...
- leetcode Binary Search Tree Iterator python
# Definition for a binary tree node # class TreeNode(object): # def __init__(self, x): # self.val = ...
- struts2日常
更新struuts2 的action后不能马上反应,要重启服务器才可以,加上 <constant name="struts.devMode" value="true ...
- node 的 异步 数据库 调用 处理
相信很多人在使用node 的时候, 一方面会觉得他强大的异步性感到很方便. 但是有时候我们却非要程序能按我们自己的想法 去串行的执行我们的思路. 同样我在编写的过程中也遇到类似的问题,比如for 和 ...
- PHP中字符串补齐为定长
方法一 for ($i=0; $i<100; $i++) { $index = sprintf('%04d', $i); echo $index.'<br />'; } 方法二 fo ...
- -webkit-filter是神马?
这些滤镜效果最初是用于SVG的,W3C引入到CSS中,然后制定了CSS Filter Effects 1.0,现在webkit率先支持了它. 现在规范中支持的效果有: - grayscale ...
- SublimeText3常用快捷键和优秀插件(转载)
SublimeText是前端的一个神器,以其精简和可DIY而让广大fans疯狂.好吧不吹了直入正题 -_-!! 首先是安装,如果你有什么软件管家的话搜一下就好,一键安装.然后,有钱的土豪就自己买个吧, ...
- spoj COT2 - Count on a tree II 树上莫队
题目链接 http://codeforces.com/blog/entry/43230树上莫队从这里学的, 受益匪浅.. #include <iostream> #include < ...