jquery编写插件的方法

编写插件的两种方式:

1.类级别开发插件(1%)

2.对象级别开发(99%)

jquery编写插件的方法 类级别的静态开发就是给jquery添加静态方法，三种方式

1.添加新的全局函数

2.使用$.extend(obj)

3.使用命名空间

类级别开发插件（用的非常少，1%）

分别举例：

//1.直接给jquer添加全局函数

jQuery.myAlert=function (str) {

    alert(str);

};

//2.用extend()方法。extend是jquery提供的一个方法，把多个对象合并起来，参数是object

jQuery.extend({

    myAlert2:function (str1) {

        alert(str1);

    },

    myAlert3:function () {

        alert(11111);

    }

});

//一定要注意两种类级别编写插件方式书写的区别。

//3.使用命名空间(如果不使用命名空间容易和其他引入的JS库里面的同名方法冲突)

jQuery.yuqing={

    myAlert4:function (str) {

        alert(str);

    },

    centerWindow:function (obj) {

        obj.css({

            'top':($(window).height()-obj.height())/2,

            'left':($(window).width()-obj.width())/2

        });

        //必须进行返回对象的操作，否则就不能继续往下进行链式操作了。。

        return obj;

    }

};

调用部分：

  //调用自定义插件方法

  $('#btn').click(function () {

      $.myAlert('我是调用jquery编写的插件弹出的警告框');

      $.myAlert2('我是调用jquery的extend()方法编写的插件弹出的警告框');

      $.myAlert3();

      $.yuqing.myAlert4("调用使用了命名空间编写的插件方法");

  });

 $.yuqing.centerWindow($('#div1')).css('background','red');

jquery编写插件的方法注意：jquery文件要一并引入。

对象级别开发插件（常用99%）

jquery编写插件的方法 jquery官方给了一套对象级别开发插件的模板：

;(function ($) {

    $.fn.plugin=function (options) {

        var defaults={

            //各种参数、各种属性

        };

        //options合并到defaults上,defaults继承了options上的各种属性和方法,将所有的赋值给endOptions

        var endOptions=$.extend(defaults,options);

        this.each(function () {

            //实现功能的代码

        });

    };

})(jQuery);

jquery编写插件的方法 模板要点：

1.函数全部放在闭包里，外面的函数就调用不到里面的参数了,比较安全
2.前面加分号,避免不必要的麻烦

jquery编写插件的方法举个栗子：

需求：开发一个插件，要求奇数行颜色是yellow，偶数行颜色是green，鼠标移到的行变为blue，移除变为原来的颜色

HTML布局：

<table id="tab">

    <tr>

        <th>姓名</th>

        <th>年龄</th>

        <th>身高</th>

        <th>体重</th>

    </tr>

    <tr>

        <td>张三</td>

        <td>22</td>

        <td>178cm</td>

        <td>79kg</td>

    </tr>

    <tr>

        <td>美美</td>

        <td>34</td>

        <td>167cm</td>

        <td>60kg</td>

    </tr>

    <tr>

        <td>小青</td>

        <td>23</td>

        <td>170cm</td>

        <td>55kg</td>

    </tr>

    <tr>

        <td>张三</td>

        <td>22</td>

        <td>178cm</td>

        <td>79kg</td>

    </tr>

    <tr>

        <td>美美</td>

        <td>34</td>

        <td>167cm</td>

        <td>60kg</td>

    </tr>

    <tr>

        <td>小青</td>

        <td>23</td>

        <td>170cm</td>

        <td>55kg</td>

    </tr>

    <tr>

        <td>张三</td>

        <td>22</td>

        <td>178cm</td>

        <td>79kg</td>

    </tr>

    <tr>

        <td>美美</td>

        <td>34</td>

        <td>167cm</td>

        <td>60kg</td>

    </tr>

    <tr>

        <td>小青</td>

        <td>23</td>

        <td>170cm</td>

        <td>55kg</td>

    </tr>

</table>

css样式

table{

    width: 100%;

    border-collapse: collapse;

    border: 1px solid palevioletred;

}

th,td{

    height: 30px;

    text-align: center;

    border: 1px solid deeppink;

}

.evenRow1{background: yellow;}

.oddRow1{background: green;}

