zoukankan      html  css  js  c++  java
  • jQuery插件写法

    1. JQuery实际上就是一个封装操作DOM的对象。
    2. JQuery插件实际上就是扩展JQuery这个对象(实例或者本身),增加用户自己的方法。

    1. 扩展JQuery本身

    JQuery提供.extend()方法来对自身进行扩展。

    $.extend( { say : function() {
        return "roddy";
    } } );
    
    // 使用
    console.log( $.say() );
    
    // 输出:
    // "roddy"
    

    对JQuery自身扩展一个.say()方法。

    2. 扩展JQuery实例

    JQuery提供.fn.extend()方法来扩展JQuery实例对象

    $.fn.extend( { changeColor : function() {
        $( this ).style.color = "red";
    } } );
    
    // 使用
    $( "span" ).changeColor();
    

    3. 扩展写法

    ( function( $ ) {
    
        // 插件默认配置
        var defaultOptions = {
            property1 : "value1",
            property2 : "value2",
            ...
        };
        
        // 插件构造函数
        function userPlug( element, options ) {
            // jQuery实例对象
            this.$ele = $( element );
            // 合并用户配置和默认配置
            this.options = $.extend( defatuleOptions, options, true );
            // 插件初始化
            this.init( this );
        }
        
        // 插件原型
        userPlug.prototype = {
            // 插件初始化函数
            init : function( self ) {
                // 插件的主要实现代码
                // 可以通过self.options进行配置或者修改
                // 然后给self.$ele绑定事件处理函数等
            }
        }
        
        // 绑定插件
        $.fn.userplug = function( options ) {
            return this.each( function() {
                if( !$.data( this, 'userplug' ) ) {
                    $.data( this, 'userplug', new userPlug( this, options ) );
                }
            } );
        }
    } )( window.jQuery );
    

    4. 使用插件

    <script src="//cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
    <script src="userPlug.js"></script>
    <script> $( "div" ).userplug( [options] ); </script>
    
  • 相关阅读:
    php 图片剪切
    mysql 官方docker镜像使用教程
    centos7 取消自动锁屏
    nginx配置反向代理示例
    nginx 官方docker镜像使用教程
    centos 下nginx源码编译安装
    nginx rewrite规则实例讲解
    requests.session()会话保持
    我对网络IO的理解
    日常运维--rsync同步工具
  • 原文地址:https://www.cnblogs.com/roddy/p/6542068.html
Copyright © 2011-2022 走看看