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 @   保安保安  阅读(393)  评论(0)  编辑  收藏  举报
编辑推荐：
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试？测试工程师会被淘汰吗？
点击右上角即可分享
微信分享提示
SQL AI 助手