JavaScript——原生基础及事件

字符串中的方法

1. charAt() 返回指定位置的字符
2. length 返回字符串的长度
3. charCodeAt(): 返回指定位置的字符 的Unicode编码
4. fromCharCode(): 接受一个UniCode编码， 返回对应的字符串
5. replace(参数1，参数2): 替换
   1）想替换哪个字符串，就用哪个字符串来调用
   2）参数1是被替换的目标， 参数2是替换的新内容
   3）会将替换后的字符串，整体返回
6. substring(参数1，参数2) : 提取 介于两个下标之间的 字符串 包头不包尾 (和数组slice相似)
   参数1： 开始下标 参数2： 结束下标
7. substr(参数1，参数2): 可在字符串中 从开始位置截取指定长度的字符串 (和数组splice相似)
   参数1： 开始位置， 参数2 ： 指定长度
8. split(参数1，参数2): 用于把一个字符串 分割成字符串数组(本质上就是个数组，只是存的都是字符串罢了)
   参数1 ： 分割的依据
   参数2：(可选参数)分割后 返回的长度
   (超出实际大小，按照实际大小算。 小于实际大小的话，按照指定长度返回，超出的不返回)
9. slice(): 方法 可提取指定范围 的字符串
   参数1： 开始范围, 参数2： 结束范围 包头不包尾
10. indexOf(): 方法可返回指定字符 的对应下标 (首先出现的)，如果没有 ： 返回 -1
11. lastIndexOf(): 返回指定字符 最后出现的位置
12. toLowerCase(): 把字符串转换为小写
13. toUpperCase() : 把字符串转换为大写

Date对象

概念： Date对象是用来处理时间和日期，内置了一系列获取和设置日期和时间的方法

使用：
1.每次在使用它之前，都需要配合new关键字， 来生成一个Date对象，
2.然后通过Date对象，再去调用各种方法

备注： Date获取的是当前计算机的本地时间

方法：

1. toLocaleString()： 可把时间对象转换为字符串(我们需要的格式)
2. getTime(): 返回的是 1970年1月1日距今的 毫秒数
3. setTime(): 以毫秒数 设置Date对象
4. setFullYear(): 设置 年 月 日 （月份是0~11）
5. setMonth() : 设置 月 日 毫秒
6. setHours() : 设置 时 分 秒 毫秒
7. setMinutes(): 分 秒 毫秒
8. getFullYear(): 获取年份
9. getMonth(): 获取到月份 取值范围 0~11
10. getDate(): 获取一个月中的第几天
11. getDay(): 获取一周中的第几天
12. getHours(): 获取小时
13. getMinutes(): 获取分钟
14. getSeconds(): 获取秒数

定时器

普通定时器：

方法：
setInterval(): 会去重复执行某一个功能

代码示例：

		var box = document.getElementsByClassName("box")[0];		
		var i = 0;	
		var num = 0;  //定时器的 次数 记录器  (自定义的)
		var time = setInterval(function (){
			i = Math.floor(Math.random()*250);
			box.innerHTML = "啊啊啊~~" + i;
			num++;  //变量自增
			
				if(num > 5){  //如果到达指定条件
				//清除定时器:
				//   1. 需要有记录器(变量自增),来记录运行次数，
				//		 到达指定条件时触发
				//   2. 定义定时器时，需要定义变量来保存这个定
				//      时器(例如： time),然后使用
				//		 clearInterval()方法。来清除这个变量中
				//      的定时器，并将这个变量置空(time = null)
				clearInterval(time);
				time = null;	
				}
				
		},1000);

备注：
参数1： 每次执行的具体任务, 自定义
参数2： 每次执行的间隔时间, 自定义 单位为毫秒

单次定时器：

作用： 只执行一次的定时器

方法： setTimeout()；
参数1： 执行的具体任务
参数2： 间隔多久执行 (延迟)

代码示例：

			var time_two = setTimeout(function(){
				box.style.backgroundColor = "yellow";
				console.log("啦啦啦");
			},2000);

事件类型

单击事件：

方法： onclick（）

如何添加：

1. 获取元素，在js中给元素绑定
   备注： 直接赋值使用，不需要函数名

代码示例：

var box = document.getElementsByClassName("box")[0];
btn.onclick = function(){
	box.style.backgroundColor = "rgb(" + randomColor() 
	+ "," + randomColor() + "," + randomColor() + ")";		
}
function randomColor(){
		return Math.floor(Math.random()*(250-200)+200);
}

2. 定义好函数， 在html标签中 绑定函数

代码示例：

<button class="btn" onclick="myClick()">按钮</button>
function myClick(){
	box.innerHTML = "啊~~";
}

---

方法： onload

作用：
1）当页面(html,图片之类)加载完成后，执行的方法
2）该方法用于，包裹所有内联js代码
3）解决js获取html标签时，标签还没有加载的情况
4）先加载页面，再加载功能。 能够提高用户体验

代码示例：

window.onload = function(){
	1. 这里存放 所有内联的js代码
	2. 以保证,先加载页面,再加载js功能			
			}

方法：

1. onblur： 失去焦点
2. onfocus: 获得焦点
3. onselect: 选中文本时触发
4. onchange: 在内容发生改变是触发
5. onreset: 重置时触发

鼠标类事件：

1. ondblclick: 双击时触发
2. onmouseover： 鼠标移入
3. onmouseout： 鼠标移出
4. onmousedown : 用户在指定元素身上 按下时触发
   备注： 除非情景 需要 按下 和抬起各执行一个功能，否则，不使用，因为按下就触发，没有给用户改错的机会

键盘事件：

1. onkeydown: 用户按下键位的时候触发
2. onkeyup : 用户抬起键位时
3. onkeypress: 用户按下该键位 再抬起时触发

event对象

作用： 表示事件源本身

备注： 我们在使用的时候，以形参的形式来使用，实参由事件本身传递，使用时，一定符合见名知意： 例如： event ev evt e