Javascript成长之路
零基础学习JavaScript
Day1
-
JavaScript的使用方式
使用JS的方式有三种，分别是行内式、内嵌式、外链式1.1 行内式：
在标签中使用JS语句
<input type="button" name="" id="" value="click me" onclick="alert('Hello World')"/>
1.2 内嵌式：
在html中引入script标签，在标签中写JS代码
一个HTML中可以添加多个script标签，由上到下依次执行
1.3 外链式：
在html中导入外部JS文件
注意：script标签中不能执行JS代码
<script src="JS/1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
2.JS中的注释：
单行注释是 // 多行注释是 / 多行注释 /
<script type="text/javascript">
// 单行注释
/*
多行注释
多行注释
*/
</script>
3.变量
使用关键字 var 声明变量。
// 同时声明多个变量
var weight = 120,height = 175,age = 19;
// console.log(weight);
// console.log(height);
// console.log(age);
console.log(weight,height,age);/* 一次性输出多个 */
JS中主要有六种变量类型
number、string、undefined、object、boolean、null
4.标识符和关键字
JavaScript是弱类型语言，声明变量不需要指定变量的类型。
标识符命名规则：不能以数字开头，可以使用数字字母下划线$,不能使用关键字，推荐使用小驼峰命名法
可以使用typeof查看变量的类型
Day2
var a = 3;
var name = 'zhangsan';
console.log(typeof a); /* number*/
console.log(typeof(name)); /* string*/
// typeof 返回的结果为string类型
// 1.number
var val = 3;
console.log(typeof val);/* number */
// 2.string
var str = 'this is a str'
console.log(typeof str);/* string */
// 3.boolean
var bool = false;
console.log(typeof bool);/* boolean */
// 4.undefined
var v;
console.log(typeof v);/* undefined */
// 5.null 表示空对象
var v2 = null;
console.log(typeof v2);/* object */
// 6.object 对象类型 属于复合类型
var person = {'name':'zhangsan','age':20}; //JSON格式
console.log(typeof person);
console.log(person.name,person.age);
string字符串类型
var str = 'lixingyun';
console.log(str,typeof str);
// 单引号添加转义字符后可以放在单引号中
var str = 'i\'m constraintUser';/* 转义字符算一个字符的长度 */
console.log(str);
// +号的使用
// 如果两边都是数值，执行的是数学运算
var n1 = 15,n2 = 20;
console.log(n1+n2);
// 两边都是字符串，执行的是字符串相连
var s1 = '字符串1',s2 = '字符串2';
console.log(s1+s2);
// 只要有一边是字符串类型，相加变为字符串类型
var s1 = '字符串',v1 = 56;
console.log(s1+v1,typeof (s1+v1));
// typeof的使用方式
console.log(typeof s1+v1);/* 等价于 typeof(s1) + v1 */
// typeof后面可以添加括号设置表达式的范围
day3
JS中的运算符分为：
算数运算符、逻辑运算符、关系运算符、自增自减运算符、赋值运算符
运算中的自动类型转换
1.任何类型的数据和字符串类型的数据相加，其类型将会转换成字符串类型，再进行拼接
2.任何类型除了字符串之外的数据和数值类型进行运算，都会先转换成数值类型，再进行运算，<1>和NaN做运算的结果都为NaN <2>字符串如果是纯数字，将会转换成数字，否则转换成NaN
强制类型转换
Boolean()
将别的数据类型转换成布尔类型
空字符串、null、undefined会转换成false
infinity会转成true
Number()
将别的数据类型转换成数值类型
纯数值字符串转成数值从，否则转换成NaN
parseInt()
取整（兼容Number()的功能）
parseFLoat()
取浮点数
关系运算符：
> < = >= <= == != === !==
逻辑运算符：
&& || !
Day4
1.循环和判断
1.1单分支语句
if(表达式1){
执行语句;
}
1.2双分支语句
if(){
}else{
}
1.3多分支语句
if(表达式1){
执行语句1;
}else if(表达式2){
执行语句2;
}...
else{
执行语句n;
}
2.循环
2.1for循环
/* 格式 */
for(表达式1;表达式2;表达式3){
循环体;
}
2.2while循环
while(表达式){
循环体;
}
2.3dowhile循环
do{
循环体;
}while(表达式)
while和dowhile循环的区别：
dowhile循环至少执行一次
3.break和continue
break：跳出一层循环
continue：跳出本次循环
函数
1.函数的概念、分类、作用
函数：函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块
作用：提高程序的简洁性，有利于程序的维护，提高代码的重用性，提高开发效率
分类：内置函数，自定义函数
2.函数的声明：
2.1无参函数的声明：
// 函数名(即标识符)要求见名知意
function 函数名(){
函数体;
}
2.2有参函数的声明
// 函数名(即标识符)要求见名知意
function 函数名(参数1,参数2...){
函数体;
}
3.arguements
在每一个函数内都有一个内置数组，这个数组叫做arguements,存储传入的所有参数，并按照传入的顺序进行存储
元素按照下标访问
arguements.length 获取元素的个数
4.函数的返回值
return 语句执行结束，函数调用结束
5.函数的作用域
在函数中创建的变量为局部变量，生命周期为函数的调用到调用结束
在外部创建的变量为全局变量
补充：判断闰年的条件为年份能被4或者400整除不能被100整除
6.事件驱动函数：
什么是事件驱动函数？
在和页面交互所调用的函数
什么是事件？
和页面交互的行为称之为事件
7.window.onload方法
因为html中的代码运行是从上往下的，一般在head中撰写javascript代码，所以按照执行顺序，在javascript中无法使用document.getElementById来获取到标签的。window.onload方法是在页面加载完毕才执行的，所以结合使用事件驱动的方法在window.onload触发函数中进行body中标签的获取即可
window.onload = function(){
var Object = document.getElementById(ID);
}
Day5
数组
1.概念：
数组是一种数据类型。复合数据类型，数组的作用是使用单独的变量来存储一系列的值
2.数组的定义
//使用new关键字创建
var arr = new Array(1,2,3,4,5);
//省略new关键字
var arr = Array(1,2,3,4,5);
//使用常量创建数组（推荐使用）
var arr = [1,2,3,4,5];
3.数组的属性和遍历数组
//length可以获取数组的长度
arr.length
//通过长度和循环来遍历数组
for(var i = 0;i < arr.length; i++)
console.log(arr[i]);
//for in 对数组快速遍历
for(var i in arr){
//i为数组的下标
console.log(arr[i]);
}
4.栈方法和队列方法：
4.1栈结构（FILO）:
//在数组末尾添加元素，返回值为数组中元素的个数
push()
//弹出数组末尾的一个元素，返回值为删除的元素
pop()
4.2队列结构（FIFO）：
//取出数组头部的一个元素，返回值为取出的元素
shift()
//向数组的头部添加元素，返回值为数组中元素的个数
unshift()
4.3concat:连接两个数组
//返回值为合并后的新数组
arr1.concat(arr2);
4.4slice(start,end)数组的切片(左闭右开)
//返回值为开始到结束下标对应的元素
arr.slice(0,2);
4.5splice() 完成插入，删除，替换操作
arr.splice(start,count[,新元素])
//第一个参数：截取开始下标
//第二个参数：截取的长度，若为0则不会删除数据
//第三个参数：在截取下标位置插入的元素，添加多个元素用逗号分隔开
//替换操作就是先把数据删除再在删除的位置添加元素
4.6系统提供的排序方法
//1.reverse() 将数组倒置 会改变原数组
arr.reverse();
//2.sort() 将数组升序排序 从小到大
//sort 方法 默认是按字符串进行排序的 所以19会排在9的前面
arr.sort();
4.7数组的引用类型
声明在函数中的变量或当前函数的形参，都是局部变量，在函数调用结束，会释放内存，
数组是复合数据类型/引用数据类型
！所有的复合数据类型都不存储在函数中，存储在堆段中
！函数运行的内存空间是分配好的，一旦被分配好就能不能改变了
！所有的复合数据类型中存储的都是数据的地址，所有的这种数据类型被称之为引用数据类型
字符串
1.字符串的概念和创建方式
//在JS中所有的用双引号或者单引号括起来的数据类型都是字符串类型
//字符串的类型为object
//字符串的创建方法1
var str = new String("这是一个字符串");
//2
var str = String("这是一个字符串");
//3通常使用这种方式创建方便快捷
var str = "这是一个字符串";
注意ECMAscript中的字符串是不可变的。一旦传概念就不能更改
2.字符串输出的常用函数
/*
这些方法都必须在document.write()中使用
big() 用大号字体显示字符串
blink() 显示闪动字符串
bold() 使用粗体显示字符串
fixed() 以打字机文本显示字符串
strike() 使用删除线来显示字符串
fontcolor() 使用指定颜色来显示字符串
fontsize() 使用指定尺寸来显示字符串
link() 把字符串显示为链接
sub() 把字符串显示为下标
sup() 把字符串显示为上标
*/
var str1 = "Hello World";
document.write(str1.big());
document.write(str1.blink());
document.write(str1.bold());
document.write(str1.fixed());
document.write(str1.strike());
document.write(str1.fontcolor());
document.write(str1.fontsize());
document.write(str1.link());
document.write(str1.sup());
document.write(str1.sub());
3.字符串中的重要方法
3.1charCodeAt()
// charCodeAt() 返回下标对应元素的ASCII码值
arr.charCodeAt(0);
3.2fromCharCode()
//使用string.fromCharCode()调用 ASCII对应的字符组成的字符串
//传入参数为ASCII码值，不同值用逗号隔开
string.fromCharCode(65,66,67,68,69);//ABCDE
3.3concat()
//同数组中的concat方法，对字符串进行拼接
//一般使用 + 来进行拼接
```javascript
var str1 = "123";
var str2 = "456";
var str3 = str1.concat(str2);
3.4字符串的查找
//1.indexOf() 查找子串所在的位置，找不到返回-1
arr.indexOf("lo");
//2.lastIndexOf() 查找子串最后一次出现的位置，找不到返回-1
arr.lastIndexOf("lo");
//3.search() 参数可以是字符串可以是正则表达式
4.replace()
//string.replace("oldstring"/正则表达式,"newstring") 替换字符串
//返回值为替换完成后的字符串，如果向替换字符串中多个相同的子串，就需要使用正则表达式，
//i忽略大小写 g为全局变量
arr.replace(/he/ig,'HE');
5.substring(start,end) 提取下标从start到end作为新字符串返回
6.split(“分隔符”,count)
//传入的分隔符如果为空字符串"" 则字符串会分割成单个字符
//toLowerCase() 将字符串中的大写转小写
//toUpperCase() 将字符串中的小写转大写
Day6
Math和日期对象
1.Math对象
常用的Math函数
Math.round() 四舍五入
Math.random() 0-1之间随机数
Math.max() 返回较大的数
Math.min() 返回较小的数
Math.abs() 返回参数的绝对值
Math.ceil() 向上取整
Math.floor 向下取整
Math.pow(x,y) 求x的y次方
Math.sqrt() 开根号
2.Math对象的三角函数
Math.sin() 正弦
Math.cos() 余弦
Math.tan() 正切
在JS中Math.PI == 180弧度
1弧度 = Math.PI/180
3.对象的概念
对象也是一种数据类型 引用数据类型
对象中的变量叫做属性
对象中的函数叫做方法
3.1创建对象的方式有三种
//1.使用new关键字创建对象
var tool = new Object();
//2.省略new关键字
var person = Object();
//3.使用常量创建对象
var animal = {};
一般使用第三种方式创建对象
3.2对象的属性和方法的定义与使用
//定义
a.name = "zhangsan";
//还可以赋值给下标对应的元素
a['name'] = "zhangsan";
a.run = function(){
alert("keep running!");
}
//使用
a.name;
a.run();
4.日期对象
在JS中日期也是一种数据类型 复合数据类型
//使用new关键字创建
var date = new Date();
//传入的参数可以是下列情况
Date("2021/04/16");
Date("2021-04-16");
Date(2021,04,16,21,40);
4.1日期对象的方法：
//以特定的方法显示月日年
date.toDateString();
//以特定的格式显示时分秒时区
date.toTimeString();
4.2日期对象的常用方法
//1.set/getDay() 获取一周中的某一天 从0开始 0代表周日
//2.set/getMonth() 获取日期中的月份 从0开始
//3.getTime() 获取从1970年到现在的毫秒数
//4.Date.prase(date) 返回从1970-date的毫秒数
//5.date.getDate() 返回一个月中的第几天
4.3定时器
//setInterval(func,毫秒数) 每隔传入的毫秒数就调用一次函数
//返回值为当前页面上对这个定时器的唯一标识
//clearInterval(timer) 参数为定时器的ID，可以取消定时器
4.４innerHTML
innerHTML为标签中的全部内容
4.5ECMAscript中数组新增的方法
//查找el在数组中的下标，从start下标开始查找
indexOf(el,start);
//forEach()
arr.forEach(function(item,index,array){
item:当前遍历的元素
index：当前遍历的下标
array：当前数组
})
//map() 映射 遍历-操作-返回
map(function(item,index,array){
//将数组中的元素一一传入函数处理后生成新数组返回
return item+"123";
})
//reduce() 归并
reduce(function(pre,next,index,array){
//pre 上一次遍历return后面的值
//next 当前遍历的值
return pre+next;
})
//filter() 过滤
filter(function(item,index,array){
//返回满足条件的元素
return item > 30;
})
//some() 判断return后面的条件是否存在元素成立 成立返回true否则返回false
some(function(item,index,array){
return item == 10;
})
//every() 跟some一样 但是要求所有元素都需要满足条件
4.6计时器小案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>秒表</title>
<style type="text/css">
#M{
width: 200px;
height: 400px;
background-color: #5F9EA0;
text-align: center;
position: absolute;
}
#content{
margin: 50px auto;
font-size: 30px;
color: #FFEEEE;
}
input{
width: 150px;
height: 50px;
margin: 10px;
background-color: #DEB887;
color:black;
}
</style>
<script type="text/javascript">
//封装一个函数用来获取按钮
function $(id){
return document.getElementById(id);
}
//处理数字，单个数字显示进行处理
function deal(num){
if(num < 10) return "0"+num;
else return num;
}
window.onload = function(){
var count = 0;
var timer;
$("start").onclick = function(){
timer = setInterval(function(){
count++;
$("id_s").innerHTML = deal(count%60);
$("id_m").innerHTML = deal(parseInt(count/60)%60)+":";
$("id_h").innerHTML = deal(parseInt(count/3600))+":";
},1000)
}
$('pause').onclick = function(){
clearInterval(timer);
}
$("stop").onclick = function(){
count = 0;
clearInterval(timer);
$("id_s").innerHTML = "00";
$("id_m").innerHTML = "00:";
$("id_h").innerHTML = "00:";
}
}
</script>
</head>
<body>
<div id="M">
<div id="content">
<span id="id_h">00:</span>
<span id="id_m">00:</span>
<span id="id_s">00</span>
</div>
<input type="button" id="start" value="start">
<input type="button" id="pause" value="pause">
<input type="button" id="stop" value="stop" />
</div>
</body>
</html>
Day7
BOM(Browse Object Model)
1.概念：BOM为浏览器对象模型，浏览器通过调用系统对话框向用户显示信息有三个常用函数
1.1alert()
弹出警示框，内容为参数
1.2confirm()
弹出一个带有确认和取消的警示框，点击确认返回true，取消返回false
1.3prompt()
弹出一个带有输入框的提示框
返回值为输入的内容，若内容为空则返回null
2.window.open()
expr1:要加载的url
expr2:窗口的名称后者窗口的目标
expr3:一串具有特殊意义的字符串(样式)
open("http://www.baidu.com");//重复点击都会在新窗口加载url
open("http://www.baidu.com","baidu");//重复点击不会在新页面加载url
3.sup(父窗口)和sub(子窗口)
在sup中添加一个open函数跳转到本地的sub网页，sub网页会捕获到一个opener对象，它是当前窗口的父窗口的window对象，可以使用此对象来操作父对象。
4.location属性
window.location和document.location是等效的
location包含当前加载页面的URL(统一资源定位符)的信息
URL是由多个部分组成
protoco//host:port/pathname?search#hash
协议//主机名:端口号/路径/搜索
location.href : "http://www.example.com:8080/tools/display.php?section=435#list"
location.protocol: "http:"
location.host: "www.example.com"
location.port: "8080"
location.pathname: "/tools/display.php"
location.search: "?section=435"
location.hash: "#list"
location的方法：
1.assign()
跳转到指定的url
2.reload()
重新加载当前页面，如果传入true,强制浏览器跳过浏览器的缓存，直接从源头加载页面。
3.replace()
用新的页面替换当前页面，并将新页面当作根页面(避免产生历史记录)
5.history属性
浏览器的历史记录
history.length返回当前历史记录的条数
history.back() 返回上一级
history.forward() 前进到下一条历史记录
history.go():传入参数为0会重载当前页面，传入正数会前进对应数量的记录，传入负数会后退对应数量的记录。
DOM
1.DOM的概念
DOM:Document Object Model
文档对象模型
DOM中节点的种类一共有三种
在JS中所有的节点都是对象
<div id="d1" name="con" class="txt">这是一段话</div>
//1.元素节点
<div></div>
//2.文本节点
这是一段话
//3.属性节点
id="d1" name="con" class="txt"
2.获取元素节点的方法
种类 方法
id getElementById()
class getElementsByClassName()
tagname getElementsByTagName()
name getELementsByName()
//返回的是符合条件的所有元素组成的数组
//注意getElementsByName() 不支持从某一个节点查找子节点的元素节点
//一下方法是不支持的
var divObject = document.getElementById("div1");
var nodes = divObject.getElementsByName("world");
alert(nodes);
元素节点的属性：
1.tagname 标签名
2.innerHTML 获取元素节点的内容(包括HTML)
访问这些元素使用 元素节点.属性
注意访问style样式中
访问background-color属性需要这样写a.style.backgroundColor
//根据不同的获取元素节点方式获取节点
function $(arg){
switch(arg[0]){
case "#" : return document.getElementById(arg.substring(1));
break;
case "." : return document.getElementsByClassName(arg.substring(1));
break;
default:
var str = arg.substring(0,5);
if(str == "name=")
return document.getElementsByName(arg);
else return document.getElementsByTagName(arg);
break;
}
}
3.获取节点样式
//getComputedStyle(元素节点)[待查找的样式]
var btnObject = document.getElementById('p1');
alert(getComputedStyle(btnObject)["backgroundColor"]);
4.attribute方法
//get/setAttribute() 获取/设置属性值
//removeAttribute() 删除属性
//元素节点.attribute方法和元素节点.属性方法的区别
1.class属性访问的区别，点操作是ClassName,attribute是class
2.attribute对用户自定义的属性是支持的，点操作是不支持的
3.attribute支持删除属性的操作
5.元素节点的属性
childNodes可以获取当前节点下的所有子节点
这些节点有三个属性nodeName/nodeType/nodeValue
节点类型 nodeName nodeType nodeValue
元素 元素名称 1 null
属性 属性名称 2 属性值
文本 #text 3 文本内容(不包含HTML)
firstChild() 快速找到节点的第一个子节点
lastChild() 快速找到节点的最后一个子节点
元素节点.parentNode 返回该节点的父节点
元素节点.previousSibling 返回该节点的前一个子节点
元素节点.nextSibling 返回该节点的后一个同级节点
attributes可以返回元素节点的所有属性的集合
集合是无序的并且没有重复数据
Day8
1.document.write方法
直接使用此方法会将原有的内容覆盖
2.创建节点的方法发：
createElement("标签名") //创建元素节点
createTextNode("文本内容") //创建文本节点
parent.appendChild(node) //将节点添加到parent的子节点末尾
3.insertBefore()
parent.insertBefore(newNode,oldNode);
将newNode插入到oldNode之前
4.元素节点的操作方法
//replaceChild()
parent.replace(newNode,oldNode);
//cloneNode()
node.cloneNode() 参数默认是false,改为true会将innerHTML也复制
//removeChild()
parent.removeChild(node) 删除节点node
Day9
事件详解
1.1常见的交互事件
//鼠标单击
onclick()
//鼠标双击
onabclick()
//鼠标划过
onmouseover()
//鼠标按下了
onmousedown()
//鼠标弹起了
onmouseup()
1.2关于HTML页面的常用交互事件
//表单的提交事件
form.onsubmit()
//文本框的聚焦事件
text.onfocus()
//文本框的失去焦点事件
text.onblur()
//当文本框内容发生改变并且生效时，触发
text.onchange()
//当有内容输入时
text.oninput()
2.事件对象
/*
当有某个事件发生时，会产生一个事件对象，这个事件兑现包含所有与该事件有关的信息，通过事件绑定的函数中会自动传入一个隐藏参数event
*/
```javascript
text.onchange = function(e){
//e中包含所有关于此事件的信息
console.log(e);
}
3.事件对象的常用属性
e.clientX 可视区域鼠标指针的横坐标
e.clientY 可视区域鼠标指针的纵坐标
e.pageX 页面左上角的横坐标
e.pageY 页面左上角的纵坐标
e.offsetX 针对目标元素的左上角为原点的横坐标
e.offsetY 针对目标元素的左上角为原点的纵坐标
4.键盘事件
//通过按下键盘的字符键触发
document.onpress = function(){}
//通过按下键盘的任意键触发
document.keydown = function(){}
常用做快捷键的三个属性
altKey ctrlKey shiftKey
可以根据三种属性判断用户按下的键是否为其中之一
document.keydown = function(e){
console.log(e.altKey,e.ctrlKey,e.shiftKey);
//如果按下了ctrl+shift 则输出 false,true,true
5.事件流
两种事件流模型
1.冒泡型事件流
从最特定的事件到最不特定的事件
2.捕获型事件流
从不特定的事件到最特定的事件
事件捕获的思想就是不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件
阻止冒泡的方法，在最里层添加阻止的方法
e.preventPropageation();
6.事件代理(事件委托)
事件代理的原理用到的就是事件冒泡和目标元素，把事件处理器添加到父元素，等待子元素事件冒泡，并且父元素能够通过target判断是哪个子元素，从而做相应处理
利用事件冒泡原理，将本应该添加给某元素的某事件委托给父级元素
7.事件默认的行为的阻止
//JavaScript事件本身所具有的属性，例如a标签的跳转
//Submit按钮的提交右键菜单，文本框的输入等
//阻止默认行为的方式
event.preventDefault();
event.returnValue = false;
reutrn false;
//在事件相应函数中添加上述代码即可
8.DOM2级事件
1.添加监听器
可以为元素添加多个处理函数，触发时，按照添加顺序依次执行
o.addEventListener(事件名, 响应函数, 布尔值);
2.移除监听器
o.removeEventListener(事件名, 函数);
3.事件的冒泡与捕获
在绑定事件时采用事件捕获还是事件冒泡，在定义事件监听器时可以设置第三个参数，若为false则为事件冒泡，为true就是事件捕获
<div> <span></span> </div>
//事件捕获
点击span标签，相应顺序为div > span
//事件冒泡
点击span标签，相应顺序为span > div
9.cookie
1.cookie的基本操作增删改查
1.1新增cookie
document.cookie = "key=value";
//新增带有有效期限的cookie
var oDate = new Date();
oDate.setDate(oDate.getDate()+day);
document.cookie = "cookie1=value;expries="+oDate;
1.2查询cookie
document.cookie
//若存在多个cookie则用字符串的方式返回所有的cookie
"cookie1=value;cookie2=valuecookie3=value"
1.3改cookie
document.cookie = "cookie=value";
//旧的cooki将会被覆盖
1.4删除cookie
在创建cookie的时候可以同时设置该cookie的有效期限
将有效期限设置为一个过去的时间就可以使cookie失效
从而间接删除了cookie
Day10
正则表达式
1.创建正则表达式的方式
1.1使用字面量创建正则表达式
//匹配abc字符串,忽略大小写,全局匹配
var reg = /abc/ig;
1.2使用构造函数创建正则表达式
var reg = new RegExp("abc");
2.正则表达式的修饰符
i:忽略大小写
g:进行全局匹配
3.方法
3.1match
字符串方法
将匹配到的元素按顺序放入一个数组中返回
var arr = str.match(reg);
3.2test
正则表达式的方法
对字符串进行正则匹配，匹配到返回true，否则返回false
var boolVal = reg.test(str);
3.3search
字符串方法
查找符合规则的字符串，只返回第一次匹配到的位置
var temp = str.search(reg);
3.4replace
字符串方法
将符合规则的字符替换为指定的字符串
var str = str.replace(reg,newStr);
3.5split
字符串方法
将字符串按照某一规则分割
var arr = str.split(reg);
3.6exec
正则表达式方法
将匹配成功的内容放到数组中，如果没有匹配成功则返回null
每次匹配起始位置从上一次匹配结束开始
var val1 = reg.exec(str);
var val2 = reg.exec(str);
var val3 = reg.exec(str);
4.正则表达式的语法
. 除了换行符之外的所有字符
* 进行0-n次重复匹配
+ 进行1-n次匹配,至少匹配一次
? 进行0或1次匹配
[] 限制返回,[0-9] 表示数字0到9
\w 数字字母下划线等同于[0-9a-zA-Z]
\W 非数字字母下划线
\d 数字 等同于[0-9]
\D 非数字
\s 空格
{m,n} 至少匹配m次至多匹配n次
/^ 匹配开始 $/ 匹配结尾
| 或
() 分组，将内容作为一个整体进行匹配
//可以使用RegExp对象获取匹配的内容
RegExp.$1
Day11
ES6
1.概念
ES6全程ECMAscript6 2015年发布，是javascript的新版本
2.let和const的使用
let 用来声明变量，语法和var类似但是所声明的变量只在代码块内有效
存在块级作用域，不存在声明提升，不允许重复声明（包括普通变量和函数）
const 声明一个只读变量，声明过后值不能发生改变，一旦声明就必须初始化
3.ES6的解构赋值
数组解构
var [a,b] = [1,2];//a=1,b=2
var [a=3,b] = [];//a=3,b=undefined
//当解构赋值有匹配结果且匹配结果为undefined时，自动将默认值作为返回值
对象模型的解构
let obj = {p:{start:1,line:5}};
let {p:{start,line}} = obj;
console.log(start,line);//1 5
//这里的p为匹配模式
//变量应该和属性同名，在赋值的时候会自动查找同名的属性
4.模板字符串
将变量或者表达式直接嵌入字符串
用反引号( )拼接字符串
`
反引号中可以保留HTML的代码格式，例如
`
反引号中使用${}来给变量占位，将使用的变量直接放入大括号中
5.箭头函数
1.只含有一个表达式
2.含有多条语句
3.this的指向问题
ES5定义函数：
function foo(){}
ES6定义的函数
foo = () => {}
//传递参数
foo = (a) => {return a;}
6.this的指向问题
在ES6中：
定义箭头函数后，函数中的this是指向函数定义的作用域
箭头函数可以绑定函数的作用域
var name = "jjj";
var obj = {
"name":"bob",
"foo":function(){
let s = () =>console.log(this.name);
return s;
}
}
var f = obj.foo();
f();
//在定义的对象函数中再定义一个箭头函数，在箭头函数中输出name并返回函数名
//1.该函数所在的作用域：因为此函数是在对象函数中定义的，所以作用域在foo函数中
//2.作用域指向对象foo指向的对象是obj
Day12
1.this的指向问题
//每一个函数都有一个内置变量this，this指向当前函数的主人
常见的this有下列三种
//1.在全局定义的函数，this指向的是window对象
function foo(){
console.log(this);
}
//2.在某个对象中创建的函数,this指向当前对象
var person = {
'name':'zhangsan',
'age':18,
'run':function(){
console.log(this.name);
}
}
//3.事件驱动函数中的this指向的是当前事件对象。
2.改变this的指向
//1.call
第一个参数为强制指向的对象
后面的参数为传入的参数
function foo(){
alert(this);
}
foo.call("call");
//2.apply
第一个参数为强制指向的对象
第二个参数为一个列表，存放传入的参数
function foo(){
alert(this);
}
foo.apply("apply",[0,1,2,3]);
//3.bind
预设this的指向
改变this的指向并生成新函数返回
var foo = foo.bind("bind");
3.ES6新增数组的方法
1.Array.from()
var aLi = document.getElementsByTagName("li");
var aLi = Array.from(aLi);
2.find()
功能:在数组中查找符合条件的元素，只要找到一个符合条件的元素终止遍历
arr.find(12);
//findIndex()
找到符合条件的元素返回元素下标
4.合并对象
//将所有对象合并到第一个对象中
Object.assign(Object1,Object2...)
5.拖拽三剑客
onmousedown
onmouseup
onmousemove
Day13
1.面向对象的概念
//类：一类具有相同特征的事物的抽象概念
//对象：具体的一个对象，唯一的一个实例
2.使用构造函数的方法创建一个类
function Person(name, age){
// 添加类的属性
this.name = name;
this.age = age;
//添加类的方法
this.showInfo = function(){}
this.showName = function(){}
}
上述创建的对象的所有方法都是独立的
3.prototype原型对象
在每一个函数上都有一个原型对象prototype
在prototype对象上添加的方法，构造函数创建的对象将共享原型上的所有方法
4.继承和多态
继承：将父级的属性和方法复制给子级
多态：相同类的不同表示状态
Boy类继承Person类
//继承属性
function Boy(name,age,height){
Person.call(this,name,age);
this.height = height;
}
//方法继承(原型链继承)
Boy.prototype.showInfo = Person.prototype.showInfo;
instanceof 判断一个对象是否由一个构造函数创建的
alert(b instanceof Boy);//true b是由Boy类创建的
5.ES6中类的概念
使用ES6的语法创建一个类
class Person{
constructor(name, age, gender){
this.name = name,
this.age = age,
this.gender = gender
}
//创建类的方法
sayHello(){
console.log("hello world");
}
}
类的继承
class Boy extends Person{
constructor(name,age,gender,height){
//继承父一级的属性
super(name,age,gender);
this.height = height;
}
//新添加的方法
sayBye(){}
}
5.运动和游戏开发
//运动框架
//1.在设置定时器之前终止上一个定时器
//2.if...else 将运动停止和分开