typora-root-url: images
typora-copy-images-to: images
总结:
DOM属性的操作
内置属性
获取 obj.id 设置 obj.id= ‘id名称’
obj.className obj.className ='class'
obj.name 获取名称 obj.value 获取表单值 obj.innerHTML 获取两个标签中的内容
标签上有的我们都可以通过属性名字直接获取,但是class是className
非内置属性
// 获取 obj.gerAttribute(‘name’)
// 设置 obj.setAttribute(name,value);
// 删除 obj.removeAttribute(name)
节点:
创造节点 : document.createElement(名称); html标签节点
document.createTextNode(文本) 创建文本节点
追加节点; 父节点.appendChild()
追加到指定位置 父节点.insertBefore(newNode,oldNode);
删除 obj.remove() 自己删除自己
obj.removeChild(子节点)
节点公共属性
obj.firstChild 返回第一个节点(包含空白节点)
obj.firstElementChild
obj.lastChild 最后一个节点(包含)
obj.lastElementChild
obj.nextSibling 返回后一个兄弟节点
obj.nextElementSibling
obj.previousSibling 返回上一个兄弟节点(包含空白和注释)
obj.children // 返回一个元素所有的子节点
cssDOM
js操作的css都是行内样式
obj.style.height = 12px;
第一节
事件对象—Event
概念:
当事件发生的时候产生事件对象，事件结束后对象销毁，比如在键盘上按了一A键，按的时候产生事件，按完后事件销毁。如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态
作用:
事件对象只有事件发生时才会产生，事件主要实现“用户和网页之间的交互”，当事件被触发的时候去执行js代码在所有事件处理函数运行结束后，事件对象就被销毁.
过程
事件源:发生事件的起源,元素
事件类型:事件种类,是什么事件(点击)
事件处理函数:触发事件的时候,专门用来处理事情的函数
事件的授权:浏览器给的
[外链图片转存失败(img-z6nukO5P-1567239972098)(/1560735081472.png)]
去把生番给我做了,记住制造成自杀的假象
[外链图片转存失败(img-rFcdONKG-1567239972099)(/1560735100759.png)]
老大说，给你配个对象兼秘书，叫event(伊文)
比较羞涩，用的时候，得叫她出来，平时需要隐藏起来
[外链图片转存失败(img-lO5gh7B7-1567239972099)(/1564820316361.png)]
[外链图片转存失败(img-AoDE7VXo-1567239972099)(/1560735160585.png)]
老大是浏览器
生番是事件源,因为他你要XX,事情发生在他身上
事件类型:就是灭了他,自杀的方式灭,不是去收保护费
事件处理函数:就是你,怎么达到效果
事件授权:老大
事件对象:保镖,就是事件对象，向你提供完成这件事的所有帮助,每做一件事，老大给配不同的秘书 / 每个事件都有不同的事件对象
事件的分类
<p onClick = 'show()'>hello</p>
鼠标事件
onclick 鼠标单击
ondblclick 鼠标双击（必须连续点击两下）
onmouseover 鼠标移入，即鼠标停留在图片等的上方（一次）
onmouseout 鼠标移出，即离开图片等所在的区域（一次）
onmousemove 鼠标移动，即鼠标在图片的上方不断移动（多次）
onmouseup 事件会在鼠标按键被松开时发生。
onmousedown 事件会在鼠标按键被按下时发生。
页面事件
onload 网页内容加载/运行完毕之后调用/执行函数里面的内容
onresize 当浏览器的窗口大小被改变时触发的事件
表单事件
onblur 指定元素失去焦点（光标没了）
onfocus 指定元素获取焦点（点击出现光标）
onreset 重置表单的时候触发事件，执行对应的js功能
onsubmit 提交表单的时候触发事件，执行对应的js功能
onchange 下拉菜单改变时候触发
event事件对象属性
例: event的获取
var pObj = document.getElementById('text');
// 在事件触发的时候,产生
pObj.onclick = function(event){
console.log(event);
}
老大给的美女event可以做什么呢?
| 属性 | 说明 |
|---|---|
| event.type | type属性指示事件类型。 |
| event.which | which 属性指示按了哪个键或按钮。 |
| event.clientX | 鼠标指针相对于浏览器页面（或客户区）的X轴坐标。 |
| event.clientY | 鼠标指针相对于浏览器页面（或客户区）的Y轴坐标。 |
| event.screenX | 鼠标指针距离屏幕左边的距离。 |
| event.screenY | 鼠标指针距离屏幕上边的距离。 |
| event.button | 返回值为0，左键；返回值为1，中键；返回值为2，右键 |
| event.offsetX | 当鼠标事件发生时，鼠标相对于事件发生元素左边的位置 |
| event.offsetY | 当鼠标事件发生时，鼠标相对于事件发生元素顶部的位置 |
| event.pageX | 当鼠标事件发生时.相对于文档窗口顶部的位置 |
| event.pageY | 当鼠标事件发生时.相对于文档窗口左边的位置 |
[外链图片转存失败(img-Pa2JQgjW-1567239972099)(/1560738380822.png)]
[外链图片转存失败(img-tMDf6lZI-1567239972099)(/1560744129922.png)]
此时可视窗口与文档窗口重叠，pageX等于clientX, pageY等于clientY, 如果我们缩小浏览器窗口直到浏览器出现滚动条。此时可视窗口左上角位置不变，但文档窗口左上角位置发生的变化.
[外链图片转存失败(img-PJGQLV0e-1567239972100)(/1560744169992.png)]
由此我们可以看出当浏览器没有滚动条时（可视窗口与文档窗口重合），pageX与clientX相等，pageX与clientY相等，如果出现下拉滚动条并向下拉动滚动条，文档窗口向上滚动，如果出现左右滑动的滚动条并向右拉动滚动条，文档窗口向左滚动，在文档窗口滚动的情况下，pageX>=clientX, pageY>=clientY, x = clientX, y = clientY.
脚下留心:
早期的浏览器中,在IE/Opera中，是window.event，而在Firefox中，是event
多学一招
var a=2;
var b;
var c = a || b;
console.log(c);
判断a与b那个有值,那个有值,就将他的值赋给c
案列实现
<!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>
</head>
<style>
/* body{
height: 2000px;
} */
#text{
width: 100px;
height: 100px;
background: green;
margin:40px;
}
</style>
<body>
<p id="text">勤学如春起之苗,不见其增,日有所长</p>
<script>
var pObj = document.getElementById('text');
// 在事件触发的时候,产生
pObj.onclick = function(eve){
//获取event对象,兼容写法
var e = eve || window.event;
// console.log(e);
// 获取鼠标到点击元素的位置
// console.log(e.offsetX);
// console.log(e.offsetY);
// 相对于屏幕的位置
//console.log(e.screenX);
// console.log(e.screenY);
// 相对于浏览器的位置
// console.log(e.clientX);
//console.log(e.clientY);
// 相对于文档的位置,没有滚动条时,和clientX的位置是一样的
// console.log(e.pageX);
//console.log(e.pageY);
// 获取按的那个键
//console.log(e.button);
// 获取发生事件的元素
// console.log(e.target);
// 获取事件的类型
//console.log(e.type);
}
// 使用移入事件获取event
pObj.onmouseover = function(eve){
//兼容写法
var e = eve || window.event;
console.log(e);
}
</script>
</body>
</html>
第二节：应用与练习
1．光标的实时显示,画布功能的实现
[外链图片转存失败(img-jir9iQEN-1567239972100)(/1560742320889.png)]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#xy{
position: fixed;
left: 0;
bottom: 0;
}
.box{
border-radius: 50%;
position: absolute;
}
input{
position: absolute;
z-index: 999999999999;
}
input:nth-child(1){}
input:nth-child(2){left: 50px;}
input:nth-child(3){left: 100px;}
</style>
</head>
<body>
<input type="button" name="" id="btn1" value="+" />
<input type="button" name="" id="btn2" value="-" />
<input type="button" name="" id="red" value="red" />
<span id="xy"></span>
</body>
<script type="text/javascript">
//声明控制线条促销的变量,就是height和width
var h = 5;
var w = 5;
// 设置颜色变量
var color = 'black';
// 1 获取节点
var xyObj = document.querySelector('span');
// 2 给document绑定鼠标移动事件
document.onmousemove = function(eve){
// 获取event对象
var e = eve || window.event
// 3 获取鼠标相对于文档的的移动位置
var x = e.pageX;
var y = e.pageY;
// console.log(x,y);
// 4 将鼠标位置放在左下角
xyObj.innerHTML = x+'px,'+y+'px';
// 5 创建div,将鼠标相对于文档的x,y距离赋值给div的top left
var newDivObj = document.createElement('div');
// 给div追加box类
newDivObj.className = 'box';
newDivObj.style.width=w+'px';
newDivObj.style.height = h+'px';
// 设置div的显示位置
newDivObj.style.top = y+'px';
newDivObj.style.left = x+'px';
// 设置div的颜色
newDivObj.style.background = color;
// 6 将div追加到body中
document.body.appendChild(newDivObj);
console.log(newDivObj);
}
//目标:实现线条的粗细调节
//1 获取节点
var btn1Obj = document.getElementById('btn1');
var btn2Obj = document.getElementById('btn2');
// 2 绑定事件
btn1Obj.onclick = function(){
// 3 点击+时,让设置控制宽度的变量增加
h+=5;
w+=5;
}
// 4 点击-时,让设置控制宽度的变量减小
btn2Obj.onclick = function(){
// 判断h或w是否小于5,小于5则重新赋值,不让其再小
if(h<=5){
h=5;
w=5;
}else{ // 否则就自减
h-=5;
w-=5;
}
}
// 目标:点击线条变成红色
var redObj = document.getElementById('red');
redObj.onclick = function(){
// 修改颜色的变量
color = 'red';
}
</script>
</html>
2．跟随鼠标的提示框
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
border: solid 1px;
width: 10px;
height: 10px;;
background-color: black;
position:absolute;
top:0px;
left:0px;
border-radius:50%;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
var divs = document.querySelectorAll('div');
document.onmousemove=function(eve){ // 鼠标移动时触发
console.log(window.event);
var e= eve || window.event; // 兼容老的浏览器
var len = divs.length;
for(var i=len-1;i>0;i--){
divs[i].style.top = divs[i-1].offsetTop+'px'; // 当前元素到父级元素顶部的偏移量
divs[i].style.left = divs[i-1].offsetLeft+'px'; // 当前元素到父级元素左侧的偏移量
}
// 设置第一个元素,后边的元素跟随
divs[0].style.top = e.pageY+'px'; // 返回相对于文档上边缘的位置信息,浏览器不缩放的情况下就是clientX
divs[0].style.left= e.pageX+'px';
}
</script>
</body>
第三节
键盘事件
onkeydown 按下键盘触发事件
onkeyup 按下键盘后松开触发事件
onkeypress 按下并抬起
适用于大部分的标签元素
获取按下的键码
贴身女秘书还能做点啥？
event.keyCode 返回当前按键的ASCII码
空格 32
回车 13
左 37
上 38
右 39
下 40
a 65
e 69
ctrlKey 判断ctrl是否被按下，按下返回true
shiftKey 判断shift是否被按下，按下返回true
altKey 判断alt是否被按下，按下返回true
脚下留心:
兼容问题： var eve = event || window.event
var keyC = eve.keyCode || eve.which
IE只有keyCode属性，FireFox中有which和keyCode属性，Opera中有keyCode和which属性，Chrome中有keyCode、which和charCode属性
使用场景
在用户登录时，如果按下了大写锁定键（20），则加以提示大写锁定；在有翻页的时候，如果用户按下左右箭头，触发上下翻页等。
//给document绑定键盘事件
document.onkeydown = function(eve){
var e = eve || window.event;
// 获取键盘对应的ASIC
// 注意兼容问题
var code = e.keyCode || e.which;
// console.log(code);
if(code==20){
alert('大写已开启');
}
}
实际操作
// 给整个文档即HTML元素绑定事件
document.onkeydown = function(eve){
var e = eve || window.event
var keycode = e.keyCode || e.which
switch(keycode){
case 13:
console.log("回车");break;
case 65:
console.log("a");break;
case 66:
console.log("b");break;
case 67:
console.log("c");break;
case 68:
console.log("d");break;
case 69:
console.log("e");break;
}
}
例1:使用上下左右箭头控制四方形移动
<!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>
</head>
<style>
#demo{
width: 100px;
height: 100px;
background:green;
position:absolute;
}
</style>
<body>
<div id="demo" style="top:200px;left:300px"></div>
<script>
var divObj = document.getElementById('demo');
// 1 给document绑定键盘事件
document.onkeydown = function(e){
var eve = e || window.event;
//console.log(eve.keyCode);
//2 获取键盘码
var code = eve.keyCode || eve.which;
//3 根据键盘码判断出按的是哪个键
// 4 按上下键就改变top,按左右改变left
// 判断上下键
if(code==38){
//console.log(divObj.style.top);
divObj.style.top = parseInt(divObj.style.top)-10+'px';
}
if(code==40){
divObj.style.top = parseInt(divObj.style.top)+10+'px';
}
// 判断左右键
if(code==37){
//console.log(divObj.style.top);
divObj.style.left = parseInt(divObj.style.left)-10+'px';
}
if(code==39){
//console.log(divObj.style.top);
divObj.style.left = parseInt(divObj.style.left)+10+'px';
}
}
</script>
</body>
</html>
事件冒泡
[外链图片转存失败(img-QaDVqPS4-1567239972104)(/1560756341686.png)]
事件流：事件执行顺序我们叫他事件流。
事件流中事件冒泡的由来：IE公司认为，如果你面前有个靶子，你的飞镖射中了其中一环，并不仅仅是只对这一环产生了操作，而是对整个靶子都产生了操作。
所以，当最里面的元素触发了事件的时候，会依次向上触发所有元素的相同事件（从触发事件的元素开始一直向上触发），但是事件冒泡对我们几乎没有任何好处，所以我们需要阻止事件冒泡,禁止之后事件只会停留在当前层。
阻止事件冒泡
通过事件对象,可以阻止事件冒泡.
通用方法
event.stopPropagation();
说明：stopPropagation是事件对象Event的一个方法，作用是阻止目标元素事件冒泡到父级元素。
IE浏览器的方法
event.cancelBubble = true;
例1:事件冒泡行为的演示
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#aa {
width:300px;
height: 300px;
background-color: red;
}
#bb {
width:200px;
height: 200px;
background-color: blue;
}
#cc {
width:100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div id="aa">
aa
<div id="bb">
bb
<div id="cc">
cc
</div>
</div>
</div>
<script>
var aa = document.getElementById('aa');
var bb = document.getElementById('bb');
var cc = document.getElementById('cc');
aa.onclick=del;
bb.onclick = del;
cc.onclick = del;
function del(){
console.log();
alert(this.innerText);
}
</script>
</body>
</html>
例2:在例1的基础上阻止事件冒泡
<script>
// 获取节点
.
var aa = document.getElementById('aa');
var bb = document.getElementById('bb');
var cc = document.getElementById('cc');
// 绑定事件
aa.onclick=del;
bb.onclick = del;
cc.onclick = del;
function del(){
var e = event || window.event;
if(e.stopPropagation){ // 通用方式阻止冒泡行为
e.stopPropagation();
}else{
e.cancelBubble(); // IE浏览器阻止默认行为
}
alert(this.innerText);
}
</script>
练习与作业
1 1.CSS模拟下拉菜单
[外链图片转存失败(img-hVi154p1-1567239972104)(/1560757845233.png)]
<!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>
</head>
<style>
#box{
margin: 80px auto;
width: 200px;
}
#game{
width: 300px;
height: 30px;
}
ul{
list-style: none;
padding: 0px;
margin:0px;
width: 302px;
background:#ccc;
display: none;
}
ul li{
height: 28px;
width: 295px;
line-height: 28px;
padding-left:5px;
}
.sel{
background: green;
}
</style>
<body>
<div id="box">
<input type="text" id="game" value="">
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
<li>列表6</li>
</ul>
</div>
<script>
//1 获取节点
var inputObj = document.getElementById('game');
var ulObj = document.querySelector('ul');
// 获取子节点
var liObj = ulObj.children;
// console.log(liObj);
// 2 给input绑定焦点事件
// 显示ul
inputObj.onfocus = function(){
ulObj.style.display='block';
}
// 表单失去焦点,隐藏下拉框
inputObj.onblur = function(){
ulObj.style.display='none';
}
//3 给每个li绑定鼠标经过事件
var len = liObj.length;
for(var i=0;i<len;i++){
// 将当前正在循环的i保存到当前正在循环的li对象中
liObj[i].liIndex = i;
liObj[i].onmouseover = function(){
// console.log(1111);
//4 鼠标进过某个li时,通过追加已经定义好的类改变背景颜色
var index = this.liIndex;
// liObj[index].className = 'sel';
// // 获取li中的内容
// var liText = liObj[index].innerHTML;
// console.log(liText);
// //将内容追加到input中
// inputObj.value = liText;
select(index);
}
}
// 目标:通过上下按钮实现内容的选择
// 保存li的下标
var index1 = -1;
//1 给表单添加键盘事件
inputObj.onkeydown = function(eve){
var e = eve || window.event;
var code =e.keyCode;
// 2 根据code,判断出按的是上下那个键
// console.log(code);
if(code==38){ // 按上键
if(index1==-1 || index1==0){ // 判断索引值是等小于0
// 等于最大索引
index1 = len-1;
}else{
index1--;
}
// 调用样式的方法
select(index1)
}
if(code==40){ //下键
if(index1==-1 || index1==len-1){ // 判断索引值是等小于0
// 等于最小索引
index1 = 0;
}else{
index1++;
}
// 调用样式的方法
select(index1)
}
//console.log(index1);
}
/***以下是公共的代码***/
// 声明select方法,用于控制li的样式和input的内容
function select(index){
// 取消所有li的样式,使用for循环
for(var j=0;j<len;j++){
liObj[j].className = '';
}
liObj[index].className = 'sel';
// 获取li中的内容
var liText = liObj[index].innerHTML;
console.log(liText);
//将内容追加到input中
inputObj.value = liText;
}
</script>
</body>
</html>
作业:(根据实际情况,有基础的尝试一下)
[外链图片转存失败(img-CWHuq0pA-1567239972104)(/1560757893162.png)]
技术提示:
obox.scrollTop = obox.offsetHeight
元素对象.scrollIntoView() 将元素滚动到可见位置
obox.scrollIntoView()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
.box{width: 300px;height: 400px;border: solid 1px black;margin: 30px auto;}
#cont{height: 339px;border-bottom: solid 1px black;overflow: auto;}
#txt{height: 60px;}
#msg{width: 260px;height: 60px;border: none;background: none;float: left;resize: none;outline: none;padding: 6px;box-sizing: border-box;}
#send{width: 40px;height: 60px;border: none;border-left: solid 1px black;background: #ccc;float: left;}
#cont span{max-width: 260px;padding: 6px;margin: 6px;border-radius: 6px;clear: both;}
#cont span:nth-child(2n-1){float: left;background: dodgerblue;}
#cont span:nth-child(2n){float: right;background: limegreen;}
</style>
</head>
<body>
<div class="box">
<div id="cont"></div>
<div id="txt">
<textarea id="msg"></textarea>
<input type="button" name="" id="send" value="发送" />
</div>
</div>
</body>
<script type="text/javascript">
var osend = document.getElementById("send")
var omsg = document.getElementById("msg")
var ocont = document.getElementById("cont")
// var adiv = document.querySelectorAll("#cont div"); 静态获取，当前这一刻，就决定了将来的状态
// var adiv = document.getElementsByTagName("span"); //动态获取,会动态检测,将来如果添加了,会自动获取(得在将来查看)
osend.onclick = function(){
send()
}
omsg.onkeydown = function(eve){
var e = eve || window.event;
var code = e.keyCode || e.which;
if(code == 13 && e.ctrlKey){
send()
}
// console.log(code)
// console.log(e.ctrlKey)
}
function send(){
if(omsg.value != ""){
var div = document.createElement("span");
div.innerHTML = omsg.value;
ocont.appendChild(div);
var adiv = document.getElementsByTagName("span");
var sumHeight = 0;
for(var i=0;i<adiv.length;i++){
sumHeight += adiv[i].offsetHeight + 12
}
ocont.scrollTop = sumHeight;
omsg.value = "";
omsg.blur()
}else{
alert("不允许发送空消息")
}
}
</script>
</html>
扩展:表格的及时编辑(有基础的尝试)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="1" cellspacing="0" align="center" width="700" id="tab">
<tr>
<th>学号</th>
<th>姓名</th>
<th>成绩</th>
<th>备注</th>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</table>
</body>
<script type="text/javascript">
// 事件委托
// var otab = document.getElementById("tab");
// otab.addEventListener("click",function(eve){
// var e = eve || window.event;
// var target = e.target || e.srcElement;
//
// if(target.nodeName == "TD"){
// var ipt = document.createElement("input");
// ipt.value = target.innerHTML;
// target.innerHTML = "";
// target.appendChild(ipt)
//
// ipt.focus()
//
// ipt.onblur = function(){
// target.innerHTML = ipt.value;
// }
// }
// })
// 直接绑定(注意事件的冒泡)
var atd = document.querySelectorAll("td")
for(var i=0;i<atd.length;i++){
atd[i].onclick = function(){
var ipt = document.createElement("input");
ipt.value = this.innerHTML;
this.innerHTML = "";
this.appendChild(ipt);
ipt.focus()
ipt.onclick = function(eve){
var e = eve || window.event;
e.stopPropagation()
}
}
}
</script>
</html>
/td>
// 直接绑定(注意事件的冒泡)
var atd = document.querySelectorAll(“td”)
for(var i=0;i<atd.length;i++){
atd[i].onclick = function(){
var ipt = document.createElement(“input”);
ipt.value = this.innerHTML;
this.innerHTML = “”;
this.appendChild(ipt);
ipt.focus()
ipt.onclick = function(eve){
var e = eve || window.event;
e.stopPropagation()
}
}
}
</script>
210
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
