jQuery自定义方法功能的实现

话不多说,直接上代码

    $.fn.highlight=function(options){
            var opts = $.extend({}, $.fn.highlight.defaults, options);
            this.css('backgroundColor', opts.backgroundColor).css('color', opts.color);
            return this;//注意返回this,以保证jquery对象的链式调用
        }
        //此函数从来绑定用户自定义方法。$.entend(targets,options1,options2,...)用来获取一些列样式对象到targets,遇到同名则后一个起作用,也就是越往后优先级越高。
        //在这里,第一个参数就是我们的默认值,适用于无参调用的情况。
        //第二个参数是我们传进去的样式参数。
        //设置默认值是为了方便用户自定义和简便无参调用
        $.fn.highlight.defaults={
            backgroundColor:'blue',
            color:'red'
        }//设置默认的方法
        // 也可以这样设置
        // $.fn.highlight.defaults.backgroundColor='blue'
        // $.fn.highlight.defaults.color='blue'
        window.onload=function(){
            var a=$('#test-highlight');
            var b1=$('#b1');
            var b2=$('#b2');
            b1.click(function(){
                // alert('success!');
                a.highlight();//无参调用,高亮样式为用户设置的默认值
            });
            b2.click(function(){
                a.highlight({
                    backgroundColor: 'red',
                    color:'green'
                });//有参调用
            });
        }

你可能感兴趣的:(jQuery自定义方法功能的实现)