jQuery插件写法总结以及面向对象方式写法总结

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_27449993/article/details/80192975
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/jquery-3.2.1.min.js"></script>
    </head>
    <body>
        <div id="compare">
            
        </div>
        <h3>最简单的jQuery插件</h3>
        <div id="ad"></div>
        <script>

            //将jquery作为jquery作用域下的一个公共函数使用,通过jquery.fn()或$.fn方法进行引用

            jQuery.extend({
                min:function(a,b){if(a>b){return b;}else{return a;}},
            });
            $(function(){
                console.log(jQuery.min(3,4));
            });

            //jquery.extend()方法除了可以创建插件外还可以将两个对象合并

            var a={name:'aa'};
            var b={name:'bb'};
            var c=$.extend(a,b);console.log(c.name);

            //如果要像jquery命名空间上添加一个函数,只需要将这个函数作为jquery对象的一个属性即可,

            jQuery.compar={
                min:function(a,b){if(a>b){return b;}else{return a;}},
                max:function(a,b){if(a>b){return a;}else{ return b;}},
            };
            console.log($.compar.min(3,4));

            //jquery.fn.extend对象方法,这种方法能够创建jQuery对象方法。

            jQuery.fn.min=function(a,b){alert($(this).attr('id'));if(a>b){return b;}else{return a;}}
            $(function(){
            console.log($('#compare').min(3,4));
            });

            //可以通过两种方式创建插件    

            //1、在jQuery匿名函数中,采用jQuery.extend();方法创建jQuery插件

            //2、在jQuery匿名函数中,采用对象.属性=函数的方式创建jQuery插件

            (function($) {
                jQuery.extend({//写法1
                    a: function(h){
                        $("#ad").html(h);
                    },
                    b:function(h){
                        alert(h);
                    }
                })
            })(jQuery);
 
            (function($) {//写法2
                jQuery.a=function(h){
                    $("#ad").html(h);
                }
                jQuery.b=function(h){
                    alert(h);
                }
            })(jQuery);
 
            $(document).ready(function(){
                $.a("abc");
                $.b("xyz");
            });
            
        </script>
    </body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_27449993/article/details/80192975
今日推荐