zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    python网络爬虫——scrapy核心组件介绍、请求传参、下载中间件
    python网络爬虫——Scrapy全站数据爬取【手动请求发送】及post请求的发送
    python网络爬虫——scrapy框架持久化存储
    php常见排序
    php实现快速排序
    mysql读写分离 主从同步
    php预定义字符
    本地Navicat连不上Linux虚拟机MySQL数据库问题
    php yii 命令
    yii 定义场景
  • 原文地址:https://www.cnblogs.com/matoo/p/2807940.html
Copyright © 2011-2022 走看看