贺佳磊_20210115贺佳磊
知识点总结
1、DOM
eg1：dom选择
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>dom选择</title>
</head>
<body>
<input type="checkbox" name="good" value="44" />裤子
<input type="checkbox" name="good" value="55" />鞋子
<input type="checkbox" name="good" value="66" />羽绒服
<hr />
<input type="checkbox" id="select" onclick="selectall()"/>全选/全不选
<button type="button" onclick="fanxuan()">反选</button>
<hr />
<button type="button" onclick="sum()">结账</button>
<p>总计<span id="price">0</span>元</p>
<script type="text/javascript">
var goods=document.querySelectorAll("[name=good]");
function selectall(){
var select=document.querySelector('#select');
for(var i=0;i<goods.length;i++){
var cur=goods[i];
cur.checked=select.checked;
}
}
function fanxuan(){
for(var i=0;i<goods.length;i++){
var cur=goods[i];
cur.checked=!cur.checked;
}
}
function sum(){
var sum=0;
for(var i=0;i<goods.length;i++){
var cur=goods[i];
if(cur.checked){
sum+=parseInt(cur.value);
}
document.querySelector("#price").innerText=sum;
}
}
</script>
</body>
</html>
eg2：鼠标点击效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标点击动画</title>
</head>
<body>
<p style="font-size: 20px;color: aqua;">ff</p>
<script type="text/javascript">
//获取元素
var html=document.querySelector("html");
//给HTML设一个监听事件
html.addEventListener("click",text,false);
//函数
function text(e){
//字体大小
var fontsize=30;
//根据鼠标位置计算元素出现的位置
var left=e.clientX-fontsize/2;
var top=e.clientY-fontsize/2;
//添加一个新元素b
var b=document.createElement("b");
//元素中的内容
b.innerText="❀";
//设置内容样式
b.style="font-size: "+fontsize+"px;color: "+color()+";opacity:1;position:absolute;left:"+left+"px;top:"+top+"px;";
//添加到body中
document.body.appendChild(b);
//设一个定时任务
var time=setInterval(change,100);
function change(){
//消失
b.style.opacity-=0.05;
if(b.style.opacity<0){
//移除元素
document.body.removeChild(b);
//清除定时器
createElement(time);
}
}
function color(){
//~~的作用是去掉小数部分
return "rgb(" + ~~ (255 * Math.random()) + "," + ~~ (255 * Math.random()) + "," + ~~ (255 * Math.random()) + ")";
}
}
</script>
</body>
</html>
eg3：表格颜色改变
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格颜色改变</title>
<style type="text/css">
.bg{
background-color: darkseagreen;
}
</style>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="3" width="400px">
<tr>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<td>贺佳磊</td>
<td>女</td>
</tr>
</table>
<script type="text/javascript">
//获取table元素
var table=document.querySelector("table");
//获取tr元素
var trs=document.querySelectorAll("tr");
//元素迭代
for(var i=0;i<trs.length;i++){
//鼠标响应函数
trs[i].onmouseover=function(){
//改变颜色
this.className=this.className+" bg";
}
}
//元素迭代
for(var i=0;i<trs.length;i++){
//鼠标响应函数
trs[i].onmouseout=function(){
//颜色消除
this.className=this.className.replace(" bg","");
}
}
</script>
</body>
</html>
2、JavaScript
（1）作用、历史、起源
（2）语法组成
| 组成部分 | 作用 |
|---|---|
| ECMAScript | 构成了JS核心的语法基础 |
| BOM | Browser Object Model 浏览器对象模型，用来操作客户端和浏览器窗口上的对象 |
| DOM | Document Object Model 文档对象模型，用来操作网页中的元素 |
（3）ECMAScript 版本
（4）基础语法
心得体会
时间过的真快，一周了，在这一周，老师讲了HTML、CSS、JavaScript，我也收获很多，在这学到的内容比在学校学到的多得多，在学校学的太皮毛了，更多的是要自己自学，如果不自律不多学一些，大学出来真的很迷茫。老师也有和我们聊一些关于就业以及与计算机相关的很多，所以我现在此刻要定下目标，大学出来一定要精通一门编程语言，就像老师一样熟练，哈哈，可能也就这样说说，加油吧！
点赞
评论留言