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">部门30var 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()"/> //此处函数名后面必须有括号
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">部门30var 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()"/> //此处函数名后面必须有括号
发布评论