Javascrip 之 内置对象 & 面向对象 &

内置对象

• 1、document
  • document.referrer //获取上一个跳转页面的地址(需要服务器环境)
• 2、location
  • window.location.href //获取或者重定url地址
  • window.location.search //获取地址参数部分
  • window.location.hash //获取页面锚点或者叫哈希值
• 3、Math
  • Math.random 获取0-1的随机数
  • Math.floor 向下取整
  • Math.ceil 向上取整

面向对象

• 面向过程与面向对象编程

  • 1、面向过程：所有的工作都是现写现用。
  • 2、面向对象：是一种编程思想，许多功能事先已经编写好了，在使用时，只需要关注功能的运用，而不需要这个功能的具体实现过程。

• javascript对象

  • 将相关的变量和函数组合成一个整体，这个整体叫做对象，对象中的变量叫做属性，变量中的函数叫做方法。javascript中的对象类似字典。

• 创建对象的方法

  • 1、单体

    <script type="text/javascript">
    var Tom = {
        name : 'tom',
        age : 18,
        showname : function(){
            alert('我的名字叫'+this.name);    
        },
        showage : function(){
            alert('我今年'+this.age+'岁');    
        }
    }
    </script>
  

  • 2、工厂模式

    <script type="text/javascript">
    
    function Person(name,age,job){
        var o = new Object();
        o.name = name;
        o.age = age;
        o.job = job;
        o.showname = function(){
            alert('我的名字叫'+this.name);    
        };
        o.showage = function(){
            alert('我今年'+this.age+'岁');    
        };
        o.showjob = function(){
            alert('我的工作是'+this.job);    
        };
        return o;
    }
    var tom = Person('tom',18,'程序员');
    tom.showname();
    
    </script>
    

  • 3、构造函数

    <script type="text/javascript">
        function Person(name,age,job){            
            this.name = name;
            this.age = age;
            this.job = job;
            this.showname = function(){
                alert('我的名字叫'+this.name);    
            };
            this.showage = function(){
                alert('我今年'+this.age+'岁');    
            };
            this.showjob = function(){
                alert('我的工作是'+this.job);    
            };
        }
        var tom = new Person('tom',18,'程序员');
        var jack = new Person('jack',19,'销售');
        alert(tom.showjob==jack.showjob);
    </script>
    

  • 4、原型模式

    <script type="text/javascript">
        function Person(name,age,job){        
            this.name = name;
            this.age = age;
            this.job = job;
        }
        Person.prototype.showname = function(){
            alert('我的名字叫'+this.name);    
        };
        Person.prototype.showage = function(){
            alert('我今年'+this.age+'岁');    
        };
        Person.prototype.showjob = function(){
            alert('我的工作是'+this.job);    
        };
        var tom = new Person('tom',18,'程序员');
        var jack = new Person('jack',19,'销售');
        alert(tom.showjob==jack.showjob);
    </script>
    

  • 5、继承

    <script type="text/javascript">
  
            function fclass(name,age){
                this.name = name;
                this.age = age;
            }
            fclass.prototype.showname = function(){
                alert(this.name);
            }
            fclass.prototype.showage = function(){
                alert(this.age);
            }
            function sclass(name,age,job)
            {
                fclass.call(this,name,age);
                this.job = job;
            }
            sclass.prototype = new fclass();
            sclass.prototype.showjob = function(){
                alert(this.job);
            }
            var tom = new sclass('tom',19,'全栈工程师');
            tom.showname();
            tom.showage();
            tom.showjob();
        </script>
  

新选择器

• 1、document.querySlector()
• 2、document.querySlectorAll()