JavaScript（二）

一、对象

1、创建对象

（1）、利用字面量创建对象

对象字面量：就是花括号{}里面包含了表达这个具体事务（对象）的属性和方法

（）里面采取了键值对的形式表示

• 键：相当于属性名

• 值：相当于属性值，可以是任意类型的对象（数字类型、字符串类型、布尔类型、函数类型）

<script>
        var obj = {
                uname: '张三',
                age: 18,
                sex: '男',
                sayHi: function() {
                    console.log('hi~');
                }
            }
        //调用属性的两种方法
        console.log(obj.uname);
        console.log(obj['uname']);
        //调用函数
        obj.sayHi()
</script>

 （2）、利用new Object创建对象

<script>
        var obj = new Object();
        obj.uname = '张三',
            obj.age = 18,
            obj.sex = '男',
            obj.sayHi = function() {
                console.log('hi~');
            }
        //调用属性的两种方法
        console.log(obj.uname);
        console.log(obj['uname']);
        //调用函数
        obj.sayHi();
</script>

（3）、利用构造函数创建对象

构造函数语法：

function 构造函数名() {            
	this.属性 = 值;            
  	this.方法 = function() {}        
}
new 构造函数();

举例：

<script>
        function Fun(uname, age, sex) {
            this.name = uname;
            this.age = age;
            this.sex = sex;
        }
        var T = new Fun('张三', 18, '男'); //调用函数返回的是一个对象
        console.log(T.name);
        console.log(T.age);
        console.log(T.sex);
</script>

2、new关键字

1、new构造函数可以在内存中构造一个空的对象

2、this就会指向刚才创建的空对象

3、执行构造函数里面的代码 给这个空对象添加属性和方法

4、返回这个对象

3、遍历对象

<script>
        var obj = {
            name: '张三',
            age: 15,
            sex: '男'
        }
        for (var k in obj) {
            console.log(k); //输出属性名
            console.log(obj[k]); //得到属性值
        }
</script>

二、内置对象

1、Math对象

Math不是构造函数，直接使用里面的属性和方法即可

    <script>
        console.log(Math.PI);
        console.log(Math.max(4, 56, 0.3));
        console.log(Math.min(4, 56, 0.3));
    </script>

• Math.PI圆周率

• Math.floor() 向下取整

• Math.ceil() 向上取整

• Math.round() 四舍五入

• Math.abs() 绝对值

• Math.max() /min() 取最大值和最小值

2、日期对象

Date（）方法

获取当前时间必须实例化

var now = new Date();
console.log(now);

Date（）构造函数的参数

如果括号里面有时间，则返回参数里面的时间

<script>
        var arr = new Array();
        var obj = new Object();
        //1、使用Date
        var date = new Date();
        console.log(date);
        //2、参数常用的写法 数字型 2019，10，1或者字符串类型 '2018-10-1 8:8:8'
        var date1 = new Date(2018, 10, 1);
        console.log(date1); //返回的是11月，不是10月
        var date2 = new Date('2018, 10, 1');
        console.log(date2);
        //3、获得date()的毫秒数
        var date3 = new Date();
        console.log(date.valueOf()); //现在时间距离1970年1月1日的毫秒数
        console.log(date.getTime());
        //简洁的写法
        var date4 = +new Date();
        console.log(date4);
        //4、h5新增的获得总的毫秒数
        console.log(Date.now());
    </script>

3、数组对象

（1）、创建数组的两种方式

<script>
        //1、利用数组字面量
        var arr = [1, 2, 3];
        console.log(arr[0]);
        //2、利用new Array()
        var arr1 = new Array(2,3); 	//里面有两个数组元素2,3
        console.log(arr1);
    </script>

（2）、检测是否为数组

<script>
        //1、instanceof 运算符
        var arr = [1, 2, 3, 4, 5];
        var obj = {};
        console.log(arr instanceof array);
        console.log(obj instanceof array);
        //2、Array.isArray(参数)
        console.log(Array.isArray(arr));
        console.log(Array.isArray(obj));
</script>

（3）、添加数组元素

<script>
        //1、push()在元素末尾添加一个或者多个数组元素
        var arr = [1, 2, 3, 4, 5];
        console.log(arr.push(10, 'string'));
        console.log(arr);
        //2、unshift在数组开头添加一个或多个数组元素
        arr.unshift('red');
        console.log(arr);
    </script>

（4）、删除数组元素

<script>
        //1、pop()删除元素末尾的最后一个元素
        var arr = [1, 2, 3, 4, 5];
        arr.pop();
        console.log(arr.pop());
        console.log(arr);
        //2、shift()可以删除数组的第一个元素
        console.log(arr.shift());
        console.log(arr);
