| 定义表格 |
| |
| 定义表格标题。 |
| |
|
定义表格的表头。 |
| |
| 定义表格的行。 |
| |
|
定义表格单元。 |
| |
| 定义表格的页眉。 |
| |
| 定义表格的主体。 |
| |
| 定义表格的页脚。 |
| |
| 定义用于表格列的属性。 |
| |
| 定义表格列的组。 |
表格应用
-
获取
-
隔行变色
-
添加/删除一行
-
搜索
- 版本1：基础版本 -- 字符串比较
- 版本2：忽略大小写 -- 大小写转换
toLowerCase()/toUpperCase()，返回字符串
- 版本3：模糊搜索 --
search() 的使用，没找到返回 -1，找到则返回位置
- 版本4：多关键词 --
split() 分割字符串，返回数组
- 高亮显示、筛选
-
排序
- 移动
li ，使用appendChild()： 删除原有 li，尾部新增 li
- 元素排序：元素集合转换成数组 --
sort() 排序 -- appendChild()插入
-
代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>表格操作</title>
<style>
body {
margin: 0 auto;
width: 400px;
}
table {
border: rgb(97, 97, 97) 1px solid;
width: 400px;
}
td {
border: rgb(255, 106, 136) 1px solid;
}
</style>
<script>
window.onload = function () {
// 封装getElementById
function get(id) {
return document.getElementById(id);
};
// 表格数据
// tHead 作为最后一个数组传入
var data = new Array(
[1, '张三', 12, "<a href='javascript:;'>删除</a>"],
[2, '李四', 13, "<a href='javascript:;'>删除</a>"],
[3, '王五', 14, "<a href='javascript:;'>删除</a>"],
[4, '王七', 19, "<a href='javascript:;'>删除</a>"],
[5, '王九', 24, "<a href='javascript:;'>删除</a>"],
[6, '李六', 42, "<a href='javascript:;'>删除</a>"],
[7, '李三', 23, "<a href='javascript:;'>删除</a>"],
[8, '李六', 76, "<a href='javascript:;'>删除</a>"],
[9, 'CAT', 8, "<a href='javascript:;'>删除</a>"],
[10, 'cat', 2, "<a href='javascript:;'>删除</a>"],
[11, 'dog', 1, "<a href='javascript:;'>删除</a>"],
[12, '3', 5, "<a href='javascript:;'>删除</a>"],
[13, '31', 2, "<a href='javascript:;'>删除</a>"],
[14, '4', 7, "<a href='javascript:;'>删除</a>"],
[15, '42', 9, "<a href='javascript:;'>删除</a>"],
[16, '啊Q', 9, "<a href='javascript:;'>删除</a>"],
['ID', '姓名', '年龄', "操作"]
);
// 传入格式化数组文件 data ，自动生成表格
function createTable(data) {
// 使用文档碎片 生成表格
// var frag = document.createDocumentFragment();
var table = document.createElement('table');
var caption = document.createElement('caption');
var thead = document.createElement('thead');
var tbody = document.createElement('tbody');
var tr = document.createElement('tr');
// 渲染表格
get('b1').appendChild(table);
table.appendChild(caption);
table.appendChild(thead);
table.appendChild(tbody);
thead.appendChild(tr);
var oTr = document.getElementsByTagName('tr');
// 渲染单元格
caption.innerHTML = "<strong style='font-size: 20px'>人员表</strong>";
var i = 0;
var j = 0;
var rNmb = data.length - 1; // 行
var rLth = data[0].length; //列
// 生成表头
for (i = 0; i < rLth; i++){
var th = document.createElement('th');
oTr[0].appendChild(th);
// 写入th数据
var aArr = data[rNmb];
table.tHead.rows[0].cells[i].innerHTML = aArr[i];
}
// 生成 tbody 及插入内容
for (i = 0; i < rNmb; i++) {
var tr = document.createElement('tr');
tbody.appendChild(tr);
for (j = 0; j < rLth; j++) {
var td = document.createElement('td');
tr.appendChild(td);
// 写入td数据
aArr = data[i];
table.tBodies[0].rows[i].cells[j].innerHTML = aArr[j];
}
}
// 不加 tBodies[0] 会把 tHead 当作一行
// console.log(table.rows.length);
chgColor();
aClick();
}
createTable(data);
function chgColor() {
// 隔行变色
var oTr = document.getElementsByTagName('tr');
var oldColor = '';
for (i = 1; i < oTr.length; i++) {
if (i % 2 === 0) {
oTr[i].style.background = '#eee';
} else {
oTr[i].style.background = '#bbb';
}
// 鼠标移入高亮
oTr[i].onmouseover = function () {
oldColor = this.style.background;
this.style.background = 'yellow';
}
oTr[i].onmouseout = function () {
this.style.background = oldColor;
}
}
}
// 增加/删除一行
var btn1 = get('btn1');
var btn2 = get('btn2');
var btn3 = get('btn3');
var btn4 = get('btn4');
var btn5 = get('btn5');
var btn6 = get('btn6');
var txt1 = get('txt1');
var txt2 = get('txt2');
var txt3 = get('txt3');
var txt4 = get('txt4');
var id = data.length;
var oTab = document.getElementsByTagName('table');
// txt1 txt2 增加一行
btn1.onclick = function () {
if (txt1.value != '' && txt2.value != '') {
var newPerson = new Array(id, txt1.value, txt2.value, "<a href='javascript:;'>删除</a>")
data.splice(data.length - 1, 0, newPerson);
get('b1').removeChild(oTab[0]);
createTable(data);
id++;
} else {
alert('请输入姓名和年龄！');
}
}
// 根据 txt4 删除一行
btn3.onclick = del;
function del() {
for (var i in data) {
var aData = data[i];
// console.log(aData[0])
// 校验输入ID 是否和 data.ID 匹配
if (aData[0] === parseInt(txt4.value) || aData[0] === parseInt(txtTd)) {
data.splice(i, 1);
break;
}
}
get('b1').removeChild(oTab[0]);
createTable(data);
}
// 注册 a 标签删除操作事件
var txtTd = '';
function aClick() {
var oA = document.getElementsByTagName('a');
for (var i in oA) {
oA[i].onclick = function () {
// oTab[0].tBodies[0].removeChild(this.parentNode.parentNode);
txtTd = this.parentNode.parentNode.cells[0].innerHTML;
del();
}
}
}
// data 筛选查询
btn2.onclick = searchTr;
function searchTr() {
var oTr = document.getElementsByTagName('tr');
var bData = new Array();
// 储存表头
var thData = data[data.length-1];
if (txt3.value != '') {
for (var i in data) {
var aData = data[i];
// console.log(aData[0])
// 校验输入name 是否和 data.name 匹配
if (aData[1].toLowerCase() === txt3.value.toLowerCase()) {
// 忽略大小写
bData.push(data[i]);
} else if (aData[1].toLowerCase().search(txt3.value.toLowerCase()) != -1) {
// 模糊搜索 search()
bData.push(data[i]);
} else {
// 多关键词搜索 split() 分割关键词
var aTxt = txt3.value.split(' ');
for(var j in aTxt) {
if (aData[1].toLowerCase().search(aTxt[j].toLowerCase()) != -1) {
bData.push(data[i]);
continue;
}
}
}
}
// 传入表头 thData
bData.push(thData);
get('b1').removeChild(oTab[0]);
createTable(bData);
} else {
back();
}
}
// 恢复 data
btn4.onclick = back;
function back() {
get('b1').removeChild(oTab[0]);
createTable(data);
}
// tr 高亮查询
btn5.onclick = function () {
chgColor();
var name = '';
for (i = 0; i < oTab[0].tBodies[0].rows.length; i++) {
name = oTab[0].tBodies[0].rows[i].cells[1].innerHTML;
if (txt3.value != '') {
if (name.toLowerCase() === txt3.value.toLowerCase()) {
// 忽略大小写
oTab[0].tBodies[0].rows[i].style.background = 'yellow';
} else if (name.toLowerCase().search(txt3.value.toLowerCase()) != -1) {
// 模糊搜索 search()
oTab[0].tBodies[0].rows[i].style.background = 'yellow';
} else {
// 多关键词搜索 split() 分割关键词
var aTxt = txt3.value.split(' ');
for(var j in aTxt) {
if (name.toLowerCase().search(aTxt[j].toLowerCase()) != -1) {
oTab[0].tBodies[0].rows[i].style.background = 'yellow';
continue;
}
}
}
} else {
back();
}
}
}
// data 根据元素排序 sort() 方法
btn6.onclick = sortName;
var item = 0; // 排序的元素
var txt5 = get('txt5');
var thData = data[data.length-1]; // 保存 th
function sortName() {
item = parseInt(txt5.value);
data.pop(); // 去掉最后的 th
data.sort(compare); // 正向排序
data.push(thData); // th 加回去
back(); //生成表格
}
// 比较函数 此函数 数字类型和字符串类型不能混排
function compare(arr1, arr2) {
var val1 = arr1[item];
var val2 = arr2[item];
if (!isNaN(val1) && !isNaN(val2)) {
return val1 - val2;
} else {
if (val1 > val2) {
return 1;
} else if (val1 < val2) {
return -1;
} else if (val1 === val2) {
return 0;
}
}
}
}
</script>
</head>
<body id="b1">
<div>
<input type="text" name="name" id="txt1" placeholder="姓名">
<input type="text" name="age" id="txt2" placeholder="年龄">
<input type="button" name="" id="btn1" value="增加">
</div>
<div>
<input type="text" name="" id="txt3" value="张三 六 五">
<input type="button" name="" id="btn2" value="筛选查询">
<input type="button" name="" id="btn4" value="返回">
<input type="button" name="" id="btn5" value="高亮查询">
</div>
<div>
<input type="text" name="" id="txt4" placeholder="id">
<input type="button" name="" id="btn3" value="删除">
</div>
<div>
<input type="text" name="" id="txt5" value='1'>
<input type="button" name="" id="btn6" value="排序">
</div>
</body>
</html>
表单应用
- 表单基础知识（本章学习事件的时候再详细说明）
- 表单事件
-
onsubmit：提交时发生
-
onreset：重置时发生
- 表单内容验证
- 阻止用户输入非法字符：阻止事件
- 输入时、失去焦点时验证：
onkeyup 和onblur
- 提交时检查：
onsubmit
- 后台数据检查
JS 运动基础
运动基础
- 让
div 动起来
- 速度：物体运动快慢
- 运动中的 Bug
- 不会停止
- 速度取某些值会无法停止
- 到达位置后点击还会运动
- 重复点击速度加快
- 匀速运动
运动框架及应用
-
运动框架
- 在开始运动时，关闭已有定时器
- 把运动和停止隔开：
if / else
-
运动框架实例
- 例子1：“分享到” 侧边栏
- 例子2：淡入淡出图片
- 用变量储存透明度
-
filter:alpha(opacity=30); opacity: 0.3; IE 用前者
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>运动框架及应用</title>
<style>
#div1 {
width: 150px;
height: 400px;
background-color:cyan;
position: absolute;
left: -150px;
}
#div1 span {
width: 20px;
height: 60px;
left: 150px;
background-color:rgb(106, 176, 255);
position: absolute;
margin-top: 170px;
}
#div2 {
left: 200px;
position: absolute;
filter:alpha(opacity=30);
opacity: 0.3;
}
</style>
<script>
window.onload = function () {
// 封装getElementById
function get(id) {
return document.getElementById(id);
};
var oDiv = get('div1');
var timer = '';
var speed = 0;
var target = 0;
// 运动框架
function startMove(target) {
clearInterval(timer);
timer = setInterval(move, 30);
function move() {
if (oDiv.offsetLeft < target) {
speed = 10;
oDiv.style.left = oDiv.offsetLeft + speed + 'px';
} else if (oDiv.offsetLeft > target) {
speed = -10;
oDiv.style.left = oDiv.offsetLeft + speed + 'px';
} else if (oDiv.offsetLeft === target){
clearInterval(timer);
}
}
}
// 注册鼠标移入事件
oDiv.onmouseover = function () {
startMove(0);
};
oDiv.onmouseout = function () {
startMove(-150);
};
// 图片淡入淡出
var oDiv2 = get('div2');
var alpha = 30;
oDiv2.onmouseover = function () {
shallow(100);
}
oDiv2.onmouseout = function () {
shallow(30);
}
function shallow(target) {
clearInterval(timer);
timer = setInterval(shallowMove, 30);
function shallowMove() {
if (alpha === target) {
clearInterval(timer);
} else if (alpha < target) {
speed = 10;
alpha += speed;
oDiv2.style.filter = 'alpha(opacity='+ alpha +')';
oDiv2.style.opacity = alpha/100;
} else if (alpha > target) {
speed = -10;
alpha += speed;
oDiv2.style.filter = 'alpha(opacity='+ alpha +')';
oDiv2.style.opacity = alpha/100;
}
}
}
}
</script>
</head>
<body>
<div id="div1">
<span>分享到</span>
</div>
<div id="div2"><img src="data:images/0.png" alt=""></div>
</body>
</html>
缓冲运动
逐渐变慢，最后停止 -
距离越大速度越大，速度取整
- 速度由距离决定
- 速度 = (目标值-当前值)/缩放系数
-
Math.ceil：向上取整
-
Math.floor：向下取整
-
例子：缓冲菜单
- Bug：速度取整
Math.ceil、Math.floor
- 跟随页面滚动的缓冲侧边栏
- 潜在问题：目标不是整数时
- 目标取整：
parseInt()
-
scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
-
document.documentElement.scrollTop：IE、Firefox
-
document.body.scrollTop：chrome
-
Math.random()
- 返回一个等于0小于1的一个随机浮点数
- 说明：求 n到 m之间的随机整数的公式
random = Math.floor(Math.random()*(m-n+1)+n)
-
代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" href="../reset.css">
<title>缓冲运动及停止条件</title>
<style>
body {
width: 800px;
height: 2000px;
}
#div1 {
width: 150px;
height: 400px;
background-color:cyan;
position: absolute;
left: -150px;
}
#div1 span {
width: 20px;
height: 60px;
left: 150px;
background-color:rgb(106, 176, 255);
position: absolute;
margin-top: 170px;
}
#div2 {
top: 50px;
left: 150px;
position: absolute;
filter:alpha(opacity=30);
opacity: 0.3;
width: 140px;
height: 140px;
background-color: red;
}
#div3 {
width: 100px;
height: 200px;
background: rgb(99, 128, 255);
position: absolute;
right: 0px;
bottom: 0px;
}
#div4 {
width: 298px;
height: 198px;
border: rgb(0, 0, 0) solid 1px;
position: absolute;
left: 100px;
}
</style>
<script>
window.onload = function () {
// 封装getElementById
function get(id) {
return document.getElementById(id);
};
var oDiv = get('div1');
var timer = '';
// 注册鼠标移入事件
oDiv.onmouseover = function () {
startMove(0, oDiv);
};
oDiv.onmouseout = function () {
startMove(-150, oDiv);
};
// 图片淡入淡出
var oDiv2 = get('div2');
var alpha = 30;
oDiv2.onmouseover = function () {
shallow(100);
}
oDiv2.onmouseout = function () {
shallow(30);
}
// 变浅函数
function shallow(target) {
clearInterval(timer);
timer = setInterval(shallowMove, 30);
function shallowMove() {
speed = (target - alpha)/7;
if (alpha === target) {
clearInterval(timer);
} else if (alpha < target) {
alpha += speed;
oDiv2.style.filter = 'alpha(opacity='+ Math.ceil(alpha) +')';
oDiv2.style.opacity = Math.ceil(alpha)/100;
} else if (alpha > target) {
alpha += speed;
oDiv2.style.filter = 'alpha(opacity='+ Math.floor(alpha) +')';
oDiv2.style.opacity = Math.floor(alpha)/100;
}
}
}
// 跟随页面滚动的缓冲侧边栏
var oDiv3 = get('div3');
window.onscroll = function () {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var target = parseInt((document.documentElement.clientHeight - oDiv3.offsetHeight)/2 + scrollTop);
scrollMove(target);
console.log(
'可视区：', document.documentElement.clientHeight,
'滚动距离：', scrollTop,
'div3的高度：', oDiv3.offsetHeight,
'目标值：', target)
}
// 纵向运动函数
function scrollMove(target) {
clearInterval(timer);
timer = setInterval(scrollMoving, 30);
function scrollMoving() {
var speed = (target - oDiv3.offsetTop)/7;
if (oDiv3.offsetTop === target) {
clearInterval(timer);
} else if (oDiv3.offsetTop > target) {
oDiv3.style.top = oDiv3.offsetTop + Math.floor(speed) + 'px';
} else if (oDiv3.offsetTop < target) {
oDiv3.style.top = oDiv3.offsetTop + Math.ceil(speed) + 'px';
}
}
}
// 运动停止的条件
var btn1 = get('btn1');
var btn2 = get('btn2');
var btn3 = get('btn3');
var btn4 = get('btn4');
btn1.onclick = function () {
startMove(100, oDiv2);
}
btn2.onclick = function () {
startMove(400, oDiv2);
}
btn3.onclick = function () {
startMove2(100, oDiv2);
}
btn4.onclick = function () {
startMove2(400, oDiv2);
}
// 横向缓冲运动框架
function startMove(target, div) {
clearInterval(timer);
timer = setInterval(move, 30);
function move() {
speed = (target - div.offsetLeft)/9;
if (div.offsetLeft < target) {
div.style.left = div.offsetLeft + Math.ceil(speed) + 'px';
} else if (div.offsetLeft > target) {
div.style.left = div.offsetLeft + Math.floor(speed) + 'px';
} else if (div.offsetLeft === target){
clearInterval(timer);
}
}
}
// 横向匀速运动框架
function startMove2(target, div) {
clearInterval(timer);
timer = setInterval(move2, 30);
function move2() {
// speed正向
if (div.offsetLeft <= target) {
speed = 9;
moving();
}
// speed反向
else if (div.offsetLeft >= target) {
speed = -9;
moving();
}
function moving() {
if (Math.abs(target - div.offsetLeft) <= Math.abs(speed)) {
div.style.left = target + 'px'; // 直接到达
clearInterval(timer); // 停止
} else {
div.style.left = div.offsetLeft + speed + 'px';
}
}
}
}
}
</script>
</head>
<body>
<div id="div1">
<span>分享到</span>
</div>
<div id="div2"><img src="data:images/0.png" alt=""></div>
<div id="div3"></div>
<div id="div4">
<input type="button" name="" id="btn1" value="减速到100px">
<input type="button" name="" id="btn2" value="减速到400px">
<input type="button" name="" id="btn3" value="匀速到100px">
<input type="button" name="" id="btn4" value="匀速到400px">
</div>
</div>
</body>
</html>
运动的停止条件
- 运动终止条件
- 匀速运动：两点足够近（直接改位置），
Math.abs() 取绝对值
- 缓冲运动：两点重合（取整后）
- 代码：同上
JS 运动应用
多物体运动框架
- 多个物体同时运动
- 多物体运动框架
- 定时器作为物体的属性
- 参数的传递：物体、目标值
- 例子：多个
div 淡入淡出
- 所有东西都不能公用
- 属性与运动对象绑定：速度、其它属性值（如透明度等）
- 代码：同下
任意值运动框架
-
offset 属性的 Bug
- 获取的是整个盒子模型的大小，有边框的 div 变宽
- 用
obj.currentStyle('name') 和 getComputedStyle(obj,'').name代替 offset
-
原有运动框架的问题
- 只能让某个值运动起来
- 如果想让其他值运动起来，要修改程序
-
扩展的运动框架
- 运动属性作为参数
- 封装
opacity
- 小数精度问题：
Math.round() 四舍五入取整
-
代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" href="../reset.css">
<title>缓冲运动及停止条件</title>
<style>
body {
width: 800px;
height: 2000px;
}
div {
width: 100px;
height: 100px;
background-color: darkblue;
}
#div1 {
position: absolute;
}
#div2 {
position: absolute;
top: 110px;
}
#div3 {
position: absolute;
top: 220px;
}
#div4 {
position: absolute;
top: 330px;
opacity: 0.3;
filter: alpha(opacity=30);
}
#div5 {
position: absolute;
top: 440px;
opacity: 0.3;
filter: alpha(opacity=30);
}
#div6 {
position: absolute;
top: 550px;
opacity: 0.3;
filter: alpha(opacity=30);
}
#div7 {
left: 400px;
position: absolute;
}
#div8 {
left: 510px;
position: absolute;
border: red solid 10px;
}
#div9 {
left: 110px;
top: 330px;
position: absolute;
color: seashell;
}
#div10 {
left: 110px;
top: 440px;
position: absolute;
border: rgb(255, 106, 0) solid 1px;
}
#div11 {
left: 110px;
top: 550px;
position: absolute;
opacity: 0.2;
filter: alpha(opacity=20);
}
</style>
<script>
window.onload = function () {
// 封装getElementById
function get(id) {
return document.getElementById(id);
};
// 封装获取计算后元素样式函数，返回小数
function getStyle(obj, name) {
if (obj.currentStyle) {
return obj.currentStyle[name];
} else {
return getComputedStyle(obj, '') [name];
}
}
// 多物体运动框架 offset 获取的是整个盒子的大小，无法通用
// function startMove(obj, iTarget, name) {
// clearInterval(obj.timer);
// obj.timer = setInterval(move, 30);
// function move() {
// iTarget = parseInt(iTarget);
// var speed = (iTarget - obj['offset'+name])/7;
// if (speed < 0) {
// speed = Math.floor(speed);
// } else {
// speed = Math.ceil(speed);
// }
// if (iTarget === obj['offset'+name]) {
// clearInterval(obj.timer);
// } else {
// obj.style[name.toLowerCase()] = obj['offset'+name] + speed + 'px';
// }
// console.log(iTarget,obj['offset'+name],speed)
// }
// }
// 任意值运动框架
function startMove(obj, iTarget, name) {
clearInterval(obj.timer);
obj.timer = setInterval(move, 30);
function move() {
var objName = 0;
if (name === 'opacity') {
// 用 parseFloat 保留小数并去掉后面 px ，从左至右提取数字，遇到不是数字跳出
// Math.round() 四舍五入取整
objName = Math.round(parseFloat(getStyle(obj, name))*100);
} else {
// 用 parseInt 去掉后面 px ，从左至右提取数字，遇到不是数字跳出
objName = parseInt(getStyle(obj, name));
}
var speed = (iTarget - objName)/7;
if (speed < 0) {
speed = Math.floor(speed);
} else {
speed = Math.ceil(speed);
}
if (iTarget === objName) {
clearInterval(obj.timer);
} else {
if (name === 'opacity') {
obj.style[name] = (objName + speed)/100;
obj.style.filter = "alpha("+[name]+ "=" + (objName + speed) + ")";
} else {
obj.style[name] = objName + speed + 'px';
}
}
console.log('iTarget',iTarget,'objName',objName,'getStyle',getStyle(obj, name),speed)
}
}
var oDiv1 = get('div1');
var oDiv2 = get('div2');
var oDiv3 = get('div3');
var oDiv7 = get('div7');
var oDiv8 = get('div8');
var oDiv9 = get('div9');
var oDiv10 = get('div10');
var oDiv11 = get('div11');
// 变宽
oDiv1.onmouseover = function () {
startMove(oDiv1, 400, 'width')
}
oDiv1.onmouseout = function () {
startMove(oDiv1, 100, 'width')
}
oDiv2.onmouseover = function () {
startMove(oDiv2, 400, 'width')
}
oDiv2.onmouseout = function () {
startMove(oDiv2, 100, 'width')
}
oDiv3.onmouseover = function () {
startMove(oDiv3, 400, 'width')
}
oDiv3.onmouseout = function () {
startMove(oDiv3, 100, 'width')
}
// 变高
oDiv7.onmouseover = function () {
startMove(oDiv7, 400, 'height')
}
oDiv7.onmouseout = function () {
startMove(oDiv7, 100, 'height')
}
oDiv8.onmouseover = function () {
startMove(oDiv8, 400, 'height')
}
oDiv8.onmouseout = function () {
startMove(oDiv8, 100, 'height')
}
oDiv9.onmouseover = function () {
startMove(oDiv9, 40, 'fontSize')
}
oDiv9.onmouseout = function () {
startMove(oDiv9, 12, 'fontSize')
}
oDiv10.onmouseover = function () {
startMove(oDiv10, 100, 'borderWidth')
}
oDiv10.onmouseout = function () {
startMove(oDiv10, 1, 'borderWidth')
}
oDiv11.onmouseover = function () {
startMove(oDiv11, 100, 'opacity')
}
oDiv11.onmouseout = function () {
startMove(oDiv11, 20, 'opacity')
}
// 淡入淡出
function shallowMove(obj, iTarget) {
clearInterval(obj.timer);
obj.timer = setInterval(move, 30);
function move() {
iTarget = parseInt(iTarget);
var speed = (iTarget - obj.alpha)/7;
if (speed < 0) {
speed = Math.floor(speed);
} else {
speed = Math.ceil(speed);
}
if (iTarget === obj.alpha) {
clearInterval(obj.timer);
} else {
obj.alpha += speed;
obj.style.opacity = obj.alpha/100 ;
obj.style.filter = "alpha(opacity="+ obj.alpha + ")";
}
}
}
var oDiv4 = get('div4');
var oDiv5 = get('div5');
var oDiv6 = get('div6');
var aDiv = document.getElementsByTagName('div');
for (var i in aDiv) {
aDiv[i].alpha = 30;
}
oDiv4.onmouseover = function () {
shallowMove(oDiv4, 100)
}
oDiv4.onmouseout = function () {
shallowMove(oDiv4, 30)
}
oDiv5.onmouseover = function () {
shallowMove(oDiv5, 100)
}
oDiv5.onmouseout = function () {
shallowMove(oDiv5, 30)
}
oDiv6.onmouseover = function () {
shallowMove(oDiv6, 100)
}
oDiv6.onmouseout = function () {
shallowMove(oDiv6, 30)
}
}
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
<div id="div6"></div>
<div id="div7"></div>
<div id="div8"></div>
<div id="div9">123adsfzv</div>
<div id="div10"></div>
<div id="div11"></div>
</body>
</html>
仿 Flash 图片展示
JS 运动中级
链式运动框架
- 回调函数：
startMove(obj, attr, iTarget, fn)
- 运动停止时，执行函数
- 运动停止时，开始下一次运动
- 例子：土豆网右下角菜单
完美运动框架
运动框架总结
- 运动框架演变过程
-
startMove(iTarget) ：运动框架
-
startMove(obj, iTarget) ：多物体
-
startMove(obj, attr, iTarget) ：任意值
-
startMove(obj, attr, iTarget, fn) ：链式运动
-
startMove(obj, json) ：多值运动
-
startMove(obj, json, fn) ：完美运动框架
运动框架应用
-
运动框架应用
-
例子：新浪微博
链式运动 -
笔记：CSS white-space 属性 保留换行
值 描述
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列，但是正常地进行换行。
pre-line 合并空白符序列，但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。
-
代码：
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>幻灯片上下滑动和新浪微博效果</title>
<link rel="stylesheet" href="../reset.css">
<link rel="stylesheet" href="./css/18.1.css">
<script src="./lib/move2.js"></script>
<script>
window.onload = function () {
// 封装 getElementById
function get(id) {
return document.getElementById(id);
}
// 封装 getElementsByTagName
function gets(tagName) {
return document.getElementsByTagName(tagName)
}
// 封装 getByClassName 方法
function getByClassName(oParent, sClass) {
var aResult = new Array();
var aEle = document.getElementsByTagName('*');
for (var i in aEle) {
if (aEle[i].className === sClass) {
aResult.push(aEle[i]);
}
}
return aResult;
}
// 左右箭头切换图片
// 获取箭头所在 ul
var oDiv_position = get('div_position');
var ul_btn = getByClassName(oDiv_position[1], 'ul_btn')[0];
// 获取 li
var li_btn_left = getByClassName(ul_btn, 'slider_btn_left')[0];
var li_btn_right = getByClassName(ul_btn, 'slider_btn_right')[0];
// 获取 img
var left_icon = getByClassName(li_btn_left, 'left_icon')[0];
var right_icon = getByClassName(li_btn_right, 'right_icon')[0];
// 鼠标移入/移出 显示/隐藏
li_btn_left.onmouseover = left_icon.onmouseover = function () {
startMove(left_icon, {'opacity': 30});
}
li_btn_left.onmouseout = left_icon.onmouseout = function () {
startMove(left_icon, {'opacity': 0});
}
li_btn_right.onmouseover = right_icon.onmouseover = function () {
startMove(right_icon, {'opacity': 30});
}
li_btn_right.onmouseout = right_icon.onmouseout = function () {
startMove(right_icon, {'opacity': 0});
}
// 获取大图 class li
var ul_pic = getByClassName(oDiv_position[1], 'ul_pic')[0];
var oli_pic = getByClassName(ul_pic, 'li_pic');
var oImg = gets('img');
// 获取缩略图 class li
var div_thumbnail = get('div_thumbnail');
var ul_thumbnail = getByClassName(div_thumbnail, 'ul_thumbnail')[0];
var oli_thumnali = getByClassName(ul_thumbnail, 'li_thumnali');
var pic_index = 0;
var index = 0;
var z = 1;
// 缩略图鼠标移入高亮，移出恢复,并注册index 绑定大图
for (var i in oli_thumnali) {
oli_thumnali[i].index = i;
oli_pic[i].index = i;
// 鼠标移入
oli_thumnali[i].onmouseover = function () {
startMove(this, {'opacity': 100});
}
// 鼠标移出 如果是当前显示则不执行
oli_thumnali[i].onmouseout= function () {
if (oli_pic[this.index].style.zIndex != z) {
startMove(this, {'opacity': 50});
}
}
// 点击小图片显示大图
oli_thumnali[i].onclick = function () {
console.log(pic_index,parseInt(this.index))
// 如果点击 this.index > 2 && this.index - pic_index > 0 则向右移
if (parseInt(this.index) > 2 && this.index - pic_index >0) {
pic_index = parseInt(this.index);
// 下一张会 ++ 先--
pic_index--;
right_icon.onclick();
} // 如果 this.index > 0 && this.index - pic_index < 0 则向左移
else if (this.index > 0 && this.index - pic_index < 0) {
pic_index = parseInt(this.index);
// 下一张会 -- 先++
pic_index++;
left_icon.onclick();
} else {
pic_index = parseInt(this.index);
tab();
}
}
// 让第一个图片显示
if (oli_pic[i].style.zIndex == z) {
startMove(oli_thumnali[i], {'opacity': 100});
}
}
// 鼠标点击按钮 上一张/下一张
var slide = ''; // 滑动方向
left_icon.onclick = function () {
// 是否 <0
if (0 <= pic_index - 1) {
// console.log('1~length-1:',pic_index)
pic_index--;
if (0 < pic_index && pic_index <= oli_thumnali.length - 1) {
// 1~length-1
startMove(ul_thumbnail, {'marginLeft': -(pic_index-1)*li_thumbnali_width});
// 向右滑动特效
slide = 'right';
tab();
} else {
// 0
slide = 'right';
tab();
}
} else {
// <0 重置pic_index循环播放
// console.log('0:',pic_index)
pic_index = oli_thumnali.length - 1;
startMove(ul_thumbnail, {'marginLeft': -(pic_index-2)*li_thumbnali_width});
tab();
}
}
right_icon.onclick = function () {
// 判断下一张是否大于总数
if (pic_index + 1 < oli_thumnali.length) {
pic_index++;
// console.log('1~oli_thumnali.length-1：',pic_index);
if (2 < pic_index && pic_index <= oli_thumnali.length - 1) {
startMove(ul_thumbnail, {'marginLeft': -(pic_index-2)*li_thumbnali_width});
// 向左滑动特效
slide = 'left';
tab();
} else {
slide = 'left';
tab();
}
} else {
// 大于 oli_thumnali.length-1 跳到第一张
pic_index = 0;
startMove(ul_thumbnail, {'marginLeft': pic_index*li_thumbnali_width});
tab();
}
}
function tab() {
// 判断是否是当前显示图片
if (oli_pic[pic_index].style.zIndex != z) {
// 全部图片半透明
for (var j in oli_thumnali) {
startMove(oli_thumnali[j], {'opacity': 50});
}
// 显示当前点击图片
startMove(oli_thumnali[pic_index], {'opacity': 100});
// 显示当前index对应大图
oli_pic[pic_index].style.zIndex = ++z;
// 显示文字的按钮
ul_btn.style.zIndex = ul_txt.style.zIndex = z;
// 隐藏大图 再用动画显示
// oImg[pic_index].style.height = 0;
// oli_pic[pic_index].style.top = '-360px';
// oImg[pic_index].style.width = '0px';
// startMove(oImg[pic_index],{"width": 640, "height": 360});
if (slide === 'left') {
oli_pic[pic_index].style.left = '640px';
startMove(oli_pic[pic_index],{"left": 0});
// 判断还有没有下一张 两张拼接
if (pic_index-1 > 0 && pic_index+1 < oli_pic.length)
startMove(oli_pic[pic_index-1],{"left": -640});
} else if (slide === 'right') {
oli_pic[pic_index].style.left = '-640px';
startMove(oli_pic[pic_index],{"left": 0});
// 判断还有没有下一张 两张拼接
if (pic_index+1 < oli_pic.length) {
startMove(oli_pic[pic_index+1],{"left": 640});
}
} else {
oImg[pic_index].style.height = '0px';
startMove(oImg[pic_index],{"height": 360});
}
// 显示当前图片介绍
introduction.innerHTML = arr[pic_index];
sum_num.innerHTML = parseInt(pic_index) + 1 + '/' + oli_thumnali.length;
}
}
// 自动播放
oDiv_position.timer = setInterval(right_icon.onclick, 2000);
oDiv_position.onmouseover = function () {
clearInterval(oDiv_position.timer);
}
oDiv_position.onmouseout = function () {
clearInterval(oDiv_position.timer);
oDiv_position.timer = setInterval(right_icon.onclick, 2000);
}
// 设置 ul_thumbnail 的宽度
var li_thumbnali_width = oli_thumnali[0].offsetWidth;
ul_thumbnail.style.width = oli_thumnali.length * oli_thumnali[0].offsetWidth + 'px';
// 设置文字说明
var arr = new Array('雪山','峡谷','悬崖','岩壁','海岸','雪覆盖的悬崖','雪山','峡谷','悬崖','岩壁','海岸','雪覆盖的悬崖');
// 获取文字说明 li
var ul_txt = getByClassName(oDiv_position[1], 'ul_txt')[0];
var introduction = getByClassName(ul_txt, 'introduction')[0];
var sum_num = getByClassName(ul_txt, 'sum_num')[0];
sum_num.innerHTML = pic_index + 1 + '/' + oli_thumnali.length;
introduction.innerHTML = arr[pic_index];
// 新浪微博新微博效果 评论区
var div_com_show = get('div_com_show');
var text_comment = get('text_comment');
var btn_comment = get('btn_comment');
btn_comment.onclick = function () {
// 1.创建子节点 2.文字添加到子节点 3.设置样式
// 4.渲染子节点 5.设置透明度并获取高度 6.链式动画
var oLi = document.createElement('li');
oLi.innerHTML = text_comment.value;
oLi.className = 'li_comment';
text_comment.value = '';
if (div_com_show.children.length > 0) {
div_com_show.insertBefore(oLi, div_com_show.children[0]);
} else {
div_com_show.appendChild(oLi);
}
// var iHeight = parseInt(oLi.offsetHeight) - 20; // 多算了padding
var iHeight = parseInt(getStyle(oLi, 'height'));
div_com_show.children[0].style.height = '0';
startMove(oLi,{"height": iHeight}, function fn() {
startMove(oLi,{"opacity":100});
})
}
}
</script>
<body>
<div id="div_center">
<div id="div_position">
<div id="div_pic">
<ul class="ul_pic">
<li class="li_pic" style="z-index:1"><img src="./images/album/1.jpeg" alt=""></li>
<li class="li_pic"><img src="./images/album/2.jpeg" alt=""></li>
<li class="li_pic"><img src="./images/album/3.jpeg" alt=""></li>
<li class="li_pic"><img src="./images/album/4.jpeg" alt=""></li>
<li class="li_pic"><img src="./images/album/5.jpeg" alt=""></li>
<li class="li_pic"><img src="./images/album/6.jpeg" alt=""></li>
<li class="li_pic"><img src="./images/album/2.jpeg" alt=""></li>
<li class="li_pic"><img src="./images/album/5.jpeg" alt=""></li>
</ul>
</div>
<ul class="ul_btn" style="z-index:1">
<li class="slider_btn_left"><img class="left_icon" src="./images/images/slider_btn_icon_left.png" alt=""></li>
<li class="slider_btn_right"><img class="right_icon" src="./images/images/slider_btn_icon_right.png" alt=""></li>
</ul>
<ul class="ul_txt" style="z-index:1">
<li class="li4_background"></li>
<li class="li4_introduction">图片说明：<span class="introduction">introduction</span></li>
<li class="li4_sum_num">图片位置：<span class="sum_num"></span></li>
</ul>
<div id="div_thumbnail">
<ul class="ul_thumbnail">
<li class="li_thumnali"><img src="./images/album/1.jpeg" alt=""></li>
<li class="li_thumnali"><img src="./images/album/2.jpeg" alt=""></li>
<li class="li_thumnali"><img src="./images/album/3.jpeg" alt=""></li>
<li class="li_thumnali"><img src="./images/album/4.jpeg" alt=""></li>
<li class="li_thumnali"><img src="./images/album/5.jpeg" alt=""></li>
<li class="li_thumnali"><img src="./images/album/6.jpeg" alt=""></li>
<li class="li_thumnali"><img src="./images/album/2.jpeg" alt=""></li>
<li class="li_thumnali"><img src="./images/album/5.jpeg" alt=""></li>
</ul>
</div>
<div id="div_comments">
<div id="div_com_inp">
<textarea class="text" name="" id="text_comment" cols="60" rows="5"></textarea>
<input class="btn" type="button" name="" id="btn_comment" value="发表评论">
</div>
<div id="div_com_show">
</div>
</div>
</div>
</div>
</body>
</html>
/* 18.1.css */
body {
width: 100%;
height: 100%;
background-color: cornsilk;
}
li {
float: left;
}
/* 居中 div */
#div_center {
margin: 20px auto;
width: 640px;
height: 450px;
}
/* 定位 div */
#div_position {
width: 640px;
height: 1100px;
overflow: hidden;
background-color: rgb(70, 70, 70);
position: absolute;
}
/* 大图样式 */
#div_pic {
width: 640px;
height: 360px;
overflow: hidden;
position: absolute;
}
.ul_pic {
position: absolute;
}
.li_pic {
position: absolute;
}
.li_pic img{
width: 640px;
height: 360px;
}
/* 左右键样式 */
.ul_btn {
top: 0px;
width: 640px;
height: 360px;
position: absolute;
float: left;
}
.slider_btn_left, .slider_btn_right {
width: 150px;
height: 360px;
}
.slider_btn_right {
float: right;
}
.slider_btn_left img{
padding: 150px 105px 150px 10px ;
position: relative;
width: 35px;
height: 60px;
opacity: 0;
filter: alpha(opacity=0);
float: left;
}
.slider_btn_right img{
padding: 150px 10px 150px 105px ;
position: relative;
width: 35px;
height: 60px;
opacity: 0;
filter: alpha(opacity=0);
float: right;
}
/* 小图样式 */
#div_thumbnail {
top: 360px;
width: 620px;
background-color: rgb(70, 70, 70);
margin: 0 10px 0 5px;
overflow: hidden;
position: absolute;
}
.ul_thumbnail {
width: 640px;
height: 90px;
}
.li_thumnali {
opacity: 0.5;
filter: alpha(opacity=50);
}
.li_thumnali img{
padding: 10px 0px 10px 10px;
width: 125px;
height: 70px;
}
/* 图片文字栏 */
.ul_txt {
width: 640px;
height: 20px;
position: absolute;
top: 340px;
}
.li4_background {
width: 640px;
height: 20px;
top: 0px;
background-color: rgb(0, 0, 0);
opacity: 0.5;
filter: alpha(opacity=50);
}
.li4_introduction {
top: -17px;
margin-left: 10px;
width: 500px;
position: relative;
color: rgb(255, 255, 255);
filter: alpha(opacity=80);
opacity: 0.8;
}
.li4_sum_num {
width: 120px;
top: -17px;
left: 10px;
position: relative;
color: rgb(255, 255, 255);
filter: alpha(opacity=80);
opacity: 0.8;
}
/* 评论区 */
#div_comments {
position: absolute;
display: block;
top: 450px;
padding-top: 20px;
width: 640px;
background-color: rgb(252, 229, 200);
}
#div_com_inp {
margin-top: 5px;
border-top: burlywood dashed 1px;
border-bottom: burlywood dashed 1px;
}
.text {
margin: 20px 0 20px 53px;
}
.btn {
margin: 20px 0 20px 20px;
width: 70px;
height: 70px;
}
#div_com_show {
height: 475px;
margin: 20px 50px;
padding: 0px 20px;
background-color: rgb(255, 255, 255);
overflow: hidden;
}
.li_comment {
white-space: pre-wrap;
padding: 10px 5px;
float: none;
border-bottom: cadetblue dashed 1px;
opacity: 0;
filter: alpha(opacity=0);
overflow: hidden;
}
JS事件基础
Event 对象和事件冒泡
-
什么是 Event 对象
- 用来获取鼠标/键盘事件的信息：鼠标位置、键盘按键
- 例子：获取鼠标位置：
clientX
-
document 的本质是整个网页：document.childNodes[0].tagName = '<!DOCTYPE>'
-
获取 Event 对象**（兼容性写法）**
-
var oEvent = ev||event; 火狐用 ev / IE 用 event
- 事件函数把事件对象最为参数传入：
btn.onclick = function(ev) { var oEvent = ev||event;}
-
事件流
- 事件流冒泡：事件往父级传递
- 取消冒泡：
oEvent.cancelBubble = true
- 例子：仿
select 控件
-
DOM 事件流
-
代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>键盘事件和仿select下拉框</title>
<link rel="stylesheet" href="../reset.css">
<style>
#div1 {
width: 200px;
height: 200px;
position: absolute;
background-color: rgb(255, 0, 0);
display: none;
}
</style>
<script>
// 封装 getElementById 函数
function get(id) {
return document.getElementById(id);
}
window.onload = function () {
var oDiv = get('div1');
var btn = get('btn');
btn.onclick = function (ev) {
var oEvent = ev||event;
oDiv.style.display = 'block';
console.log(this);
oEvent.cancelBubble = true;
}
document.onclick = function () {
oDiv.style.display = 'none';
console.log(this);
}
}
</script>
</head>
<body>
<input type="button" value="显示" id="btn">
<div id="div1"></di'v>
</body>
</html>
鼠标事件
-
鼠标位置
-
获取鼠标在页面的绝对位置
封装函数 例子：一串跟随鼠标的 Div -
代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>跟随鼠标的一串div</title>
<link rel="stylesheet" href="../reset.css">
<style>
div {
width: 10px;
height: 10px;
position: absolute;
background-color: rgb(255, 0, 0);
}
</style>
<script>
window.onload = function () {
// 封装鼠标当前坐标函数
function getPos(ev) {
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft = document.documentElement.scollLeft||document.body.scrollLeft;
return {x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop};
}
var oDiv = document.getElementsByTagName('div');
document.onmousemove = function () {
var ev = ev || event;
// 后一个元素跟随前一个元素
for ( var i = oDiv.length-1; i > 0; i--) {
console.log(oDiv[i].style.left,oDiv[i-1].offsetLeft)
oDiv[i].style.left = oDiv[i-1].offsetLeft + 'px';
oDiv[i].style.top = oDiv[i-1].offsetTop + 'px';
}
// 当前多变赋值给第一个元素，
var pos = getPos(ev);
oDiv[0].style.left = pos.x + 'px';
oDiv[0].style.top = pos.y + 'px';
}
}
</script>
</head>
<body>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
</body>
</html>
键盘事件
-
keyCode
- 获取用户按下键盘的哪个键：
onkeydown / onkeyup
- 例子：键盘控制
Div 移动
-
其它属性
-
ctrlKey、shiftKey、altKey
- 例子：提交留言
-
代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>键盘控制元素移动和回车提交</title>
<link rel="stylesheet" href="../reset.css">
<style>
/* 评论区 */
#div_comments {
position: absolute;
display: block;
padding-top: 20px;
width: 640px;
background-color: rgb(252, 229, 200);
}
#div_com_inp {
margin-top: 5px;
border-top: burlywood dashed 1px;
border-bottom: burlywood dashed 1px;
}
.text {
margin: 20px 0 20px 53px;
}
.btn {
margin: 20px 0 20px 20px;
width: 70px;
height: 70px;
}
#div_com_show {
height: 200px;
margin: 20px 50px;
padding: 0px 20px;
background-color: rgb(255, 255, 255);
overflow: hidden;
}
.li_comment {
white-space: pre-wrap;
padding: 10px 5px;
float: none;
border-bottom: cadetblue dashed 1px;
opacity: 0;
filter: alpha(opacity=0);
overflow: hidden;
}
</style>
<script>
// 封装 getElementById 函数
function get(id) {
return document.getElementById(id);
}
window.onload = function () {
// var oDiv = get('div1');
// document.onkeydown = function () {
// var ev = event||ev;
// if (ev.keyCode === 37) {
// oDiv.style.left = oDiv.offsetLeft - 10 + 'px'
// } else if (ev.keyCode === 39) {
// oDiv.style.left = oDiv.offsetLeft + 10 + 'px'
// } else if (ev.keyCode === 38) {
// oDiv.style.top = oDiv.offsetTop - 10 + 'px'
// } else if (ev.keyCode === 40) {
// oDiv.style.top = oDiv.offsetTop + 10 + 'px'
// }
// }
//获取Div元素
var oDiv = document.getElementById("div_comments");
//创建各个方向条件判断初始变量
var left = false;
var right = false;
var top = false;
var bottom = false;
//当按下对应方向键时，对应变量为true
document.onkeydown = function(ev){
var oEvent = ev || event;
var keyCode = oEvent.keyCode;
switch(keyCode){
case 37:
left=true;
break;
case 38:
top=true;
break;
case 39:
right=true;
break;
case 40:
bottom=true;
break;
}
};
//设置一个定时，时间为50左右，不要太高也不要太低
setInterval(function(){
//当其中一个条件为true时，则执行当前函数（移动对应方向）
if(left){
oDiv.style.left = oDiv.offsetLeft-10+"px";
}else if(top){
oDiv.style.top = oDiv.offsetTop-10+"px";
}else if(right){
oDiv.style.left = oDiv.offsetLeft+10+"px";
}else if(bottom){
oDiv.style.top = oDiv.offsetTop+10+"px";
}
},30);
//执行完后，所有对应变量恢复为false，保持静止不动
document.onkeyup = function(ev){
var oEvent = ev || event;
var keyCode = oEvent.keyCode;
switch(keyCode){
case 37:
left=false;
break;
case 38:
top=false;
break;
case 39:
right=false;
break;
case 40:
bottom=false;
break;
}
}
// btn 提交
var btn = get('btn_comment');
var txt = get('text_comment');
var board = get('div_com_show');
btn.onclick = function () {
if (true) {
var oP = document.createElement('p');
oP.innerHTML = txt.value;
txt.value = '';
if (board.children.length > 0) {
board.insertBefore(oP,board.children[0])
} else {
board.appendChild(oP);
}
}
}
// ctrl + enter 提交
txt.onkeydown = function (ev) {
var ev = ev||event;
if (ev.keyCode === 13 && ev.ctrlKey) {
var oP = document.createElement('p');
oP.innerHTML = txt.value;
txt.value = '';
if (board.children.length > 0) {
board.insertBefore(oP,board.children[0])
} else {
board.appendChild(oP);
}
}
}
}
</script>
</head>
<body>
<div id="div_comments">
<div id="div_com_inp">
<textarea class="text" name="" id="text_comment" cols="60" rows="5"></textarea>
<input class="btn" type="button" name="" id="btn_comment" value="发表评论">
</div>
<div id="div_com_show">
<p>CTRL + 回车 提交</p>
<p>键盘控制留言框位置</p>
</div>
</div>
</body>
</html>
JS 事件中级
默认事件
-
默认事件
-
阻止默认事件
- 普通写法：
return false;
- 例子1：屏蔽右键菜单
document.oncontextmenu = function (ev) { return false; }- 弹出自定义右键菜单
- 例子2：只能输入数字的输入框
oTxt.onkeydown = function (ev) { return false; }-
keydown、keyup 事件区别
-
代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>默认事件</title>
<link rel="stylesheet" href="../reset.css">
<style>
#div1 {
width: 100px;
height: 150px;
position: absolute;
background-color: rgb(207, 207, 207);
display: none;
}
</style>
<script>
// 阻止默认事件 阻止右键菜单
document.oncontextmenu = function (ev) {
var ev = ev||event;
var oDiv = get('div1');
oDiv.style.display = 'block';
oDiv.style.top = ev.clientY + 'px';
oDiv.style.left = ev.clientX + 'px';
return false;
}
// 点击其它位置div消失
document.onclick = function (ev) {
var oDiv = get('div1');
oDiv.style.display = 'none';
}
// 封装 getElementById 函数
function get(id) {
return document.getElementById(id);
}
window.onload = function () {
// 只能输入数字的文本框
// ASCII 0:48 ~ 9:58
var txt = get('txt');
txt.onkeydown = function (ev) {
var ev = ev||event;
if (ev.keyCode <= 58 && ev.keyCode >=48 || ev.keyCode === 8) {
} else {
return false;
}
}
}
</script>
</head>
<body>
<input type="text" name="" id="txt">
<div id="div1">
<li>123</li>
<li>456</li>
<li>789</li>
<li>123</li>
<li>456</li>
<li>789</li>
<li>123</li>
<li>456</li>
<li>789</li>
</div>
</body>
</html>
拖拽
-
简单拖拽
- 拖拽原理
- 鼠标按下位置到 div 距离不变
- 三个事件：
onmousedown onmousemove onmouseup
-
靠谱拖拽
- 原有拖拽的问题：移动太快鼠标会移出 div
- FireFox 下，空 Div 拖拽 Bug
- 阻止默认事件：
onmousedown {return false}
- 防止拖出页面
-
代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>拖拽</title>
<link rel="stylesheet" href="../reset.css">
<style>
#div1 {
width: 200px;
height: 200px;
position: absolute;
background-color: rgb(255, 0, 0);
}
</style>
<script>
// 封装 getElementById 函数
function get(id) {
return document.getElementById(id);
}
window.onload = function () {
var oDiv = get('div1');
// oDiv.onmousedown 很容易移出范围
document.onmousedown = function Drag() {
var ev = event||ev;
var _this = this;
// 鼠标可视区位置 - div左边距 = 鼠标在div内的位置
var disX = ev.clientX - oDiv.offsetLeft;
var disY = ev.clientY - oDiv.offsetTop;
console.log(disX,'可视区鼠标X：', ev.clientX, '鼠标Y：',ev.clientY);
this.onmousemove = function mouseMove() {
// 不断获取Event 对象，坐标才会不断更新
var ev = event||ev;
// console.log('可视区鼠标X：', ev.clientX, '鼠标Y：',ev.clientY);
// div位置 = 鼠标可视区新的位置 - 鼠标与div的距离
var left = ev.clientX -disX;
var top = ev.clientY - disY;
if (left < 0) {
left = 0;
}
if (top < 0) {
top = 0
}
if (left > document.documentElement.clientWidth - oDiv.offsetWidth) {
left = document.documentElement.clientWidth - oDiv.offsetWidth + 'px';
}
if (top > document.documentElement.clientHeight - oDiv.offsetHeight) {
top = document.documentElement.clientHeight - oDiv.offsetHeight + 'px';
}
oDiv.style.left = left + 'px';
oDiv.style.top = top + 'px';
}
this.onmouseup = function mouseUp() {
_this.onmousemove = '';
this.onmouseup = '';
}
// 阻止火狐重影bug
return false;
}
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
JS 事件高级应用
事件绑定
-
IE 方式：
-
attachEvent(事件名称, 函数)，绑定事件处理函数
-
detachEvent(事件名称, 函数)，接触绑定
-
DOM 方式：不兼容 IE7
addEventListener(事件名称, 函数, 捕获)removeEventListener(事件名称, 函数, 捕获)
何时使用绑定 绑定事件和 this 绑定匿名函数，会无法删除 -
代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>事件绑定</title>
<link rel="stylesheet" href="../reset.css">
<style>
#div1 {
width: 200px;
height: 200px;
position: absolute;
background-color: rgb(255, 0, 0);
}
</style>
<script>
// 封装 getElementById 函数
function get(id) {
return document.getElementById(id);
}
// 封装 attachEvent 兼容性函数
function myAddEvent(obj, ev, fn) {
if (obj.attachEvent) {
obj.attachEvent('on'+ ev, fn);
} else {
obj.addEventListener(ev, fn , false);
}
}
window.onload = function () {
var oDiv = get('div1');
var btn = get('btn');
myAddEvent(btn, 'click', function () {
console.log('event');
oDiv.style.display = 'none';
})
myAddEvent(btn, 'click', function () {
console.log('event2');
setTimeout(function () {
oDiv.style.display = 'block';
}, 1000);
})
}
</script>
</head>
<body>
<input type="button" id="btn" value="按钮">
<div id="div1"></div>
</body>
</html>
高级拖拽
-
复习拖拽原理
-
限制范围
- 对位置进行判断
- 例子1：不能拖出窗口的 Div
- 例子2：不能拖出指定窗口的 Div
- 磁性吸附
-
图片拖拽
-
文字选中
- 阻止默认事件
return false 可以解决 chrome 、FireFox 、IE9的文字选中问题
- IE 下拖动有问题：
- 事件捕获：
.setCapture() 只兼容IE
- 取消捕获：
.releaseCapture()
-
与 DOM 配合
-
代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>高级拖拽</title>
<link rel="stylesheet" href="../reset.css">
<style>
#div1 {
width: 100px;
height: 100px;
position: absolute;
background-color: rgb(82, 177, 255);
}
.box {
border: black dashed 1px;
position: absolute;
}
</style>
<script>
// 封装 getElementById 函数
function get(id) {
return document.getElementById(id);
}
window.onload = function () {
var oDiv = get('div1');
var oDiv0 = get('div0');
// oDiv.onmousedown 很容易移出范围
oDiv.onmousedown = function Drag() {
var ev = event||ev;
var _this = this;
// 鼠标可视区位置 - div左边距 = 鼠标在div内的位置
var disX = ev.clientX - oDiv.offsetLeft;
var disY = ev.clientY - oDiv.offsetTop;
console.log(disX,'可视区鼠标X：', ev.clientX, '鼠标Y：',ev.clientY);
// 增加边框
var oBox = document.createElement('div');
oBox.className = 'box';
// 边框的大小 - 线宽 = oDiv 的大小
oBox.style.width = this.offsetWidth - 2 + 'px';
oBox.style.height = this.offsetHeight - 2 + 'px';
oDiv0.appendChild(oBox);
// 边框的位置 = oDiv 的位置
oBox.style.left = oDiv.offsetLeft + 'px';
oBox.style.top = oDiv.offsetTop + 'px';
// IE7 兼容
if (this.setCapture) {
this.onmousemove = mouseMove;
this.onmouseup = mouseUp;
oDiv.setCapture();
} else {
document.onmousemove = mouseMove;
document.onmouseup = mouseUp;
}
function mouseUp() {
this.onmousemove = '';
this.onmouseup = '';
// 鼠标松开，oDiv 到 oBox 的位置
oDiv.style.left = oBox.offsetLeft + 'px';
oDiv.style.top = oBox.offsetTop + 'px';
// 删除生成的box
oDiv0.removeChild(oBox);
// IE7 兼容
if (this.releaseCapture) {
this.releaseCapture();
}
}
function mouseMove(ev) {
// 不断获取Event 对象，坐标才会不断更新
var ev = event||ev;
// console.log('可视区鼠标X：', ev.clientX, '鼠标Y：',ev.clientY);
// div位置 = 鼠标可视区新的位置 - 鼠标与div的距离
var left = ev.clientX -disX;
var top = ev.clientY - disY;
// 鼠标移动时 移动虚线框
oBox.style.left = left + 'px';
oBox.style.top = top + 'px';
}
// 阻止火狐重影bug, 解决 chrome FireFox IE9的文字选中问题
return false;
}
}
</script>
</head>
<body>
<div id="div0">
asdfasdfas/sad'234
<div id="div1">asdfasdfas/sad</div>
asdfasdfas/sad'234
</div>
</body>
</html>
自定义滚动条
-
拖拽
- 只有横向拖拽
- 限制范围：范围的大小
- 计算比例：当前值/最大值
-
控制其他对象
- 例子1：控制物体的大小
- 例子2：控制物体的透明度
- 例子3：控制文字滚动
-
代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>自定义滚动条</title>
<link rel="stylesheet" href="../reset.css">
<style>
#div0 {
margin: 10px auto;
width: 600px;
height: 400px;
position: relative;
background-color: blanchedalmond;
}
/* 上下滚动条 */
#div1 {
top: 50px;
right: 50px;
width: 20px;
height: 300px;
position: absolute;
border: rgb(139, 139, 139) solid 1px;
}
#div1_0 {
width: 20px;
height: 40px;
position: absolute;
background-color: rgb(140, 171, 255);
}
/* 文字区 */
#div3 {
left: 60px;
top: 50px;
width: 400px;
height: 300px;
position: absolute;
background-color: rgb(255, 255, 255);
overflow: hidden;
}
#div3_0 {
width: 900px;
position: absolute;
white-space: pre-wrap;
background-color: cornsilk;
}
/* 左右滚动条 */
#div2 {
top: 5px;
right: 140px;
width: 400px;
height: 20px;
position: absolute;
border: rgb(139, 139, 139) solid 1px;
}
#div2_0 {
width: 40px;
height: 20px;
position: absolute;
background-color: rgb(140, 171, 255);
}
</style>
<script>
// 封装 getElementById 函数
function get(id) {
return document.getElementById(id);
}
// 封装获取计算后元素样式函数，返回小数
function getStyle(obj, name) {
if (obj.currentStyle) {
return obj.currentStyle[name];
} else {
return getComputedStyle(obj, '') [name];
}
}
window.onload = function () {
var oDiv1 = get('div1'); // 上下滚动框
var oDiv1_0 = get('div1_0'); // 上下滚动条
var oDiv3 = get('div3'); // 文字框
// var oDiv3_0 = get('div3_0'); // 文字可视区
var oDiv2 = get('div2'); // 左右滚动框
var oDiv2_0 = get('div2_0'); // 左右滚动条
// 文字TOP = (文字框高-可视区高) * (滚动条TOP/(滚动框高-滚动条高))
// 鼠标按下滚动条时触发事件
// 鼠标Y移动时，滚动条top 移动
// 鼠标松开时，事件结束
// 合并函数：ev.clientY offsetTop offsetHeight oDiv1 oDiv1_0 oDiv3 oDiv3_0
// 去掉 offset 改用 getStyle
// console.log(oDiv1.children[0], oDiv1_0)
// 直接传一个对象取子节点或父节点
// 面对对象：srcoll 作为 oDiv1_0 和 oDiv2_0 的方法时，可以用 this 代替 oDiv1_0，只要传入 ev, 'clientY', oDiv3
oDiv1_0.onmousedown = function (ev) {
scroll(ev, 'clientY', oDiv1, oDiv3);
return false; // 可以解决 chrome FireFox IE9的文字选中问题
}
oDiv2_0.onmousedown = function (ev) {
scroll(ev, 'clientX', oDiv2, oDiv3);
return false; // 可以解决 chrome FireFox IE9的文字选中问题
}
function scroll(ev, dir, obj1 , obj2) {
var attr = '';
var attr2 = '';
if (dir === 'clientY') {
attr = 'height';
attr2 = 'top';
} else if (dir === 'clientX') {
attr = 'width';
attr2 = 'left';
} else {
return console.log('参数错误');
}
var oDiv1_0 = obj1.children[0];
var oDiv3_0 = obj2.children[0];
var ev = ev||event;
var disMouse = ev[dir];
// 滚动条旧的位置
var oldPos = parseInt(getStyle(oDiv1_0, attr2));
// 滚动范围 = 滚动条高 + 滚动框高
var disScroll = parseInt(getStyle(obj1, attr)) - parseInt(getStyle(oDiv1_0, attr));
document.onmousemove = function (ev) {
ev = ev||event;
// 移动距离
var disMove = ev[dir] - disMouse;
// 滚动条TOP = 滚动条TOP + 移动距离
var divScroll = oldPos + disMove;
// 文字TOP = (文字框高-可视区高) * (滚动条TOP/(滚动框高-滚动条高))
var disTxt = parseInt(getStyle(obj2, attr)) - parseInt(getStyle(oDiv3_0, attr));
var divTxt = (disTxt)*(divScroll/disScroll);
// 向下移 disMove > 0; 向上移 disMove < 0
if (disMove > 0 && divScroll <= disScroll) {
oDiv1_0.style[attr2] = divScroll + 'px';
oDiv3_0.style[attr2] = divTxt + 'px';
// 文字区
} else if (disMove <= 0 && divScroll >= 0) {
// 都 = 0；divScroll 才能取到 0px
oDiv1_0.style[attr2] = divScroll + 'px';
oDiv3_0.style[attr2] = divTxt + 'px';
} else {
// 防止移动过快超出判断范围, 滚动条距离小于 0 直接到达
if (disMove < 0) {
oDiv1_0.style[attr2] = 0;
oDiv3_0.style[attr2] = 0;
} else if (disMove > 0) {
oDiv1_0.style[attr2] = disScroll + 'px';
oDiv3_0.style[attr2] = disTxt + 'px';
}
}
document.onmouseup = function () {
this.onmousemove = '';
this.onmouseup = '';
}
console.log(disMove,divScroll,disScroll,oldPos,divTxt)
}
}
// oDiv2_0.onmousedown = function (ev) {
// var ev = ev||event;
// var disMouse = ev.clientX;
// var oldPos = this.offsetLeft;
// // 滚动范围 = 滚动条高 + 滚动框高
// var disScroll = oDiv2.offsetWidth - oDiv2_0.offsetWidth -2;
//
// document.onmousemove = function (ev) {
// ev = ev||event;
// // 移动距离
// var disMove = ev.clientX - disMouse;
// // 滚动条TOP = 滚动条TOP + 移动距离
// var divScroll = oldPos + disMove;
// // 文字TOP = (文字框高-可视区高) * (滚动条TOP/(滚动框高-滚动条高))
// var divTxt= (oDiv3.offsetWidth - oDiv3_0.offsetWidth)*(divScroll / disScroll);
// // 向下移 disMove > 0; 向上移 disMove < 0
// if (disMove > 0 && divScroll <= disScroll) {
// oDiv2_0.style.left = divScroll + 'px';
// oDiv3_0.style.left = divTxt + 'px';
// // 文字区
// } else if (disMove <= 0 && divScroll >= 0) {
// // 都 = 0；divScroll 才能取到 0px
// oDiv2_0.style.left = divScroll + 'px';
// oDiv3_0.style.left = divTxt + 'px';
// } else {
// // 防止移动过快超出判断范围, 滚动条距离小于 30 直接到达
// if (disMove < 0 && divScroll < 30) {
// oDiv2_0.style.left = 0;
// oDiv3_0.style.left = 0;
// } else if (disMove > 0 && disScroll - divScroll < 30) {
// oDiv2_0.style.left = disScroll + 'px';
// oDiv3_0.style.left = oDiv3.offsetWidth - oDiv3_0.offsetWidth + 'px';
// }
// }
// document.onmouseup = function () {
// this.onmousemove = '';
// this.onmouseup = '';
// }
// console.log(disMove,divScroll,disScroll,oldPos,divTxt)
// }
// return false; // 可以解决 chrome FireFox IE9的文字选中问题
// }
}
</script>
</head>
<body>
<div id="div0">
<div id="div1">
<div id="div1_0"></div>
</div>
<div id="div2">
<div id="div2_0"></div>
</div>
<div id="div3">
<div id="div3_0">
值 描述
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 标签。inherit 规定应该从父元素继承 white-space 属性的值。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 标签为止。
pre-wrap 保留空白符序列，但是正常地进行换行。
pre-line 合并空白符序列，但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。
- 拖拽
- 只有横向拖拽
- 限制范围：范围的大小
- 计算比例：当前值/最大值
- 控制其他对象
- 例子1：控制物体的大小
- 例子2：控制物体的透明度
- 例子3：控制文字滚动
- 代码：- 拖拽
- 只有横向拖拽
- 限制范围：范围的大小
- 计算比例：当前值/最大值
- 控制其他对象
- 例子1：控制物体的大小
- 例子2：控制物体的透明度
- 例子3：控制文字滚动
- 代码：- 代码：- 拖拽
- 只有横向拖拽
- 限制范围：范围的大小
- 计算比例：当前值/最大值
- 控制其他对象
</div>
</div>
</div>
</body>
</html>
Ajax 基础
Ajax 是什么
- 什么是服务器
- 什么是 Ajax = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）
使用 Ajax
- 基础：请求并显示静态
txt 文件
- 字符集编码：必须统一编码
- 缓存、阻止缓存：
- 根据
URL 缓存：让 URL 一直在变化，在 URL 后加时间戳
- 动态数据：请求 JS（或 json ）文件，获取过来是字符串，需要解析
-
eval 的使用：解析成 JS 元素
- DOM 创建元素
- 局部刷新：请求并显示部分网页文件
Ajax 原理
- HTTP 请求方法
-
GET ---- 用于获取数据（如：浏览帖子）
-
POST---- 用于上传数据（如：用户注册）
- GET/POST 的区别
-
GET 是在 url 里传数据：安全性差、容量小、有缓存
-
POST 不通过 url ：安全性较高，容量大（2G）、无缓存
Ajax 中级
编写 Ajax
-
创建 Ajax 对象
ActiveXObject("Microsoft.XMLHTTP)
-
XMLHttpRequest()
-
连接服务器
-
open(方法，文件名，异步传输)
-
method：请求的类型；
GET 或 POST ，必须大写
-
url：文件在服务器上的位置，GET 请求要避免缓存，请向 URL 添加一个唯一的 ID
-
async：true（异步）或 false（同步）
-
发送请求
接收返回值 -
请求状态监控
POST 请求
一个简单 POST 请求：
实例
xmlhttp.open("POST","/try/ajax/demo_post.php",true); xmlhttp.send();
如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：
实例
xmlhttp.open("POST","/try/ajax/demo_post2.php",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("fname=Henry&lname=Ford");
| 方法 |
描述 |
| setRequestHeader(header,value) |
向请求添加 HTTP 头。 header: 规定头的名称 value: 规定头的值 |
-
代码：
<html>
<head>
<script type="text/javascript">
function Ajax(url, suc, err) {
var oAjax = '';
if (window.XMLHttpRequest) {
// chrome FF IE9
oAjax = new XMLHttpRequest;
} else if (window.ActiveXObject) {
oAjax = new ActiveXObject("Microsoft.XMLHTTP");
}
if (oAjax != '') {
oAjax.onreadystatechange = state_change;
oAjax.open('get', url, true);
oAjax.send();
} else {
err();
}
function state_change() {
if (oAjax.readyState === 4) {
// 完成
if (oAjax.status === 200) {
// 成功
if (suc) {
suc(oAjax.responseText);
} else {
return oAjax.responseText;
}
} else if (oAjax.status === 404){
console.log('url错误或不存在');
} else if (err){
err();
}
} else if (oAjax.readyState === 0){
console.log('未初始化');
} else if (oAjax.readyState === 1){
console.log('正在发送请求');
} else if (oAjax.readyState === 2){
console.log('处理请求中');
} else if (oAjax.readyState === 3){
console.log('正在解析');
}
}
}
window.onload = function () {
var btn = document.getElementById('btn');
btn.onclick = function () {
Ajax('/api/blog/list', function (str) {
// 使用返回数据
console.log('成功')
document.getElementById('T1').innerHTML = str;
})
}
}
</script>
</head>
<body>
<div id="T1" style="border:1px solid black;height:40;width:300;padding:5"></div><br />
<button id="btn">Click</button>
</body>
</html>
Ajax 数据
- 数据类型
- 什么叫数据类型——英语/中文
-
XML / JSON
- 字符集( 文件编码 )
JS 面对对象基础
面对对象是什么
- 什么是对象
- 什么是收音机，许多成分构成的整体，提供一些功能
- 对象是一个整体，对外界提供一些操作
- 什么是面对对象
- 使用对象时，只关注对象提供的功能，不关注其内部细节
- 比如 JQuery
- 面向对象是一种通用思想，并非只有编程中能用，任何事情都可以面对对象
JS 中的面对对象
- 面对对象编程（OOP）的特点
- 抽象：抓住核心问题，把主要特征、相关特征抽出来
- 封装：不考虑内部实现，只考虑功能使用
- 继承：基于已有对象，继承出新的对象
- 多态继承：同时具有几个父对象的特性
- 多态：JAVA 等强类型语言常用，JS 不常用
- 对象的组成
- 方法——函数：过程、动态的
- 属性——变量：状态、静态的
第一个面对对象的程序
- 为对象添加方法和属性
-
this 详解，事件处理中 this 的本质
- 不能在系统对象中随意附加方法、属性，否则会覆盖已有方法、属性
-
Object 对象：系统空白对象
工厂方式
- 工厂方式
- 用构造函数创建一个类
- 什么是类、对象（实例）：模具和零件
- 笔记：构造函数/工厂函数
- 构建对象的函数
-
constructor 属性 返回所有 JavaScript 变量的构造器函数。
- 工厂方式的问题
- 没有 new
- 函数重复定义：函数内容一样却不相等，浪费大量系统资源
- 问题解决：构造函数加上
new , 然后用原型Prototype 为对象添加方法
-
new 做了两件事
- 替你创建了一个空白对象：
var this = new Object()
- 替你返回了这个空白对象：
return this
-
new 和 this
原型：Prototype
面对对象编程方式
- 用混合方式构造对象
- 混合的构造函数 / 原型方式
-
Mixed Constructor Function / Prototype Method
- 原则
- 对象命名规范
JS 面对对象实例
面对对象的选项卡
-
把面向过程的程序，改写成面向对象的形式
- 原则：不能有函数套函数，但可以有全局变量
- 过程：
-
onload：构造函数
- 全局变量：属性
- 函数：方法
- 改错：
-
对象与闭包
-
代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>面对对象的选项卡</title>
<style>
.div2 {
width: 200px;
height: 200px;
margin-top: 20px;
position: relative;
}
.div1 {
width: 200px;
height: 20px;
position: absolute;
top: 0px;
}
ul {
margin: 0;
padding: 0;
display: block;
background: rgb(157, 234, 253);
float: left;
position: absolute;
display: none;
width: 200px;
height: 200px;
}
.ul {
display: block;
}
a {
display: block;
float: left;
width: 49px;
height: 20px;
background: rgb(7, 184, 253);
border-right: 1px solid rgb(255, 0, 234);
text-decoration: none;
}
.a {
background: rgb(32, 108, 221);
}
</style>
<script>
// 封装 getElementById 函数
function get(id) {
return document.getElementById(id);
}
// 封装 getElementsByTagName
function gets(obj,tagName) {
return obj.getElementsByTagName(tagName)
}
// onload 作为构造函数
window.onload = function () {
new TabSwitch('tabS')
}
// 构造一个对象
function TabSwitch(id){
var oDiv = get(id);
var _this = this; // 避免找不到 this
// 全局变量作为属性
this.aA = gets(oDiv,'a');
this.aUl = gets(oDiv,'ul');
// 显示第一个元素
this.aUl[0].className = 'ul';
// 当鼠标覆盖某个标签时 显示对应元素
for (var i = 0; i < this.aUl.length; i++) {
this.aA[i].index = i;
this.aA[i].onmouseover = function () {
// 把当前this作为参数传入，_this作为当前this调用直接传入
_this.showTab(this);
}
}
}
// 函数作为方法 事件this作为参数传入
TabSwitch.prototype.showTab = function (aA) {
// console.log(this); // 当前this是调用方法的_this
for (var i = 0; i < this.aA.length; i++) {
this.aUl[i].className = '';
this.aA[i].className = '';
}
this.aUl[aA.index].className = 'ul';
this.aA.className = 'a';
}
</script>
</head>
<body>
<div id="tabS">
<div class="div1">
<a href="javascript:;" id="a0">11</a>
<a href="javascript:;" id="a1">22</a>
<a href="javascript:;" id="a2">33</a>
<a href="javascript:;" id="a3">44</a>
</div>
<div class="div2">
<ul>
<li>1</li>
</ul>
<ul>
<li>2</li>
</ul>
<ul>
<li>3</li>
</ul>
<ul>
<li>4</li>
</ul>
</div>
</div>
</body>
</html>
JS 面对对象高级
Json 方式的面向对象
拖拽和继承
- 面向对象的拖拽
- 对象的继承
- 什么是继承
- 在原有类的基础上略作修改，得到一个新类
- 不影响原有类的功能
-
instanceof 运算符：返回 true，如果对象是对象类型的实例。
使用继承
-
限制范围的拖拽类
-
原型链
-
代码：拖拽改写为面对对象并继承一个新的对象
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>面对对象的拖拽</title>
<link rel="stylesheet" href="../reset.css">
<style>
#div1 {
top: 100px;
left: 100px;
width: 200px;
height: 200px;
position: absolute;
background-color: rgb(255, 0, 0);
}
#div2 {
width: 200px;
height: 200px;
position: absolute;
background-color: rgb(0, 255, 170)
}
</style>
<script src="./lib/Drag.js"></script>
<script src="./lib/LimitDrag.js"></script>
<script>
window.onload = function () {
new Drag('div1');
new LimitDrag('div2');
}
</script>
</head>
<body>
<div id="div1">普通拖拽</div>
<div id="div2">限制范围的拖拽</div>
</body>
</html>
function Drag(id) {
this.disX = '';
this.disY = '';
this.oDiv = document.getElementById(id);
var _this = this;
this.oDiv.onmousedown = function (ev) {
_this.fnDown(ev);
return false;
};
}
Drag.prototype.fnDown = function (ev) {
var ev = event||ev;
var _this = this;
// 鼠标可视区位置 - div左边距 = 鼠标在div内的位置
this.disX = ev.clientX - this.oDiv.offsetLeft;
this.disY = ev.clientY - this.oDiv.offsetTop;
console.log(this.disX,'可视区鼠标X：', ev.clientX, '鼠标Y：',ev.clientY);
document.onmousemove = function (ev) {
_this.mouseMove(ev);
}
document.onmouseup = function (ev) {
_this.mouseUp(ev);
}
}
Drag.prototype.mouseMove = function(ev) {
// 不断获取Event 对象，坐标才会不断更新
var ev = event||ev;
// console.log('可视区鼠标X：', ev.clientX, '鼠标Y：',ev.clientY);
// div位置 = 鼠标可视区新的位置 - 鼠标与div的距离
this.oDiv.style.left = ev.clientX - this.disX + 'px';
this.oDiv.style.top = ev.clientY - this.disY + 'px';
}
Drag.prototype.mouseUp = function () {
document.onmousemove = '';
document.onmouseup = '';
}
// 继承属性
function LimitDrag(id) {
Drag.call(this, id);
}
// 继承原型
for (var i in Drag.prototype) {
LimitDrag.prototype[i] = Drag.prototype[i];
}
LimitDrag.prototype.mouseMove = function(ev) {
// 不断获取Event 对象，坐标才会不断更新
var ev = event||ev;
// console.log('可视区鼠标X：', ev.clientX, '鼠标Y：',ev.clientY);
// div位置 = 鼠标可视区新的位置 - 鼠标与div的距离
var l = ev.clientX - this.disX;
var t = ev.clientY - this.disY;
if (l < 0) {
l = 0;
} else if (l > document.documentElement.clientWidth - this.oDiv.offsetWidth) {
l = document.documentElement.clientWidth - this.oDiv.offsetWidth;
}
if ( t < 0) {
t = 0;
} else if (t > document.documentElement.clientHeight - this.oDiv.offsetHeight) {
t = document.documentElement.clientHeight - this.oDiv.offsetHeight;
}
this.oDiv.style.top = t + 'px';
this.oDiv.style.left = l + 'px';
}
系统对象
- 本地对象
- 什么是本地对象
- 常用对象：可以实例化(
new )
-
Object / Function / Array / String / Boolean / Number / Date / RegExp / Error
- 内置对象（静态对象）：不能实例化
- 宿主对象（由浏览器提供的对象）
BOM 应用
BOM 基础
- 打开、关闭窗口
-
open(url, 打开方式)：open('ablout.blank', '_blank')
-
close(url, 打开方式)：window.close() 关闭当前窗口
- 常用属性
-
window.navigator.userAgent
-
navigator：包含大量信息
-
userAgent：浏览器信息
-
window.location
-
href：当前网页地址
-
hostname：主机域名
-
pathname：页面路径和文件名
-
port：端口
-
protocol：http协议
-
assign：加载新文档，url
-
window.history
-
back()：后退
-
forward()：前进
-
go()：历史中某个页面，-1 用于登陆后回跳
尺寸及坐标
- 窗口尺寸、工作区尺寸
- 可视区尺寸
document.documentElement.clientWidthdocument.documentElement.clientHeight
- 滚动距离
-
document.body.scrollTop：旧版本 chrome 和没有 DOCTYPE 声明的 IE
-
document.documentElement.scrollTop：IE FF
- 完美的获取
scrollTop 赋值短语 ： var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
常用方法和事件
-
系统对话框
- 警告框：
alert("内容")，没有返回值
- 选择框：
confirm("提问的内容")，返回 boolean
- 输入框：
prompt()，返回字符串或 null
-
window 对象常用事件
-
onload：页面加载完发生
-
onscroll：页面滚动时发生
-
onresize：事件会在窗口或框架被调整大小时发生
- 例子：回到顶部按钮、侧边栏广告
- 闪烁问题
-
userAgent > IE6 用 position:fixed;
-
userAgent < IE6 用运动;
-
代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Bom应用</title>
<style>
body {
height: 2000px;
}
</style>
<script>
// 封装 getElementById 函数
function get(id) {
return document.getElementById(id);
}
window.onload = function () {
// var text = document.write('新网页');
var btn = get('btn');
var btn2 = get('btn2');
btn.onclick = function () {
window.open('27.BOM应用.html','_blank');
}
btn2.onclick = function () {
window.close();
}
window.onscroll = function () {
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
console.log('scrollTop:',scrollTop);
}
console.log(window.navigator.userAgent);
console.log(window.location.href);
// alert('0');
// confirm('yes?');
// prompt('');
window.onresize = function () {
var cliHei = document.documentElement.clientHeight;
var cliWid = document.documentElement.clientWidth;
console.log('可视区高宽：',cliHei, cliWid)
}
}
</script>
</head>
<body>
<input type="button" id="btn" value="打开网页">
<input type="button" id="btn2" value="关闭网页">
</body>
</html>
COOKIE 基础与应用
什么是 cookie
- 页面用来保存信息
- `cookie 的特征
- 同一网站中所有页面共享一套 `cookie
- 数量、大小有限
- 过期时间
- JS 中使用
cookie
使用 cookie
-
设置 cookie
格式：名字 = 值 赋值时不会覆盖 -
过期时间：expires = 时间
- 设置前一个 cookie 数据的过期时间，expires 放在数据后面：
document.cookie = 'password=123;expires='+ oDate;
- 日期对象的使用
-
封装函数
// 封装 setCookie 函数
function setCookie(name, value, iTime) {
var oDate = new Date();
oDate.setTime(oDate.getTime() + iTime); // 毫秒
document.cookie = name + '=' + value + ';expires=' + oDate;
}
setCookie('username', '张三', 1000*60*60);
-
读取 cookie
-
字符串分割
// 封装 getCookie 函数
getCookie(name) {
var arr = document.cookie.split('; ');
for (var i in arr) {
var arr2 = arr[i].split('=');
if (arr2[0] === name){
return arr2[1];
}
}
return '';
}
console.log(getCookie('username'));
-
删除 cookie
-
已经过期
// 封装 removeCookie 函数
function removeCookie(name) {
setCookie(name, '', -1)
}
removeCookie('username');
-
例子：使用 cookie 记录上次登陆的用户名
提交时：记录用户名 window.onload：读取用户名
-
代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>28.1.登陆后cookie读取用户名</title>
<style>
</style>
<script>
// 封装 setCookie 函数
function setCookie(name, value, iTime) {
var oDate = new Date();
oDate.setTime(oDate.getTime() + iTime*1000*60*60);
document.cookie = name + '=' + value + ';expires=' + oDate;
}
// 封装 getCookie 函数
function getCookie(name) {
var arr = document.cookie.split('; ');
for (var i in arr) {
var arr2 = arr[i].split('=');
if (arr2[0] === name){
return arr2[1];
}
}
return '';
}
// 封装 removeCookie 函数
function removeCookie(name) {
setCookie(name, '', -1)
}
window.onload = function () {
var oUser = document.getElementById('username');
var oPasswd = document.getElementById('passwd');
var oBtn_sub = document.getElementById('btn_sub');
if (getCookie('username')) {
oUser.value = getCookie('username');
}
oBtn_sub.onclick = function () {
setCookie("username", oUser.value, 1);
setCookie("passwd", oPasswd.value, 1);
}
}
</script>
</head>
<body>
<form action="28.1.登陆后cookie读取用户名.html" method="GET">
<input type="text" name="username" id="username">
<input type="text" name="passwd" id="passwd">
<input type="submit" name="" id="btn_sub" value="登录">
</form>
</body>
</html>
JS 中的正则表达式
正则表达式基础
- 复习字符串操作：
var str = 'asdf1234';
-
search：查找位置 str.search('3')
-
substring：获取子字符串，
- 截取某段字符串, 不包含结束位：
str.substring(2,5)
- 获取起点以后的字符串：
str.substring(2)
-
charAt：获取某个字符串 str.charAt(2)
-
split：分割某个字符串 str.split('-')
- 找出字符串中所有的数字
- 什么是正则表达式
- 什么叫正则？
- 强大的字符串匹配工具
- 是一种人类很难读懂的文字
-
RegExp 对象
-
JS 风格：new RegExp( "a" , "i" )
-
perl 风格：/a/i
字符串与正则配合
-
search：字符串搜索，返回位置或 -1
- 返回出现的位置
- 忽略大小写：
i：ignore
- 判断浏览器类型
-
match：获取匹配的项目，返回元素或
- 量词：
+ （若干个）
- 量词变化：
\d(单个数字一组) \d\d(两个数字一组) 和 \d+(若干连续数字)
- 全局匹配：
g：global
- 例子：找出所有数字
-
replace(reg/str,replacement)：替换所有匹配
字符串
- 任意字符：
[]方括号（元字符）
- 范围
- 排除
- 组合
- 实例：偷小说
- 过滤 HTML 标签，
- 正则贪婪特性，从最长的内容开始过滤
- 自定义
innerText 方法
- 代码：同下
- 转义字符
-
.(点) ：任意字符
-
\d (数字)：[0-9]
-
\w (数字、英文、下划线) ：[a-z0-9_]
-
\s (空白字符)：[ ]
-
\D (除了数字)：[^0-9]
-
\W (除了数字英文下划线) ：[^a-z0-9_]
-
\S (除了空白字符)：[^ ]
- 行首、行尾
- 逻辑
量词
-
什么是量词
-
{n}：刚好出现 n 次
-
{n,m} 至少出现 n 次，最多 m 次
- 例子：查找 QQ 号
-
常用量词
常用正则例子
-
表单校验实例
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>正则表达式应用</title>
<style>
</style>
<script>
// 封装 getElementById 函数
function get(id) {
return document.getElementById(id);
}
var arr = [];
var temp = '';
var str = 'asdf-1234-as24-q2e4';
// console.log(str.search('3'));
// console.log(str.substring(2,5));
// console.log(str.substring(2));
// console.log(str.charAt(2));
// console.log(str.split('-'));
for (var i in str) {
if(str.charAt(i) >= 0 && str.charAt(i) <= 9) {
// arr.push(str.charAt(i));
temp += str.charAt(i);
} else if (temp) {
arr.push(temp);
temp = '';
}
}
arr.push(temp);
temp = '';
console.log('字符串方法：',arr);
console.log('match方法：',str.match(/\d+/g));
window.onload = function () {
var btn = get('btn');
var btn2 = get('btn2');
var btn3 = get('btn3');
var btn4 = get('btn4');
var text = get('text');
var text2 = get('text2');
// 检验邮箱
// 获取内容，把不符合规则的找出来
// abc_123@abc123.abc
btn.onclick = function () {
var reg = /^\w+@{1,}[0-9a-z]+\.{1,}[a-z]+$/i;
var txt = text.value;
text2.value = '';
txt.search(reg);
console.log(txt.match(reg),reg.test(txt));
if (reg.test(txt)){
text2.value = txt.match(reg);
}
}
// 过滤HTML标签
btn2.onclick = function () {
var reg = /<[^<>]+>/g;
txt = text.value.replace(reg,'')
text2.value = txt;
}
// 检测固定电话
btn3.onclick = function () {
var reg = /^(0\d{2,3}-)?[1-9]\d{7}(-\d{1,5})?$/;
var txt = text.value;
text2.value = '';
txt.search(reg);
console.log(txt.match(reg),reg.test(txt));
if (reg.test(txt)){
text2.value = txt.match(reg);
}
}
// 检测密码强度
// 数字 低
// 数字 英文或符号 中
// 数字 英文 符号 高
btn4.onclick = function () {
var regLow = /\d+/;
var regMid = /\d+[a-z]+/i;
var regHei = /\d+[a-z_]+\S+/i;
var txt = text.value;
if (regHei.test(txt)) {
text2.value = '高';
} else if (regMid.test(txt)) {
text2.value = '中';
} else if (regLow.test(txt)) {
text2.value = '低';
}
}
}
</script>
</head>
<body>
<textarea name="" id="text" cols="30" rows="10"></textarea>
<div>
<input type="button" value="检测邮箱" id="btn">
<input type="button" value="过滤HTML标签" id="btn2">
<input type="button" value="检测电话" id="btn3">
<input type="button" value="检测密码" id="btn4">
</div>
<textarea name="" id="text2" cols="30" rows="10"></textarea>
</body>
</html>
JS Template 模板引擎
https://www.jb51.net/article/100095.htm
1、特性
（1）、性能卓越，执行速度通常是 Mustache 与 tmpl 的 20 多倍（性能测试）
（2）、支持运行时调试，可精确定位异常模板所在语句（演示）
（3）、对 NodeJS Express 友好支持
（4）、安全，默认对输出进行转义、在沙箱中运行编译后的代码（Node版本可以安全执行用户上传的模板）
（5）、支持include语句
（6）、可在浏览器端实现按路径加载模板（详情）
（7）、支持预编译，可将模板转换成为非常精简的 js 文件
（8）、模板语句简洁，无需前缀引用数据，有简洁版本与原生语法版本可选
（9）、支持所有流行的浏览器
2、语法
（1）、使用
引用简洁语法的引擎版本，例如：<script src="./lib/template-web.js"></script>
（2）、表达式
{{ 与 }} 符号包裹起来的语句则为模板的逻辑表达式。
template('test', data) : 渲染
（3）、输出表达式
对内容编码(转义)输出：{{content}} 不编码(转义)输出：{{#content}} 编码可以防止数据中含有 HTML 字符串，避免引起 XSS 攻击。
（4）、条件表达式
{{if admin}}
<p>admin</p>
{{else if code > 0}}
<p>master</p>
{{else}}
<p>error!</p>
{{/if}}
（5）、遍历表达式
无论数组或者对象都可以用 each 进行遍历。
{{each list as value index}}
<li>{{index}} - {{value.user}}</li>
{{/each}}
// 亦可以被简写：$ 特指当前函数中的变量
{{each list}}
<li>{{$index}} - {{$value.user}}</li>
{{/each}}
（6）、模板包含表达式
用于嵌入子模板。
{{include 'template_name'}}
子模板默认共享当前数据，亦可以指定数据：{{include 'template_name' news_list}}
（7）、辅助方法
使用 template.defaults.imports.dateFormat = function(arg1,arg2){} 注册公用辅助方法：
template.defaults.imports.dateFormat = function(arg1,arg2) {
// ..
return value;
});
模板中使用的方式：{{time | dateFormat:'yyyy-MM-dd hh:mm:ss'}} 支持传入参数与嵌套使用： {{time | say:'cd' | ubb | link}}
3、实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="./lib/template-web.js"></script>
</head>
<body>
<div id="content"></div>
<script id="test" type="text/html">
<div>
<!-- 输出表达式 -->
<p>{{name}}</p>
<!-- 不转义输出 -->
<p>{{#value}}</p>
<!-- 条件表达式 -->
{{if bool}}
<p>{{bool}}</p>
{{/if}}
{{if num < 1 }}
<p>'num < 1'</p> {{else}} <p>error!</p>
{{/if}}
<!-- 遍历表达式 数组 -->
<p>遍历表达式 数组</p>
{{each list as value index}}
<li>{{index}}: {{value}}</li>
{{/each}}
<!-- $简写 $ 特指当前函数中的变量 -->
<p>$简写</p>
{{each list}}
<li>{{$index}}: {{$value}}</li>
{{/each}}
<!-- 遍历表达式 对象 -->
<p>遍历表达式 对象</p>
{{each objList as value index}}
<li>{{index}}: {{value}}</li>
{{/each}}
<!-- $简写 -->
<p>$简写</p>
{{each objList}}
<li>{{$index}}: {{$value}}</li>
{{/each}}
<!-- 模板包含子模板,表达式 -->
{{include 'news_list'}}
<!-- 辅助方法 -->
</div>
</script>
<script id="news_list" type="text/html">
<p>模板包含子模板,表达式</p>
<ul>
{{each list as value i}}
<li>索引 {{i + 1}} ：{{value + 1}}</li>
{{/each}}
</ul>
</script>
<script>
const data = {
name: 'zhangsan',
value: '<h1>lisi</h1>',
num: 0,
bool: true,
list: [1, 2, 3, 4, 5],
objList: {
name: 'zhangsan',
age: '18',
addr: '广东'
}
}
let temp = template('test', data)
document.getElementById('content').innerHTML = temp
</script>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>no escape-demo</title>
<script src="../dist/template.js"></script>
</head>
<body>
<h1>不转义HTML</h1>
<div id="content"></div>
<script id="test" type="text/html">
<p>不转义：{{#value}}</p>
<p>默认转义： {{value}}</p>
</script>
<script>
var data = {
value: '<span style="color:#F00">hello world!</span>'
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
</script>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>include-demo</title>
<script src="../dist/template.js"></script>
</head>
<body>
<div id="content"></div>
<script id="test" type="text/html">
<h1>{{title}}</h1>
{{include 'list'}}
</script>
<script id="list" type="text/html">
<ul>
{{each list as value i}}
<li>索引 {{i + 1}} ：{{value}}</li>
{{/each}}
</ul>
</script>
<script>
var data = {
title: '嵌入子模板',
list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
</script>
</body>
</html>
表达式和运算符分类
左侧工具栏是按字母表排序的列表。
主要表达式
JavaScript中基本关键字和常用表达式。
-
this
this 关键字指向函数的执行上下文。
-
function
function 关键字定义了函数表达式。
-
class
class 关键字定义了类表达式。
-
function*
function* 关键字定义了一个 generator 函数表达式。
-
yield
暂停和恢复 generator 函数。
-
yield*
委派给另外一个generator函数或可迭代的对象。
-
async function
async function 定义一个异步函数表达式。
-
await
暂停或恢复执行异步函数，并等待promise的resolve/reject回调。
-
[\]
数组初始化/字面量语法。
-
{}
对象初始化/字面量语法。
-
/ab+c/i
正则表达式字面量语法。
-
( )
分组操作符。
左表达式
左边的值是赋值的目标。
-
属性访问符
成员运算符提供了对对象的属性或方法的访问 (object.property 和 object["property"]).
-
new
new 运算符创建了构造函数实例。
-
new.target
在构造器中，new.target 指向new调用的构造器。
-
super
super 关键字调用父类的构造器.
-
...obj
展开运算符可以将一个可迭代的对象在函数调用的位置展开成为多个参数,或者在数组字面量中展开成多个数组元素。
自增和自减
前置/后置自增运算符和前置/后置自减运算符.
一元运算符
一元运算符只有一个操作数.
-
delete
delete 运算符用来删除对象的属性.
-
void
void 运算符表示表达式放弃返回值.
-
typeof
typeof 运算符用来判断给定对象的类型.
-
+
一元加运算符将操作转换为Number类型.
-
-
一元减运算符将操作转换为Number类型并取反.
-
~
按位非运算符.
-
!
逻辑非运算符.
算术运算符
算术运算符以二个数值（字面量或变量）作为操作数，并返回单个数值。
-
+
加法运算符.
-
-
减法运算符.
-
/
除法运算符.
-
*
乘法运算符.
-
%
取模运算符.
关系运算符
比较运算符比较二个操作数并返回基于比较结果的Boolean值。
注意： => 不是运算符，而是箭头函数的表示符。
相等运算符
如果相等，操作符返回的是Boolean(布尔)类型的true，否则是false。
位移运算符
在二进制的基础上对数字进行移动操作
-
<<
按位左移运算符。
-
>>
按位右移运算符。
-
>>>
按位无符号右移运算符。
二进制位运算符
二进制运算符将它们的操作数作为32个二进制位（0或1）的集合，并返回标准的JavaScript数值。
-
&
二进制位与（AND）。
-
|
二进制位或（OR）。
-
^
二进制位异或（XOR）。
二元逻辑运算符
逻辑运算符典型的用法是用于boolean(逻辑)值运算, 它们返回boolean值。
条件(三元)运算符
赋值运算符
赋值元素符会将右边的操作数的值分配给左边的操作数，并将其值修改为右边操作数相等的值。
|
