zoukankan      html  css  js  c++  java
  • jQuery插件开发

    JQ插件

    1.JQ插件是用来扩展JQ原型对象的一个方法

    2.插件的使用方式就是JQ对象方法的调用

    JQ内部定义了一个jQuery.fn对象 jQuery.fn = jQuery.prototype 也就是说 jQuery.fn 对象是jQuery的原型对象,方法定义在jQuery.fn对象上

    基础jQ插件

    $.fn.changeStyle = function(colorStr){
      this.css("color",colorStr)
    }
    // 使用方法
        
    $(".p1").changeStyle("red")

    插件在调用时 插件内部的this就是调用插件的jQuery对象

    这样每个$()在调用插件的时候都会使用插件内的jQ方法

    满足链式调用的jQuery插件

    链式调用其实是jQuery的一大特色 一个通用插件应该遵循jQuery风格

    满足链式调用的要求 所以插件在调用结束以后 需要 return this

    即在插件执行完以后 会把当前的jQ对象返回

    方便在插件的后面继续调用其他jQuery方法

    使用链式调用的方法改写上面的插件

    $.fn.changeColor = function(color){
         this.css("color",color);
         return this;
    }
    
    $(".p2").changeColor("yellow").addClass("large");
    

    防止$符号污染的jQuery插件

    为了避免$.fn对象受到其他使用$变量的js库的影响,可以使用立即执行函数通过传参的方式封装插件

    使用立即执行函数,$只属于这个立即执行的函数的作用域

    这样就可以避免$符的污染

    注意 插件前加分号 避免无法解析为函数

    ;(function($){
        $.fn.changesColors = function(color){
            this.css("color",color);
            return this;
        }
    }(jQuery));
    
    $(".p3").changesColors("green")    
    

    传递多个参数

        ;(function($){
            $.fn.changeStyles = function(options){
                this.css("color",options.color).css("fontSize",options.fontSize);
                return this;
            }
        }(jQuery))
    
        
        $(".p4").changeStyles({
            "color":"blue",
            "fontSize":"30px"
        })
    

      

    把参数放到一个对象中传给插件还有一个好处 就是 我们可以在插件内部为一些参数定义一些缺省值

    定义缺省值

        ;(function($){
            $.fn.changesStyle =  function(options){
                var defaultSetting = {'color':"red",'fontSize':"30px"} 
                var setting = $.extend(defaultSetting,options)
                this.css({"color":setting.color,"fontSize":setting.fontSize})
                return this;
            }
        }(jQuery))
    
        $(".p5").changesStyle()
    
        $(".p5").changesStyle({'color':'orange','fontSize':"40px"})
    

      

    即 合并两个对象 把后面一个对象存在的属性值赋值给第一个对象

    $.extend 还可以用来扩展jQuery对象本身

    这样定义的插件 我们在使用时 如果不传参数 那么就会使用这个插件内部的默认值

    注意 在为插件定义默认参数时 一定要把默认参数写在参数方法内部
    这样默认参数的作用域就在插件内部

    $.fn.extend 插件

    ;(function($){
        $.fn.extend({
            styleSet:function(option){
                var defaultSetting = {'color':"#fff",'background':"#000"};
                var setting = $.extend(defaultSetting,option);
                this.css({color:setting.color,background:setting.background})
                return this;
            }
        })
    }(jQuery))
    
    
    $(".p6").styleSet({color:"blue",background:"orange"})
    

      

     

    注意

    $.extend方法和$.fn.extend方法都可以用来扩展jQuery功能

    $.extend方法是在jQuery全局对象上扩展方法 $.fn.extend方法是在$选择符选择的jQuery对象上扩展方法
    所以 扩展jQuery的公共方法一般用 $.extend方法 定义插件一般使用$.fn.extend方法

  • 相关阅读:
    k3 cloud套打模板中出现单元格数据为空的情况,及无法正确的选择数据源
    k3 cloud中列表字段汇总类型中设置了汇总以后没有显示出汇总值
    k3 cloud查看附件提示授予目录NetWorkService读写权限
    k3 cloud中提示总账期末结账提示过滤条件太长,请修改此过滤条件
    金蝶云k3 cloud采购入库单校验日期不通过
    C# Code First 配置(二)
    C# Azure 远程调试
    C# ABP源码详解 之 BackgroundJob,后台工作(一)
    C# 在webapi项目中配置Swagger(最新版2017)
    高并发之
  • 原文地址:https://www.cnblogs.com/RVon/p/8574780.html
Copyright © 2011-2022 走看看