</script>

（5）、数组索引方法

    <script>
        //返回数组元素索引号方法，从前面开始查找
        var arr = ['red', 'blue', 'green', 'pink'];
        console.log(arr.indexOf('blue'));
        //返回数组元素索引号方法，从后面开始查找
        var arr = ['red', 'blue', 'green', 'pink'];
        console.log(arr.lastIndexOf('blue'));
    </script>

4、字符串对象

基本包装类型就是把简单数据类型包装为复杂数据类型

a、把简单数据类型包装为复杂数据类型

b、把临时变量的值给arr

c、销毁这个临时变量

var temp = new String('andy');        
arr = temp;        
temp = null;

二、DOM

1、简介

DOM是文档对象模型，是W3C组织推荐的处理可拓展标记语言（HTML或者XML）的标准程序接口

DOM树

• 文档：一个页面就是一个文档，DOM中用document表示

• 元素：页面中所有标签都是元素，DOM中使用element表示

• 节点：网页中的所有内容都是节点（标签、属性、文本、注释），DOM中用node表示

2、获取元素

（1）、根据ID获取元素

使用getElementByld()方法获取带有ID的元素

    <script>
        /*
                get 获得 element 元素 by 通过 驼峰命名法
                参数id是大小写敏感的字符串
                返回的是一个元素对象
                */
        var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);
        //5、console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
        console.dir(timer);
    </script>

（2）、根据标签名获取

使用getElementByTagName()方法可以返回带有标签名的对象的集合

<body>
    <ul>
        <ol id="ol">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </ul>
    <script>
        //返回的是 获取过来的元素对象的集合，以伪数组的形式存储的
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        console.log(lis[0]);
    </script>
</body>

（3）、通过HTML5新增的方法获取

<body>
    <div class="box">盒子</div>
    <div class="box">盒子</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>
    <script>
        //1、根据类名获得某些元素集合
        var boxs = document.getElementsByClassName('box');
        console.log(boxs);
        //2、根据指定选择器返回第一个元素对象
        var firstBox = document.querySelector('.box');
        console.log(firstBox);
        //3、返回指定选择器的所有元素对象集合
        var allBox = document.querySelectorAll('.box');
        console.log(allBox);
    </script>
</body>

（4）、获取特殊元素

<body>
    <script>
        //1、获取body元素
        var bodyEle = document.body;
        console.log(bodyEle);
        console.dir(bodyEle);
        //2、获取html元素
        var htmlEle = document.documentElement;
        console.log(htmlEle);
    </script>
</body>

3、事件基础

执行事件的步骤：

a、获取事件源

b、注册事件（绑定事件）

c、添加事件处理程序（采取函数赋值形式）

<body>
    <div>123</div>
    <script>
        //1、获取事件源
        var div = document.querySelector('div');
        //2、绑定事件
        // div.onclick;
        //3、添加事件处理程序
        div.onclick = function() {
            console.log('被选中');
        }
    </script>
</body>

4、操作元素

（1）、改变元素内容

从起始位置到终止位置的内容，但它去除HTML标签，同时空格和换行也会被去掉

element.innerText

从起始位置到终止位置的全部内容，包括HTML标签，同时保留空格和换行

element.innerHTML

举例：

<body>
    <button>显示当前系统时间</button>
    <div>某个时间</div>
    <script>
        // 1、获取元素
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        // 2、注册事件
        btn.onclick = function() {
            div.innerText = '2021-5-12';
        }
    </script>
</body>

（2）、修改元素属性

常用元素的属性操作

1. innerText、innerHTML改变元素内容

2. src、href

3. id、alt、title

（3）、修改表单属性

常用元素的属性操作

• type、value、checked、selected、disabled

（4）、修改样式属性

• element.style 行内样式操作

• element.className 类名样式操作

5、节点

（1）、概述

节点至少拥有nodeType（节点类型）、nodeType（节点名称）和nodeValue（节点值）这三个基本属性

• 元素节点nodeType为1

• 属性节点nodeType为2

• 文本节点nodeType为3（文本节点包含文字、空格、换行等）

（2）、节点层级

a、父级节点

node.parentNode

• parentNode户型可返回某节点最近的一个父节点

• 如果指定的节点没有父节点则返回null

b、子节点

parentNode.childNodes(标准)

parentNode.childNodes返回包含指定节点的子节点的集合，该集合为及时更新的集合

c、兄弟节点

node.nextSibling

nextSibling返回当前元素的下一个兄弟节点，找不到则返回null，同样，也包含所有的节点