jquery插件开发

原创 2018年01月19日 11:47:06
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.min.js"></script>
    <script src="1.js"></script>
    <style>
        table{
            width: 100%;
            border: 1px solid #a6e1ec;
            text-align: center;
            border-collapse: collapse;
        }
        th,td{
            height: 20px;
            border: 1px solid #a6e1ec;
        }
        .eventRow{
            background:aqua;
        }
        .oldRow{
            background: #1b6d85;
        }
        .currentRow{
            background: #00ff00;
        }
    </style>
    <script>
        $(function(){
            $('#table1').table();
        });
    </script>
</head>
<body>
<table id="table1">
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>体重</th>
    </tr>
    <tr>
        <td>Tom</td>
        <td>nan</td>
        <td>20</td>
        <td>20</td>
    </tr>
    <tr>
        <td>Jack</td>
        <td>nv</td>
        <td>25</td>
        <td>19</td>
    </tr>
    <tr>
        <td>Tom</td>
        <td>nan</td>
        <td>20</td>
        <td>20</td>
    </tr>
    <tr>
        <td>Jack</td>
        <td>nv</td>
        <td>25</td>
        <td>19</td>
    </tr>
</table>
</body>
</html>
/****************************************************\
 * jQuery的插件开发机制分为两种:类级别的插件开发、对象级别的插件开发
 *
 * 类级别的插件开发:添加新的全局函数;使用$.extend(obj);使用命名空间;
 *      添加全局函数:jQuery.plugin = function(){}
 *      使用$.extend(obj):$.extend({
 *                                  plugin:function(){
 *
 *                                      }
 *                                 });
 *      调用方式为:$.plugin()
 *
 *      使用命名空间:jQuery.plugin = {
 *                                      plugin:function(){
 *
 *                                       }
 *                                   }
 *      调用方式为:$.plugin.pluginType()
 *
 * 对象级别的插件开发(常用方式):;(function($){
 *                                  $.fn.plugin = function(){
 *
 *                                  }
 *                   })(jQuery)
 *      调用方式为:$(element).plugin();
\****************************************************/

;(function($){
    $.fn.table = function(options){
        //各种参数、属性
        var defaults = {
            eventRowClass:'eventRow',
            oldtRowClass:'oldRow',
            currentClass:'currentRow'
        }
        //合并参数
        var options = $.extend(defaults,options);

        this.each(function(){
            $(this).find('tr:even').addClass(options.eventRowClass);
            $(this).find('tr:odd').addClass(options.oldtRowClass);
            $(this).find('tr').not('tr:first').mouseover(function(){
                $(this).addClass(options.currentClass);
            }).mouseout(function(){
                $(this).removeClass(options.currentClass);
            });
        });
    }
})(jQuery)

一般用下面的方式开发:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.min.js"></script>
    <script src="01.js"></script>
    <style>
        table{
            width: 100%;
            border: 1px solid #a6e1ec;
            text-align: center;
            border-collapse: collapse;
        }
        th,td{
            height: 20px;
            border: 1px solid #a6e1ec;
        }
        .eventRow{
            background:aqua;
        }
        .oldRow{
            background: #1b6d85;
        }
        .currentRow{
            background: #00ff00;
        }
    </style>
    <script>
        $(function(){
            $('#table1').table({
                eventRowClass:'eventRow',
                oldtRowClass:'oldRow',
                currentClass:'currentRow',
                currentType1:'click'
            });
        });
    </script>
</head>
<body>
<table id="table1">
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>体重</th>
    </tr>
    <tr>
        <td>Tom</td>
        <td>nan</td>
        <td>20</td>
        <td>20</td>
    </tr>
    <tr>
        <td>Jack</td>
        <td>nv</td>
        <td>25</td>
        <td>19</td>
    </tr>
    <tr>
        <td>Tom</td>
        <td>nan</td>
        <td>20</td>
        <td>20</td>
    </tr>
    <tr>
        <td>Jack</td>
        <td>nv</td>
        <td>25</td>
        <td>19</td>
    </tr>
</table>
</body>
</html>
;(function($){
    $.fn.table = function(options){
        var defaults = {
            eventRowClass:'eventRow',
            oldtRowClass:'oldRow',
            currentClass:'currentRow',
            currentType1:'mouseover',
            currentType2:'mouseout'
        }
        var options = $.extend(defaults,options);

        this.each(function(){
            var _this = $(this);
            _this.find('tr:even').addClass(options.eventRowClass);
            _this.find('tr:odd').addClass(options.oldtRowClass);
            _this.find('tr').bind(options.currentType1,function(){
                $(this).addClass(options.currentClass);
            });
            _this.find('tr').bind(options.currentType2,function(){
                $(this).removeClass(options.currentClass);
            });
        });
    }
})(jQuery);
版权声明:本文为博主原创文章,未经博主允许不得转载。

jquery插件开发全指南

这大概是自己在这个上面的最后一个博客了,自己的博客搭建的差不多了,现在在写一个markdown支持插件,写好了之后将来就要迁移到自己的博客上去了,这个博客还会经常来看,毕竟记录了大二大三自己所走诸多的...
  • ul646691993
  • ul646691993
  • 2016年08月15日 19:47
  • 1347

JavaScript学习总结(四)——jQuery插件开发与发布

jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用,...
  • zhangguo5
  • zhangguo5
  • 2017年03月16日 15:06
  • 1867

jquery插件开发入门

原文:http://www.css88.com/archives/4821 扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间。这篇文章将概述jQuery插件开发的...
  • Dzq_Boyka
  • Dzq_Boyka
  • 2017年11月23日 11:18
  • 158

jQuery插件编写

jQuery插件编写的一些总结
  • liujie19901217
  • liujie19901217
  • 2016年07月15日 17:29
  • 4722

jQuery插件编写:对象级别插件(二)

通过了上一篇的讲解,相信你对于开发“实用函数”jQuery插件的基本技巧有了一定的认识。比如通过即时执行函数来正确使用$函数,通过$.extend()函数实现配置对象的合并。在这一篇中将讲解更常用的一...
  • zhang_shuzhen
  • zhang_shuzhen
  • 2013年05月31日 15:39
  • 1755

jQuery 插件开发 封装

jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法。jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象...
  • anihasiyou
  • anihasiyou
  • 2014年10月23日 11:25
  • 2227

面向对象编写jQuery插件

/** * jquery.timeline.js plugin * * * * */ ;(function($, window, document, undefined) { var plug...
  • u011500781
  • u011500781
  • 2015年12月15日 21:24
  • 737

jquery easyui 插件开发

转自:http://my.oschina.net/gougouqihao/blog/182318 easyui 插件开发 01 (func...
  • bruceoyqq
  • bruceoyqq
  • 2013年12月09日 12:29
  • 2294

教你开发Jquery插件-Jquery插件开发教程

开发jquery插件之前首先要调用Jquery,这个可以去http://jquery.com下载得到.然后我们看一下我写的这个例子://自定義插件(function($){    $.fn.examp...
  • sibang
  • sibang
  • 2014年08月21日 16:49
  • 309

jquery插件开发及 jquery自定义函数

jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法。jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象...
  • z69183787
  • z69183787
  • 2013年12月04日 11:29
  • 3194
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery插件开发
举报原因:
原因补充:

(最多只允许输入30个字)