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>

 

posted @ 2012-12-07 22:00  保安保安  阅读(403)  评论(0)    收藏  举报