jQuery插件的使用和写法

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery插件的使用和写法相关的知识,希望对你有一定的参考价值。

编写插件的目的是给已有的一些方法或函数做一个封装,便于复用

jQuery插件分三种类型

  1.封装对象方法的插件:

     这种是将对象方法封装起来,用于对通过选择器获取的jq对象进行操作,是最常见的一种插件

 

  2. 封装全局函数的插件:

    可以将独立的函数加到jq命名空间下

 

  3.选择器插件:

 

插件的基本要点:

  文件命名推荐 jquery,[插件名].js

  所有的对象方法都应当附加到jQuery.fn对象上,而所有的全局函数都应当附加到jQuery对象本身上

  在插件内部,this指向当前通过选择器获取的jQuery对象,而不像一般方法那样,例如click(),内部this指向DOM元素

  通过this.each来遍历所有元素

  所有方法或函数插件都应该以分号结尾,可以在插件头部先加上分好,避免他人的不规范代码给插件带来影响

 

  ;(function($){

  //此处编写jQuery插件代码

  })(jQuery);

 

  jQuery插件机制

  jQuery提供了两个用于扩展jQuery功能的方法,jQuery.fn.extend()方法,用于扩展对象方法;jQuert.extend()用于扩展后两种插件

 

  jQuery.extend()除了可以扩展jquery对象外,还可以扩展已有的object对象  jQuery.extend(target, obj1,obj2....)

  用一个或多个其他对象来扩展一个对象,然后返回被扩展的对象

  如:合并setting对象和options对象,修改并返回setting对象

    var setting = {validate: false, limit: 5,name: "foo" };

    var options = {validate: true, name: "bar"};

    var newOptions = jQuery.extend(setting, options);

  结果为:

    newOptions = {validate:false, limit: 5, name:"foo"};

 

  jQuery.extend()方法经常被用于设置插件方法的一系列默认参数

  如: ;(function($){

      options = $.extend({

        name: "bar",

        length:5,

        dataType: ‘xml‘ //默认参数

      }, options);  //options为传递的参数

  })(jQuery);

  通过使用jQuery.extend()方法,可以很方便的用传入的参数来覆盖默认值

    

  1.封装对象方法插件

  //实现表格隔行变色和单选按钮选中,单选按钮所在行变色

  <style>
            thead td{
                border-bottom:1px solid #F00
            }
            table{
                width: 500px;
                margin: 0 auto;
                text-align: center;
        
            }
            tr{
                line-height: 40px;
                
            }
            .odd{background-color: #7EC4CC;}
            .even{background-color: #A1A1A1;}
            .selected{background-color: #FF0000;}
        </style>

 

         
        <table  cellspacing="0" cellpadding="0" id="tab2">
            <thead>
                <tr>
                    <td></td>
                    <td>姓名</td>
                    <td>性别</td>
                    <td>暂住地</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox" name="check"/></td>
                    <td>张三</td>
                    <td>男</td>
                    <td>浙江宁波</td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="check"/></td>
                    <td>李四</td>
                    <td>男</td>
                    <td>浙江宁波</td>
                </tr><tr>
                    <td><input type="checkbox" name="check" checked/></td>
                    <td>王五</td>
                    <td>女</td>
                    <td>浙江宁波</td>
                </tr><tr>
                    <td><input type="checkbox" name="check"/></td>
                    <td>赵六</td>
                    <td>男</td>
                    <td>浙江宁波</td>
                </tr><tr>
                    <td><input type="checkbox" name="check"/></td>
                    <td>rain</td>
                    <td>女</td>
                    <td>浙江宁波</td>
                </tr>
            </tbody>
        </table>

 

  引入js

  js代码

  $(‘#tab2‘).alertBgColor().find(‘thead tr‘).css(‘color‘,‘red‘);

 

 

  插件代码

  

写法1:jquery选择符一个元素

;(function($) {
    $.fn.extend({
        ‘alertBgColor‘: function(options) {
            options = $.extend({
                odd: ‘odd‘,
                even: ‘even‘,
                selected: ‘selected‘
            }, options);
            //不能直接用$(‘tbody>tr‘)选择表各行,这样会使页面中全部的tr都各行变色,应该使用选择器选中某个表格,执行alertBgColor方法后
            //将对应的表格内tr元素进行隔行变色,$(‘tbody>tr:odd‘,this)表示在匹配的元素内查找
            $(‘tbody>tr:odd‘, this).addClass(options.odd);
            $(‘tbody>tr:even‘, this).addClass(options.even);
            $(‘tbody>tr‘).click(function() {
                var hasSelected = $(this).hasClass(options.selected);
                $(this)[hasSelected ? ‘removeClass‘ : ‘addClass‘](options.selected)
                    .find(‘:checkbox‘).prop(‘checked‘, !hasSelected);
            });
            $(‘tbody>tr:has(":checked")‘, this).addClass(options.selected);

            return this; //返回this,使方法可链
        }

    })
})(jQuery);

写法2:jquery选择符可能匹配一个或多个元素

;(function($) {
    $.fn.extend({
        ‘alertBgColor‘: function(options) {
            options = $.extend({
                odd: ‘odd‘,
                even: ‘even‘,
                selected: ‘selected‘
            }, options);
            //不能直接用$(‘tbody>tr‘)选择表各行,这样会使页面中全部的tr都各行变色,应该使用选择器选中某个表格,执行alertBgColor方法后
            //将对应的表格内tr元素进行隔行变色,$(‘tbody>tr:odd‘,this)表示在匹配的元素内查找
            return this.each(function() {             //jquery选择符可能匹配一个或多个。用this.each()遍历匹配元素
                $(‘tbody>tr:odd‘, this).addClass(options.odd);
                $(‘tbody>tr:even‘, this).addClass(options.even);
                $(‘tbody>tr‘).click(function() {
                    var hasSelected = $(this).hasClass(options.selected);
                    $(this)[hasSelected ? ‘removeClass‘ : ‘addClass‘](options.selected)
                        .find(‘:checkbox‘).prop(‘checked‘, !hasSelected);
                });
                $(‘tbody>tr:has(":checked")‘, this).addClass(options.selected);
            })
        }
    })
})(jQuery);

 

//封装全局函数的插件

  //实现字符串拼接字符串

  ;(function($){
                    $.extend({
                        connect: function(text){
                            return ‘你好‘+text;
                        }
                    })
                })(jQuery);
                var val = $.connect(‘world!‘);
                console.log(val)
            });

 

以上是关于jQuery插件的使用和写法的主要内容,如果未能解决你的问题,请参考以下文章

《锋利的jQuery》插件的使用和写法

jQuery插件的使用和写法

jQuery学习jQuery插件的使用与写法(表单验证插件-validation)

第七章(插件的使用和写法)(7.2 jQuery 表单插件 ----- Form)

jQuery插件的写法以及使用

闭包,jQuery插件的写法:图片预加载