**静态网页的动态效果_javaScript高级 [web基础day010]

今日内容：

1.JavaScript：
	1.ECMAScript：
	2.Bom：
	3.Dom：
	4. 事件

Dom简单学习： 为了满足案例要求

* 功能：控制html文档的内容
* 代码： 获取页面标签（元素）对象Element
	* 通过元素ID获取元素对象。
	* document.ElementById（）；
* 操作Element对象：
	1.修改属性值：
		1.明确获取的对象是哪一个？
		2.查看API文档，找其中有哪些属性可以设置
	2.修改标签体内容：
		* 属性：innerHTML
		* 代码演示：DOM：		
					1.获取对象：decument.getElementById("想获取的元素其id值");
					2.通过元素对象：可以对元素进行操作，如添加内容等： 元素对象名.innerHTML=“元素内部的HTML内容”；也可以使用innerText，但是它只能输入文本信息。

事件简单学习：

* 功能：某些组件被执行了某些操作后，触发某些代码的执行。
	* 造句：xxx被xxx，我就xxx
* 如何绑定事件：
	1.直接在html标签上，指定事件的属性（操作），属性值就是js代码。
		1.事件：onclik
				* 直接标签绑定：如：
					也可以定义一个function方法，onclick直接调用方法。
				缺点：事件和标签绑定在一起，耦合性比较高。
				* 使用docment.getElemtById获取对象，再使用onclik绑定事件。
				优点：可以避免对html代码侵入，耦合性低。
			*更换灯泡的步骤：	
					1.获取标签
					2.给标签添加点击事件
					3.每次点击切换图片

BOM：

	1.概念：Browser Object Model  浏览器对象模型
	2.组成：
		* 将浏览器
		* 划分为五个部分：
			 	 1.Navigator 浏览器对象
				 2.window 窗口对象（包含了历史记录，地址，内容（DOM对象document））
				 3.Location 地址栏对象
				 4.history 历史记录对象（当前浏览的，可以前进后退的对象）
				 5.Screen 显示器屏幕对象（不重要）
	
	3.Window：窗口对象
		1.创建
			* Window对象不需要创建，可以直接使用。
				* Window.方法名
				* Window可以省略。		方法名();
		2.方法：
			* 与弹出框有关的方法：
					* alert（） 显示带有一段消息和一个确认按钮的警告框
					* comfirm（）显示带有一段消息以及确认按钮和取消按钮的对话框（常用）
						* 如果用户点击确定按钮，则方法返回true
						* 如果用户点击取消按钮，则返回false；
					* prompt（）  显示可提示用户输入的对话框
						* 返回值：获取用户输入的值；
			* 与打开关闭有关的方法：
					* open();	打开一个浏览器窗口。
					* close(); 关闭浏览器窗口，谁调用我，我关谁。     如果直接写close，则为window.close();，而该方法是谁调用它，它就会关闭掉它，所以应该写成：新窗口.close();
			* 与定时器有关的方法：	
					* setTimeout() 在指定的毫秒数后调用函数或计算表达式
						 * 一次性定时器
						 * 参数：
						 	* js代码或者方法对象	
						 		setTimeout（"fun();",3000);		方法	
								setTimeout（"alert(我被执行了)",3000);		对象
						 	* 毫秒值		setTimeout（"alert(我被执行了)",3000);		具体js代码	 	 
					* clearTimeout(id) 取消由 setTimeout()方法设置的timeout。	
					* setInterval(fun,2000); 循环定时器，按照指定的周期（以毫秒计）来调用函数或计算表达式
					* clearInterval(id) 取消由setInterval（）设置的timeout。
	方法：Ctrl+Shift+T  ：还原浏览器历史记录。
		3.属性:
			1.获取其他BOM对象
				history
				location
				Navigator
				Screen	
			2.获取DOM对象
				window.document.getElementById("");


	4.Location:地址栏对象	
		1. 创建：
			1.window.location
			2.location
		2. 方法：
			* reload(); 刷新当前页面；	location.reload();
			* href();	获取href属性；	location.href;//获取当前地址信息  location.href="www.itcast.cn";	可以绑定点击事件，点击后自动跳转网页。
注意：在参数中传对象不需要加引号，传方法需要加对象.function函数对象如果不加括号就是对象，加对象就是方法。

	5.History：历史记录对象
		1.创建（获取）：
			1.window.history
			2.history
		2.方法：（这里的历史记录是指在一个窗口中曾经打开的多次目录，跟浏览器自带的前进后退是一样的功能）
			* back（）  加载history列表中的前一个URL。
			* forward（） 加载history列表中的下一个URL。
			* go() 加载history列表中的某个具体页面。
		3.属性：
			* length  返回当前窗口历史列表中的URL数量。

