编写一个设置和获取元素的color的插件:

首先实现第一个功能,设置:

    ;(function($){
$.fn.extend({
color:function(value){
return this.css("color",value); //css方法本身就是返回当前元素的jQuery对象
}
});
})(jQuery);      $("span").color("red"); //调用

然后实现第二个功能,获取:如果没传入value就是获取

    ;(function($){
$.fn.extend({
color:function(value){
if(value == 'undefined'){ //如果没传入值就是获取
return this.css("color");
}else{
return this.css("color",value); //css方法本身具有返回第一个匹配元素的样式值的功能,此处无需通过eq()来获取第一个元素
}
}
});
})(jQuery);

实际上,css方法内部已经有判断value值是否为undefined的机制,所以才可以根据传递参数的不同返回不同值。因此可以:

    ;(function($){
$.fn.extend({
color:function(value){
return this.css("color",value); //传值就是设置,没传就是取值
}
});
})(jQuery);

锋利的jQuery-7--一个$.fn.color插件的编写过程的更多相关文章

  1. 【锋利的jQuery】表单验证插件踩坑

    和前几篇博文提到的一样,由于版本原因,[锋利的jQuery]表单验证插件部分又出现照着敲不出效果的情况. 书中的使用方法: 1. 引入jquery源文件, 2. 引入表单验证插件js文件, 3. 在f ...

  2. [jQuery]《锋利的jQuery》插件部分总结

    /** * <锋利的jQuery>插件部分总结 * * jQuery插件推荐命名:jquery.name.js * * $.fn.extend用于封装对象方法的插件 * $.extend用 ...

  3. 《锋利的jQuery》笔记:插件的使用和写法

    jQuery插件的种类 1.封装对象方法 这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进行操作,是最常见的一种插件.此类插件可以发挥出jQuery选择器的强大优势,有相当一部分 ...

  4. 锋利的jQuery(第二版)学习总结

    通过对<锋利的jQuery>(第二版)一书的学习,发现此书讲解通俗易懂,是学习jQuery的一本很好的指导书,特作如下总结. 此书主要讲解了jQuery的常用操作,包括认识jQuery,j ...

  5. 锋利的jQuery学习总结

    通过对<锋利的jQuery>(第二版)一书的学习,发现此书讲解通俗易懂,是学习jQuery的一本很好的指导书,特作如下总结.此书主要讲解了jQuery的常用操作,包括认识jQuery,jQ ...

  6. 锋利的jQuery

    今天总要找点东西学习,其实有很多东西要记录,慢慢写,今天看书吧,这几天把这本书看完,这里记一些要点 从头开始记吧 第一章 认识jQuery $就是jQuery的简写 $(function(){}) 就 ...

  7. jquery自定义banner图滚动插件---(解决最后一张图片倒回第一张图片的bug)

    banner图的滚动效果动画 最近做项目中banner滚动的时候遇到了一个小bug,当banner滚动到最后一张图再跳回第一张图时, 会出现默认的倒回第一张图的过渡效果,看了几个插件都是这样,所以自定 ...

  8. jQuery第七章插件的编写和使用

    1.本章目标 编写jquery插件 2.插件 也称为扩展,是一种按照一定的规范的应用程序接口编写出来的程序 插件的目标是给已有的一系列函数做一个封装,以便在其他的地方复用,方便维护和开发效率 3.jq ...

  9. jQuery插件开发——全屏切换插件

    这个插件包含三个部分:HTML结构.CSS代码和JS代码. HTML结构是固定的,结构如下: <!--全屏滚动--> <div class="fullpage-contai ...

随机推荐

  1. Oracle数据库,数字强制显示2位小数(转)

    Oracle数据库,数字强制显示2位小数 在银行.财务等对数字要求敏感的系统中,数字的显示一般有着严格的要求.今遇到一个需求,如题,要求将数字以两位小数的格式显示,如果没有小数,则强制显示为0.例如: ...

  2. [CareerCup] 14.2 Try-catch-finally Java中的异常处理

    14.2 In Java, does the finally block get executed if we insert a return statement inside the try blo ...

  3. LeetCode:Remove Duplicates from Sorted Array I II

    LeetCode:Remove Duplicates from Sorted Array Given a sorted array, remove the duplicates in place su ...

  4. 20145222黄亚奇《Java程序设计》第5周学习总结

    教材学习内容总结 Java中所有错误都会被打包为对象,运用try.catch,可以在错误发生时显示友好的错误信息. 运用try.catch,还可以在捕捉处理错误之后,尝试恢复程序正常执行流程.如: i ...

  5. css优化篇

    平时总说如何如何优化,今天就详细的写一下css如何优化,嘿嘿. 首先,CSS的优化工作主要从两个方面着手 网络性能:把CSS写到字节数最少,加快下载速度,自然可以让页面渲染的更快一些 语法性能:同样都 ...

  6. Bootstrap3.0学习第八轮(工具Class)

    详情请查看http://aehyok.com/Blog/Detail/14.html 个人网站地址:aehyok.com QQ 技术群号:206058845,验证码为:aehyok 本文文章链接:ht ...

  7. MongoDB 客户端 MongoVue

    直接上图片,图片是按顺序来的 软件下载地址(Windows下的MongoDB客户端MongoVUE 这是最后一个全功能的不收费的版本): http://pan.baidu.com/s/1skYIEq5

  8. RestFul API初识

    python Restful API 微博开放平台: open.weibo.com: 点击文档进入API查看界面 点击API文档进行查看: 比如点开粉丝数的API可以看到: pro.jsonlint. ...

  9. LCA最近公共祖先 Tarjan离线算法

    学习博客:  http://noalgo.info/476.html 讲的很清楚! 对于一颗树,dfs遍历时,先向下遍历,并且用并查集维护当前节点和父节点的集合.这样如果关于当前节点(A)的关联节点( ...

  10. iframe标签用法详解(属性、透明、自适应高度)

    1.iframe 定义和用法 iframe 元素会创建包含另外一个文档的内联框架(即行内框架). HTML 与 XHTML 之间的差异 在 HTML 4.1 Strict DTD 和 XHTML 1. ...