该了解我们也知道的差不多了,接下来编写我们第一个jq插件吧

封装对象方法的插件

我们编写一个设置和获取颜色的插件,我们需要实现两个功能

1、设置匹配元素的颜色

2、获取匹配元素(元素集合的第一个)的颜色

我们采用jQuery.fn.extend(),代码如下:

;(function($){
/* code */
})(jQuery)

这是最外层的架构,接下来;

   ;(function($){
$.fn.extend({
color:function(val){
// code
}
});
})(jQuery)

我在里面添加相应的代码

;(function($){
$.fn.extend({
color:function(val){
console.log(val);
if(val == undefined){
return this.css('color');
}
else{
return this.css('color',val);
}
}
});
})(jQuery)

我们采用jq 的css()方法和获取颜色值;插件的this指向的是jq对象,如果插件不返回特定的值或字符串,应该使其具有可连性,为此直接返回this对象,由于css()方法定义了的返回对象,直接返回即可;

封装我们的jq.color.js

页面调用 该js

console.log($("div").color());
console.log($("div").color("red"));

编写JQuery插件-3的更多相关文章

  1. 编写jQuery插件--实现返回顶部插件

    国庆过去一周多了,作为IT界的具有严重’工作狂‘性质的宅人,居然还没走出玩耍的心情,拖了程序猿的脚后跟了.最近工作不顺,心情不佳,想吐槽下公司,想了还是厚道点,以彼之道还施彼身,觉得自己也和他们同流合 ...

  2. 编写jQuery插件(一)——插件约定及插件中的闭包

    编写插件的目的是给已经有的一系列方法或函数做一个封装,以便在其他地方重复使用,提高开发效率和方便后期维护. 在编写jQuery插件的时候,我们一般会遵循一些约定: jQuery插件推荐命名为:jque ...

  3. 自己编写jQuery插件之表单验证

    自己编写jQuery插件之表单验证 吐个嘈先:最近状态不咋滴,真是什么都不想干,不想上班,做什么都没动力,觉得没意思.不想这样,不想这样,快让这种情绪消失吧,忽忽.... 表单验证在项目中用的还是比较 ...

  4. 自己编写jQuery插件之Tab切换

    自己编写jQuery插件之 Tabs切换 jquery ui 带有Tabs切换插件,但其css样式太难维护,引用的东西太多,因此就自己写了个. 起初我Html代码架子是这样的: <div cla ...

  5. 编写jQuery插件的方法和注意点

    编写jQuery插件的方法和注意点 插件的种类 jQuery的插件主要分为3种类型. 1. 封装对象方法的插件 这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进行操作,是最常见的 ...

  6. 如何编写JQuery 插件详解

    转载自:http://blog.sina.com.cn/s/blog_6154bf970101jam7.html 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jq ...

  7. 如何用正确的姿势编写jQuery插件

    在园子里有很多关于jQuery插件的文章,尤其 以下2篇文章: 不定义JQuery插件,不要说会JQuery jQuery插件开发精品教程,让你的jQuery提升一个台阶 这2位大神基础讲的很清楚,在 ...

  8. 如何编写jQuery插件

    要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈 ...

  9. 编写jQuery 插件

    编写jQuery Plugin,要设置默认值,并允许用户修改默认值,或者运行是传入其他值. 最终,我们得出编写一个jQuery插件的原则: 给$.fn绑定函数,实现插件的代码逻辑: 插件函数最后要 r ...

  10. 编写jquery插件的分享

    一.类级别($.extend) 类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法. 开发扩展其方法时使用$.extend方法,即jQuery.extend(o ...

随机推荐

  1. Lua学习系列(一)

    从现在开始,打算学习一门新的脚本语言-lua. 1.什么是lua? a) lua1 • Lua 1.0 was implemented as a library, in less then 6000 ...

  2. fedora 挂载 小米手机 (估计其它android设备也是类似操作)

    1 参考ubuntu挂载 在Ubuntu挂载使用MTP设备步骤如下: 1.将MTP设备连接至PC机 2.如果是第一次使用MTP设备需要安装以下软件,否则可以跳过此步骤: $ sudo apt-get ...

  3. D. PolandBall and Polygon BIT + 欧拉公式

    http://codeforces.com/contest/755/problem/D // 我也觉得非平面图不能用欧拉公式,但是也能过,不知道为什么.求大佬留言. 这题其实就是平面图,因为它有很多个 ...

  4. Rest之路 -- 从第二个Rest application里面分析 Rest 方法

    引言 在此之前,我们实现了第一个Rest application,通过分析她,我们了解了 Rest 程序的基本要素:这里,我们将会对第一个 Rest application 的功能进行扩充(实现 CR ...

  5. bitmap格式分析(转)

    源:bitmap格式分析 参考:bitmap图像介绍 最近正在着手开发一个图片库,也就是实现对常见图片格式的度写操作.作为总结与积累,我会把这些图片格式以及加载的实现写在我的Blog上. 说到图片,位 ...

  6. onchange、oninput、onpropertyChange事件的异同

    onchange事件适用于input\textarea\select元素上,支持各大浏览器,该事件只有在键盘或者鼠标操作改变对象属性,且失去焦点时触发,脚本触发无效: oninput事件适用于inpu ...

  7. Android SQLite 加入自定义函数

    SQLite Database 自定义函数实现: //Here's how to create a function that finds the first character of a strin ...

  8. STL中list用法

    本文以List容器为例子,介绍了STL的基本内容,从容器到迭代器,再到普通函数,而且例子丰富,通俗易懂.不失为STL的入门文章,新手不容错过! 0 前言 1 定义一个list 2 使用list的成员函 ...

  9. 在 WindowMobile 上的模拟LED 显示屏插件(转)

    源:在 WindowMobile 上的模拟LED 显示屏插件 我在给一个对话框上的控件查找翻看合适的图标时,无形中看到了一个LED显示屏的图标,这里所说的LED显示屏是指由很多LED灯密集排列组成的点 ...

  10. vuejs 子组件传递父组件的第二种方式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...