.curRow1{background: blue;}

jquery调用代码：

$('#tab').table({

    evenRowClass:'evenRow1',

    oddRowClass:'oddRow1',

    curRowClass:'curRow1',

    eventType1:'click'

});

jquery插件代码：

 ;(function ($) {

     $.fn.table=function (options) {

         var defaults={

             //各种参数、各种属性

             evenRowClass:'evenRow',

             oddRowClass:'oddRow',

             curRowClass:'curRow',

             eventType1:'mouseover',

             eventType2:'mouseout'

         };

         var endOptions=$.extend(defaults,options);

         this.each(function () {

             var _this = $( this );

             _this.find('tr:even').addClass(endOptions.evenRowClass);

             _this.find('tr:odd').addClass(endOptions.oddRowClass);

             //鼠标移入和移出，但实际开发中不直接使用mouseover这种方法

             /*$(this).find('tr').mouseover(function () {

                 $(this).addClass(endOptions.curRowClass);

             }).mouseout(function () {

                 $(this).removeClass(endOptions.curRowClass);

             });*/

             //实际开发中要用bian()方法绑定

             //因为用bind()方法绑定非常灵活，事件可以自己定义

             //mouseover mouseout...事件底层都是用bind()去实现的，mouseout 等只是快捷方式

             _this.find('tr').bind(endOptions.eventType1,function () {

                 $(this).addClass(endOptions.curRowClass);

             });

             _this.find('tr').bind(endOptions.eventType2,function () {

                 $(this).removeClass(endOptions.curRowClass);

             })

         });

     };

 })(jQuery);

jquery编写插件的方法插件注释：

15行：var _this = this; 变量存储，因为很多地方用到$(this);所以将其存储为变量使用更加的方便，也提高了运行效率。

19-23行与28-33行实现的功能是相同的，但是推荐使用28-33行的写法，使用bian()进行事件的绑定，因为使用会非常的灵活。

可变的地方，如样式名称等最好写在defaults里，方便用户自行配置。

jquery编写插件的方法再来一个对象级别实现jquery插件的栗子(⊙o⊙)哦！！实现选项卡功能~~

HTML布局

<div id="tab">

    <ul id="nav">

        <li class="active">HTML</li>

        <li>CSS</li>

        <li>JAVASCRIPT</li>

    </ul>

    <div id="cont">

        <div style="display: block;">HTML</div>

        <div>CSS</div>

        <div>JAVASCRIPT</div>

    </div>

</div>

css样式：

* {

    margin:;

    padding:;

}

#nav li {

    list-style: none;

    float: left;

    height: 25px;

    line-height: 25px;

    border: 1px solid #0000FF;

    border-bottom: none;

    padding: 5px;

    margin: 10px;

    margin-bottom:;

}

#cont div {

    width: 210px;

    height: 150px;

    border: 1px solid #0000FF;

    margin-left: 10px;

    clear: both;

    display: none;

}

.active {

    background: #AFEEEE;

}

调用的JS代码

<script type="text/javascript">

    $('#tab').tab({

        tabType: 'mouseover'

    });

</script>

注意哦：不要忘记先引入jquery.js文件喔，然后在引入我们编写的插件tab.js，才能正确调用到tab()方法。。。

插件tab.js

;(function($) {

    $.fn.tab = function(options) {

        var defaults = {

            tabActiveClass: 'active',

            tabNav: '#nav>li',

            tabCont: '#cont>div',

            tabType: 'click'

        };

        var endOptions = $.extend(defaults, options);

        $(this).each(function() {

            var _this = $(this);

            _this.find(endOptions.tabNav).bind(endOptions.tabType, function() {

                $(this).addClass(endOptions.tabActiveClass).siblings().removeClass(endOptions.tabActiveClass);

                var index = $(this).index();

                _this.find(endOptions.tabCont).eq(index).show().siblings().hide();

            });

        });

    };

})(jQuery);

这个小栗子和上一个表格插件的栗子相似度是很高的，多敲几遍，理解意思，其实jquery扩展插件并不难哦~~

如有不对的地方，还请各路大神赐教！

秒客网

jquery编写插件的方法

类级别开发插件（用的非常少，1%）

对象级别开发插件（常用99%）

相关文章