学习内容：
一、JS创建对象的三种方式
1、var obj＝{};创建了一个空的对象
var obj＝{
uname: "张三"，
age:18,
sex: "男"
sayhi: function(){ ……}
}
注意：（1）里面的属性或者方法采取键值对的形式。 键：值
（2）多个属性或者方法中间用逗号隔开。
（3）方法冒号后面跟的是一个匿名函数。
2、利用new创建对象
var obj=new Object();
obj.uname=" 张三";
obj.age="18";
obj.sex="男";
obj.sayhi=function(){……}；
3、用构造函数创建对象
function Star(uname,age,sex){
this.name=uname;
this.age=age;
this.sex=sex;
}
var ldh=new Star("刘德华"，18，‘男’)；
（1）构造函数名字首字母要大写
（2）构造函数不需要return，就可以返回结果。
二、调用对象
1、调用对象的属性，我们可以采取 对象名．属性名
2、调用对象的属性，我们可以使用 对象名［＇属性名＇］
3、调用对象的方法，对象名.方法名()
三、遍历对象
for……in遍历对象
for(var k in obj) {
console.log(k);遍历属性名
console.log(obj[k]);遍历属性值
}
四、JS的内置对象
内置对象就是JS已经规定好了的方法。可以在MDN中查阅。
1、Math对象不需要new
| 方法名 | 说明 |
| Math.PI | 圆周率 |
| Math.floor() | 向下取整 |
| Math.ceil() | 向上取整 |
| Math.round() | 四舍五入版 就近取整 注意-3.5 结果是-3 |
| Math.abs() | 绝对值 |
| Math.max()/Math.min() | 求最大最小值 |
2、随机数
（1）随机数random() 返回随机小数０－１包括０，不包括１
（2）实现两个数之间的随机整数，并包括这两个整数
function random(min,max)｛
return Math.floor(Math.random()*(max-min+1))+min;
}
3、与时间相关
| 方法名 | 说明 | 代码 |
| getFullYear() | 获取当年 | dObj.getFullYear() |
| getMonth() | 获取当月（0-11） | dObj.getMonth() |
| getDate() | 获取当天日期 | dObj.getDate() |
| getDay() | 获取星期几（周日0 到周六6） | dObj.getDay() |
| getHours() | 获取当前小时 | dObj.getHours() |
| getMinuters() | 获取当前分钟 | dObj.getMinuters() |
| getSeconds() | 获取当前秒钟 | dObj.getSeconds() |
4、与数组相关
检测是否为数组 参数名 instanceof Array
Array.isArray(参数)
| 方法名 | 说明 | 返回值 | 代码 |
| push() | 在数组的末尾添加一个或者多个数组元素 | 新数组的长度 | push(元素值) |
| unshift() | 在数组的开头，添加一个或者多个数组元素 | 新数组的长度 | unshift(元素值) |
| pop() | 删除数组最后一个元素 | 删除元素的值 | arr.pop() console.pop(arr.pop()) |
| shift() | 删除数组的第一个元素 | 删除元素值 | arr.shift() console.shift() |
| 方法名 | 说明 | 返回值 |
| reverse() | 颠倒数组中元素的顺序，无参数 | 该方法会改变原来的数组，返回新数组 |
| sort() | 对数组的元素进行排序 | 该方法会改变原来的数组，返回新数组 |
| indexOf（） | 在数组中查找给定元素的第一个索引 | 如果存在但会索引号，如果不存在，则返回-1。 |
| lastIndexOf() | 在数组中的最后一个的索引 | 如果存在但会索引号，如果不存在，则返回-1。 |
5、与字符串相关
| 方法名 | 说明 | 返回值和代码 |
| toString() | 把数组转换成字符串，逗号分隔每一项 | 返回一个字符串 |
| join('分隔符') | 方法用于把数组中的所有元素转换为一个字符串。 | 返回一个字符串 |
| split('分隔符') | 方法用于把字符串转换为数组 | 返回一个数组 |
| charAt(index) | 返回指定位置的字符(index 字符串的索引号) | str.charAt(0) |
| charCode(index) | 获取指定位置处字符的ASCLL码(index索引号) | str.charCodeAt(0) |
| str[index] | 获取指定位置处字符 | HTML5,IE8+支持和charAt()等效 |
| concat(str1,str2...) | concat()方法用于连接两个或多个字符串，拼接字符串，等效于+，+更常用。 | |
| substr(start,length) | 从start位置开始(索引号)，length取的个数 重点记住这个 | |
| slice(start,end) | 从start位置开始，截取到end位置，end取不到（他俩都是索引号） | |
| substring(start,end) | 从start位置开始，截取到end位置，end取不到，基本和slice相同，但是不接受负值。 | |
| replace（‘ ’，‘ ’） | replace（“被替换的字符“，”替换的字符“） | |
五、API和 web APIs简介
JS基础学习ECMAScript基础语法为后面做铺垫 web APIs是JS的应用，大量使用JS基础语法做 交互效果
1、API是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能。
2、web API是针对浏览器提供的接口，主要针对浏览器做交互效果
3、DOM是接口 可以改变网页的内容，结构，样式
文档：一个页面就是一个文档，DOM中用document表示
元素：页面中的所有标签都是元素，DOM中使用element表示
节点：网页中所有内容都是节点 ，DOM中使用node表示。
六、如何获取页面中的元素
1、根据ID获取
getElementByid(字符串)
文档页面从上往下加载，所以要现有标签， 我们将script写到标签下面 返回元素对象
2、根据标签名获取
getElementByTagName()
获取过来是元素对象的集合，以伪数组的形式存储
获取父元素内部所有指定标签名的子元素 element.getElementsByTagName(“标签名”)；
父元素必须是单个对象（必须指明是哪一个元素对象）
3、html5新增
（1）根据类名返回元素对象集合 document.getElementsByClassName(“类名’)
（2）根据指定选择器的第一个元素对象 documents.querySelector(“);
（3）根据指定选择器返回全部对象 documents.querySelectorAll(“选择器”)
（4）获取body元素 document.body;
（5）获取html元素 document.documentElement;
七、事件
事件 是触发响应机制 由三部分组成 事件源 事件类型 事件处理程序
<button id=’btn’> 唐伯虎</button>
(1)事件源 事件被谁触发 按钮 var btn=document.getElementById(‘12’)
(2)事件类型 如何触发 什么事件按比如鼠标点击 还是鼠标经过还是键盘按下
btn.οnclick=function(){alert（“点秋香“);}
(3)事件处理程序 通过一个函数赋值的方式 完成
八、操作元素
1、 element.innerText 从起始位置到终止位置的内容,空格和换行也会去掉 不识别html标签
element.innerHTML 起始位置到终止位置的全部内容，保留空格和换行，识别标签
2、样式属性操作 通过JS修改元素的大小、颜色、位置等样式
element.style 行内样式操作
element.className 类名样式操作
3、注意：
（1）JS里面的样式采取驼峰命名法比如fontSize,backgroundColor
（2）Js修改style样式操作，产生的是行内样式，CSS权重比较高。
4、H5新增自定义属性
九、节点操作
1、创建节点
document.createElement() 创建由 tagName 指定的 HTML 元素。
2、增加节点
（1）node.appendChild() 将一个节点添加到父节点的子节点列表末尾。
（2）node.insertBefore() 将一个节点添加到父节点的子节点前面。
3、删除节点
node.removeChild() 方法从 DOM 中删除一个子节点，返回删除的节点。
4、获取节点
(1)node.parentNode 获取亲父节点的元素,找不到就返回NUL
(2)node.childNodes 获取亲子节点的元素,找到的包括文本节点和元素节点,找不到就返回NULL。
(3)node.children 返回所有的子元素节点。它只返回子元素节点，其余节点不返回
(4)node.firstChild 获取第一个子节点 node.lastChild获取最后一个子节点,找不到就返回NULL。
(5)node.firstElementChild 返回第一个子元素节点，找不到则返回null。
(6)node.lastElementChild 返回最后一个子元素节点，找不到则返回null。
(7)node.nextSibling 返回当前元素的下一个兄弟元素节点，找不到则返回null。包含所有的节点。
(8)node.previousSibling 返回当前元素上一个兄弟元素节点,找不到则返回null。包含所有的节点。
5、克隆节点
node.cloneNode() 方法返回调用该方法的节点的一个副本。
（1） 如果括号参数为空或者为 false ,则是浅拷贝。即只克隆复制节点本身,不克隆里面的子节点。
（2） 如果括号参数为 true ，则是深度拷贝，会复制节点本身以及里面所有的子节点
十、三种动态创建元素的区别
1、 document.write 是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全 部重绘。
2、innerHTML 是将内容写入某个 DOM 节点，不会导致页面全部重绘。
3、innerHTML 创建多个元素效率更高(不要拼接字符串，采取数组形式拼接),结构稍微复杂。
4、createElement() 创建多个元素效率稍低一点点，但是结构更清晰。
学习产出：
运用与时间相关函数实现倒计时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>倒计时</title>
<script>
function countDown(time) {
var nowTime = +new Date();//返回的是当前时间总的毫秒数
var inputTime = +new Date(time);//返回的是用户输入时间的总毫秒数
var times = (inputTime - nowTime) / 1000;
var day = parseInt(times / 60 / 60 / 24);//计算天数
day = day < 10 ? "0" + day : day;
var hours = parseInt(times / 60 / 60 % 24);//计算小时数
hours = hours < 10 ? "0" + hours : hours;
var min = parseInt(times / 60 % 60);//计算分钟数
min = min < 10 ? "0" + min : min;
var second = parseInt(times % 60);//秒
second = second < 10 ? "0" + second : second;
return day + "天" + hours + "时" + min + "分" + second + "秒";
}
console.log(countDown('2021-7-21 17:30:00'));
</script>
</head>
<body>
</body>
</html>
110
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
