3.15号上午授课内容
今天上午讲的章节是时间对象的语法和Dom 元素获取的语法
一、时间语法
var date=new Date(); 这是语法
第一个示例：对本机的时间获取
写法如下：
<script type="text/javascript">
var date=new Date();
document.write(date);
</script>
第二个示例：对本机当前时间 分别获取
写法如下：
<script type="text/javascript">
var rq=new Date();
// 获取年份
document.write(rq.getFullYear())
document.write("<br>")
// 获取月份 月份加1 0-11月
document.write(rq.getMonth()+1)
document.write("<br>")
// 获取当天日期
document.write(rq.getDate())
document.write("<br>")
// 获取星期
document.write(rq.getDay()+"<br>")
// 获取小时 分 秒
document.write(rq.getHours()+"<br>")
document.write(rq.getMinutes()+"<br>")
document.write(rq.getSeconds()+"<br>")
document.write("<br>")
document.write(rq);
document.write("<br>")
// 这是当前时间的组合写法
var str=rq.getFullYear()+"-"+(rq.getMonth()+1)+"-"+rq.getDate()+"\t"+
rq.getHours()+":"+rq.getMinutes()+":"+rq.getSeconds()
document.write(str)
</script>
二、DOM
（1）dom的关键词是document
dom 的概括简介示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#aa {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div id="aa"></div>
</body>
</html>
<script type="text/javascript">
// 1、js的基础语法 结构
// 2、dom操作 操作我们的document html body div Image
// 3、bom操作 操作浏览器 定时 弹窗....
//dom：document 学习dom的关键词
//dom操作的三个步骤：1、事件源（先找到dom元素）2、事件类型（对元素进行怎样的操作：点击、移入）3、事件的执行程序（样式、内容》。。。）
//1 先找到div元素
var aa = document.getElementById("aa")
//2 事件类型 --点击 移入移出
// aa.onclick = function(){
// }
//3 事件执行程序
aa.onclick = function() {
this.style.backgroundColor = "red"
}
</script>
（2）dom对元素获取的语法
第一个示例：对ID、标签名、class名的选取 语法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="aa">我是id=aa的元素</div>
<ul> <!-- 标签名 -->
<li>我是li元素1</li>
<li>我是li元素2</li>
<li>我是li元素3</li>
<li>我是li元素4</li>
</ul>
<div class="bb">我是class=bb的元素</div>
<div class="bb">我是class=bb的元素</div>
<div class="bb">我是class=bb的元素</div>
<div class="bb">我是class=bb的元素</div>
</body>
</html>
<script type="text/javascript">
// 先找到div 元素
// 1.通过id名找元素 唯一性
var aa=document.getElementById("aa");
// console.log(aa);
// 2.通过标签名找元素
var li_list=document.getElementsByTagName("li");
// console.log(li_list[0]);
// 索引号第2项目 改成红色
// li_list[2].style.color="red";
这是给id加一个鼠标左击时候变红色的示例
aa.onclick =function(){
li_list[2].style.color="red";
}
// 3.通过class找元素
var bb=document.getElementsByClassName("bb");
console.log(bb);
</script>
（3）querySelector() 只查找符合条件的第一个元素对象 querySelectorAll() 查找所有符合条件的元素
第二个示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="aa">我是id=aa的元素</div>
<ul> <!-- 标签名 -->
<li>我是li元素1</li>
<li>我是li元素2</li>
<li>我是li元素3</li>
</ul>
<div class="bb">我是class=bb的元素</div>
<div class="bb">我是class=bb的元素</div>
<div class="bb">我是class=bb的元素</div>
</body>
</html>
<script type="text/javascript">
// querySelector() 只查找符合条件的第一个元素对象 querySelectorAll() 查找所有符合条件的元素
// 查找id 语法 querySelector("#box");
var newaa=document.querySelector("#aa");
console.log(newaa);
// 查找标签名 语法 querySelector("div");
// var newli=document.querySelector("li");
// console.log(newli);
// 查找所以符合条件的标签名元素
var newlist=document.querySelectorAll("li");
console.log(newlist);
// 查找class 语法 querySelector(".box");
var newbb=document.querySelectorAll(".bb");
console.log(newbb);
</script>
（4）特殊元素的选取语法
示例写法：
<script type="text/javascript">
// 特殊元素 body html
// 获取body的语法
var by=document.body
//console.log(by)
// 获取html的语法
var ht=document.documentElement
console.log(ht)
</script>
浙公网安备 33010602011771号