虽然网上有大量的插件供我们去使用,但不一定有一款适合你的,必要的时候还是要自己动手去敲的。下面,开始我的第一个插件...

参考《锋利的JQuery》,JQuery为开发插件增设了俩个方法:$.extend(object), $.fn.extend(object).

这篇博文对插件制作的讲解挺好的,就是有点长,但值得玩味:http://blog.csdn.net/guorun18/article/details/49819715

下面谈一个我对插件的(片面)理解:

插件分俩种:

·类级别组件开发:

---即给JQuery命名空间下添加新的全局函数,也称静态方法。形式如下:

jQuery.myPlugin = function (){
//do something
};

例如:$.ajax(options); $.type();

·对象级别组件开发

---挂在JQuery原型下的方法,通过选择器获取的JQuery对象实例能共享该方法,称为动态方法。形式如下:

//$.fn == $.prototype
$.fn.myPlugin = function () {
//do somthing
};

例如:.addClass(); .attr();

同时,插件也要保持JQuery链式调用的特性,链式调用的形式如下:

$.fn.myPlugin = function (){

return this.each(function (){   //return实现链式调用

//do something

});

};

----------------------------------以上就是插件机制---------------------------------

下面实现一个简单的表格隔行变色插件:

 //为了更好的兼容性,前面有个分号
(function($){
$.fn.tableUI = function(options){
var defaults = {
evenRowClass:"evenRow",
oddRowClass:"oddRow",
activeRowClass:"activeRow",
clickRowClass:"clickRow"
}
var options = $.extend(defaults, options);//$.extend(option...)返回一个对象.
//为了实现链式调用,用return返回对象
return this.each(function(){
//缓存this
var thisTable = $(this);
$(thisTable).find("tr:even").addClass(options.evenRowClass);
$(thisTable).find("tr:odd").addClass(options.oddRowClass);
$(thisTable).find("tr").bind("mouseover",function(){
$(this).removeClass(options.clickRowClass).addClass(options.activeRowClass);
});
$(thisTable).find("tr").bind("mouseout",function(){
$(this).removeClass(options.clickRowClass).removeClass(options.activeRowClass);
});
$(thisTable).find("tr").bind("click",function(){
$(this).addClass(options.clickRowClass);
});
});
};
})(jQuery);

鉴于本人初次编写插件,但还是要分享一下此刻所感所悟,未来看到肯定会觉得头脑简单吧。

首先利用this传递DOM元素对象,可以看做是插件最外层的元素,然后通过JQuery提供的查询(find)方法匹配内部元素对象,将匹配到的元素配合设置的属性(options)一步一步实现想要的功能。

ps:options的类名应提前写好css样式,以备使用。

我的第一个jQuery插件--表格隔行变色的更多相关文章

  1. 用JQuery实现表格隔行变色和突出显示当前行

    用JQuery实现表格隔行变色和突出显示当前行 上源码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "htt ...

  2. JavaScript例子2-使一个特定的表格隔行变色

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. jquery插件之表格隔行变色并鼠标滑过高亮显示

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如 ...

  4. jQuery 表格隔行变色插件

    jQuery提供了用于扩展jQuery功能的方法,即jQuery.fn.extend()方法和jQuery.extend()方法. 基本的JS框架代码如下: ;(function($) { $.fn. ...

  5. 做了一个jquery插件,使表格的标题列可左右拉伸

    示例下载 插件名称命名为:jquery.tableresize.js,代码如下: /* Writen by mlcactus, 2014-11-24 这是我封装的一个jquery插件,能够使table ...

  6. jquery实现html表格隔行变色

    效果图 实现代码: 通过css控制样式,利用jquery的addClass方法实现 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Trans ...

  7. Jquery 类似新浪微博,鼠标移到头像,用浮动窗口显示用户信息,已做成一个jquery插件

    请注意!!!!! 该插件demo PHP 的 demo下载  C#.NET的demo下载 需要如下图, 1.鼠标移动到头像DIV时,Ajax获取数据,并让浮动DIV显示出来. 2.鼠标可以移动到上面浮 ...

  8. 如何写一个jquery插件

      本文总结整理一下如何写一个jquery插件?虽然现今各种mvvm框架异常火爆,但是jquery这个陪伴我们成长,给我们带来很多帮助的优秀的库不应该被我们抛弃,写此文章,作为对以往欠下的笔记的补充, ...

  9. 你真的需要一个jQuery插件吗

    jQuery的插件提供了一个很好的方法,节省了时间和简化了开发,避免程序员从头开始编写每个组件.但是,插件也将一个不稳定因素引入代码中.一个好的插件节省了无数的开发时间,一个质量不好的插件会导致修复错 ...

随机推荐

  1. easyUI中datagrid的使用

    easyUI中的datagrid数据表格经常被用到,结合项目中的使用情况,总结一下datagrid使用中需要注意的一些问题.使用datagrid展示数据,需要在html.css.js中都要编写代码,h ...

  2. 【正常向】CODEVS上分黄金

    白银上分黄金失败=.= 在之前有很认真的写了一波排序,所以排序并不是很怂,还是那个理,现阶段学习的都是比较简单的排序,都是所谓的冒泡排序啊,桶排序这类,至于插排和选择排序,再往后又是什么快拍就很尬了. ...

  3. bzoj4800 [Ceoi2015]Ice Hockey World Championship

    Description 有n个物品,m块钱,给定每个物品的价格,求买物品的方案数. Input 第一行两个数n,m代表物品数量及钱数 第二行n个数,代表每个物品的价格 n<=40,m<=1 ...

  4. express4.x的使用

    ①.安装 npm install -g  express   ②.创建应用 express [目录] 会在目录下生成 node_modules, 存放所有的项目依赖库.(每个项目管理自己的依赖,与Ma ...

  5. 基于python的知乎开源爬虫 zhihu_oauth使用介绍

    今天在无意之中发现了一个知乎的开源爬虫,是基于Python的,名字叫zhihu_oauth,看了一下在github上面star数还挺多的,貌似文档也挺详细的,于是就稍微研究了一下.发现果然很好用啊.就 ...

  6. ConcurrentHashMap、HashTable、HashMap的区别

    HashTable与ConcurrentHashMap: 相同点:都是线程安全的,可以在多线程的环境下运行.key和value都不能为null 区别:性能上的差异.HashTable每次操作对象都会锁 ...

  7. Bootstrap Flat UI的select下拉框显示不出来 问题解决

    Bootstrap Flat UI的select下拉框显示不出来?看这里,恰巧今天我也遇到了这个问题: 点击Messages后并没有出现下拉列表,然而官网的index.html却能显示出来. 经过一番 ...

  8. Java AOP (2) runtime weaving 【Java 切面编程 (2) 运行时织入】

    接上一篇 Java AOP (1) compile time weaving [Java 切面编程 (1) 编译期织入] Dynamic proxy   动态代理 Befor talking abou ...

  9. [linux 整理] linux启动过程3

    本文介绍linux启动过程的第三步 busybox--------------------> rc init busybox位置即内容 busybox/init/init.c 1.各种设置信号 ...

  10. 分布式缓存技术redis学习—— 深入理解Spring Redis的使用

    关于spring redis框架的使用,网上的例子很多很多.但是在自己最近一段时间的使用中,发现这些教程都是入门教程,包括很多的使用方法,与spring redis丰富的api大相径庭,真是浪费了这么 ...