jquery扩展代码示例

ex6.html内容如下:

<!-- jquery扩展 -->
<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="i1"></div>
        <script src="jquery-1.12.4.js"></script>
        <script src="ex6.js"></script>
        <script>
            //外面包这层可以在页面框架加载完立刻执行js代码
            $(function(){
                //引入的插件应用方法
                var j = $.jack();
                alert(j);
                //扩展写法1
                $.extend({
                    'eric':function(){
                        return 'smart';
                    }
                });
                alert($.eric());
                //扩展写法2
                $.fn.extend({
                    'alice':function(){
                        return 'beautiful';
                    }
                });
                alert($('#i1').alice());
            });
        </script>
    </body>
</html>
View Code

通过引入文件的方式加载插件

ex6.js内容如下:

/*
*jquery扩展
*外边包着闭包函数,可以防止插件多的时候,变量名和插件名重复干扰
*把jQuery参数传入闭包函数里面,可供函数里面使用
*/
;(function(arg){
    var status = 1;
    arg.extend({
        'jack':function(){
            return 'sb';
        }
    });
})($);
View Code

猜你喜欢

转载自www.cnblogs.com/ericbai/p/9301930.html