javaScript学习知识整理一. JavaScript 输出 document.write() ：方法将内容写到

===============================================================

一. JavaScript 输出

document.write() ：方法将内容写到 HTML 文档中。
innerHTML ：写入到 HTML 元素
- 例：

			document.getElementById("id").innerHTML = "修改该id的html内容";

console.log() ：写入到浏览器的控制台。
console.table() : 控制台打印表格。
console.warn() : 控制台打印警告语句。
console.error() : 控制台打印报错语句。
console.clear() : 清空控制台。
window.alert()：弹出只带确认的警告，无返回值
windows.confirm() ：弹出带确认与取消的弹窗，返回boolean值
- 例：

			//确认返回true，取消返回false
			var bol = confirm("请点击确认或取消！");

windows.prompt() ：弹出带单行文本输入框，确认与取消按钮的弹窗，返回String类型值
- 例：

			//确认返回单行文本输入框的值，取消返回null
			var str = confirm("提示信息","默认值");

二. JavaScript 变量

变量名名名规则：首字母只能为字母、下划线、 $，其余的为字母、数字、下划线、$ ，不能包含其他符号且不能和关键字与保留名相同！
var
- 特点：
  - 可以在一条语句中声明很多变量。该语句以 var 开头，并使用逗号分隔变量即可。例：var a = "String",b = 'String',c = 0;
  - 一条语句中声明的多个不可以赋同一个值。例：var x,y,z=1; 结果：x,y 为 undefined， z 为 1。
  - 重复声明，第二次声明会覆盖第一次声明的值。
  - 声明的变量为局部变量，在函数内声明的变量为局部变量，在函数内不声明的变量可以作为全局变量。
let
- 特点：
  - 必须先声明，后使用！
  - 声明的变量为局部变量，只能在同一个"{ }"内使用！
  - 不可重复声明，重复声明则会报错！
const
- 特点：
  - 定义时一定要赋值
  - 定义的值为常量，不能修改!
  - 定义的数组或对象不可重新赋值，但是可以直接添加/删除/更改数组值或属性值

三. JavaScript 数据类型

字符串（String）
- 示例：

			var a = "String1";
			var b = 'String2';

数字(Number)
- 示例：

			var a = 1;
			var b = 2;

布尔(Boolean)
- 示例：

			var t = true;
			var f = false;

数组(Array)
- 定义数组方式：

					//常规方法
					var arr = new Array();
					arr[0] = "a";
					arr[1] = "b";
					...
					//简洁方法
					var arr = new Array("a","b","c",...);
					//字面量方法
					var arr = ["a","b","c",...];

对象(Object)**
- 创建对象的属性和方法：

							var obj = {
								name : "周启顺", //属性
								age : 19, //属性
								fun:function(){ //方法
									alert("你好！");
								}
							}

* 有关对象的详情，请见下面 二十四. Javascript 对象

空（Null）
- 示例: var a = null;
未定义（Undefined）
- 示例： var a;
typeof 操作符
- 语法： console.log(typeof(变量或值));
- 返回结果：
  - undefined -- 这个变量或值未定义
  - boolean -- 这个变量或值是布尔类型
  - string -- 这个变量或值是字符串类型
  - number -- 这个变量或值是数值类型
  - object -- 这个变量或值是对象或者null
  - function -- 这个变量或值是函数

四. JavaScript 函数

无参函数语法：

				function functionName(){
					//执行代码
				}

有参函数语法：

				function functionName(obj1,obj2){
					//执行代码
				}

有参且带返回值的函数语法：

				function functionName(obj1,obj2){
					//执行代码
					return obj3;
				}

五. JavaScript 事件

HTML DOM 常用对象
- javaScript事件用法：

				object.事件名=function(){方法内容};
				例：(鼠标移动到id为"id"的元素上时触发)
					document.getElementById("id").onmouseover=function(){
							//方法内容
						};

* 鼠标事件
	+ onclick      -- 当用户点击某个对象时调用的事件句柄。
	+ ondblclick   -- 当用户双击某个对象时调用的事件句柄。
	+ onmousedown  -- 鼠标按钮被按下。
	+ onmouseup    -- 鼠标按键被松开。
	+ onmouseenter -- 当鼠标指针移动到元素上时触发。
	+ onmouseover  -- 当鼠标指针移动到元素上时触发。
	+ onmouseleave -- 当鼠标指针移出元素时触发。
	+ onmouseout   -- 当鼠标指针移出元素时触发。
	+ onmousemove  -- 鼠标在元素上移动时触发。
* 键盘事件
	+ onkeydown  -- 某个键盘按键被按下，一直按着则会不断触发，返回键盘代码
	+ onkeypress -- 某个键盘按键被按下并松开，一直按着某按键则会不断触发，且 shift、alt、ctrl 等键按下并不会产生字符，所以监听无效。
	+ onkeyup    -- 某个键盘按键被松开，返回键盘代码
* 框架/对象（Frame/Object）事件
	+ onbeforeunload -- 该事件在即将离开页面（刷新或关闭）时触发
	+ onpagehide     -- 该事件在用户离开当前网页跳转到另外一个页面时触发
	+ onunload       -- 用户退出页面。 (body 和 frameset)
	+ onerror        -- 在加载文档或图像时发生错误。 ( object,body和 frameset)
	+ onload         -- 一张页面或一幅图像完成加载。
	+ onpageshow     -- 该事件在用户访问页面时触发
	+ onresize       -- 窗口或框架被重新调整大小。
	+ onscroll       -- 当文档被滚动时发生的事件。
* 表单事件
	+ onfocusin  -- 元素即将获取焦点时触发
	+ onfocusout -- 元素即将失去焦点时触发	
	+ onfocus    -- 元素获取焦点时触发	
	+ onblur     -- 元素失去焦点时触发	
	+ onchange   -- 该事件在表单元素的内容改变时触发( input, keygen, select, 和 textarea)	
	+ oninput    -- 元素获取用户输入时触发	
	+ onreset    -- 表单重置时触发	
	+ onsearch   -- 用户向搜索域输入文本时触发 (input="search")	 
	+ onselect   -- 用户选取文本时触发 ( input 和 textarea)	
	+ onsubmit   -- 表单提交时触发
