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>