JavaScript应用篇

JavaScript应用篇
一：JavaScript作用：
帮助浏览器对用户所提出的请求进行处理
二：Dom对象：
1.DOM全称：Document Object Mode1 文档模型对象

		2.JavaScript不能直接操作Html标签,只能通过Html标签所关联的dom对
		  象对Html标签下达指令(类似于java命令不能直接修改表文件但是可以
		  通过jdbc推送sql命令来达到目的)

三：Dom对象生命周期：

        1.浏览器在接收到html文件之后，将html文件中的标签加载到浏览器缓存中
		  每当加载一个html标签时，自动为这个标签生成一个实例对象，这个实例
		  对象就是Dom对象
		
        2.在浏览器关闭之前或请求其他资源文件之前，本次所生成的Dom对象一直
          存活在浏览器缓存中	
      
        3.在浏览器关闭时，浏览器缓存中的Dom对象将被销毁
        
        4.在浏览器请求到新的资源文件后，浏览器缓存中原有的Dom对象将会被覆盖		

四：document对象：

        1.documen对象被称为【文档对象】
        2.document对象用在浏览器内存中根据定位条件定位Dom对象

五：document对象生命周期

        1.浏览器将网页中所有的标签加载完毕后，在内存中将使用【树形结构】存
		储Dom对象，在树形结构生成瓦尼后由浏览器生成一个document对象管理
		这棵树(Dom树)
		*******在浏览器将接收页面中标签加载完毕后，自动在浏览器内存生成一个
		document对象
		
        2.一个浏览器窗口运行期间，只会生成一个document对象

        3.在浏览器关闭时，负责将document对象进行销毁

六：通过document对象定位dom对象方式：

        1.根据html标签的id属性值定位dom对象
		
		命令格式： var domObj = domcument.getElementById("id属性值");
		举个例子： var domobj = document.getElementById("one");
		           通知document对象定位id属性=one的标签关联的dom对象
				  
	    2.根据html标签name属性值定位dom对象
		
		  命令格式： var domArray = document.getElementsByName("name属性值");
		  举个例子： <input type="checkbox" name="deptNo" value="10">部门10
		             <input type="checkbox" name="deptNo" value="20">部门20
		             <input type="checkbox" name="deptNo" value="30">部门30
		  
		             var domArray = document.getElementsByName"deptNo";
					 通知document对象IANGname=deptNo的dom对象进行定位并封装
					 到数组进行返回。domArray就是一个数组存放本次返回的所有
					 dom对象
					 
		3.根据html标签类型定位dom对象
		
		  命令格式： var domArray = domcument.getElementsByTagName("标签类型名");
		  举个例子： var domArray = document.getElementsByTagName("p");
		             <p>段落标签</p>
					 通知domcument将所有段落标签所关联的dom对象进行定位
					 并把他们封装到一个数组返回

七：Dom对象对Html标签相关属性的操作案例

        1.Dom对象对标签value属性进行取值与赋值操作
		  取值操作：
		           var domObj = document.getElementById("one");
				   var num = domObj.value;
				   
		  赋值操作: 
		           var domObj = document.getElementById("one");
				   domObj.value="abc";
	    
		2.Dom对象对标签中的【样式属性】进行取值与赋值的操作
		   取值操作：
		           var domObj = document.getElementById("one");
				   //读取当前标签【背景颜色属性】值
				   var color = domObj.style.背景颜色属性
				   
		   赋值操作:
		           var domObj = document.getElementById("one"); 
				   //通过Dom对象对标签中的【背景颜色属性】进行赋值
				   domobj.style.背景颜色属性 = 值;
			
		3.Dom对象对标签中的状态属性进行取值与赋值	
		
		   状态属性：状态属性值都是boolean类型
				   
				   disabled=true; 表示当前标签不可以使用
				   disabled=false; 表示当前标签可以使用
				   
				   checked:只存在于radio与checkbox标签
				   checked=true; 表示当前标签被选中了
				   checked=false; 表示当前标签未被选中
				   
		   取值操作：
		           var domObj = document.getElementById("one");
				   var num = domObj.checked;
				   
		   赋值操作：
		           var domObj = document.getElementById("one");
				   domObj.checked=true;
		
		4.Dom对象对标签中【文字显示内容】进行赋值与取值		
		
		   文字显示内容:只存在于双目标签之间; <tr>100</tr> 100为文字显示内容
		   
		   取值操作：var domObj = document.getElementById("one");
		             var num1 = domObj.innerText;
					 
		   赋值操作：var domObj = document.getElementById("one");
		             domObj.innerText=值;
					 
		   innerText与innerHtml区别:
		             都可以对标签的文字系那是内容属性进行我赋值与取值操作
					 innerText只能接收字符串
					 innerHtml既可以接收字符串又可以接收html标签

八 JavaScript监听事件

        1.监听事件：			
		   监听用户何时以何种方式对当前标签进行操作。
		   当监听到相关行为时，通知浏览器去调用对应的JavaScript函数对当前用
		   户请求进行处理
		
		2.监听事件分类：
		   1)监听用户何时使用鼠标来操作当前标签
		   2)监听用户何时使用键盘来操作当前标签
		   
		3.监听用户何时使用鼠标来操作当前标签：
		
		   1)onclick:监听用户何时用鼠标【单机】当前标签
		   
		   2)onmouseover:监听用户何时将鼠标【悬停】在当前标签上
		   
		   3)onmouseout:监听用户何时将鼠标从当前标签上方【移开】
		   
		   4)onfocus:监听用户何时通过鼠标从当前标签【获得光标】
		   
		   5)onblur:监听用户何时通过鼠标从当前标签【丢失光标】
		 
		4.监听用户何时使用键盘操作当前标签：
		   
		   1)onketdown:监听用户何时在当前标签上【按下】键盘
		   
		   2)onkeyup:监听用户何时在当前标签上【弹起】键盘

九 onload监听事件

        1.作用:监听浏览器何时将网页中的Html标签加载完毕
		
		2.意义:浏览器每加载一个Html标签时，自动在内存生成一个dom对象
		
		       在浏览器将页面所有标签加载完毕时，意味着当前网页中所有
			   标签都生成对应dom对象。onload此时就可以触发调用函数，对
			   浏览器中标签进行处理，此时不会出现未找到Dom对象的问题
		
		3.使用:
		
		       <script type="text/javascript">
			   function fun1(){
			      window.alert("fun1 is run...");
			   }
			   </script>
			   
			   <body onload=fun1()>
			   
			   </body>

十 基于Dom对象实现监听事件与Html标签之间的绑定

        1.前提：
		
		       在实际开发过程中，同一个监听事件往往要与多个Html标签进行绑定
			   这样会增加开发强度，在未来维护过程中，也会增加维护难度
			   
		2.命令形式：			
		       domObj.监听事件名=处理函数的名  **此处处理函数的名后面不能出现()**
	    
		3.举个例子：			
		       var domObj = domcument.getElementById("one");
			   domObj.onclick =fun1; //注意函数名后面不能有括号
			   相当于<input type="button" id="one" onclick="fun1()"/> //此处函数名后面必须有括号