Jscript组成：
1.ECMAScript
2.Bom
3.Dom注意事项
1.type = "text/javascript" 说明当前script标签中文本的类型
2.所有Js代码都必须写在Script标签中
3.每一条js语句后面以分号结尾，注意语法规范
4.Script写在head标签中
5.可以引入多个Script标签 多个Script标签，按顺序执行
6.js代码可以外部引入，外部引入的js代码下方代码不执行
例：<Script type = "text/javascrip" scr = "XXX.js">
alert("hello,world");//此行代码不执行
</Script>
7.`“<” 是< “>” 是 >`常用代码
alert("hello,world");
//弹出警告窗
document.write("hello,world");
//在当前文本输出内容
<Script type = "text/javascrip" scr = "XXX.js"></Script>
//外部引入js
typeof 变量/常量 输出当前变量/常量的数据类型
数据类型
基本数据类型
<1>数字 number 100 3.14
<2>字符串 string 所有带双引号/单引号 'hello,world' "hello,world"
<3>布尔值 Boolean true false
<4>特殊数值类型 null 空值 undefined 未声明复合数据类型
变量：
1.声明变量 var
例：var age = 18; 声明变量时赋值叫做初始化
2.可以同时定义多个变量
例：var name = "XXX", age = 18,sex = "男"
3.标识符：用户自定义的所有名字叫做标识符
<1>标识符必须由数字,字母，下划线和美元符号&组成
<2>不能以数字开头
<3>区分大小写
<4>见名知意自动类型转换：
1.任意类型数据和字符串类型数据进行相加运算时，其他类型数据会自动转换为字符串类型。此时相加操作不再是数学意义相加，而是表示拼接
例：var tmp ="你" + "好" //运行出来结果为 你好。
2.任何数据除了和字符串做相加运算外，先将字符串转换为数字字符串在进行运算
<1>与NaN作算数运算的结果始终是NaN，包括NaN与NaN做算术运算也为NaN，
<2>字符串如果是纯数字字符串转为数字，否则转换成NaN。
例：var tmp = 1 - "2";
//运算结果 -1 运算过程中 字符串2转换为数字字符串2
var a= 1 - "2a";
//运算结果为NaN 意思为 not a number 这不是一个数字
任何其他数据类型除了和字符串做相加操作外，与数字类型做算数运算的时候，其他数据类型都会自动的转化成数字。
布尔值：true => 1 false => 0
特殊数据类型 null => 0 undefined => NaN
强制数据转换：
<1>布尔值： 通过方法 Boolean（）进行强制数据类型转换
作用：将别的数据类型强制转换为布尔值。
例：var Boolean (1);//true
例：var Boolean (0);//false
结论：数字0转为布尔值都为false，所有非0转为布尔值都为true
空字符串转换为布尔值为false，非空字符串转换为布尔值为true
null undefined 转换为布尔值为false
<2>数字： 通过方法 Number（）进行强制数据类型转换
作用：将别的数据类型强制转换为数字。
例：var Number(true); //1
例：var Number(20a);//NaN
parseint()进行取整
例：var parseint(20a);//20
parsefloat 取浮点数逻辑运算符：
与：
表达式1 && 表达式2 解释：只有当两个表达式结果都为真的时候，与运算结果才为true。
或：
表达式1 || 表达式2 解释：只有当两个表达式结果都为假的时候，与运算结果才为假，有一方为真结果就为真。
非：
！表达式 解释：将字符串转换为布尔值，取相反结果。流程语句 ：
顺序：
依次执行判断：
根据条件选择执行
if（判断条件）{
判断语句1；
}
else{
判断语句2；
}选择:
switch(表达式){
case 常量1;
语句1；
break；
case 常量2;
语句2；
break；
case 常量3;
语句3；
break；
default：
如果上面语句都不成立，执行这里；
break
例：
var fruits = prompt("请输入你要查询的水果");
switch (fruits){
case "西瓜":
alert("当前库存还有西瓜");
break;
case "葡萄":
alert("当前库存还有葡萄");
break;
case "哈密瓜":
alert("当前库存还有哈密瓜");
break;
default:
alert("没有查询到你要的水果");
}
<表达式的结果等于那个case的常量，则执行对应语句。 break不可省略>
循环：
三元表示法：
例：
var num = prompt("请输入数字");
var nn = num > 9 ? num : 0 + num;
alert(nn);
注： 当？之前判断条件正确是 跳转到？之后第一个表达式，不正确是跳转到第二个表达式。函数-atguments：
atguments<再每一个函数内，都有一个内置的数组，是一个变量atguments。atguments可以存储房前函数传入的所有参数，而且是通过传参的顺序，进行排列。
atguments.length 输入传入参数的个数、
访问atguments里的数据时，需要通过对应的下标进行访问。作用域：
起作用的有效范围，每一个函数的声明都会生成一个函数作用域。全局作用域
全局作用域声明的变量 全局变量局部作用域
局部作用的声明变量 局部变量 局部变量的声明周期和生效的范围，都是声明该变量的函数区域，当函数调用完成后，就直接销毁
如果全局作用域和局部作用域变量重名，我们就采取就近原则，当前访问这个变量里那个作用域近，就是那个作用域。
数组：
数组名.length 动态监测数组元素的个数
数组新增元素：
1.修改length长度 数组名.length = 长度
2.新增数组元素 数组名[位置] = 字符数组转换为字符串
(1) toString //默认逗号分隔
var arr = [1,2,3]
console.log(arr.toString()) //输出结果 1，2，3;
(2) joio //可以自定义分隔符
var arr = [1,2,3]
console.log(arr.jijo()) //输出结果 1，2，3;
console.log(arr.jijo('-')) //输出结果 1-2-3;
字符转换为数组: split('分隔符')
检测是否为数组
(1) instanceof 运算符 可以用来检测是否为数组
var arr = [];
var obj = {};
console.log(arr instanceof Array); //turn
console.log(obj instanceof Array); //false
(2) Array.isArray(参数)； //H5新增 IE9以上版本支持；
console.log(Array.isArray([1,2,3])); //turn
console.log(Array.isArray("lalalla")); //false
添加删除数组元素方法
(1) push()
在我们的数组**末尾**添加一个或者多个数组元素
var arr = [1,2,3,4,5];
arr.push(4);
console.log(arr); //输出结果: 1,2,3,4,5,4;
<1> push是可以给数组追加新的元素；
<2> push()参数直接写 数组元素就可以；
<3> push完毕后，返回的结果是新数组的长度；
<4> 原数组也会发生变化
(2)unshift
在我们的数组**开头**添加一个或者多个数组元素
arr.unshift(7,5)；
console.log(arr); //输出结果: 7,5,1,2,3,4,5,4;
<1> unshift是可以给数组追加新的元素；
<2> unshift()参数直接写 数组元素就可以；
<3> unshift完毕后，返回的结果是新数组的长度；
<4> 原数组也会发生变化
(3)pop();
只删除**最后一个**元素 **一次只能删除一个**
sonsole.log(arr.pop());// //输出结果: 4;
sonsole.log(arr);// //输出结果: 7,5,1,2,3,4,5;
<1> pop是可以给删除数组最后一个元素，一次只能删除一个元素；
<2> pop()没有参数；
<3> pop完毕后，返回的结果是删除的元素；
<4> 原数组也会发生变化
(4)shift();
只删除**第一个**元素 **一次只能删除一个**
sonsole.log(arr.shift());// //输出结果: 7;
sonsole.log(arr);// //输出结果: 5,1,2,3,4,5;
<1> shift是可以给删除数组第一个元素，一次只能删除一个元素；
<2> shift()没有参数；
<3> shift完毕后，返回的结果是删除的元素；
<4> 原数组也会发生变化
slice()数组的截取
slice()数组的截取
不会影响到原数组
将截取到的数组作为返回值返回
第一个参数是开始位置（包含）
第二个参数是结束位置（不包含）
也支持负数
splice()删除元素
会影响到原数组
第一个参数是开始删除的位置
第二个参数是删除的个数
函数
function 函数名（）{
函数体；
}
函数名一般为动词，函数不调用自己不执行
调用函数： 函数名(); 通过调用函数名来执行函数。function
事件驱动函数：在和页面交互的过程中所调用的函数。
prompt:弹出输入框构造函数：
就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面
(1) 构造函数 例 明星 泛指的某一大类
function 构造函数名(形参， 形参， 形参){
this.属性 = 值；
this.方法 = function(形参 ){}
}
//调用方法 new 构造函数名(实参， 实参， 实参);
// var XXX = new 构造函数名();
(1) 构造函数的首字母要大写
(2) 构造函数不用return 就可以返回结果
(3) 我们调用构造函数 必须使用new
(4) 我们只要 new 构造函数名() 调用函数就创建一个对象
(5) 我们的属性和方法 前面必须添加this
(2) 对象 特指 是一个具体的事物
//new 关键字执行过程
//1.new 构造函数可以再内存中创建一个空的对象
//2.this 就会指向刚创建的空对象
//3.执行构造函数里面的代码 给这个空对象添加属性和方法
//4.返回这个对象
对象
<1>利用对象字面量创建对象{}
var obj = {
uname: "张三"，
age: 18,
sex: "男",
sayhi:function(){
console.log('hi~');
}
}注意事项
(1) 里面的属性或者方法我们采用键值对的形式 键 属性名： 值 属性值
(2) 多个属性或者方法中间使用逗号隔开
(3) 方法冒号后面跟的是一个匿名函数
<1>使用对象
(1)调用对象的属性 我们采用 对象名.属性名
console.log(obj.uname);
(2)调用属性还有一种方法 对象吗['属性名']
console.log(obj['uname']);
(3)调用对象的方法 sayhi 对象名.方法名() 千万别忘记小括号
obj.sayhi();
<2>利用 new Object 创建对象
var obj = new Object();
obj.uname = '张三';
obj.age = 18;
obj.sex = '男'；
obj.sayhi = function(){
console.log('hi~');
}
(1)我们是利用 等号 = 复制的方法添加对象的属性和方法
(2)每个属性和方法之间用分号技术遍历对象：
for (变量 in 对象){
}
例：
for（var k in obj){
console.log(k); // k 变量 输出后获得属性名
console.log(obj[]);//obj[]输出获得属性值
}//我们使用 for in 里面的变量我们喜欢写 k 或者key
Date（）日期对象：
是一个构造函数 必须使用new来调用创建我们的日期对象
(1) 使用Date() //如果没有参数则返回系统当前时间
var date = new Date();
console.log(date);
(2) 参数常用的写法
数字型 2019,10,01
字符串型 2019-10-01 8:8:8
var date1 = new Date(2019.10.1);
console.log(date1); //返回的是11月 不是10月
var date2 = new Date(2019-10-01 8:8:8);
console.log(date2); //返回正常
//获取Date总的毫秒数（时间戳），距离1970.1.1到今日过了多少毫秒
(1) 通过 valueOf() getTime()
var date = new Date();
console.log(date.valueOf());
console.log(date.getTime());
(2) 简单的写法
var date1 = +new Date();
console.log(date1);
(3) H5新增函数 //低版本浏览器不识别
console.log(Date.now());转换公式
天d = parseInt(总秒数 / 60 / 60 / 24 )； // 天；
时h = parseInt(总秒数 / 60 / 60 % 24 )； // 时；
分m = parseInt(总秒数 / 60 % 60 )； // 分；
秒s = parseInt(总秒数 % 60)； // 当前的秒数；倒计时例题
function countdown(time){
var timestamp = +new Date();
var inputTime = +new Date(time);
var times = (inputTime - timestamp) / 1000; //用户输入的时间减去系统的时间 除以1000得到秒数
var d = parseInt(times / 60 / 60 / 24 ); // 天;
d = d < 10 ? '0' + d : d;
var h = parseInt(times / 60 / 60 % 24 ); // 时;
h = h < 10 ? '0' + h : h;
var m = parseInt(times / 60 % 60 ); // 分;
m = m < 10 ? '0' + m : m;
var s = parseInt(times % 60); // 秒;
s = s < 10 ? '0' + s : s;
console.log( d + '天' + h + '时' + m +'分' + s + '秒');
}
console.log(countdown('2020-6-17 20:50:58'));
//根据位置返回字符
charAt(index) //返回指定位置的字符（index 字符串的索引号） 使用方法 str.charAt(0);
charCodeAt(index) //获取指定位置处的字符的ASCII码（index 索引号）使用方法 str.charCodeAt(0);
str[index] //获取指定位置处的字符 H5新增
//字符串操作方法
相拼操作：concat('字符串1','字符串2',....); 等效于 + ，+更常用；
截取操作：substr('截取的起始位置','截取几个字符'); substr(2,3)//从第二个字符开始取三个字符
替换字符：replace('被替换的字符'，'替换为的字符'); replace('a','b')//将字符a替换为b 只会替换第一个字符
字符转换为数组: split('分隔符')DOM
// DOM 文档对象模型 js操作页面名称
//文档
// 代表整个页面document
//对象
// 子节点
//模型
//关系
//找对象
var d1 = document . getElementById("d1")
var p1 = document . getElementById("p1")
console. log(d1)
//操作对象
var src二d1. innerHTML
console. log(src)
console.1og("123")document.getElementById('id') //可返回对拥有指定 ID 的第一个对象的引用。
例：button.setAttribute("class", "fa fa-toggle-on fa-lg");修改样式：this.style.color = "#000"; //适合于简单修改
1.js里面的样式采用驼峰命名法 例如：fontSize,backgroudColor;
2.js修改 style 样式操作，产生的是行内样式 比css权重高
onfocus 获得焦点；
onblur 失去焦点；
setAttributr(date-index,数值)；添加指定的属性，并为其赋指定的值。
this.getAttribute("属性名")；获取自定义函数
node.parentNode;//作为一个节点对象返回父节点。
节点操作：
1.父节点 : parentNode; //得到的是离元素最近的父级节点 如果找不到返回为空；
2.子节点 : childNodes; //所有的子节点 包含 元素节点 文本节点等等（不提倡）
children； //获取所以子元素节点 也是开发中常用的
其他操作：firstChild；//获取第一个子节点（任何节点都可获取）；
lastChild； //获取最后一个子节点（任何节点都可获取）；
firstElementChild；//获取第一个子元素节点（IE 9+支持）；
lastElementChild； //获取最后一个子元素节点（IE 9+支持）；；
//开发中常用的写法；；
ol.children[0];//获取第一个元素节点；；
ol.children[ol.children.length - 1 ];//获取最后一个
3.兄弟节点 : nextSibling; //获取下一个兄弟节点（任何节点都可获取）；
previousSibling； //获取上一个兄弟节点（任何节点都可获取）；
nextElementSibling；//获取下一个兄弟节点（IE 9+支持）;
previousElementSibling;//获取上一个兄弟节点（IE 9+支持）；
4.创建节点 : createElement('名称')；//创建元素节点；
5.添加节点 : node.appendChild(child);// node 父级 child 子级 后面追加元素 类似于数组中push（）
node.insertBefore(child,指定元素）//在指定元素前方添加元素。
6.删除节点 : node.removeChild(child);//删除父元素的一个子节点；
7.克隆节点 ：node.cloneNode();//如果（）中参数为空或者false，只克隆节点本身，不克隆子节点。三种创建元素方式的区别：
1.document.write() 创建元素 如果页面文档流加载完毕，在调用这句话会导致页面重绘。
2.
DOM事件高级:
注册事件：
方法监听注册方式:
addEventListener():
eventTarget . addEventListener (type, listener[, useCapture])
eventTarget . addEventListener ()方法将指定的监听器注册到eventTarget (目标对象)上，当该对象触发指定的事件时， 就会执行事件处理函数。
该方法接收三个参数:
●type:事件类型字符串，比如click、 mouseover，注意这里不要带on
●listener :事件处理函数,事件发生时，会调用该监听函数
●useCapture :可选参数，是一一个布尔值,默认是false。 学完DOM事件流后，我们再进一步学习
例：
btns[1].addEventListener('click', function() {
alert(22);
})；