* 剪切板事件
	+ oncopy   -- 该事件在用户拷贝元素内容时触发	 
	+ oncut   -- 该事件在用户剪切元素内容时触发	 
	+ onpaste -- 该事件在用户粘贴元素内容时触发
* 多媒体（Media）事件
	+ onloadstart      -- 事件在浏览器开始寻找指定视频/音频（audio/video）触发。
	+ ondurationchange -- 事件在视频/音频（audio/video）的时长发生变化时触发。
	+ onloadedmetadata -- 事件在指定视频/音频（audio/video）的元数据加载后触发。
	+ oncanplay        -- 事件在用户可以开始播放视频/音频（audio/video）时触发。
	+ oncanplaythrough -- 事件在视频/音频（audio/video）可以正常播放且无需停顿和缓冲时触发。
	+ onerror	       -- 事件在视频/音频（audio/video）数据加载期间发生错误时触发。
	+ onpause	       -- 事件在视频/音频（audio/video）暂停时触发。
	+ onplay	       -- 事件在视频/音频（audio/video）开始播放时触发。
	+ onratechange     -- 事件在视频/音频（audio/video）的播放速度发送改变时触发。
	+ ontimeupdate	   -- 事件在当前的播放位置发送改变时触发。--进度条改变时触发
	+ onvolumechange   -- 事件在音量发生改变时触发。	 
	+ onwaiting	       -- 事件在视频由于要播放下一帧而需要缓冲时触发。--用于网络较差时提醒
* 动画事件
	+ animationend       -- 该事件在 CSS 动画结束播放时触发	 
	+ animationiteration -- 该事件在 CSS 动画重复播放时触发	 
	+ animationstart     -- 该事件在 CSS 动画开始播放时触发
* 过渡事件
	+ transitionend -- 该事件在 CSS 完成过渡后触发。
* 其他事件
	+ ontoggle -- 该事件在用户打开或关闭 details 元素时触发
	+ onwheel  -- 该事件在鼠标滚轮在元素上下滚动时触发
* 鼠标/键盘事件对象
	+ button        -- 返回当事件被触发时，判断哪个鼠标按钮被点击。	
	+ pageX         -- 返回当某个事件被触发时，鼠标指针的水平坐标(对于整个页面来说，包括了被卷去的body部分的长度)。
	+ pageY         -- 返回当某个事件被触发时，鼠标指针的垂直坐标(对于整个页面来说，包括了被卷去的body部分的长度)。
	+ screenX       -- 返回当某个事件被触发时，鼠标指针的水平坐标(距离当前电脑屏幕的x，y坐标)。
	+ screenY       -- 返回当某个事件被触发时，鼠标指针的垂直坐标(距离当前电脑屏幕的x，y坐标)。
	+ clientX       -- 返回当某个事件被触发时，鼠标指针的水平坐标(距离当前body可视区域的x，y坐标)。	
	+ clientY       -- 返回当某个事件被触发时，鼠标指针的垂直坐标(距离当前body可视区域的x，y坐标)。	
	+ offsetX       -- 返回当某个事件被触发时，鼠标指针的水平坐标(相对于带有定位的父盒子的x，y坐标)。
	+ offsetY       -- 返回当某个事件被触发时，鼠标指针的垂直坐标(相对于带有定位的父盒子的x，y坐标)。
	+ ctrlKey       -- 返回当事件被触发时，判断"CTRL" 键是否被按下。
	+ altKey        -- 返回当事件被触发时，判断"ALT" 是否被按下。
	+ shiftKey      -- 返回当事件被触发时，"SHIFT" 键是否被按下。
	+ metaKey       -- 返回当事件被触发时，"meta" 键是否被按下。
	+ Location      -- 返回按键在设备上的位置	
	+ charCode      -- 返回onkeypress事件触发键值的字母代码。	
	+ key           -- 在按下按键时返回按键的标识符。	
	+ keyCode       -- 返回onkeypress事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码。	
	+ which	        -- 返回onkeypress事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码。	
	+ relatedTarget -- 返回与事件的目标节点相关的节点。
