JS的基本语法知识概括（ECMA、DOM、BOM）

1.javaScript的简介：
1.理解：
js是一种解释性、即使编译的编程语言。应用于web应用的脚本语言，非web环境下也可以使用
2.作用：
1.js可以实现html标签的动态效果
2.js可以对便签的增删改查
3.js可以实现对浏览器对象的操作
4.js可以实现前端页面和后台交互：ajax
3.使用：
1.行内引入：
通过标签属性:

<input type='button' value="提交"  onclick="javascript:alert('xx');">

	2.内联引入：
		通过<script>标签引入，可以写在html的任何位置

<script type="text/javascript">alert("haha");</script>

	3.外联引入：

定义.js后缀的文件通过<script src ="路径">

4.语法特点

1.js代码写在<script>标签内
	2.js的注释//注释/注释/    /*注释/
	3.每句代码结束使用分号
	4.js语法要求不是那么严格

5.js的组成

1.ECMAScript：js的核心语法：变量、函数、事件
	2.DOM：Document  Object Model：文档对象模型html标签
	的增删改查
	3.BOM：Browser Object Model：浏览器对象模型
	 操作浏览器对象：刷新 前进  后退...
	 

6.ECMAScript基本语法：

1.变量的声明

1.var 变量名 = 值：或者var 变量名；（推荐）
		2.变量名 = 值；或者变量名；

2.数据类型：

		1.undefined(未定义)  var 变量名
		2.number   数值类型：var a = 1; var b = 3.14
		3.object对象类型：null...
		4.sting字符串类型：var   str=“root”；
		5.boolean布尔值：var  flag = true/false;
		

3.运算符：

1.算数运算符：+、-、、/、+ +、- -
	2.赋值运算符：=、+=、-=、=、/=、%=
	3.比较运算符：>、<、>=   、
	<= 、!= 、=== 、==
	4.逻辑运算符：&&、||、！
	5.位运算符：^、>>、<<、>>>、 <<<
	6.三目运算：表达式?值1：值2;
	
	

4.流程控制
1.分支结构

	1.if（条件表达式）{代码块;}
	2.if（条件表达式）{代码块1；}else{代码块2；}
	3.if（条件表达式1）{代码块1；}
	else if（条件表达式2）{代码块2}
	4.switch(表达式){case  值1：}

2.循环结构：

1.while（循环条件）{代码块；}
			2.do{代码块}while（循环条件）；
			3.for循环
				例：for（var i= 1;i<=10;i++）
			不同点：
				1.while循环先判断条件再执行   
				  do....while 先执行在判断
				2.起始条件如果不满足 while不执行  
				  do...while执行一次
				3.注意事项：当起始条件满足：初始值相同  循环条件相同  改变循环变量也相同  循环次数就相同


	

5.函数（java中叫方法）

	1.自定义函数
		1.无参、无返回值
			function   func01(){console.log("无参 无返回值")}
		2.有参、无返回值
			function   func02(i,j){console.log(“有参无返回值”);}
		3.无参、有返回值
			function   func03(){return  "无参  有返回值"}
		4.有参、有返回值
			function   func04(name,age)  {return  name}
		5.匿名函数
			var   func = function(){console.log("匿名函数")}
	2.常见函数：
		1.字符串常见函数
		2.数组常见函数
		3.定时器函数
		4.弹框函数
		5.dom相关函数
		6.bom相关的函数
		
6.字符串

		1.定义字符串：var  str01 = "abcedfg"；
		2.获取字符串的长度：   str01.length
		3.判断字符串以xx开头：str01.startsWith("a")
		4.根据下标获取字符：str01.charAt(2)
		5.判断字符串以xx结尾：str01.endWith("c");
		6.根据字符获取下标：str01.indexOf("b")
		7.截取字符串：str01.substring（1，2）；含头不含尾
		8.str01.substr(2,2);参数一 ：开始下标 参数二：截取长度
		9.分割字符串 返回一个数组 str01.split("b");
		
	

7.数组：js的数组

	1.定义数组:
		1.var  arr01 = new Array(5);
		2.var  arr02 = [1,2,3,4,5,true,null]
		3.var arr04 = new Array(3,2,1,null,false,"hehe")
	2数组添加元素
		1.arr01[下标] = 值；arr01[1]= 2;
		2.arr.push（值）；
	3.数组元素删除：
		delete   arr01[下标]
	4.数组的遍历：
		for（var  index in  arr01）{arr01[index];}
	5.数组中的每一个元素拼接成字符串
		arr01.join（“”）

