• javascript复习定义对象/命名函数/对象字面量/jquery自定义插件


    感谢博客园里面很多作者,跟着看复习了一遍,梳理了知识点,感觉对js的理解更深入了。

    尤其感谢大叔的博文深入理解JavaScript系列

    写了个脚本做为复习,包括

    1.定义对象

    2.命名函数

    3.对象字面量

    4.jquery自定义插件

    基本上常见的方法都写了一遍,熟话说“好记性不如烂笔头”,留个底等忘了的时候回来看看。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
        <script type="text/javascript" src="jquery.js" charset=""></script>
    <title>JS复习</title>
    </head>
    
    <body>
    <div class="text"><p></p></div>
    <script type="text/javascript ">
        //////////////////////对象声明/////////////////////
        function func1(){console.log('func1 runs!');}
        func1();
    
        //构造函数/原型法
        function func2(){
            this.color='red';
            this.year='2012';
            func2.prototype.show=function(){console.log(this.color+this.year);}
        }
        var funVal2=new func2();
        funVal2.show();
        <!--命名函数-->
        var f1=function func3(){
            this.color='green';
            this.year='2013';
            func3.prototype.show=function(){
                console.log(this.color+this.year);
            }
            return(console.log('f1 runs!'));
        };
        f1();
        var f2=new f1();
        f2.show();
        console.log(typeof(f1)+typeof(f2))
    
        //////////////////////对象字面量////////////////////////////////////
        var param1={name:'wang',year:'2012'};  //JSON
        console.log(param1.name);
        function fun1(){
            this.pram={
                name:'wang',
                age:'22'
            };
            fun1.prototype.show=function(){
                    console.log(this.pram.name+this.pram.age);
                }
            fun1.prototype.show2={
                name:"li",
                age:'23',
                fun:function(){
                    console.log(this.name+this.age);
                }
            }
        }
        var fu1=new fun1();
        console.log(fun1.prop1);
        fu1.show();
        fu1.show2.fun();
    
        //////////////////////////自定义JQUERY插件/////////////////////
    
        //$.的2种声明方法
        (function($){
            $.show=function(){
                console.log('jquery runs!');
            }
            $.extend({
                shown:function(){
                    console.log('jquery method2 runs!')
                }
            })
        })(jQuery);
        $.show();
        $.shown();
    
        //$.fn的2种声明方法
        (function($){
            $.fn.show=function(){
                console.log('jquery plugin show runs!');
                this.append('rocks');
            }
            $.fn.extend({
                show2:function(){
                    console.log('jquery plugin show2 runs too!');
                    this.append('roll');
                }
            })
        })(jQuery);
        $('p').show();
        $('p').show2();
    
        //添加参数
        (function($){
            $.fn.show3=function(name,age){
                var pram1={
                    name:'wang',
                    age:'2'
                }
                console.log('jquery plugin show3 runs!');
                this.append(pram1.name+pram1.age);
            }
        })(jQuery);
        $('p').show3();
    
        //覆盖默认参数值
        (function($){
            $.fn.show4=function(param){
                var pram1= $.extend({
                    name:'peng'
                },param||{});
                console.log('jquery plugin show4 runs!');
                this.append(pram1.name);
            }
        })(jQuery);
        var param={name:'liu'};
        $('p').show4(param);
    </script>
    
    
    </body>
    
    </html>
  • 相关阅读:
    MySql(六)单表查询
    MySql(五)
    MySql(四)
    MySql(三)
    MySql(二)
    2016高管必看的五大互联网营销方法
    昨日股市暴跌熔断 赵薇亏3.3亿赔惨了(如何预测今年股市走向)
    何炅加入阿里音乐预示“互联网+”三大发展走向
    《老炮儿》的江湖道义就是互联网创业的规矩?
    世界互联网大会三大看点 传递什么信号?
  • 原文地址:https://www.cnblogs.com/matoo/p/2807940.html
Copyright © 2020-2023  润新知