* 这些只是大部分事件，如需了解详情或者了解其他事件请[移步☞](https://www.w3cschool.cn/jsref/dom-obj-event.html)

六. JavaScript 字符串

字符串属性
- constructor -- 返回创建字符串属性的函数
- length -- 返回字符串的长度
- prototype -- 允许您向对象添加属性和方法
字符串方法
- toString() -- 返回字符串对象值(通俗讲吧布尔(Boolean)值转换为字符串类型)
- valueOf() -- 返回某个字符串对象的原始值
- split() -- 把字符串分割为子字符串数组
- charAt() -- 返回指定索引位置的字符(以0开始)
- substr() -- 从起始索引号提取字符串中指定数目的字符
- substring() -- 提取字符串中两个指定的索引号之间的字符
- trim() -- 移除字符串首尾空白
- toLowerCase() -- 把字符串转换为小写
- toUpperCase() -- 把字符串转换为大写
- toLocaleLowerCase() -- 根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射
- toLocaleUpperCase() -- 根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射
- indexOf() -- 返回字符串中检索指定字符第一次出现的位置
- lastIndexOf() -- 返回字符串中检索指定字符最后一次出现的位置
- localeCompare() -- 用本地特定的顺序来比较两个字符串
- match() -- 找到一个或多个正则表达式的匹配
- replace() -- 替换与正则表达式匹配的子串(通常只替换一个)
- search() -- 检索与正则表达式相匹配的值
- slice() -- 提取字符串的片断，并在新的字符串中返回被提取的部分
- concat() -- 连接两个或多个字符串，返回连接后的字符串
- fromCharCode() -- 将指定的 Unicode 值转换为字符串
- charCodeAt() -- 返回指定索引位置字符的 Unicode 值
如需了解详情请移步☞

七. JavaScript 运算符

JavaScript 算术运算符
- "+" -- 加法
- "-" -- 减法
- "*" -- 乘法
- "/" -- 除法
- "%" -- 取模（余数）
- "++" -- 自增
- "-"- -- 自减
JavaScript 赋值运算符
- "=" -- 等于
- "+=" -- 加等
- "-=" -- 减等
- "*=" -- 乘等
- "/=" -- 除等
- "%=" -- 取余等
JavaScript 比较运算符
- "==" -- 等于
- "===" -- 绝对等于（值和类型均相等）
- "!=" -- 不等于
- "!==" -- 不绝对等于（值和类型有一个不相等，或两个都不相等）
- ">" -- 大于
- "<" -- 小于
- ">=" -- 大于或等于
- "<=" -- 小于或等于
逻辑运算符
- "&&" -- and
- "||" -- or
- "!" -- not
条件运算符
- 返回的值 = ( 判断语句 ) ? true : false;

八. JavaScript if…else 语句

if...
- 语法：

			if (condition){       
				//当条件为 true 时执行的代码        
			}

if...else...
- 语法：

			if (condition){       
				//当条件为 true 时执行的代码        
			} else {
				//当条件为 false 时执行的代码   
			}

if...else...if...else...
- 语法：

			if (condition){       
				//当条件1为 true 时执行的代码        
			} else if(condition){
				//当条件2为 true 时执行的代码   
			} else {
				//当条件2为 false 时执行的代码   
			}

三目(三元)运算
- 语法：

			( 判断语句 ) ? 条件为 true : 条件为 false;

九. JavaScript switch 语句

语法：

		switch(n){
			case 1:
				//执行代码块 1;
				break;
			case 2:
				//执行代码块 2;
				break;
			default:
				//case 1 和 case 2 同时不执行的代码
		}

十. JavaScript for 循环

语法：

			for (语句 1; 语句 2; 语句 3){        
				//被执行的代码块        
			}

十一 JavaScript while 循环

while 循环
- 语法： while (条件){ //需要执行的代码 }
- 示例：

			var i = 0;
			while (i<5){
				console.log(i);
				 i++;
			}
					
			// 结果：
			// 0
			// 1
			// 2
			// 3
			// 4

do/while 循环
- 语法： do{ //需要执行的代码 //特点：至少执行一次 } while (条件);

十二 JavaScript Break 和 Continue 语句

Break 跳出循环
Continue 结束本次循环，开始下一次循环

十三. JavaScript 类型转换

字符串类型 String(x); x.toString();
数值类型 Number("x"); 一元运算符 + 例： x = +"1" == x=1;
布尔类型 Boolean(); 可用来判断值是否存在或者是否为空值;
json字符串，对象，数组转换
- 对象或数组转换为字符串示例：

				var obg = {
					name:"name",
					age:20,
					sex:'男'
				}
				
				var str = JSON.stringify(obg);

* 字符串转换为Json对象或数组
	示例：

				var obg = JSON.parse(str);

十四. 正则表达式

4-12位用户名（首位为字母）

				var pattern = /^[A-Za-z][A-Za-z0-9]{3,11}$/;

6-16位字符（通常为密码）

				var pattern = /^[A-Za-z0-9]{6,16}$/;

2-4位汉字

				var pattern = /^[\u4e00-\u9fa5]{2,4}$/;

6-20位所有字符

				var pattern = /^.{3,20}$/;

手机号

				var pattern = /^1[34578]\d{9}$/;

邮箱

				var pattern = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;

身份证号

				var pattern = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;

邮编

				var pattern = /^[0-9]{6}$/;

座机

				var pattern = /^((0\d{2,3})-)?(\d{7,8})(-(\d{3,}))?$|(0\d{10})$/;

用法：

				正则表达式.test(要验证的值);
				//正确返回true，错误返回false

十五. 表单

获取表单的值
- 语法： var value = document.forms["form的name"]["input的name"].value;
- 示例：

			//html
			<form name="formName" action="" onsubmit="return validateForm();" method="post">
				text: <input type="text" name="inputName">
				<input type="submit" value="提交">
			</form>
					
			//js
			<script>
				function validateForm(){
					var textVul = document.forms["formName"]["inputName"].value;
					console.log(textVul);
				}
			</script>

十六. Json

创建
- 示例：

			var json = {
				"key1" : "value1",
				"key2" : 2,
				"key3" : 's',
				"object" : [
					{
						"id" : 1,
						"name" : "name1"
					},
					{
						"id" : 2,
						"name" : "name2"
					},
					{
						"id" : 3,
						"name" : "name3"
					}
				]
			}

遍历：
- $.each()
  - 示例：

				$.each(json,function(index,item){
					// index == key
					// item == value
					console.log(index);
					console.log(item);
					$.each(json.object,function(index2,item2){
						console.log(index2);
						console.log(item2);
					})
				})

添加：共三种方法
- json.push() 在json对象数组的末尾添加一个json对象
  - 示例：

				var newJson1 = {
					"key4" : "value4"
				}
				var newJson2 = {
					"id" : 4,
					"name" : "name4"
				}
						
				json.push(newJson1);
						json.obiect.push(newJson2);

* json.unshift() 在json对象数组的前面添加一个json对象
	+ 示例：

				json.unshift(newJson1);
				json.obiect.unshift(newJson2);

* json.splice(index,0,jsonValue) 在任意位置添加，index:要添加的位置(以0开始)；0：未知，不需要修改；jsonValue：要添加的值
	+ 示例：

				json.splice(1,0,newJson1);//添加到第二位
				json.object.splice(1,0,newJson2);//添加到第二位

删除：共两种方法
- delete json[index];
  - 示例：

				delete json.key1;
				delete json.object[0];

* json.splice(0,1); 两个参数，第一个参数为要删除参数的下标，第二个参数为要删除的个数
	+ 示例：

				json.splice(0,1);
				json.object.splice(0,1);

修改
- 直接用新值替换旧值
  - 示例：

				json.key1 = "value";
				json.object[0].name = "name";

* json.splice(0,1,jsonValue); 三个参数，第一个参数为要替换参数的下标，第二个参数为要删除的个数，第三个要替换的值
	+ 示例：

				json.splice(1,1,newJson1);//替换第二位的值
				json.object.splice(1,2,newJson2);//替换第二位的值，并删除第三位的值

如需了解详情请移步☞

十七. javascript:void(0)

当想定义一个死的a标签时，可以使用javascript:void(0)
- 示例：

				<a href="">点击返回文档头部</a>
				<a href="#">点击返回文档头部</a>
				<a href="javascript:void(0)">点击毫无反应</a>

十八. JavaScript 函数

定义函数
- 语法： function 函数名(参数) {
  //执行的代码
  }
匿名函数
- 语法： function (参数) { //匿名函数既无函数名，调用只能自调 //执行的代码
  }
- 匿名函数自调： (function (参数) { //匿名函数既无函数名，调用只能自调 //执行的代码
  })(传参);
闭包(避免全局变量被再次定义)
- 示例：

			//全局变量未闭包
			var num = 10;
			function add(){
				num++;
			}
			add(); // 11
			add(); // 12
			num = 100;
			add(); // 101
			add(); // 102
					
			//全局变量闭包
			function funAdd(){
				var num = 10;
				return function(){
					num++;
				}
			}
			add(); // 11
			add(); // 12
			num = 100;
			add(); // 13
			add(); // 14

十九. JavaScript 获取节点

document.getElementById("id");
- 通过 id 查找 HTML 元素 -- 单个元素
document.getElementsByClassName("class");
- 通过标签名查找 HTML 元素 -- 集合元素
document.getElementsByName("name");
- 通过标签name属性的值查找 HTML 元素 -- 集合元素
document.getElementsByTagName("tagname");
- 通过标签名查找 HTML 元素 -- 集合元素
document.querySelector();
- 返回文档中匹配指定的CSS选择器的第一元素,相当于Jquery的$("选择器:firse"); -- 单个元素
document.querySelectorAll();
- 返回文档中匹配指定的CSS选择器的所有元素,相当于Jquery的$(""); -- 集合元素

二十. JavaScript 更改Html

获取内容：
- 语法： //方法一 document.getElementById(id).innerHTML; //方法二 document.getElementById(id).innerText;
- 示例：

			//html
			<p id="p"><b>标签内容</b></p>
					
			//js
					
			//方法一
			var pHtml = document.getElementById("p").innerHTML;
			console.log("innerHTM："+pHtml);
			//方法二
			var pText = document.getElementById("p").innerText;
			console.log("innerText："+pText);
					
			//结果
			innerHTM：<b>标签内容</b>
			innerText：标签内容

更改内容：
- 语法： //方法一 document.getElementById(id).innerHTM =new HTML //方法二 document.getElementById(id).innerText =new HTML
- 示例：

			//html
			<p id="p1"></p>
			<p id="p2"></p>
					
			//js
					
			//方法一
			var pHtml = document.getElementById("p1").innerHTML = "innerHTML：<b>标签内容</b>";
			console.log("innerHTM："+pHtml);
			//方法二
			var pText = document.getElementById("p2").innerText = "innerText：<b>标签内容</b>";
			console.log("innerText："+pText);
					
			//结果
			innerHTM：标签内容 			//此"标签内容"带有 b 标签的加粗效果
			innerText：<b>标签内容</b>

添加属性
- 语法： document.getElementById(id).setAttribut("属性名","属性值");
- 示例：

			//给a添加内容为“点击我”的title属性
			document.getElementById("a").setAttribut("title","点击我");

获取属性值
- 语法： document.getElementById(id).getAttribut("属性名");
- 示例：

			//获取img的src
			document.getElementById("img").getAttribut("src");

更改属性
- 语法： document.getElementById(id).attribute=new value
- 示例：

			//修改img的src
			document.getElementById("img").src = "New Src";

自定义扩展属性
- 示例：

			// html
			<p id="p1" data-name1="value1" data-name2="value2"><p>
					
			//js
			val1 = document.getElementById("p1").dataset.name1;
			val2 = document.getElementById("p1").dataset.name2;
			console.log(val1 + " --- " + val2);
					
			//结果
			value1 --- value2

二十一. JavaScript 更改css内容

语法： document.getElementById(id).style.property=new style
示例：

		//修改p的color为red
		document.getElementById("p").style.color = "red";

二十二. JavaScript HTML DOM EventListener

* 语法：
		element.addEventListener(event, function, useCapture);
* 解释：
		当页面内容为活动的时候，普通方法不会执行，可使用addEventListener()
		addEventListener() 方法用于向指定元素添加事件句柄。
		addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。
		你可以向一个元素添加多个事件句柄。
* 示例一：

				//向同个元素添加不同类型的事件并且向同个元素添加多个相同类型事件，多个相同类型事件不会覆盖，两个都执行
				element.addEventListener("mouseover", myFunction);
				element.addEventListener("click", myClickFunctionA);
				element.addEventListener("click", myClickFunctionB);
				element.addEventListener("mouseout", myThirdFunction);

* 示例二：

				// 原生Js事件代理/事件委托
				var parent = document.getElementsByClassName("祖籍/父级元素");
				parent.addEventListener("事件名",function(e){
					if(e.target && e.target.nodeName.toUpperCase() == "当前元素名(大写)"){
						//事件方法
					}
				})

二十三. JavaScript 节点操作

创建节点
- 语法： // 创建节点需要五个步骤 // 1.创建标签名 var newLabel = document.createElement("标签名"); // 2.创建要向新的标签添加的内容 var text = document.createTextNode("要添加的内容"); // 3.把创建的内容添加到新的标签中 newLabel.appendChild(text); // 4.获取当前已有元素 var oldLabel = document.getElementById("id"); // 5.将创建的新的标签插入到旧的标签内 oldLabel.appendChild(newLabel);
- 示例：

			//html
			<div id="div">
				<p>子节点</p>
			</div>
					
			//js
			var nweP = document.createElement("p");
			var text = document.createTextNode("新的子节点");
			nweP.appendChild(text);
			var fDiv = document.getElementById("div");
			fDiv.appendChild(nweP);
					
			//结果
			子节点
			新的子节点

插入节点
- 语法： // 方法一父节点.appendChild(要添加的新节点);//详情可见上面创建节点 // 方法二父节点.prepend(要添加的新节点);// 添加到父元素的开头 // 方法三父节点.insertBefore(要插入的新节点,当前节点);
- 示例：

			//方法一
			//此方法只能把新的节点插入到父节点的最后，详情可见上面创建节点
					
			// 方法二
			//此方法只能把新的节点插入到父节点的前面，详情可见参考创建节点
					
			//方法三
			//此方法可以将一个新的节点插入到当前任意子节点前面
			//html
			<ul id="ul">
				<li>子节点一</li>
				<li id="li">子节点二</li>
				<li>子节点三</li>
			</ul>
					
			//js
			var fUl = document.getElementById("ul");//获取父节点
			var nweLi = document.createElement("li");//创建新的节点
			var text = document.createTextNode("新的子节点");//创建新的节点的内容
			var zLi = document.getElementById("li");//获取当前子节点
			fUl.insertBefore(nweLi,zLi);//利用 insertBefore 将新的节点插入到当前子节点 li 前面
			zLi.appendChild(text);//把创建的内容添加到新的标签中
					
			//结果
			子节点一
			新的子节点
			子节点二
			子节点三

替换节点
- 语法：父节点.replaceChild(要替换的新节点,当前节点);
- 示例：

			//html
			<ul id="ul">
				<li>子节点一</li>
				<li id="li">子节点二</li>
				<li>子节点三</li>
			</ul>
					
			//js
			var fUl = document.getElementById("ul");//获取父节点
			var nweLi = document.createElement("li");//创建新的节点
			var text = document.createTextNode("新的子节点");//创建新的节点的内容
			var zLi = document.getElementById("li");//获取当前子节点
			fUl.replaceChild(nweLi,zLi);//利用 replaceChild 将新的节点替换当前子节点
			zLi.appendChild(text);//把创建的内容添加到新的标签中
					
			//结果
			子节点一
			新的子节点
			子节点三

删除节点
- 语法：父节点.removeChiId(要删除的节点);
- 示例：

			//html
			<ul id="ul">
				<li>子节点一</li>
				<li id="li">子节点二</li>
				<li>子节点三</li>
			</ul>
					
			//js
			var fUl = document.getElementById("ul");//获取父节点
			var zLi = document.getElementById("li");//获取要删除的子节点
			fUl.removeChiId(zLi);
					
			//结果
			子节点一
			子节点三

复制节点
- 语法：要复制的节点.cloneNode(bool); //此处的 bool 是一个布尔值,当 bool 取以下值时： // 1 或 true ：表示复制节点本身以及该节点下的所有子节点 // 0 或 false ：表示只复制节点本身，不复制该节点下的子节点
- 示例：

			//html
			<ul id="ul">
				<li>子节点一</li>
				<li id="li">子节点二</li>
				<li>子节点三</li>
			</ul>
					
			//js
			var fUl = document.getElementById("ul");//获取要复制的节点
			vae newUl = fUl.cloneNode(true)//复制当前节点且复制当前节点下面的子节点
			fUl.appendChild(newUl);//将复制的几点插入到当前节点
					
			//结果
			子节点一
			子节点二
			子节点三
			子节点一
			子节点二
			子节点三

二十四. Javascript 对象

内置对象Object创建
- 语法：

			//创建对象
			var 对象名 = new Object();
			//添加属性
			对象名.属性名1 = "属性值1";
			对象名.属性名2 = "属性值2";
			//创建方法
			对象名.方法名 = function(){
				//方法体
			}

构造函数
- 语法：

			//创建函数
			function 函数名(参数){
				//方法体
			}
					
			//创建对象调用函数
			var 对象名 = new 函数名(参数1);
			var 对象名 = new 函数名(参数2);

访问对象属性
- 语法：

			// "."语法
			对象名.属性名;
			// "[]"语法 -- "[]"里面的属性名一定要加双引号
			对象名["属性名"];

访问对象方法：
- 语法：

			//访问对象只能使用"."语法
			对象名.方法名();

利用函数来定义对象，然后创建新的对象实例
- 语法：

			//利用函数来定义对象
			function 函数名(参数1,参数2){
				//创建属性
				this.属性名1 = 参数1;
				this.属性名2 = 参数2;
				//创建方法
				this.方法名 = 方法名;
				function 方法名(方法参数){
					//方法体
				}
			}
					
			//创建新的对象实例
			var 对象名 = new 函数名(传参1,传参2);
			//调用方法
			对象名.方法名(传参);

* 示例：

			//利用函数来定义对象
			function funStudent(name,age){
				//创建属性
				this.name = name;
				this.age = age;
				//创建方法
				this.show = show;
				function show(className){
					console.log("name："+this.name+"\nage："+this.age+"\nclassName："+className);
				}
			}
					
			//创建新的对象实例
			var zsStudent = new funStudent("张三",20);
			//调用方法
			zsStudent.show("18移动3班");
					
			//结果
			name：张三
			age：20
			className：18移动3班

原型与原型链
- 语法：

			//利用函数来定义对象
			function 函数名(参数1,参数2){
				//创建属性
				this.属性名1 = 参数1;
				this.属性名2 = 参数2;
				//创建方法
				函数名.prototype.方法名 = function (方法参数){
					//方法体
				}
			}
					
			//创建新的对象实例
			var 对象名 = new 函数名(传参1,传参2);
			//调用方法
			对象名.方法名(传参);

二十五. Javascript Date 对象

创建 Data 对象
- 示例：

					var data = new Date();// 当前日期和时间 
					var data = new Date(milliseconds);//返回从 1970 年 1 月 1 日至今的毫秒数 
					var data = new Date(dateString);
					var data = new Date(year, month, day, hours, minutes, seconds, milliseconds);

Date 部分对象方法
- getFullYear() -- 返回年份
- getMonth() -- 返回月份 (0 ~ 11)，一月为 0，十二月为 11
- getDate() -- 返回日期
- getDay() -- 返回星期 (0 ~ 6)，周日为 0，周六为 6
- getHours() -- 返回小时 (0 ~ 23)。
- getMinutes() -- 返回分钟 (0 ~ 59)。
- getSeconds() -- 返回秒数 (0 ~ 59)。
- getMilliseconds() -- 返回毫秒 (0 ~ 999)。
- toLocaleString() -- 据本地时间格式，把Date转换为字符串。格式：YYYY/MM/DD 上/下午HH:mm:ss
- toLocaleDateString() -- 根据本地时间格式，把日期部分转换为字符串。格式：YYYY/MM/DD
- toLocaleTimeString() -- 根据本地时间格式，把时间部分转换为字符串。格式：上/下午HH:mm:ss
- toString() -- 把 Date 对象转换为字符串。格式： Week DD YYYY HH:mm:ss GMT+0800 (中国标准时间)
- 国际时间或者其他方法请移步☞

二十六. Javascript 数组对象

定义数组方式：

				//常规方法
				var arr = new Array();
				arr[0] = "a";
				arr[1] = "b";
				...
				//简洁方法
				var arr = new Array("a","b","c",...);
				//字面量方法
				var arr = ["a","b","c",...];

数组方法：
- concat() -- 连接两个或更多的数组，并返回结果。
  - 用法：数组1.concat(数组2,数组3,...);
- every() -- 检测数组元素的每个元素是否都符合条件，全符合返回true，否则返回false
  - 用法：

				function 方法名(数组) {
						  return 数组值要满足的条件;
				}
				var 返回值 = 数组.every(方法名);

	+ 示例：

				avr num = ["20","30","10"];
				function fuNum(num) {
					//所有数字大于18
						  return num > 18;
				}
				var bol = num.every(fuNum);
				console.log(bol);
				//结果
				false

* some()        -- 检测数组元素中是否有元素符合指定条件。
* filter()      -- 检测数组元素，并返回符合条件所有元素的数组。
* indexOf()	    -- 搜索数组中的元素，并返回它所在的位置。
* lastIndexOf() -- 返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。
* push()        -- 向数组的末尾添加一个或更多元素，并返回新的长度。
* unshift()     -- 向数组的开头添加一个或更多元素，并返回新的长度。
* shift()       -- 删除数组的第一个元素。
* pop()         -- 删除数组的最后一个元素并返回删除的元素。
* splice()      -- 从数组中添加或删除元素。
	+ 语法：

				array.splice(要删除或插入的下标(必须),删除个数(必须，可以是0),要添加的元素(可选),.....)

* slice() -- 选取数组的的一部分，并返回一个新数组。
	+ 语法：

				array.slice(开始的下标,个数);

* reverse() -- 反转数组的元素顺序。
* sort()    -- 对数组的元素进行排序。
	+ 语法：

				array.sort(function(a,b){
					// return a-b //升序
					// return b-a //降序
				});

* join()     -- 把数组的所有元素放入一个字符串。
* toString() -- 把数组转换为字符串，并返回结果。
* valueOf()  -- 返回数组对象的原始值。
* map()      -- 通过指定函数处理数组的每个元素，并返回处理后的数组。

数组遍历：
- Array.forEach() 对原数组中每个元素都执行相同的操作，直接修改原数组。
  - 语法：

				Array.forEach(function(value, index, array) {
					//value：项目值，index：项目索引，array：数组本身
				})

* Array.map() -- 对原数组中每个元素都执行相同的操作，返回一个新的数组。
	+ 语法：

				var newArray = Array.map(function(value, index, array) {
					//value：项目值，index：项目索引，array：数组本身
					return 操作;
				})

* for...of
	+ 语法：

				for(变量 of 数组){};

	+ 示例：

				//创建数组
				var array = [
					{
						"name":"name1",
						"age":19
					},
					{
						"name":"name2",
						"age":20
					},
					{
						"name":"name3",
						"age":21
					}
				];
				//遍历数组
				for( arr of array){
					console.log(arr.name);
					console.log(arr.age);
				}

详情移步☞

二十七. JavaScript Math（算数）对象

Math（算数）对象方法
- 用法： Math.方法名(数值);
- random() -- 返回 0 ~ 1 之间的随机数。
- ceil(x) -- 对数进行上舍入。
- floor(x) -- 对 x 进行下舍入。
- round(x) -- 把数四舍五入为最接近的整数。
- max(x,y,z,...,n) -- 返回 x,y,z,...,n 中的最高值。
- min(x,y,z,...,n) -- 返回 x,y,z,...,n中的最低值。
- max(...数组名) -- 返回数组中的最高值，数组名前一定要添加“...”打散数组才行！max(...array);
- min(...数组名) -- 返回数组中的最低值，数组名前一定要添加“...”打散数组才行！min(...array);
- abs(x) -- 返回 x 的绝对值。
- pow(x,y) -- 返回 x 的 y 次幂。
- sqrt(x) -- 返回数的平方根。
- acos(x) -- 返回 x 的反余弦值。
- asin(x) -- 返回 x 的反正弦值。
- cos(x) -- 返回数的余弦。
- sin(x) -- 返回数的正弦。
- tan(x) -- 返回角的正切。
- atan(x) -- 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
- atan2(y,x) -- 返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。
- exp(x) -- 返回 Ex 的指数。
- log(x) -- 返回数的自然对数（底为e）。
产生min ~ max中的随机整数
- 公式： parseInt(Math.random()*(max-min+1)-min);
设置小数的保留小数位数: number.toFixed(x); x为保留位数，截取后返回的是一个字符串(不进行取舍)，如需进行计算需即先将返回值转换成数字类型;
eval(),对字符串进行简单的运算 示例：

		// eval()可以对公式字符串进行简单的运算，可以进行 +、-、*、/、% 的简单运算
		// 注意：如果公式输入错误或者字符串不为公式的话，将会报错，所以需要加上 try{}catch(e){} ;
		var text = "(1+2)*3";
		try{
			console.log(eval(text)); // 9
		}catch(e){
			console.error("公式有误！")
		}

二十八. JavaScript Window 对象

Window 对象属性
- innerHeight -- 返回窗口的文档显示区的高度。
- innerWidth -- 返回窗口的文档显示区的宽度。
- opener -- 返回对创建此窗口的窗口的引用。
- outerHeight -- 返回窗口的外部高度，包含工具条与滚动条。
- outerWidth -- 返回窗口的外部宽度，包含工具条与滚动条。
- screen -- 对 Screen 对象的只读引用。请参数 Screen 对象。
- location -- 用于窗口或框架的 Location 对象。请参阅 Location 对象。
- navigator -- 对 Navigator 对象的只读引用。请参数 Navigator 对象。
Window 对象方法
- setInterval() -- 按照指定的周期（以毫秒计）来调用函数或计算表达式。详见 JavaScript 计时事件
- clearInterval() -- 取消由 setInterval() 设置的 timeout。详见 JavaScript 计时事件
- setTimeout() -- 在指定的毫秒数后调用函数或计算表达式。详见 JavaScript 计时事件
- clearTimeout() -- 取消由 setTimeout() 方法设置的 timeout。详见 JavaScript 计时事件
- open() -- 打开一个新的浏览器窗口或查找一个已命名的窗口。
- close() -- 关闭浏览器窗口。
- history.go(1) -- 前进1个页面
- history.go(0) -- 刷新页面
- history.go(-1) -- 后退1个页面
- scrollBy(x,y) -- 按照指定的像素值来滚动内容。
- scrollTo(x,y) -- 把内容滚动到指定的坐标。
- resizeTo(x,y) -- 把窗口的大小调整到指定的宽度和高度。
  - 获取滚动高度:

						var  top= document.documentElement.scrollTop || document.body.scrollTop;

* alert()         -- 显示带有一段消息和一个确认按钮的警告框。
* confirm()       -- 显示带有一段消息以及确认按钮和取消按钮的对话框。
* prompt()        -- 显示可提示用户输入的对话框。
* print()         -- 打印当前窗口的内容。//相当于打印按钮
* blur()          -- 把键盘焦点从顶层窗口移开。
* focus()         -- 把键盘焦点给予一个窗口。

二十九. window Screen 对象

用法： Screen.属性名
属性：
- availHeight -- 返回屏幕的高度（不包括Windows任务栏）
- availWidth -- 返回屏幕的宽度（不包括Windows任务栏）
- height -- 返回屏幕的总高度
- width -- 返回屏幕的总宽度
- pixelDepth -- 返回屏幕的颜色分辨率（每象素的位数）
- colorDepth -- 返回目标设备或缓冲器上的调色板的比特深度

三十. window Location 对象

属性：
- hash -- 返回一个URL的锚部分
- host -- 返回一个URL的主机名和端口
- hostname -- 返回URL的主机名
- href -- 返回完整的URL
- pathname -- 返回的URL路径名。
- port -- 返回一个URL服务器使用的端口号
- protocol -- 返回一个URL协议
- search -- 返回一个URL的查询部分/返回参数
方法：
- assign() -- 载入一个新的文档 //在当前页面跳转，可回退
- reload(true/false) -- 重新载入当前文档 //刷新，可添加参数true:直接从服务器从新加载，不从缓存中加载
- replace() -- 用新的文档替换当前文档 //在当前页面跳转，不可回退
浏览器跳转窗口区别： location.href="新的页面的url"; //在当前页面跳转，可回退 location.assign("新的页面的url"); //在当前页面跳转，可回退 location.replace("新的页面的url"); //在当前页面跳转，不可回退 window.open("新的页面的url");//在另外新建窗口中打开窗口 window.open("新的页面的url","_blank");//在另外新建窗口中打开窗口 window.open("新的页面的url","_self");//在当前窗口中打开窗口 history.go(1);//前进1个页面 history.go(0);//刷新页面 history.go(-1);//后退1个页面

三十一. window Navigator 对象

属性：
- appCodeName -- 返回浏览器的代码名
- appName -- 返回浏览器的名称
- appVersion -- 返回浏览器的平台和版本信息
- cookieEnabled -- 返回指明浏览器中是否启用 cookie 的布尔值
- platform -- 返回运行浏览器的操作系统平台
- userAgent -- 返回由客户机发送服务器的user-agent 头部的值
用法： navigator.属性; //可忽略windows

三十二. 详见 JavaScript 计时事件

setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
- 语法：

			setInterval(code,millisec,lang);
			// code		必需。要调用的函数或要执行的代码串。
			// millisec	必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。
			// lang		可选。 JScript | VBScript | JavaScript
			clearInterval(); //关闭定时
			
			var 定时器变量名 = setInterval(function(){
				//定时执行的方法
			},时间);
			
			function 关闭方法(){
				clearInterval(定时器变量名);
			}

* 示例：

			//每隔一秒打印一个1
			var timer = setInterval(function(){
				console.log("1");
			},1000);
			
			function closeTimer(){
				clearInterval(timer);
			}

setTimeout() - 暂停指定的毫秒数后执行指定的代码
- 语法：

			setTimeout(code,millisec,lang);
			// code		必需。要调用的函数或要执行的代码串。
			// millisec	必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。
			// lang		可选。 JScript | VBScript | JavaScript
			clearTimeout(); //关闭定时
					
			var 定时器变量名 = setTimeout(function(){
				//定时之后执行的方法
			},时间);
			
			function 关闭方法(){
				clearInterval(定时器变量名);
			}

三十三. JavaScript Cookies

创建 Cookies
- 语法：

			document.cookie="cookieName=cookieValue; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";
			// expires=Thu, 18 Dec 2013 12:00:00 GMT; ：为 cookie 添加一个过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 在浏览器关闭时删除：
			// path=/ ： 使用 path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面。

修改 Cookies
- 语法：

			//重复定义即为修改
			document.cookie="cookieName=newCookieValue; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

获取 Cookies
- 语法：

			var cookieValue = document.cookie;
			//将以字符串的方式返回所有的 cookies，类型格式： cookie1=value; cookie2=value; cookie3=value;

删除 Cookies
- 语法：

			//把cookie值改为空白即为删除
			document.cookie="cookieName=; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

三十四. windiws localStorage保存本地

**特点：浏览器关闭之后数据不会消失，大小不能超过8M，只能存储字符串，不能直接存储对象或字符串，如需存储，需先将其转成字符串
保存本地数据
- 语法：

			localStorage.setItem("key", "value");

读取本地保存数据
- 语法：

			var value = localStorage.getItem("key");

删除本地本地保存数据
- 语法：

			localStorage.removeItem("key");

全部清除
- 语法：

			//清除网站所有的localStorage
			localStorage.clear();

三十五. windows.sessionStorage会话存储

特点： 浏览器关闭之后数据就会消失，大小不能超过8M，只能存储字符串，不能直接存储对象或字符串，如需存储，需先将其转成字符串
保存会话数据
- 语法：

			sessionStorage.setItem("key", "value");

读取会话保存数据
- 语法：

			var value = sessionStorage.getItem("key");

删除会话保存数据
- 语法：

			sessionStorage.removeItem("key");

全部清除
- 语法：

			//清除网站所有的sessionStorage
			sessionStorage.clear();

三十六. ES6

尽量用let代替var，防止声明提前，不允许重复声明同名变量。声明提前，破坏了程序的正常顺序。
箭头函数，所有的匿名函数，都可以用箭头代替
- 格式：

			去掉function(),改用 () =>
			如果只有一个参数，可以省略()
			如果函数体只有一句话，可以省略{}
			如果仅有一句话而且有return返回值，还可省略return
			注意：
				箭头函数内外，共用一个this,
				如果希望内外this不通用时，就不能用箭头函数。

"`"反引号使用
- 用法：

			简化复杂字符串拼接。
			语法：
				整个字符串用``反引号包裹起来，
				``中支持换行，支持,逗号，
				``中要想执行表达式/变量，只要放在${}中即可。

数组别名
- 示例：

			//数组解构：下标对应下标，不想要的值，可以不声明对应的变量，但是位置不能省略，也就是“，”不能省略。
			
			//普通数组
			var arr = ["张三","19","18移动3班"];
			var [stuName,,stuClass] = arr;
			console.log(stuName,stuClass); // 张三 18移动3班
			
			//数组对象
			var arr = [stuName:"张三",stuAge:"19",stuClass:"18移动3班"];
			var [stuName:sName,,stuClass:sClass] = arr;
			console.log(sName,sClass); // 张三 18移动3班
			//如果属性名和变量一样的话，则写一个即可
			var [stuName,,stuClass] = arr;
			console.log(stuName,stuClass); // 张三 18移动3班

三十七. 拖动

方法
- 除图片和链接之外，其他元素不支持拖动，如需拖动，需添加 draggable="true" 的属性
  - 例：
- ondragstart -- 开始拖动时触发，每次拖动触发一次
- ondrag -- 拖动时触发，在 ondragstart 触发后触发，为连续触发
- ondragend -- 结束拖动时触发，每次拖动触发一次
- ondragenter -- 当拖动元素进入到当前元素内时触发，每次触发一次，注意：当前元素一定要在被拖动元素之上，否则事件不触发
- ondragover -- 当拖动元素进入到当前元素内悬停时触发，为连续触发，不松手则一直触发，注意：使用时一定在触发事件方法体内使用 event.preventDefault(); 禁用元素默认事件
- ondragleave -- 当拖动元素离开当前元素内时触发，每次触发一次
- ondrop -- 当拖动元素在当前元素释放时触发，每次触发一次
示例：

		// html
		<div id="box" draggable="true">/div>
		<div id="divBox" draggable="true">/div>
		
		// js
		var box = document.getElementById("box");
		box.ondragstart = function(e) {
			console.log("元素被拖动");
		}
		
		box.ondrag = function(e) {
			console.log("元素拖动中");
		}
		
		box.ondragend = function(e) {
			console.log("元素被放下");
		}
		var divBox = document.getElementById("divBox");
		divBox.ondragenter = function(e) {
			console.log("拖动进入");
		}
		
		divBox.ondragover = function(e) {
			e.preventDefault();
			console.log("拖动悬停");
		}
		
		divBox.ondragleave = function(e) {
			console.log("拖动离开");
		}
		
		divBox.ondrop = function(e) {
			console.log("拖动释放");
		}

javaScript学习知识整理

一. JavaScript 输出

二. JavaScript 变量

三. JavaScript 数据类型

四. JavaScript 函数

五. JavaScript 事件

六. JavaScript 字符串

七. JavaScript 运算符

八. JavaScript if…else 语句

九. JavaScript switch 语句

十. JavaScript for 循环

十一 JavaScript while 循环

十二 JavaScript Break 和 Continue 语句

十三. JavaScript 类型转换

十四. 正则表达式

十五. 表单

十六. Json

十七. javascript:void(0)

十八. JavaScript 函数

十九. JavaScript 获取节点

二十. JavaScript 更改Html

二十一. JavaScript 更改css内容

二十二. JavaScript HTML DOM EventListener

二十三. JavaScript 节点操作

二十四. Javascript 对象

二十五. Javascript Date 对象

二十六. Javascript 数组 对象

二十七. JavaScript Math（算数） 对象

二十八. JavaScript Window 对象

二十九. window Screen 对象

三十. window Location 对象

三十一. window Navigator 对象

三十二. 详见 JavaScript 计时事件

三十三. JavaScript Cookies

三十四. windiws localStorage保存本地

三十五. windows.sessionStorage会话存储

三十六. ES6

三十七. 拖动

二十六. Javascript 数组对象

二十七. JavaScript Math（算数）对象