锋利的jQuery--编写jQuery插件(读书笔记五)[完结篇]

1.表单验证插件Validation

2.表单插件Form

3.动态事件绑定插件livequery

可以为后来的元素绑定事件

类似于jQuery中的live()方法

4.jQuery UI

5.jQuery Cookie

6.遮罩层插件:thickbox

7.编写jQuery插件

<1>编写插件的目的：给已经有的一些列方法或函数做一个封装，一遍在其他地方使用，方便后期维护和提高开发效率。

<2>三种类型的插件

a:封装对象方法的插件　　jQuery.fn.extend()

b:封装全局函数的插件　　jQuery.extend()

c:选择器插件　　jQuery.extend()

<3>插件内部的this指向的是jQuery对象，而不是DOM对象。

8.对于

jQuery 插件-（初体验一）

jquery.fn.extend与jquery.extend--（初体验二）

$.extend({},defaults, options) --（初体验三）

的补充。

<1>插件的基本要点

<2>jQuery.extend()方法处理可以用于扩展jQuery对象之外，还有一个强大的功能，就是用于扩展已有的Object对象。

例如：

var settings={va: false, li: 5, name:"foo"};
var options={va: true, name:"bar"};
var newSet=jQuery.extend(settings,options);

结果：

newSet={va: true, li: 5, name:"bar"};

所以：jQuery.extend()方法经常被用于设置插件方法的一系列默认参数。

例子：

function foo(options){options=jQuery.extend({name:"bar",length:5,dataType:"xml"},options);
}

<2>封装方法的插件使用

例子：写color插件。

1.js文件命名：jQuery.color.js

2.格式

;(function($){})(jQuery);

3.由于是封装方法的插件使用：jQuery.fn.extend()

;(function($){$.fn.extend({"color":function(value){}})
})(jQuery);

4.this的可链式调用性

;(function($){$.fn.extend({"color":function(value){return this.css("color",value);    //为了可链式调用，返回this
        }})
})(jQuery);

5.两个功能：设置与获取color

;(function($){$.fn.extend({"color":function(value){if(value==undefined){return this.css("color");    //为了可链式调用，返回this)else{return this.css("color",value); }}})
})(jQuery);

6.插件提升

a:由于css方法本身具有返回第一个匹配元素的功能，所以不需要使用eq()来获取第一个元素

b:由于css方法内部已经有判断value是否为undefined的机制，所以可以省略if

最终：

;(function($){$.fn.extend({"color":function(value){return this.css("color",value); }})
})(jQuery);

7.实际使用：

<script>;(function($){$.fn.extend({"color":function(value){return this.css("color",value); }})
})(jQuery);//应用
$(function(){alert($("div").color());    //获取第一个color$("div").color("red");    //设置所有的div的color为red
})</script>

8.插件扩展：如果要定义一组插件可以这么写

;(function($){$.fn.extend({"color":function(value){}，“border”:function(value){},...})
})(jQuery);

9.注意：jQuery选择符可能会匹配多个元素，可以在插件内部调用each()方法来遍历匹配元素。

如：

;(function($){$.fn.extend({"color":function(value){return this.each(function(){})}})
})(jQuery);

<3>封装全局函数的插件使用

例子：去除左侧和右侧的空格

;(function($){$.extend({ltrim:function(text){return (text || "").replace(/^\s+/g,"");},rtrim:function(text){return (text || "").replace(/^\s+$/g,"");}})
})(jQuery);//调用
$("div").val(jQuery.ltrim("      text        ")
)

<4>选择器插件

$("div:gt(1)")

jQuery中的源码是：

gt:function(a,i,m){

return i>m[3]-0;

}

有三个参数：a,i,m

转载于:https://www.cnblogs.com/zqzjs/p/4943617.html

锋利的jQuery--编写jQuery插件(读书笔记五)[完结篇]相关推荐

《教练型管理者》读书笔记-第2篇【教练技能】
<教练型管理者>读书笔记-第1篇 [教练原则] 第2 篇教练技能教练原则是通过教练的行为体现的.就像学习武功一样,心法虽然重要,但要落地就需要依靠扎实的基本功,这就是教练的核心技术. ...
《教练型管理者》读书笔记-第3篇【教练流程】
<教练型管理者>读书笔记-第1篇 [教练原则] <教练型管理者>读书笔记-第2篇 [教练技能] 第3 篇教练流程教练定义:"教练是基于对话技术,赋能个人达成绩效目 ...
《学术研究你的成功之道》读书笔记之论文篇
<学术研究你的成功之道>读书笔记之论文篇五年前的一次机器学习会议上,正逢凌晓峰教授签名出售新书<学术研究你的成功之道>,心血来潮买了一本,翻了一下觉得写得很不错.近日由于要在 ...
《教练型管理者》读书笔记-第4篇【教练实践】
<教练型管理者>读书笔记-第1篇 [教练原则] <教练型管理者>读书笔记-第2篇 [教练技能] <教练型管理者>读书笔记-第3篇 [教练流程] 第4 篇教练实践 ...
读书笔记之 sed 篇
Sed&awk笔记之sed篇:简单介绍最近在阅读<sed & awk(第二版)>,这本书是sed和awk相关书籍中比较经典的一本.我在读书的时候有一个习惯,就是会作一些笔 ...
curviloft插件怎么用_完结篇——你想要的逆天插件系列这里都有
原标题:完结篇--你想要的逆天插件系列这里都有十一前的一段时间,马克笔设计留学的安老师跟大家持续分享了几个非常实用的小插件,不知道大家用起来怎么样呢,是不是建模效率有了很大的提高.不过有些同学可能还 ...
【锋利的Jquery】读书笔记五
jquery表单表格操作表单从基本的得到和失去焦点表单验证 <script type="text/javascript">$(function(){$(" ...
MDX Step by Step 读书笔记(五) - Working with Expressions (MDX 表达式)
1. 大多数表达式会返回数值类型的值,但是也能返回例如字符串,时间,布尔或者其它类型的值. 2. 一般表达式的结果都是几个值通过操作符运算后得到的,下列表格中显示了对比,逻辑的,数值的,字符串以及集合 ...
《架构漫谈》读书笔记五
什么是软件软件架构的出现如同前面描述的架构的定义,软件架构的出现也是同样的.一开始是懵懵懂懂的去写软件,后来慢慢的就有意识的去切分,演变成了不同的架构.这个背后的动力也是一样的,就是提升参与的人的 ...

锋利的jQuery--编写jQuery插件(读书笔记五)[完结篇]

锋利的jQuery--编写jQuery插件(读书笔记五)[完结篇]相关推荐

最新文章

热门文章