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.对于
的补充。
 
<1>插件的基本要点
 
<2>jQuery.extend()方法处理可以用于扩展jQuery对象之外,还有一个强大的功能,就是用于扩展已有的Object对象。
例如:
  1. var settings={va: false, li: 5, name:"foo"};
  2. var options={va: true, name:"bar"};
  3. var newSet=jQuery.extend(settings,options);
 
结果:
  1. newSet={va: true, li: 5, name:"bar"};
 
所以:jQuery.extend()方法经常被用于设置插件方法的一系列默认参数。
例子:
  1. function foo(options){
  2. options=jQuery.extend({
  3. name:"bar",
  4. length:5,
  5. dataType:"xml"
  6. },options);
  7. }
<2>封装方法的插件使用
例子:写color插件。
1.js文件命名:jQuery.color.js
 
2.格式
  1. ;(function($){
  2.  
  3. })(jQuery);
 
3.由于是封装方法的插件使用:jQuery.fn.extend()
  1. ;(function($){
  2. $.fn.extend({
  3. "color":function(value){
  4.  
  5. }
  6. })
  7. })(jQuery);
 
4.this的可链式调用性
  1. ;(function($){
  2. $.fn.extend({
  3. "color":function(value){
  4. return this.css("color",value); //为了可链式调用,返回this
  5. }
  6. })
  7. })(jQuery);
5.两个功能:设置与获取color
  1. ;(function($){
  2. $.fn.extend({
  3. "color":function(value){
  4. if(value==undefined){
  5. return this.css("color"); //为了可链式调用,返回this
  6. )else{
  7. return this.css("color",value);
  8. }
  9. }
  10. })
  11. })(jQuery);
 
6.插件提升
a:由于css方法本身具有返回第一个匹配元素的功能,所以不需要使用eq()来获取第一个元素
b:由于css方法内部已经有判断value是否为undefined的机制,所以可以省略if
最终:
  1. ;(function($){
  2. $.fn.extend({
  3. "color":function(value){
  4. return this.css("color",value);
  5. }
  6. })
  7. })(jQuery);
 
7.实际使用:
  1. <script>
  2.  
  3. ;(function($){
  4. $.fn.extend({
  5. "color":function(value){
  6. return this.css("color",value);
  7. }
  8. })
  9. })(jQuery);
  10.  
  11. //应用
  12. $(function(){
  13. alert($("div").color()); //获取第一个color
  14. $("div").color("red"); //设置所有的div的color为red
  15. })
  16.  
  17. </script>
8.插件扩展:如果要定义一组插件可以这么写
  1. ;(function($){
  2. $.fn.extend({
  3. "color":function(value){
  4.  
  5. },
  6. border”:function(value){
  7.  
  8. },
  9. ...
  10. })
  11. })(jQuery);
 
9.注意:jQuery选择符可能会匹配多个元素,可以在插件内部调用each()方法来遍历匹配元素。
如:
  1. ;(function($){
  2. $.fn.extend({
  3. "color":function(value){
  4. return this.each(function(){
  5.  
  6. })
  7. }
  8. })
  9. })(jQuery);
 
<3>封装全局函数的插件使用
例子:去除左侧和右侧的空格
  1. ;(function($){
  2. $.extend({
  3. ltrim:function(text){
  4. return (text || "").replace(/^\s+/g,"");
  5. },
  6.  
  7. rtrim:function(text){
  8. return (text || "").replace(/^\s+$/g,"");
  9. }
  10.  
  11. })
  12. })(jQuery);
  13.  
  14. //调用
  15. $("div").val(
  16. jQuery.ltrim(" text ")
  17. )
 
<4>选择器插件
$("div:gt(1)")
 
jQuery中的源码是
gt:function(a,i,m){
    return i>m[3]-0;
}
有三个参数:a,i,m
 
 
 
 