DOM：它是将html文档表达为树结构（dom树），后期可以通过树形结构的层级得出上一级的对象。

	* W3C DOM标准被分为3个部分：
		* 核心 DOM - 针对任何结构化文档的标准模型	
			* Document：文档对象 （重点
			* Element：元素对象	（重点
			* Attribute：属性对象
			* Text：文本对象
			* Comment：注释对象
			* Node：节点对象，其他5个的父对象	（重点
		* XML DOM - 针对XML文档的标准模型
		* HTML DOM - 针对HTML文档的标准模型
 一句话来讲：DOM 将标签都封装成对象，让我们能方便的去操作这些标签。

		* 核心DOM模型 文档对象
			* CRUD：增删改查：
			* 创建（获取）：在html dom模型中可以使用window对象获取
					1.window.document
					2.document 
			* 方法:
				1.获取Element对象(前三个与基本选择器：id，标签，class；）：
					* getElementById(): 根据id属性值获取元素对象。id属性值一般唯一。
					* getElementsByTagName(): 根据元素名称获取元素对象们。返回值是一个数组。    
							* 比如：document.getElementsByTagName("div");
					* getElementSByClassName():根据Class属性值获取元素对象们，返回值是一个数组。
							* 比如: document.getElementsByClassName("cls1");
					* getElementsByName():根据name属性值获取元素对象们，返回值也是一个数组。
							* 比如：document.getElementsByName("username");
						1.name属性值一般用于表单提交，所以不是所有的标签都会有name属性值，所以最好一般不要用name的方法来获取元素。input标签一般会有name属性。
						2.如果有重复的id标签，但是document.getElementById返回的id是获取第一个id的对象，而不会报错。
				2.创建其他DOM对象：
						* createAttribute(name)  :创建属性
						* createComment()： 创建注释
						* createElement()：创建元素
						* createTextNode()： 
				这里创建的对象跟当前的html页面没有任何关系，所以需要使用这些元素的时候需要添加进来。这些对象是空，需要自己为其添加内容。
		
				* 属性：
			* Element:元素对象
				1.获取/创建：通过document来获取和创建
				2.方法：
					* removeAttribute():删除属性
					* setAttribute():添加属性   
							如：var element_img= document.getElementsByClassName
								element_img.setAttribute("class",img);
				3.应用：可以用来与控件绑定事件，对其他的元素添加属性和删除属性。
			* Node： 节点对象，其他5个的父对象
				* 特点：所有DOM对象都可以被认为一个节点。
				* 方法：
						* CRUD 树：
								* appendChild(): 向节点的子节点列表的结尾添加新的子节点
								* removeChild(): 删除（并返回）当前节点的子节点
								* replaceChild():用新节点替换一个子节点
				  
				* 属性：
						* parentNode 返回节点的父节点。
		

		* HTML DOM
			 1.标签体的设置和获取：innerHTML
					* 替换：元素名.innerHTML="

事件监听机制:

	* 概念：某些组件被执行了某些操作后，触发某些代码的执行。
		* 事件： 某些操作，如：单击，双击，键盘按下了，鼠标移动了 	
		* 事件源：组件。 如： 按钮  文本输入框...
		* 监听器： 它是一些代码，当事件发生时，这些代码会被执行。
		* 注册监听：将事件，事件源，监听器结合在一起。当事件源上发生了某个事件，则触发执行某个监听器代码。
	* 常见的事件：
		1.点击事件
			* onclick：单击事件
			* ondbclick：双击事件
		2.焦点事件
			* onblur：失去焦点
			* onfocus：元素获得焦点
		3.加载事件
			* onload：一张页面或一幅图像被加载完成
					* window.onload=function(){};
		4.鼠标事件
			* onmusedown  鼠标按键被按下
					* 定义方法时，定义一个形参，接受event对象
					* event对象的button属性可以获取鼠标	 
			* onmouseup	鼠标按键被松开
			* onmousemove 鼠标被移动
			* onmouseover 鼠标移到某元素之上
			* onmouseout 鼠标从某元素移开
		5.键盘事件
			* onkeydown  某个键盘按键被按下
			* onkeyup 某个键盘按键被松开
			* onkeypress 某个键盘按键被按下并松开
		6.选择和改变
			* onchange 域的内容被改变
			* onselect 文本被选中
		7.表单事件：
			* onsubmit	确认按钮被点击。
				* 可以阻止表单的提交
					* 方法返回false阻止表单提交
			* onreset	重置按钮被点击。

我们只需要给具体的标签添加事件，到时候如果有事件被触发，对应的代码就会执行。
		transition：margin-top 200ms;  动画。




/^[\u4e00-\u9fa5]+$/  中文