JavaScript应用篇
文章目录
- JavaScript应用篇
- 一、JavaScript作用:
- 二、DOM对象:
- 三、DOM对象生命周期：
- 四、document对象：
- 五、document对象生命周期:
- 六、通过document对象定位DOM对象方式:
- 七、DOM对象对HTML标签属性操作
- 八、JavaScript监听事件
- 九、onload监听事件：
- 十、基于DOM对象实现监听事件与HTML标签之间绑定
一、JavaScript作用:
帮助浏览器对用户提出请求进行处理
二、DOM对象:
- 1.DOM = Document Object Model， 【文档模型对象】
- 2.JavaScript不能直接操作HTML标签，只能通过HTML标签
关联的DOM对象对HTML标签下达指令
三、DOM对象生命周期：
- 1.浏览器在接收到html文件之后，将HTML文件标签加载到浏览器缓存中，
每当加载一个html标签时候，自动为这个标签生成一个实例对象，
这个实例对象就是DOM对象 - 2.在浏览器关闭之前或则浏览器请求其他资源文件之前，本次生成的DOM对象
一直存活在浏览器缓存中 - 3.在浏览器关闭时候，浏览器缓存中dom对象将要被销毁
- 4.在浏览器请求到新资源文件后，浏览器缓存中原有的dom对象将会被覆盖
四、document对象：
- 1.document对象被称为【文档对象】
- 2.document对象用于在浏览器内存中根据定位条件定位DOM对象
五、document对象生命周期:
- 1.在浏览器将网页中所有标签加载完毕后，在内存中将使用【树形结构】
存储这些DOM对象。在树形结构生成完毕后由浏览器生成一个document对象
管理这颗树（DOM树）
在浏览器将接收网页中标签加载完毕后，自动在浏览器内存生成一个document对象 - 2.一个浏览器运行期间，只会生成一个document对象
- 3.在浏览器关闭时，负责将document对象进行销毁
六、通过document对象定位DOM对象方式:
- 1.根据html标签的id属性值定位DOM对象
命令格式 var domObj = document.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对象将所有name属性等于deptNo的标签关联的DOM对象
进行定位并封装到一个数组进行返回。 domArray就是一个数组存放
本次返回的所有DOM对象
- 3.根据html标签类型定位DOM对象
命令格式 var domArray = document.getElementsByTagName(“标签类型名”);
举个例子 var domArray = document.getElementsByTagName(“p”);
段落标签
通知document对象将所有段落标签关联的dom对象进行定位
并封装到一个数组返回
七、DOM对象对HTML标签属性操作
- 1.DOM对象对标签value属性进行取值与赋值操作
取值操作:
var domObj = document.getElementById("one");
var num = domObj.value;
赋值操作:
var domObj = document.getElementById("one");
domObj.value = "abc";实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function fun1() {
var domArray = document.getElementsByTagName("p");
for (var i = 0; i < domArray.length; i++) {
var domObj = domArray[i];
window.alert("标签号：<p>" + domObj.innerText);
}
}
</script>
</head>
<body>
<p>第一个</p>
<p>第二个</p>
<p>第三个</p>
<br>
<input type="button" value="查看所有标签内容" onclick="fun1()" />
</body>
</html>- 2.DOM对象对标签中【样式属性】进行取值与赋值操作
取值操作:
var domObj = document.getElementById("one");
//读取当前标签【背景颜色属性】值
var color = domObj.style.背景颜色属性
赋值操作:
var domObj = document.getElementById("one");
//通过DOM对象对标签中【背景颜色属性】进行赋值
domObj.style.背景颜色属性 = 值；实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
function fun(color) {
//地位id编号等于one的div
var domObj = document.getElementById("one");
//通过dom对象对当前标签【背景颜色进行修改】
domObj.style.background = color;
}
</script>
</head>
<body>
<center>
<div style="width: 300px; height: 300px; background: chartreuse;" id="one"></div>
<input type="radio" name="two" onclick="fun('red')" />红
<input type="radio" name="two" onclick="fun('yellow')" />黄
<input type="radio" name="two" onclick="fun('blue')" />蓝
</center>
</body>
</html>- 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;实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
function fun() {
var flag = document.getElementById("two").checked;
var domArray = document.getElementsByName("one");
for (var i = 0; i < domArray.length; i++) {
domArray[i].checked = flag;
}
}
</script>
</head>
<body>
<center>
<table align="center" border="2">
<tr>
<td><input type="checkbox" id="two" onclick="fun()" />全选/全不选</td>
<td>职位</td>
<td>工资</td>
</tr>
<tr>
<td><input type="checkbox" name="one"></td>
<td>初级程序员</td>
<td>10000</td>
</tr>
<tr>
<td><input type="checkbox" name="one"></td>
<td>高级程序员</td>
<td>40000</td>
</tr>
<tr>
<td><input type="checkbox" name="one"></td>
<td>架构师</td>
<td>50000</td>
</tr>
</table>
</center>
</body>
</html>- DOM对象对标签中【文字显示内容】进行赋值与取值
文字显示内容: 只存在于双目标签之间;<tr>100</tr>
取值操作:
var domObj = document.getElementById("one");
var num1 = domObj.innerText;
赋值操作:
var domObj = document.getElementById("one");
domObj.innerText = 值；
innerText与innerHTML 区别:
innerText与innerHTML都可以对标签文字显示内容属性进行赋值与取值
innerText只能接收字符串
innerHTML既可以接收字符串又可以接收html标签实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
function fun() {
//得到文本框内的值
var str = document.getElementById("t1").value;
//赋值给div
document.getElementById("div1").innerText = str
}
</script>
</head>
<body>
<center>
<div id="div1" style="width: 200px; height: 200px; background-color: antiquewhite; color:red;"></div>
<input type="text" id="t1" />
<input type="button" value="提交" onclick="fun()" />
</center>
</body>
</html>八、JavaScript监听事件
- 1.监听事件:
监听用户在何时以何种方式对当前标签进行操作。
当监听到相关行为时，通知浏览器调用对应JavaScript
函数对当前用户请求进行处理 - 2.监听事件分类:
- 1)监听用户何时使用鼠标操作当前标签
- 2)监听用户何时使用键盘操作当前标签
- 3.监听用户何时使用鼠标操作当前标签：
- 1） onclick : 监听用户何时使用鼠标【单击】当前标签
- 2） onmouseover: 监听用户何时将鼠标【悬停】当前标签上方
- 3） onmouseout : 监听用户何时将鼠标从当前标签上方【移开】
- 4） onfocus : 监听用户何时通过鼠标让当前标签获得【光标】
- 5） onblur : 监听用户何时通过鼠标让当前标签丢失【光标】
练习实例
鼠标单机与悬停案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
function fun() {
var flag = document.getElementById("two").checked;
var domArray = document.getElementsByName("one");
for (var i = 0; i < domArray.length; i++) {
domArray[i].checked = flag;
}
}
function fun1(domObj) {
domObj.style.backgroundColor = "blue";
}
function fun2(domObj) {
domObj.style.backgroundColor = "white";
}
</script>
</head>
<body>
<!--
* 1） onclick : 监听用户何时使用鼠标【单击】当前标签
* 2） onmouseover: 监听用户何时将鼠标【悬停】当前标签上方
* 3） onmouseout : 监听用户何时将鼠标从当前标签上方【移开】
* 4） onfocus : 监听用户何时通过鼠标让当前标签获得【光标】
* 5） onblur : 监听用户何时通过鼠标让当前标签丢失【光标】 -->
<center>
<table align="center" border="2">
<tr>
<td><input type="checkbox" id="two" onclick="fun(this)" />全选/全不选</td>
<td>职位</td>
<td>工资</td>
</tr>
<tr onmouseover="fun1(this)" onmouseout="fun2(this)">
<td><input type="checkbox" name="one" /></td>
<td>初级程序员</td>
<td>10000</td>
</tr>
<tr onmouseover="fun1(this)" onmouseout="fun2(this)">
<td><input type="checkbox" name="one"></td>
<td>高级程序员</td>
<td>40000</td>
</tr>
<tr onmouseover="fun1(this)" onmouseout="fun2(this)">
<td><input type="checkbox" name="one"></td>
<td>架构师</td>
<td>50000</td>
</tr>
</table>
</center>
</body>
</html>鼠标获得与失去光标案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>User_Add.html</title>
<script type="text/javascript">
function fun1() {
//获得初始密码
var pass = document.getElementById("one").value;
if (pass == "") {
document.getElementById("one").focus();//让one对象获得光标
document.getElementById("font_1").innerText = "*密码不能为空";
} else {
document.getElementById("font_1").innerText = "*";
}
}
function fun2() {
var pass1 = document.getElementById("one").value;
var pass2 = document.getElementById("two").value;
if (pass1 != pass2) {
document.getElementById("two").focus();//让two获得光标
document.getElementById("font_2").innerText = "*两次密码不相同!"
} else {
document.getElementById("font_2").innerText = "*";
}
}
</script>
</head>
<body>
<center>
<form action="/demo1/user/add" method="get">
<table border="2">
<tr>
<td>
用户姓名：
</td>
<td>
<input type="text" name="userName" />
</td>
</tr>
<tr>
<td>
密码：
</td>
<td>
<input type="password" name="password" id="one" />
<font id="font_1" style="color: red;">*</font>
</td>
</tr>
<tr>
<td>
再次输入密码：
</td>
<td>
<input type="password" name="password" id="two" onfocus="fun1()" onblur="fun2()" />
<font id="font_2" style="color: red;">*</font>
</td>
</tr>
<tr>
<td>
性别：
</td>
<td>
<input type="radio" name="sex" value="男" />男
<input type="radio" name="sex" value="女" />女
</td>
</tr>
<tr>
<td>
邮箱地址：
</td>
<td>
<input type="text" name="email" />
</td>
</tr>
<tr>
<td>
<input type="submit" value="用户注册" />
</td>
<td>
<input type="reset" value="重置" />
</td>
</tr>
</table>
</form>
</center>
</body>
</html>- 4.监听用户何时使用键盘操作当前标签
- 1）onkeydown :监听用户何时在当前标签上【按下键盘】
- 2）onkeyup ：监听用户何时在当前标签上【弹起键盘】
按下键盘实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>键盘弹起监听事件</title>
<script type="text/javascript">
var myArray = ["smite", "tomcat", "huasiye", "lvhao", "dairenjie", "zhousiyu", "duanqiqi", "zangzhengyu", "houxingyu", "shengyifan"];
function fun1() {
//1.取得文本框中的内容
var str = document.getElementById("one").value;
//2.到数组中定位包含了指定内容的字符串
var value = "";
if (str == "") {
document.getElementById("two").style.display = "none";
return;
}
for (var i = 0; i < myArray.length; i++) {
var str1 = myArray[i];
//indexOf() "abc".indexOf("a") 会返回a在abc中第一出现的位置
if (str1.indexOf(str) != -1) {
value = value + str1 + "<br/>";
}
}
if (value == "") {
document.getElementById("two").style.display = "none";
return;
}
//3.将定位字符串作为文字显示内容填充到Div中
document.getElementById("two").innerHTML = value;
document.getElementById("two").style.display = "block";//显示
}
</script>
</head>
<body>
<center>
<div><img src="bg.png"></div>
<input type="text" id="one" size="50" style="width: 300px; position: fixed;right: 790px;" onkeyup="fun1()" />
<input type="button" style="background-color: #4e6ef2; color: #ffffff; position: fixed;right: 722px; "
value="百度一下">
<br>
<div id="two"
style="background-color: antiquewhite; color:black;width: 300px;height: 300px;position: fixed;right: 790px; display: none;">
</div>
</center>
</body>
</html>九、onload监听事件：
- 作用： 监听浏览器何时将网页中html标签加载完毕
- 意义： 浏览器在每加载一个HTML标签时，自动在内存中生成一个dom对象
在浏览器将网页所有标签加载完毕时，意味着当前网页中所有标签都
生成了对应的DOM对象，onload此时就可以触发调用函数对浏览器中
标签进行处理，此时不会出现未找到DOM对象的情况 - 使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
function fun() {
window.alert("fun run");
}
</script>
</head>
<body onload="fun()">
</body>
</html>十、基于DOM对象实现监听事件与HTML标签之间绑定
- 1.前提：
实际开发过程中，同一个监听事件往往有多个HTML标签进行绑定
这样会增加开发强度，在未来维护过程中增加维护难度 - 2.命令格式：
domObj.监听事件名 = 处理函数名 （在此处处理函数名后不能出现( )） - 3.举个例子：
var domObj = document.getElementById("one");
domObj.onclick = fun1;//注意函数名后不可以有（）
//相当于
<input type= "button" id="one" onclick="fun1()"> //此处函数名后必须有（）实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
function fun() {
var flag = document.getElementById("two").checked;
var domArray = document.getElementsByName("one");
for (var i = 0; i < domArray.length; i++) {
domArray[i].checked = flag;
}
}
function fun1() {
this.style.backgroundColor = "blue";
}
function fun2() {
this.style.backgroundColor = "white";
}
//声明一个函数，这个函数在浏览器加载页面完毕后自动被调用，
//执行时为所有数据行绑定onmouseover与onmouseout监听事件
function main() {
//1.定位所有tr标签关联的DOM对象
var domArray = document.getElementsByTagName("tr");
//2.利用for循环来实现多次绑定
for (var i = 0; i < domArray.length; i++) {
domArray[i].onmouseover = fun1;
domArray[i].onmouseout = fun2;
}
}
</script>
</head>
<body onload="main()">
<!--
* 1） onclick : 监听用户何时使用鼠标【单击】当前标签
* 2） onmouseover: 监听用户何时将鼠标【悬停】当前标签上方
* 3） onmouseout : 监听用户何时将鼠标从当前标签上方【移开】
* 4） onfocus : 监听用户何时通过鼠标让当前标签获得【光标】
* 5） onblur : 监听用户何时通过鼠标让当前标签丢失【光标】 -->
<center>
<table align="center" border="2">
<tr>
<td><input type="checkbox" id="two" onclick="fun(this)" />全选/全不选</td>
<td>职位</td>
<td>工资</td>
</tr>
<tr>
<td><input type="checkbox" name="one" /></td>
<td>初级程序员</td>
<td>10000</td>
</tr>
<tr>
<td><input type="checkbox" name="one"></td>
<td>高级程序员</td>
<td>40000</td>
</tr>
<tr>
<td><input type="checkbox" name="one"></td>
<td>架构师</td>
<td>50000</td>
</tr>
</table>
</center>
</body>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