锋利的jQuery--编写jQuery插件(读书笔记五)[完结篇]的更多相关文章

  1. AngularJS in Action读书笔记6(实战篇)——bug hunting

    这一系列文章感觉写的不好,思维跨度很大,原本是由于与<Angularjs in action>有种相见恨晚而激发要写点读后感之类的文章,但是在翻译或是阐述的时候还是会心有余而力不足,零零总 ...

  2. 《锋利的Jquery第二版》读书笔记 第二章

    本章节主要Jquery选择器 jquery选择器与css选择器十分相似,特别需要注意的是 <script type="text/javascript"> documen ...

  3. 《jQuery基础教程》读书笔记

    最近在看<jQuery基础教程>这本书,做了点读书笔记以备回顾,不定期更新. 第一章第二章比较基础,就此略过了... 第三章 事件 jQuery中$(document).ready()与j ...

  4. 《锋利的Jquery第二版》读书笔记 第一章

    按照书本介绍顺序整理jquery库相关的语法.要点. window.onload与$(document).ready()功能类似,前者需要所有资源加载完毕,且不能同时编写多个:后者加载完DOM结构即执 ...

  5. 《锋利的Jquery第二版》读书笔记 第三章

    DOM操作的分类 1.DOM Core不专属JavaScript,任何一种支持DOM的程序设计语言都可以使用它,也可以处理XML等标记语言编写出来的文档,getElementById().setAtt ...

  6. 【锋利的Jquery】读书笔记五

    jquery表单 表格操作 表单从基本的得到和失去焦点表单验证 <script type="text/javascript"> $(function(){ $(&quo ...

  7. 《JQuery技术内幕》读书笔记——自调用匿名函数剖析

    Javascript语言中的自调用匿名函数格式如下: (function(){ //do somethings })(); 它还有另外两种等价写法如下: //等价写法一 (function(){ // ...

  8. 锋利的jQuery--jQuery事件,动画(读书笔记二)

    1.注意$(document).ready()方法和window.onload方法之间的细微区别 $(document).ready()在DOM树构建完成就会执行,而window.onload是在DO ...

  9. 《梦断代码》读书笔记第0篇——“软件时间”、“死定了”、“Agenda之魂“

    第0章  软件时间 在未读这本书前,刚看到名字觉得是本讲代码的书,后来老师说是一个个的故事,这引起了我的兴趣,于是我便速速开始了第0章的阅读,读完一遍大概能读懂在讲什么,可能由于是译过来的书,书里面一 ...

随机推荐

  1. LeetCode-4MedianofTwoSortedArrays(C#)

    # 题目 4. Median of Two Sorted Arrays There are two sorted arrays nums1 and nums2 of size m and n resp ...

  2. AngularJS过滤器filter-保留小数,小数点-$filter

    AngularJS      保留小数 默认是保留3位 固定的套路是 {{deom | number:4}} 意思就是保留小数点 的后四位 在渲染页面的时候 加入这儿个代码 用来精确浮点数,指定小数点 ...

  3. SQLSERVER聚集索引与非聚集索引的再次研究(上)

    SQLSERVER聚集索引与非聚集索引的再次研究(上) 上篇主要说聚集索引 下篇的地址:SQLSERVER聚集索引与非聚集索引的再次研究(下) 由于本人还是SQLSERVER菜鸟一枚,加上一些实验的逻 ...

  4. 《Django By Example》第一章 中文 翻译 (个人学习,渣翻)

    书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者注:本人目前在杭州某家互联网公司工作, ...

  5. Android 6.0 权限知识学习笔记

    最近在项目上因为6.0运行时权限吃了亏,发现之前对运行时权限的理解不足,决定回炉重造,重新学习一下Android Permission. 进入正题: Android权限 在Android系统中,权限分 ...

  6. git亲测命令

    一.Git新建本地分支与远程分支关联问题 git checkout -b branch_name origin/branch_name 或者 git branch --set-upstream bra ...

  7. 神马玩意,EntityFramework Core 1.1又更新了?走,赶紧去围观

    前言 哦,不搞SQL了么,当然会继续,周末会继续更新,估计写完还得几十篇,但是我会坚持把SQL更新完毕,绝不会烂尾,后续很长一段时间没更新的话,不要想我,那说明我是学习新的技能去了,那就是学习英语,本 ...

  8. SignalR SelfHost实时消息,集成到web中,实现服务器消息推送

    先前用过两次SignalR,但是中途有段时间没弄了,今天重新弄,发现已经忘得差不多了,做个笔记! 首先创建一个控制台项目Nuget添加引用联机搜索:Microsoft.AspNet.SignalR.S ...

  9. OpenWrt中开启usb存储和samba服务

    在从官网安装的WNDR3800 15.05.1版本OpenWrt中, 不带usb存储支持以及samba, 需要另外安装 1. 启用usb支持 USB Basic Support https://wik ...

  10. 【初码干货】在Window Server 2016中使用Web Deploy方式发布.NET Web应用的重新梳理

    在学习和工作的过程中,发现很多同事.朋友,在做.NET Web应用发布的时候,依然在走 生成-复制到服务器 这样的方式,稍微高级一点的,就是先发布到本地,再上传到服务器 这种方式不仅效率低下,而且不易 ...