（二）JavaScript函数
-
事件三要素
-
事件源: 触发事件的标签
-
事件名:事件的名称
-
事件函数:触发事件执行的脚本
-
DOM
（一）DOM模型介绍
-
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 HTML DOM，JavaScript 能够访问和改变 HTML 文档的所有元素。
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 -
DOM对象树
-
DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树）。
-
DOM有三部分组成
- 元素节点
- 属性节点
- 文本节点
-
-
-
概念解释
- 文档节点（document对象）：代表整个文档
- 元素节点（element对象）:代表一 元素（标签）
- 文本节点（text对象）：代表元素（标签）中的文本
- 属性节点（attribute对象）：代表一个属性，元素（标签）才有属性
- 注释节点（Comment对象）：即页面中的注释
（二）查找元素
-
document.getElementById(“id属性值”) 通过id来获取单个元素
-
document.getElementsByClassName(“class属性值”) 通过class来获取元素的数组
- 实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素的获取</title>
</head>
<body>
<input type="text" name="username" class="cla" value="张三"/>
<input type="text" name="password" class="cla" value="123456"/>
</body>
<script>
//数组对象不能直接调用对象的函数或者是属性
var cla = document.getElementsByClassName("cla"); //返回的是一个数组
console.log("获取到的数量是： " + cla.length);
cla[1].onblur = function(){
console.log(cla[1].value);
}
</script>
</html>
-
document.getElementsByTagName(“标签名”) 通过标签来获取元素的数组
- 实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素的获取</title>
</head>
<body>
<input type="text" name="username" class="cla" value="张三"/>
<input type="text" name="password" class="cla" value="123456"/>
</body>
<script>
var inp = document.getElementsByTagName("input");
inp[0].onfocus = function(){
inp[0].value = ""; //获取焦点时，清空原来的值
console.log("失去焦点被触发！");
}
</script>
</html>
-
document.getElementsByName(“name属性值”) 通过class来获取元素的数组
- 实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素的获取</title>
</head>
<body>
<input type="text" name="username" class="cla" value="张三"/>
<input type="text" name="password" class="cla" value="123456"/>
</body>
<script>
//通过name属性值获取的元素对象依旧是一个数组
var na = document.getElementsByName("username");
na[0].onblur = function(){
console.log("失去焦点" + na[0].value);
}
</script>
</html>
-
document.querySelector(“选择器”) 通过选择器来获取单个元素
- 实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素的获取</title>
</head>
<body>
<div id="div" class="cla">我是一个div1</div>
<div class="cla">我是一个div2</div>
</body>
<script>
var di = document.querySelector("#div");
console.log(di.innerText);
</script>
<script>
console.log("===========================")
var cla = document.querySelector(".cla"); //如果选择器可以选中多个元素也只返回第一个
console.log(cla.innerText);
</script>
</html>
-
document.querySelectorAll(“选择器”) 通过选择器来获取元素的数组
- 实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素的获取</title>
</head>
<body>
<div id="div" class="cla">我是一个div1</div>
<div class="cla">我是一个div2</div>
</body>
<script>
//不管选择器选中多少元素，始终返回一个元素的数组
var div = document.querySelectorAll("#div");
console.log(div.length);
console.log(div[0].innerText);
</script>
<script>
console.log("===========================")
var cla = document.querySelectorAll(".cla");
console.log(cla[1].innerText);
</script>
</html>
（三）修改元素
-
修改元素的内容
-
修改元素的文本内容
- 实例：
-
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内容</title>
</head>
<body>
<div>
div
<a href="内容操作.html">点我</a>
</div>
</body>
<script>
var div = document.getElementsByTagName("div");
//标签里面的所有的文本 内容
var te = div[0].innerText;
console.log(te);
//改变标签内的文本内容，会覆盖原来所有标签内的内容
div[0].innerText = "我是改变的内容";
div[0].onclick = function(){
//该文本html会以文本形式设置
div[0].innerText = "<a href='内容操作.html'>改变的a</a>";
}
</script>
</html>
-
修改元素的html内容
- 实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内容</title>
</head>
<body>
<div>
div
<a href="内容操作.html">点我</a>
</div>
</body>
<script>
var div = document.getElementsByTagName("div");
//html内容的获取
var htm = div[0].innerHTML;
console.log(htm);
//设置html内容
div[0].innerHTML = "<a href='内容操作.html'>改变</a>";
</script>
</html>
-
修改元素的属性
-
属性值的获取
语法： var 属性值 = 元素对象.属性名；- 实例：
-
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内容</title>
</head>
<body>
<a href="www.baidu.html">点我</a>
</body>
<script>
var a = document.getElementsByTagName("a")[0];
//属性的获取
var att = a.href;
console.log(att);
//属性值的设置
a.href = "http://www.baidu.com";
</script>
</html>
-
属性值的设置
语法： 元素对象.属性名 = “属性值”- 实例：
-
改变元素的样式
- 实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内容</title>
</head>
<body>
<div></div>
</body>
<script>
var div= document.getElementsByTagName("div")[0];
div.style.width = "100px";
div.style.height = "100px";
/* 注意对于元素的样式设置属性值的分隔符省略，然后按照驼峰命名法来写*/
div.style.backgroundColor = "red";
div.onclick = function(){
div.style.backgroundColor = "blueviolet";
}
</script>
</html>
- 全选和全不选
- 实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul type="none">
<li><input type="checkbox" name="hoppy" onclick="chooseall()"/>全选</li>
<li><input type="checkbox" name="hoppy"/>敲代码</li>
<li><input type="checkbox" name="hoppy"/>唱歌</li>
<li><input type="checkbox" name="hoppy"/>跳舞</li>
<li><input type="checkbox" name="hoppy"/>跳多人运动舞</li>
</ul>
</body>
<script>
//获取
function chooseall(){
var hob=document.getElementsByName("hoppy");
var check=hob[0].checked;
for(var i=1;i<hob.length;i++){
hob[i].checked=check;
}
}
</script>
<html>
- 优化表单验证
- 表单验证实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单验证</title>
</head>
<body>
<form action="#" method="get" id="form">
<label>姓名：</label><input type="text" name="username"/><span id="user_mes"></span><br>
<label>密码：</label><input type="password" name="password"/><span id="pwd_mes"></span><br>
<label>确认密码：</label><input type="password" name="repassword"/><span id="repwd_mes"></span><br>
<input type="button" value="注册" onclick="verifyReg()"/><br>
</form>
</body>
<script>
function verifyReg(){
var username = document.getElementsByName("username")[0].value;
var pwd = document.getElementsByName("password")[0].value;
var repassword = document.getElementsByName("repassword")[0].value;
if(username == "" || username == null){
var span = document.getElementById("user_mes");
span.innerText = "用户不能为空";
span.style.color = "red";
return false;
}
if(username.length < 6 || username.length > 16){
var span = document.getElementById("user_mes");
span.innerText = "用户名应该在6到16之间";
span.style.color = "red";
return false;
}
if(pwd == "" || pwd == null){
var span = document.getElementById("pwd_mes");
span.innerText = "密码不能为空";
span.style.color = "red";
return false;
}
if(repassword == "" || repassword == null){
var span = document.getElementById("repwd_mes");
span.innerText = "密码不能为空";
span.style.color = "red";
return false;
}
if(pwd != repassword){
var span = document.getElementById("repwd_mes");
span.innerText = "两次密码输入不一致";
span.style.color = "red";
return false;
}
var fo = document.getElementById("form");
fo.submit(); //函数的作用是将表单提交给服务器
}
</script>
</html>
- 效果：
BOM(window)
定时器：在指定的时间后循环或者单次执行函数或者代码段
-
循环定时器：每间隔固定的周期都会执行一次函数或者是代码段
创建定时器
var id = setInterVal(code,time);
id 定时器标志
code：定时器执行的代码
time:定时器每次执行间隔的时间
清除定时器
clearInterval(id);-
创建：var id = window.setInterval(code,times);
id 定时器标志
code：定时器执行的代码
time:定时器每次执行间隔的时间,单位是毫秒 -
清除： window.clearInterval(id);
id指需要清除的定时的编号，是一个数字 -
实例：
- 轮播图
-
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style>
div{
width:400px;
height:300px;
margin:0 auto;
}
</style>
</head>
<body>
<!--显示的图片-->
<div><img src="../img/1.jpg" width="400px" height="300px"/></div>
</body>
<script>
var img = document.getElementsByTagName("img")[0];
var i = 1; //变量的初始化
window.setInterval(function(){
i ++;
//获取图片的地址
img.src = "../img/" + i + ".jpg";
if(i == 5){ //判断图片是否执行一个轮回
i = 0;
}
},1000);
</script>
</html>
- 时间显示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style>
div{
width:400px;
height:300px;
margin:0 auto;
}
</style>
</head>
<body>
<!--时间显示-->
<div id="div"></div>
</body>
<script>
function showTime(){
var div = document.getElementById("div");
var time = new Date();
var st = time.toLocaleTimeString();
div.innerText = st;
}
//onload事件用来设置整个窗口中的文档加载完成之后执行后面的函数
window.onload = showTime;
/*window.setInterval(function(){
var div = document.getElementById("div");
var time = new Date();
var st = time.toLocaleTimeString();
div.innerText = st;
},1000);*/
//如果定时器执行的函数时已经定义的，则只需要传递函数名
var id = setInterval(showTime,1000);
console.log(id);
//清除定时器
window.clearInterval(id);
</script>
</html>
-
一次性定时器
创建定时器
var id = setTimeOut(code,time);
id 定时器标志
code：定时器执行的代码
time:定时器每次执行间隔的时间
清除定时器
clearTimeOut(id);- 创建：var id = setTimeOut(code,time);
id 定时器标志
code：定时器执行的代码
time:定时器执行间隔的时间，单位毫秒
- 清除：clearTimeout(id);
id：表示一次性定时器的标识
- 定时器清除实例：
- 实例
- 模拟炸弹爆炸
- 一次性定时器和循环定时器联合使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style>
img{
display: none;
}
</style>
</head>
<body>
<div id="di">还剩 3 秒</div>
<img src="../img/bang.jpg" />
</body>
<script>
var i = 3;
var id = setInterval(function(){
i --;
var di = document.getElementById("di");
di.innerText = "还剩" + i;
},1000);
setTimeout(function(){
clearInterval(id)
var di = document.getElementById("di");
di.innerText = "";
},3100);
var id1 = setTimeout(function(){
var img = document.getElementsByTagName("img")[0];
img.style.display = "inline-block";
},3000);
//清除一次性定时器
// clearTimeout(id1);
</script>
</html>
- 倒计时并模拟爆炸效果：
弹窗函数
- alert(“消息”) 警告弹窗
- confirm（“选择提示”）；选择弹窗 返回boolean的值
- prompt（“提示信息”） 输入弹窗，返回输入的内容
location
- location.href = “地址”; 页面加载运行时跳转到该地址，相当于点击a标签
- hostname 设置或返回当前 URL 的主机名。
- host 设置或返回主机名和当前 URL 的端口号。
screen
docuemnt
XMind: ZEN - Trial Version
214
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