8.常见弹框：

1.弹警告框：
			alert（“”）；
		2.弹输入框：
			prompt("请输入你喜欢的nba球星"，“KOBe”);     参数1：提示信息   参数2：默认值可以不写
		3.弹提示信息：
			function  del（）{if    （confirm（“确定删除吗？”））}


	

9.事件：

	1.点击事件onclick
	2.双击事件ondbclick
	3.内容改变事件onchange
	4.获取焦点事件 onfocus
	5.失去焦点事件 onblur
	6.鼠标放上事件 onmouseover
	7.鼠标移出事件onmouseout
	8.键盘按下事件  onkeydown
	9.键盘抬起事件 onkeyup

10.打印：测试使用

1.打印浏览器到控制台：console.log();
	2.打印浏览器页面：可以打印标签 document.write（）；即给打印的内容加标签修饰

11.定时器：

		1.一次性定时器：只能执行一次
			var  id = setTImeout（回调函数，时间）；定义一次性定时器。参数一：执行的动作   匿名函数 或者函数名   参数2：时间ms
			clearTimeout（id）:清除定时器
		2.循环定时器：
			var  id = setInterval（回调函数,时间）定义循环定时器      参数1：执行的动作    匿名函数或者函数名    参数2:时间ms多久执行一次
			clearInterval（id）:清除循环定时器
			

2.DOM（Document Object Model）：文档对象模型
1.作用：元素标签的增删改查
2.查：

1.基本查询
		返回的都是集合元素
		1.通过id值获取标签元素：document.getElementById（“id值”）;
		2.通过class值来获取标签元素：document.getElementsByClassName（“class值”）
		3.通过标签名获取检查元素：document.getElementsByTagName（“标签名”）
		4.通过标签的name值获取标签元素：document.getElementsByName（“name值”）；
	2.补充（两个特殊案例）：
		1.innerHTML：获取标签中的所有内容包括标签
		2.innerText：获取标签中的文本内容
		3.元素标签对象.value:获取标签中value值
	3.高级查询：
		1.获取节点（对标签中所有的内容进行操作）：包括：空格、换行、文本、标签元素
			1.获取父节点parentNode
			2.获取第一个子节点firstChild
			3.获取最后一个子节点 lastChild
			4.获取下一个节点：nextSibling
			5.获取上一个节点：previousSibling
		2.获取标签元素：
			1.firstElementChild：获取第一个子元素标签
			2.lastElementChild：获取最后一个子元素标签
			3.nextElementSibling：获取下一个而元素标签
			4.previousElementSibling：获取上一个元素标签
			
	

3.增
1.创建元素标签：

1.var  p = document.createElement（“标签名”）；创建标签
	2.p.属性名 = 值；设置属性值
	3.document.body.appendChild（标签元素）；将标签追加到body后边
	4.document.body.insertBefore（标签1，标签2）；将标签1插入到标签2的前面
	

4.删

 1.删除元素标签：
		1.标签元素.remove（）：删除自己
		2.标签元素.parentNode.removeChild(标签元素)；通过父亲删除儿子
	

5.改

	1.替换标签
		1.标签元素对象.innerHTML="xxx":直接赋值
		2.标签元素对象.parentNode.replaceChild（参数1，参数2）；参数1：替换后的标签    参数2：要替换的标签
	2.元素标签属性和样式的操作：
		1.标签元素对象.style.样式名
		2.设置属性：setAttribute（“属性名”，属性值）
		3.获取属性：getAttribute（“属性名”）；
		4.删除属性：removeAttribute（“属性名”）；3.BOM操作：（浏览器对象模型：实现浏览器交互）

1.BOM的对象：（核心对象window）
如：window.alert();window.setInterval等
2.window下的对象：

1.document对象
2.history页面的历史记录
	有history.foward():前进相当于浏览器的前进按钮
	有history.back（）：后退相当于浏览器的后退按钮
3.location 当前页面的地址
	1.location.protocol：协议名
	2.location.port：端口号
	3.location.hostname：域名
	4.location.pathname：当前页面的路径
	5.location.href：当前页面的访问全路径
4.navigator：包含浏览器的相关信息
5.screen：获取屏幕相关信息