jQuery插件的制作之方法的参数

- 日理万妓 2022-01-16 03:38 298阅读 0赞

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][]

1、无参数实现文字阴影效果

jQuery.fn.shadow =function(){
        return this.each(function(){
            var $originalElement = jQuery(this);
            for(var i = 0;i < 5;i++){
                $originalElement.clone()
                .css({
                    position :"absolute",
                    left :$originalElement.offset().left + i,
                    top :$originalElement.offset().top + i,
                    margin : 0,
                    zIndex : -1,
                    opacity : 0.1
                })
                .appendTo("body");
            }
        })
    }
    调用的例子：$("h1").shadow();

2、简单的参数

jQuery.fn.shadow =function(slices,opacity,zIndex){
        return this.each(function(){
            var $originalElement = jQuery(this);
            for(var i = 0;i < slices;i++){
                $originalElement.clone()
                .css({
                    position :"absolute",
                    left :$originalElement.offset().left + i,
                    top :$originalElement.offset().top + i,
                    margin : 0,
                    zIndex : zIndex,
                    opacity : opacity
                })
                .appendTo("body");
            }
        })
    }
    调用的例子：$("h1").shadow(10,0.1,-1);

3、参数的映射

jQuery.fn.shadow =function(opts){
        return this.each(function(){
            var $originalElement = jQuery(this);
            for(var i = 0;i < opts.slices;i++){
                $originalElement.clone()
                .css({
                    position :"absolute",
                    left :$originalElement.offset().left + i,
                    top : $originalElement.offset().top+ i,
                    margin : 0,
                    zIndex :opts.zIndex,
                    opacity : opts.opacity
                })
                .appendTo("body");
            }
        })
    }
    
    调用的例子：
    $("h1").shadow({
           slices : 5,
           opacity : 0.25,
           zIndex : -1
    });

4、默认的参数值(这个是最重要的)

jQuery.fn.shadow =function(options){
        var defaults = {
          slices : 5,
          opacity : 0.1,
          zIndex : -1
        };
        //options中如果存在defaults中的值，则覆盖defaults中的值
        var opts = jQuery.extend(defaults,options);
        return this.each(function(){
            var $originalElement = jQuery(this);
            for(var i = 0;i < opts.slices;i++){
                $originalElement.clone()
                .css({
                    position :"absolute",
                    left :$originalElement.offset().left + i,
                    top :$originalElement.offset().top + i,
                    margin : 0,
                    zIndex :opts.zIndex,
                    opacity : opts.opacity
                })
                .appendTo("body");
            }
        })
    }
    调用的例子：
    $("h1").shadow({
           opacity : 0.05
    });

5、回调函数

jQuery.fn.shadow =function(options){
        var defaults = {
          slices : 5,
          opacity : 0.1,
          zIndex : -1,
          sliceOffset : function(i){
              return {x:i,y:i}
          }
        };
        //options中如果存在defaults中的值，则覆盖defaults中的值
        var opts = jQuery.extend(defaults,options);
        return this.each(function(){
            var $originalElement = jQuery(this);
            for(var i = 0;i < opts.slices;i++){
                //调用回调函数
                var offset = opts.sliceOffset(i);
                $originalElement.clone()
                .css({
                    position :"absolute",
                    left :$originalElement.offset().left + offset.x,
                    top :$originalElement.offset().top + offset.y,
                    margin : 0,
                    zIndex :opts.zIndex,
                    opacity : opts.opacity
                })
                .appendTo("body");
            }
        })
    }
    调用的例子：
    $("h1").shadow({
           sliceOffset : function(i){
                  return {x : -i,y : -2 * i}
           }
    });

6、可定制的默认值

jQuery.fn.shadow =function(options){
        //默认值被放在投影插件的命名空间里了
        var opts =jQuery.extend({},jQuery.fn.shadow.defaults,options);
        return this.each(function(){
            var $originalElement = jQuery(this);
            for(var i = 0;i < opts.slices;i++){
                //调用回调函数
                var offset = opts.sliceOffset(i);
                $originalElement.clone()
                .css({
                    position :"absolute",
                    left :$originalElement.offset().left + offset.x,
                    top :$originalElement.offset().top + offset.y,
                    margin : 0,
                    zIndex :opts.zIndex,
                    opacity : opts.opacity
                })
                .appendTo("body");
            }
        })
    }
    jQuery.fn.shadow.defaults= {
        slices : 5,
        opacity : 0.1,
        zIndex : -1,
        sliceOffset : function(i){
            return { x : i, y : i}
        }
    }

默认值被放在了命名空间里，可以通过$.fn.shadow.default直接引用。而对$.extend()的调用也必须修改，以适应这种变化。由于现在所有对.shadow()的调用都要重用defaults映射，因此不能让他$.extend()修改它，因此要将一个空映射(\{\})作为$.extend()的第一个参数，让这个新对象成为被修改的目标。

调用方法：
    jQuery.fn.shadow.defaults.slices= 10;
    $("h1").shadow({
           sliceOffset : function(i){
                  return { x : -i, y : i}
           }
    });

7、添加选择符表达式

/*
     *添加选择符表达式
     *
     * 参数：
     *     element：当前的DOM元素，大多数选择符都需要这个
     *     index:Dom元素在结果集中的索引，这个参数对:eq()和:lt()等选择符比较有用
     *      matches：包含解析当前选择符的正则表达式结果的数组。通常matches[3]是这个数组中
     *             唯一有用的项；对于:a(b)形式的选择符而言，matches[3]项中包含着b，即圆括号中的
     *             文本。
     *     set:到目前为止匹配的整个DOM元素的集合，这个参数用的比较少。
     *
     */
    jQuery.extend(jQuery.expr[':'],{
        'css' : function(element,index,matches,set){
            //修改之后的matches[3]:width < 100
            var parts = matches[3].split("");
            var value =parseFloat(jQuery(element).css(parts[0]));
            switch(parts[1]){
                case '<' :
                    return value <parseInt(parts[2]);
                case '<=' :
                    return value <=parseInt(parts[2]);
                case '=' :
                case '==' :
                    return value ==parseInt(parts[2]);
                   
                case '>=' :
                    return value >= parseInt(parts[2]);
                case '>' :
                    return value >parseInt(parts[2]);     
            }
        }
    })

调用：
    <divstyle="width: 500px;">Desrunt mollit anim id estlaborum</div>
    <divstyle="width: 200px;">2222222</div>
    <divstyle="width:30px;">33333333333333333333333</div>
    <divstyle="width: 300px;">4444444444444444</div>
    $("div:css(width< 100)").addClass("heighlight");

转载于:https://my.oschina.net/u/947065/blog/786672

[2019_Python_]: https://my.oschina.net/u/2663968/blog/3061697
[hot3.png]: /images/20220114/cdd7c82eaa6b4436ab9f296d7c84d5e0.png