3.18号上午课程
今天上午第一部分讲的是节点操作查找功能
（1）三部分寻找父亲，寻找所以儿子，寻找兄弟 示例：
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div></div>
<div id="a1">
<div id="a1-1">a1-1</div>
<div id="a1-2">a1-2</div>
</div>
<div id="a2">
<div id="a1-3">a1-1</div>
<div id="a1-4">a1-2</div>
</div>
</body>
</html>
<script type="text/javascript">
// 查找某个元素的父亲
// var a1-2=document.querySelector("#a1-2")
// console.log(a1-2.parentNode)
// 寻找所以的儿子 如果取第一个加索引号就行
var a1=document.querySelector("#a1")
// a1.firstElementChild.style.color="red";
a1.firstElementChild.onclick=function(){
alert("123456")
}
// console.log(a1.children) 控制台输出第一个儿子
// console.log(a1.firstElementChild) 查找第一个儿子
// console.log(a1.lastElementChild) 查找最后一个儿子
// console.log(a1.nextElementSibling) 查找下一个兄弟节点
// console.log(a1.previousElementSibling) 查找上一个兄弟节点
</script>
（2）bom 窗口加载事件，location 对象，history 示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- <style type="text/css">
#aa.hover{
cursor: pointer;
}
</style> -->
</head>
<body>
<div id="aa">点击1</div>
<div id="bb">点击2</div>
<div id="cc">前进</div>
</body>
</html>
<script type="text/javascript">
// 窗口加载事件 一般来说js是不能放在html上方的因为htnl加载完了才能执行JS
// 不过用window.onload=function(){} 就可以解决语法：window.onload=function(){}
window.onload=function(){
var aa=document.querySelector("#aa");
var bb=document.querySelector("#bb");
var cc=document.querySelector("#cc");
aa.onclick=function(){
// location 对象 语法是location.href="" 是js的跳转页面这里与css里的a.href="" 对标
// js跳转外部网链
location.href="https://www.baidu.com/";
}
bb.onclick=function(){
// js跳转内部页面
location.href="0318-3.html";
}
cc.onclick=function(){
// history：1.前进语法：window.history.forward() 2.后退语法：window.history.back()
window.history.forward()
}
</script>
（3）定时器 只执行一次和清除 示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#a1{
width: 200px;
height: 200px;
background-color: aqua;
}
</style>
</head>
<body>
<div id="a1"></div>
<button type="button" onclick="qingchu()">清除定时器</button>
</body>
</html>
<script type="text/javascript">
// 定时器 顾名思义与时间有关的
// 1.在一定的时间内只执行一次的，执行时间是1000毫秒以千毫为单位
// 语法：window.setTimeout(function(){},2000)
var a1=document.getElementById("a1");
//写定时器要给它加名字
var timer=window.setTimeout(function(){
// 这是在3s内执行一次就消失的示例
// a1.style.display="none";
// 这是在3s内执行一次就改变颜色的示例
a1.style.backgroundColor="orchid";
},3000)
// 清除定时器
function qingchu(){
//先找到定时器的名字timer，然后执行清除
window.clearTimeout(timer)
}
</script>
浙公网安备 33010602011771号