学习地址：
JavaScript基础、高级学习笔记汇总表【尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通)】
目 录
P104 104.尚硅谷_JS基础_添加删除记录-添加 23:00
P105 105.尚硅谷_JS基础_添加删除记录-修改 07:58
P106 106.尚硅谷_JS基础_a的索引问题 06:49
P107 107.尚硅谷_JS基础_操作内联样式 16:42
通过JS修改元素的样式【语法：元素.style.样式名 = 样式值】
P108 108.尚硅谷_JS基础_获取元素的样式 24:56
获取元素的当前显示的样式【语法：元素.currentStyle.样式名】IE浏览器
P109 109.尚硅谷_JS基础_getStyle()方法 10:05
P110 110.尚硅谷_JS基础_其他样式相关的属性 48:04
① element.clientWidth、element.clientHeight
用户阅读协议，且滚动条滚到底，才可以进行注册——代码and运行截图
P112 112.尚硅谷_JS基础_div跟随鼠标移动 23:33
P104 104.尚硅谷_JS基础_添加删除记录-添加 23:00
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>添加删除记录练习</title>
<!-- <link rel="stylesheet" type="text/css" href="ex_2_style/css.css" /> -->
<style type="text/css">
@CHARSET "UTF-8";
#total {
width: 450px;
margin-left: auto;
margin-right: auto;
}
ul {
list-style-type: none;
}
li {
border-style: solid;
border-width: 1px;
padding: 5px;
margin: 5px;
background-color: #99ff99;
float: left;
}
.inner {
width: 400px;
border-style: solid;
border-width: 1px;
margin: 10px;
padding: 10px;
float: left;
}
#employeeTable {
border-spacing: 1px;
background-color: black;
margin: 80px auto 10px auto;
}
th, td {
background-color: white;
}
#formDiv {
width: 250px;
border-style: solid;
border-width: 1px;
margin: 50px auto 10px auto;
padding: 10px;
}
#formDiv input {
width: 100%;
}
.word {
width: 40px;
}
.inp {
width: 200px;
}
</style>
<script type="text/javascript">
/*
* 删除tr的响应函数
*/
function delA() {
//点击超链接以后需要删除超链接所在的那行
//这里我们点击那个超链接this就是谁
//获取当前tr
var tr = this.parentNode.parentNode;
//获取要删除的员工的名字
//var name = tr.getElementsByTagName("td")[0].innerHTML;
var name = tr.children[0].innerHTML;
//删除之前弹出一个提示框
/*
* confirm()用于弹出一个带有确认和取消按钮的提示框
* 需要一个字符串作为参数，该字符串将会作为提示文字显示出来
* 如果用户点击确认则会返回true，如果点击取消则返回false
*/
var flag = confirm("确认删除" + name + "吗?");
//如果用户点击确认
if (flag) {
//删除tr
tr.parentNode.removeChild(tr);
}
/*
* 点击超链接以后，超链接会跳转页面，这个是超链接的默认行为，
* 但是此时我们不希望出现默认行为，可以通过在响应函数的最后return false来取消默认行为
*/
return false;
};
window.onload = function() {
/*
* 点击超链接以后，删除一个员工的信息
*/
//获取所有额超链接
var allA = document.getElementsByTagName("a");
//为每个超链接都绑定一个单击响应函数
for (var i = 0; i < allA.length; i++) {
allA[i].onclick = delA;
}
/*
* 添加员工的功能
* - 点击按钮以后，将员工的信息添加到表格中
*/
//为提交按钮绑定一个单击响应函数
var addEmpButton = document.getElementById("addEmpButton");
addEmpButton.onclick = function() {
//获取用户添加的员工信息
//获取员工的名字
var name = document.getElementById("empName").value;
//获取员工的email和salary
var email = document.getElementById("email").value;
var salary = document.getElementById("salary").value;
//alert(name+","+email+","+salary);
/*
* <tr>
<td>Tom</td>
<td>[email protected]</td>
<td>5000</td>
<td><a href="javascript:;">Delete</a></td>
</tr>
需要将获取到的信息保存到tr中
*/
//创建一个tr
var tr = document.createElement("tr");
//创建四个td
var nameTd = document.createElement("td");
var emailTd = document.createElement("td");
var salaryTd = document.createElement("td");
var aTd = document.createElement("td");
//创建一个a元素
var a = document.createElement("a");
//创建文本节点
var nameText = document.createTextNode(name);
var emailText = document.createTextNode(email);
var salaryText = document.createTextNode(salary);
var delText = document.createTextNode("Delete");
//将文本添加到td中
nameTd.appendChild(nameText);
emailTd.appendChild(emailText);
salaryTd.appendChild(salaryText);
a.appendChild(delText); // 向a中添加文本
//将a添加到td中
aTd.appendChild(a);
//将td添加到tr中
tr.appendChild(nameTd);
tr.appendChild(emailTd);
tr.appendChild(salaryTd);
tr.appendChild(aTd);
//向a中添加href属性
a.href = "javascript:;";
//为新添加的a再绑定一次单击响应函数
a.onclick = delA;
//获取table
var employeeTable = document.getElementById("employeeTable");
//获取employeeTable中的tbody
var tbody = employeeTable.getElementsByTagName("tbody")[0];
//将tr添加到tbodye中
tbody.appendChild(tr);
};
};
</script>
</head>
<body>
<table id="employeeTable">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>[email protected]</td>
<td>5000</td>
<td>
<a href="javascript:;">Delete</a>
</td>
</tr>
<tr>
<td>Jerry</td>
<td>[email protected]</td>
<td>8000</td>
<td>
<a href="deleteEmp?id=002">Delete</a>
</td>
</tr>
<tr>
<td>Bob</td>
<td>[email protected]</td>
<td>10000</td>
<td>
<a href="deleteEmp?id=003">Delete</a>
</td>
</tr>
</table>
<div id="formDiv">
<h4>添加新员工</h4>
<table>
<tr>
<td class="word">name: </td>
<td class="inp">
<input type="text" name="empName" id="empName" />
</td>
</tr>
<tr>
<td class="word">email: </td>
<td class="inp">
<input type="text" name="email" id="email" />
</td>
</tr>
<tr>
<td class="word">salary: </td>
<td class="inp">
<input type="text" name="salary" id="salary" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="addEmpButton">
Submit
</button>
</td>
</tr>
</table>
</div>
</body>
</html>P105 105.尚硅谷_JS基础_添加删除记录-修改 07:58
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>添加删除记录练习</title>
<!-- <link rel="stylesheet" type="text/css" href="ex_2_style/css.css" /> -->
<style type="text/css">
@CHARSET "UTF-8";
#total {
width: 450px;
margin-left: auto;
margin-right: auto;
}
ul {
list-style-type: none;
}
li {
border-style: solid;
border-width: 1px;
padding: 5px;
margin: 5px;
background-color: #99ff99;
float: left;
}
.inner {
width: 400px;
border-style: solid;
border-width: 1px;
margin: 10px;
padding: 10px;
float: left;
}
#employeeTable {
border-spacing: 1px;
background-color: black;
margin: 80px auto 10px auto;
}
th, td {
background-color: white;
}
#formDiv {
width: 250px;
border-style: solid;
border-width: 1px;
margin: 50px auto 10px auto;
padding: 10px;
}
#formDiv input {
width: 100%;
}
.word {
width: 40px;
}
.inp {
width: 200px;
}
</style>
<script type="text/javascript">
/*
* 删除tr的响应函数
*/
function delA() {
//点击超链接以后需要删除超链接所在的那行
//这里我们点击那个超链接this就是谁
//获取当前tr
var tr = this.parentNode.parentNode;
//获取要删除的员工的名字
//var name = tr.getElementsByTagName("td")[0].innerHTML;
var name = tr.children[0].innerHTML;
//删除之前弹出一个提示框
/*
* confirm()用于弹出一个带有确认和取消按钮的提示框
* 需要一个字符串作为参数，该字符串将会作为提示文字显示出来
* 如果用户点击确认则会返回true，如果点击取消则返回false
*/
var flag = confirm("确认删除" + name + "吗?");
//如果用户点击确认
if (flag) {
//删除tr
tr.parentNode.removeChild(tr);
}
/*
* 点击超链接以后，超链接会跳转页面，这个是超链接的默认行为，
* 但是此时我们不希望出现默认行为，可以通过在响应函数的最后return false来取消默认行为
*/
return false;
};
window.onload = function() {
/*
* 点击超链接以后，删除一个员工的信息
*/
//获取所有额超链接
var allA = document.getElementsByTagName("a");
//为每个超链接都绑定一个单击响应函数
for (var i = 0; i < allA.length; i++) {
allA[i].onclick = delA;
}
/*
* 添加员工的功能
* - 点击按钮以后，将员工的信息添加到表格中
*/
//为提交按钮绑定一个单击响应函数
var addEmpButton = document.getElementById("addEmpButton");
addEmpButton.onclick = function() {
//获取用户添加的员工信息
//获取员工的名字
var name = document.getElementById("empName").value;
//获取员工的email和salary
var email = document.getElementById("email").value;
var salary = document.getElementById("salary").value;
//alert(name+","+email+","+salary);
/*
* <tr>
<td>Tom</td>
<td>[email protected]</td>
<td>5000</td>
<td><a href="javascript:;">Delete</a></td>
</tr>
需要将获取到的信息保存到tr中
*/
//创建一个tr
var tr = document.createElement("tr");
//设置tr中的内容
tr.innerHTML = "<td>" + name + "</td>" +
"<td>" + email + "</td>" +
"<td>" + salary + "</td>" +
"<td><a href='javascript:;'>Delete</a></td>";
//获取刚刚添加的a元素，并为其绑定单击响应函数
var a = tr.getElementsByTagName("a")[0];
a.onclick = delA;
//获取table
var employeeTable = document.getElementById("employeeTable");
//获取employeeTable中的tbody
var tbody = employeeTable.getElementsByTagName("tbody")[0];
//将tr添加到tbodye中
tbody.appendChild(tr);
/* tbody.innerHTML += "<tr>" +
"<td>" + name + "</td>" +
"<td>" + email + "</td>" +
"<td>" + salary + "</td>" +
"<td><a href='javascript:;'>Delete</a></td>"
+
"</tr>"; */
};
};
</script>
</head>
<body>
<table id="employeeTable">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>[email protected]</td>
<td>5000</td>
<td>
<a href="javascript:;">Delete</a>
</td>
</tr>
<tr>
<td>Jerry</td>
<td>[email protected]</td>
<td>8000</td>
<td>
<a href="deleteEmp?id=002">Delete</a>
</td>
</tr>
<tr>
<td>Bob</td>
<td>[email protected]</td>
<td>10000</td>
<td>
<a href="deleteEmp?id=003">Delete</a>
</td>
</tr>
</table>
<div id="formDiv">
<h4>添加新员工</h4>
<table>
<tr>
<td class="word">name: </td>
<td class="inp">
<input type="text" name="empName" id="empName" />
</td>
</tr>
<tr>
<td class="word">email: </td>
<td class="inp">
<input type="text" name="email" id="email" />
</td>
</tr>
<tr>
<td class="word">salary: </td>
<td class="inp">
<input type="text" name="salary" id="salary" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="addEmpButton">
Submit
</button>
</td>
</tr>
</table>
</div>
</body>
</html>P106 106.尚硅谷_JS基础_a的索引问题 06:49
P107 107.尚硅谷_JS基础_操作内联样式 16:42
CSS 背景属性（Background）
通过JS修改元素的样式【语法：元素.style.样式名 = 样式值】
- 通过JS修改元素的样式： 语法：元素.style.样式名 = 样式值
- 注意：如果CSS的样式名中含有-(减法操作)，这种名称在JS中是不合法的,比如background-color，需要将这种样式名修改为驼峰命名法，去掉“-”，然后将-后的字母大写。
- 我们通过style属性设置的样式都是内联样式，而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示。
- 但是如果在样式中写了“!important”，则此时样式会有最高的优先级，即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效，所以尽量不要为样式添加!important。
读取标签的样式【语法：元素.style.样式名;】
- //读取box1的样式 语法：元素.style.样式名;
- 通过style属性设置和读取的都是内联样式，无法读取样式表中的样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1 {
width: 100px;
height: 100px;
background-color: red;
}
</style>
<script type="text/javascript">
window.onload = function() {
/*
* 点击按钮以后，修改box1的大小
*/
//获取box1
var box1 = document.getElementById("box1");
//为按钮绑定单击响应函数
var btn01 = document.getElementById("btn01");
btn01.onclick = function() {
//修改box1的宽度
/*
* 通过JS修改元素的样式：
* 语法：元素.style.样式名 = 样式值
*
* 注意：如果CSS的样式名中含有-， // 减法操作
* 这种名称在JS中是不合法的,比如background-color
* 需要将这种样式名修改为驼峰命名法，
* 去掉-，然后将-后的字母大写
*
* 我们通过style属性设置的样式都是内联样式，
* 而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示
*
* 但是如果在样式中写了!important，则此时样式会有最高的优先级，
* 即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效
* 所以尽量不要为样式添加!important
*/
box1.style.width = "300px";
box1.style.height = "300px";
box1.style.backgroundColor = "yellow";
};
//点击按钮2以后，读取元素的样式
var btn02 = document.getElementById("btn02");
btn02.onclick = function() {
//读取box1的样式
/*
* 语法：元素.style.样式名;
*
* 通过style属性设置和读取的都是内联样式
* 无法读取样式表中的样式
*/
//alert(box1.style.height);
alert(box1.style.width);
};
};
</script>
</head>
<body>
<button id="btn01">点我一下</button>
<button id="btn02">点我一下2</button>
<br /><br />
<div id="box1"></div>
</body>
</html>P108 108.尚硅谷_JS基础_获取元素的样式 24:56
background-color 属性
获取元素的当前显示的样式【语法：元素.currentStyle.样式名】IE浏览器
- 获取元素的当前显示的样式
- 语法：元素.currentStyle.样式名
- 它可以用来读取当前元素正在显示的样式，如果当前元素没有设置该样式，则获取它的默认值。
- currentStyle只有IE浏览器支持，其他的浏览器都不支持。
getComputedStyle()：获取元素当前的样式
在其他浏览器中可以使用，getComputedStyle()这个方法来获取元素当前的样式，这个方法是window的方法，可以直接使用。
需要两个参数
- 第1个：要获取样式的元素
- 第2个：可以传递一个伪元素，一般都传null
该方法会返回一个对象，对象中封装了当前元素对应的样式，可以通过对象.样式名来读取样式。
如果获取的样式没有设置，则会获取到真实的值，而不是默认值。比如：没有设置width，它不会获取到auto，而是一个长度。
但是该方法不支持IE8及以下的浏览器，通过currentStyle和getComputedStyle()读取到的样式都是只读的，不能修改，如果要修改必须通过style属性。
P109 109.尚硅谷_JS基础_getStyle()方法 10:05
同时兼容IE8与其它浏览器
不需要判断浏览器版本，只需要判断当前浏览器有没有getComputedStyle()方法即可。
- getComputedStyle 不加 window：是变量，需要去作用域寻找。变量没找到，会报错。
- getComputedStyle 加 window，成为window对象的属性。属性没找到，返回undefined。
实验代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1 {
height: 100px;
background-color: yellow;
}
</style>
<script type="text/javascript">
window.onload = function() {
//点击按钮以后读取box1的样式
var box1 = document.getElementById("box1");
var btn01 = document.getElementById("btn01");
btn01.onclick = function() {
//读取box1的宽度
//alert(box1.style.width);
// alert(box1.currentStyle.width);
//box1.currentStyle.width = "200px";
//alert(box1.currentStyle.backgroundColor);
//var obj = getComputedStyle(box1, null);
// alert(getComputedStyle(box1, null).width);
//正常浏览器的方式
//alert(getComputedStyle(box1, null).backgroundColor);
//IE8的方式
//alert(box1.currentStyle.backgroundColor);
// alert(getStyle(box1, "width"));
var w = getStyle(box1, "width");
alert(w);
};
};
/*
* 定义一个函数，用来获取指定元素的当前的样式
* 参数：
* obj 要获取样式的元素
* name 要获取的样式名
*/
function getStyle(obj, name) {
if (window.getComputedStyle) {
//正常浏览器的方式，具有getComputedStyle()方法
return getComputedStyle(obj, null)[name];
} else {
//IE8的方式，没有getComputedStyle()方法
return obj.currentStyle[name];
}
//return window.getComputedStyle?getComputedStyle(obj , null)[name]:obj.currentStyle[name];
}
</script>
</head>
<body>
<button id="btn01">点我一下</button>
<br /><br />
<div id="box1"></div>
</body>
</html>P110 110.尚硅谷_JS基础_其他样式相关的属性 48:04
DOM Element 对象
① element.clientWidth、element.clientHeight
clientWidth、clientHeight
- 这两个属性可以获取元素的可见宽度和高度。
- 这些属性都是不带px的，返回都是一个数字，可以直接进行计算。
- 会获取元素宽度和高度，包括内容区和内边距。
- 这些属性都是只读的，不能修改。
② offsetWidth、offsetHeight
offsetWidth、offsetHeight：获取元素的整个的宽度和高度，包括内容区、内边距和边框。
③ offsetParent：获取当前元素的定位父元素
offsetParent
- 可以用来获取当前元素的定位父元素。
- 会获取到离当前元素最近的开启了定位的祖先元素。如果所有的祖先元素都没有开启定位，则返回body。
static、absolute、 relative、fixed
④ offsetLeft、offsetTop
- offsetLeft：当前元素相对于其定位父元素的水平偏移量
- offsetTop：当前元素相对于其定位父元素的垂直偏移量
⑤ scrollWidth、scrollHeight
scrollWidth、scrollHeight：可以获取元素整个滚动区域的宽度和高度
⑥ scrollLeft、scrollTop
- scrollLeft：可以获取水平滚动条滚动的距离。
- scrollTop：可以获取垂直滚动条滚动的距离。
①~⑥ 练习代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1 {
width: 100px;
height: 100px;
background-color: red;
padding: 10px;
border: 10px solid yellow;
}
#box2 {
padding: 100px;
background-color: #bfa;
}
#box4 {
width: 200px;
height: 300px;
background-color: #bfa;
overflow: auto;
}
#box5 {
width: 450px;
height: 600px;
background-color: yellow;
}
</style>
<script type="text/javascript">
window.onload = function() {
var box1 = document.getElementById("box1");
var btn01 = document.getElementById("btn01");
var box4 = document.getElementById("box4");
btn01.onclick = function() {
/*
* clientWidth
* clientHeight
* - 这两个属性可以获取元素的可见宽度和高度
* - 这些属性都是不带px的，返回都是一个数字，可以直接进行计算
* - 会获取元素宽度和高度，包括内容区和内边距
* - 这些属性都是只读的，不能修改
*/
// alert(box1.clientWidth);
// alert(box1.clientHeight);
// box1.clientHeight = 300;
/*
* offsetWidth
* offsetHeight
* - 获取元素的整个的宽度和高度，包括内容区、内边距和边框
*/
// alert(box1.offsetWidth);
/*
* offsetParent
* - 可以用来获取当前元素的定位父元素
* - 会获取到离当前元素最近的开启了定位的祖先元素
* 如果所有的祖先元素都没有开启定位，则返回body
*/
// var op = box1.offsetParent;
// alert(op.id);
/*
* offsetLeft
* - 当前元素相对于其定位父元素的水平偏移量
* offsetTop
* - 当前元素相对于其定位父元素的垂直偏移量
*/
// alert(box1.offsetLeft);
/*
* scrollWidth
* scrollHeight
* - 可以获取元素整个滚动区域的宽度和高度
*/
// alert(box4.clientHeight);
// alert(box4.scrollWidth);
/*
* scrollLeft
* - 可以获取水平滚动条滚动的距离
* scrollTop
* - 可以获取垂直滚动条滚动的距离
*/
// alert(box4.scrollLeft);
// alert(box4.scrollTop);
// alert(box4.clientHeight); // 283
//当满足scrollHeight - scrollTop == clientHeight
//说明垂直滚动条滚动到底了
//当满足scrollWidth - scrollLeft == clientWidth
//说明水平滚动条滚动到底
// alert(box4.scrollHeight - box4.scrollTop); // 600
};
};
</script>
</head>
<body id="body">
<button id="btn01">点我一下</button>
<br /><br />
<div id="box4">
<div id="box5"></div>
</div>
<br /><br />
<div id="box3">
<div id="box2" style="position: relative;">
<div id="box1"></div>
</div>
</div>
</body>
</html>滚动条练习【用户将滚动条滚到底，可进行注册】
checkbox 对象：disabled属性
用户阅读协议，且滚动条滚到底，才可以进行注册——代码and运行截图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#info {
width: 300px;
height: 500px;
background-color: #bfa;
overflow: auto;
}
</style>
<script type="text/javascript">
window.onload = function() {
/*
* 当垂直滚动条滚动到底时使表单项可用
* onscroll
* - 该事件会在元素的滚动条滚动时触发
*/
//获取id为info的p元素
var info = document.getElementById("info");
//获取两个表单项
var inputs = document.getElementsByTagName("input");
//为info绑定一个滚动条滚动的事件
info.onscroll = function() {
//检查垂直滚动条是否滚动到底
if (info.scrollHeight - info.scrollTop == info.clientHeight) {
//滚动条滚动到底，使表单项可用
/*
* disabled属性可以设置一个元素是否禁用，
* 如果设置为true，则元素禁用
* 如果设置为false，则元素可用
*/
inputs[0].disabled = false;
inputs[1].disabled = false;
}
};
};
</script>
</head>
<body>
<h3>欢迎亲爱的用户注册</h3>
<p id="info">
亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。
亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。
亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。
亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。
亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。
亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。
亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。
亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。
亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。
亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。
亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。
亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。
亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。
亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。
亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。
亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。
亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。
亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。
亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。
亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。
亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。
亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。
亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。
亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。
亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。
亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。
亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。
亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。
亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。
亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。
亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。
</p>
<!-- 如果为表单项添加disabled="disabled" 则表单项将变成不可用的状态 -->
<input type="checkbox" disabled="disabled" />我已仔细阅读协议，一定遵守！
<input type="submit" value="注册" disabled="disabled" />
</body>
</html>P111 111.尚硅谷_JS基础_事件对象 18:02
移动鼠标，以px显示距离
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
#areaDiv {
border: 1px solid black;
width: 300px;
height: 50px;
margin-bottom: 10px;
}
#showMsg {
border: 1px solid black;
width: 300px;
height: 20px;
}
</style>
<script type="text/javascript">
window.onload = function() {
// 当鼠标在areaDiv中移动时，在showMsg中来显示鼠标的坐标
//获取两个div
var areaDiv = document.getElementById("areaDiv");
var showMsg = document.getElementById("showMsg");
/*
* onmousemove
* - 该事件将会在鼠标在元素中移动时被触发
*
* 事件对象
* - 当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数,
* 在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标、键盘哪个按键被按下、鼠标滚轮滚动的方向。
*/
areaDiv.onmousemove = function(event) {
/*
* 在IE8中，响应函数被触发时，浏览器不会传递事件对象，
* 在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的
*/
/*if(!event){
event = window.event;
}*/
//解决事件对象的兼容性问题
event = event || window.event;
// 第1个为true，不看第2个；第1个为false，返回第2个
/*
* clientX可以获取鼠标指针的水平坐标
* cilentY可以获取鼠标指针的垂直坐标
*/
var x = event.clientX;
var y = event.clientY;
// alert("x = " + x + " , y = " + y);
//在showMsg中显示鼠标的坐标
showMsg.innerHTML = "x = " + x + " , y = " + y;
};
};
</script>
</head>
<body>
<div id="areaDiv"></div>
<div id="showMsg"></div>
</body>
</html>P112 112.尚硅谷_JS基础_div跟随鼠标移动 23:33
- 事件绑定给box1，只有鼠标在box1中 才会触发。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1 {
width: 100px;
height: 100px;
background-color: red;
position: absolute; /* 开启box1的绝对定位 */
}
</style>
<script type="text/javascript">
window.onload = function() {
/*
* 使div可以跟随鼠标移动
*/
//获取box1
var box1 = document.getElementById("box1");
//绑定鼠标移动事件
document.onmousemove = function(event) {
//解决兼容问题
event = event || window.event;
//获取滚动条滚动的距离
/*
* chrome认为浏览器的滚动条是body的，可以通过body.scrollTop来获取
* 火狐等浏览器认为浏览器的滚动条是html的，
*/
var st = document.body.scrollTop || document.documentElement.scrollTop;
var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
//var st = document.documentElement.scrollTop;
//获取到鼠标的坐标
/*
* clientX和clientY
* 用于获取鼠标在当前的可见窗口的坐标
* div的偏移量，是相对于整个页面的
*
* pageX和pageY可以获取鼠标相对于当前页面的坐标
* 但是这个两个属性在IE8中不支持，所以如果需要兼容IE8，则不要使用
*/
var left = event.clientX;
var top = event.clientY;
//设置div的偏移量
box1.style.left = left + sl + "px";
box1.style.top = top + st + "px";
};
};
</script>
</head>
<body style="height: 1000px;width: 2000px;">
<div id="box1"></div>
</body>
</html>P113 113.尚硅谷_JS基础_事件的冒泡 15:52
事件的冒泡（Bubble）
事件的冒泡（Bubble）
- 所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发。
- 在开发中大部分情况冒泡都是有用的。如果不希望发生事件冒泡可以通过事件对象来取消冒泡。
事件冒泡-案例1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1 {
width: 200px;
height: 200px;
background-color: yellowgreen;
}
#s1 {
background-color: yellow;
}
</style>
<script type="text/javascript">
window.onload = function() {
//为s1绑定一个单击响应函数
var s1 = document.getElementById("s1");
s1.onclick = function(event) {
event = event || window.event;
alert("我是span的单击响应函数");
//取消冒泡
//可以将事件对象的cancelBubble设置为true，即可取消冒泡
event.cancelBubble = true;
};
//为box1绑定一个单击响应函数
var box1 = document.getElementById("box1");
box1.onclick = function(event) {
event = event || window.event;
alert("我是div的单击响应函数");
event.cancelBubble = true;
};
//为body绑定一个单击响应函数
document.body.onclick = function() {
alert("我是body的单击响应函数");
};
};
</script>
</head>
<body>
<div id="box1">
我是box1！
<span id="s1">我是span！</span>
</div>
</body>
</html>事件冒泡-案例2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1 {
width: 100px;
height: 100px;
background-color: red;
position: absolute; /* 开启box1的绝对定位 */
}
</style>
<script type="text/javascript">
window.onload = function() {
/*
* 使div可以跟随鼠标移动
*/
//获取box1
var box1 = document.getElementById("box1");
//绑定鼠标移动事件
document.onmousemove = function(event) {
//解决兼容问题
event = event || window.event;
//获取滚动条滚动的距离
/*
* chrome认为浏览器的滚动条是body的，可以通过body.scrollTop来获取
* 火狐等浏览器认为浏览器的滚动条是html的，
*/
var st = document.body.scrollTop || document.documentElement.scrollTop;
var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
//var st = document.documentElement.scrollTop;
//获取到鼠标的坐标
/*
* clientX和clientY
* 用于获取鼠标在当前的可见窗口的坐标
* div的偏移量，是相对于整个页面的
*
* pageX和pageY可以获取鼠标相对于当前页面的坐标
* 但是这个两个属性在IE8中不支持，所以如果需要兼容IE8，则不要使用
*/
var left = event.clientX;
var top = event.clientY;
//设置div的偏移量
box1.style.left = left + sl + "px";
box1.style.top = top + st + "px";
};
var box2 = document.getElementById("box2");
box2.onmousemove = function(event) {
event = event || window.event;
event.cancelBubble = true;
};
};
</script>
</head>
<body style="height: 1000px;width: 2000px;">
<div id="box2" style="width: 500px; height: 500px; background-color: #bfa;"></div>
<div id="box1"></div>
</body>
</html>今天，5:14 就醒了。躺倒5:55，起床，学习。中午11:48 [103~113] ，看完。