删除节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>删除</button>
<ul>
<li>熊大</li>
<li>熊二</li>
<li>光头强</li>
</ul>
<script>
// 1、获取元素
var ul = document.querySelector('ul');
var btn = document.querySelector('button');
// 2、删除元素 node.removeChild(child)
// ul.removeChild(ul.children[0]);
// 3、依次删除里面的元素
btn.onclick = function(){
if(ul.children.length == 0){
this.disabled = true;
} else{
ul.removeChild(ul.children[0]);
}
}
</script>
</body>
</html> 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
padding: 100px;
}
textarea {
width: 200px;
height: 100px;
border: 1px solid pink;
outline: none;
resize: none;
}
ul {
margin-top: 50px;
}
li {
width: 300px;
padding: 5px;
background-color: rgb(245, 209, 243);
color: red;
font-size: 14px;
margin: 15px 0;
}
li a{
float: right;
}
</style>
</head>
<body>
<!-- 案例∶删除留言案例 -->
<textarea name="" id="" ></textarea>
<button>发布</button>
<ul>
<li></li>
</ul>
<script>
// 案例分析
// 当我们把文本域里面的值赋值给li的时候，多添加一个删除的链接
// 需要把所有的链接获取过来，当我们点击当前的链接的时候，删除当前链接所在的li
// 阻止链接跳转需要添加iavascript:void(0):或者iavascript:;
// 1 、获取元素
var btn = document.querySelector('button');
var text = document.querySelector('textarea');
var ul = document.querySelector('ul');
// 2、注册事件
btn.onclick = function(){
if(text.value == ''){
alert('您还没有输入内容');
return false;
} else {
// console.log(text.value);
// (1)创建元素
var li = document.createElement('li');
// 先有 li 才能赋值
li.innerHTML = text.value + "<a href='javascrip:;'> 删除 </a>";
// 添加元素
// ul.appendChild(li);
ul.insertBefore(li, ul.children[0]);
// 3、删除元素 删除的是当前链接额的 li 他的父亲
var as = document.querySelectorAll('a');
for(var i = 0; i <as.length; i++){
as[i].onclick = function(){
// node.removeChild(child); //删除的是 li 当前a所在的li
ul.removeChild(this.parentNode);
}
}
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var ul = document.querySelector('ul');
// 1、node.cloneNode(); 括号为空或者里面为FALSE 为浅拷贝 只复制标签不复制里面的内容
// 2、node.cloneNode(true); 括号为里面为TRUE 为深拷贝 复制标签且复制里面的内容
var lili = ul.children[0].cloneNode(true);
ul.appendChild(lili);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
width: 500px;
margin: 100px auto;
border-collapse: collapse;
text-align: center;
}
td,
th{
border: 1px solid #333;
}
thead tr{
height: 40px;
background-color: #ccc;
}
</style>
</head>
<body>
<!-- 案例︰动态生成表格 -->
<table cellspacing='0'>
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
// 1.先去准备好学生的数据
var dates = [
{
name: '王俊凯',
subject: 'TFBOYS',
score:100
},
{
name: '王源',
subject: 'TFBOYS',
score:100
},
{
name: '易烊千玺',
subject: 'TFBOYS',
score:100
}];
// 2.往 tbody 里面创建行 ： 有几个人（通过数组的长度）就创建几行
var tbody = document.querySelector('tbody');
for(var i = 0; i <dates.length; i++){ //外面的for循环管行tr
// 1.创建 tr 行
var tr = document.createElement('tr');
tbody.appendChild(tr);
//2. 行里面创建单元格(跟数据有关系的三个单元格)td 单元格的数量取决于每个对象里面的属性个数 for循环遍历对象
for(var k in dates[i]){ //里面的单元格管列 td
// 创建单元格
var td = document.createElement('td');
// 把对象里面的属性值 给 td
// console.log(dates[i][k]);
td.innerHTML = dates[i][k];
tr.appendChild(td);
}
// 3.创建有删除2个字的单元格
var td = document.createElement('td');
td.innerHTML = '<a href="javascript:;">删除</a>';
tr.appendChild(td);
}
// 4.删除操作 开始
var as = document.querySelectorAll('a');
for(var i = 0; i < as.length; i++){
as[i].onclick = function(){
// 点击a 删除当前a 所在的行 （连接的爸爸的爸爸） node.removeChild
tbody.removeChild(this.parentNode.parentNode);
}
}
// for(var k in obj){
// k 得到的是属性名
// obj[k]得到的是属性值
// }
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>点击</button>
<p>TFBOYS</p>
<div class="inner"></div>
<div class="create"></div>
<script>
// 三种创建元素方式区别
// 1.document.write() 创建元素 如果页面文档流加载完毕，再调用这句话会导致页面重绘
// var btn = document.querySelector('button');
// btn.onclick = function(){
// document.write('<div>111</div>');
// }
// 2.innerHTML 创建元素
var inner = document.querySelector('.inner');
// inner.innerHTML = '<a href="#">百度</a>'; //创建一次
// 如果想创建多次，需要用到 for循环
// for(var i = 0 ;i <= 100; i++){
// inner.innerHTML += '<a href="#">百度</a>';
// }
var arr = [];
for(var i = 0 ; i<= 100; i++){
arr.push('<a href="#">百度</a>');
}
inner.innerHTML = arr.join('');
// 3.document.createElement() 创建元素
var create = document.querySelector('.create');
for(var i = 0 ;i <= 100; i++){
var a = document.createElement('a');
create.appendChild(a);
}
</script>
</body>
</html> 
事件高级
注册事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>传统注册事件</button>
<button>方法监听注册事件</button>
<button>ie9 attachEvent</button>
<script>
var btns = document.querySelectorAll('button');
// 传统方式注册事件
btns[0].onclick = function(){
alert('TFBOYS');
}
btns[0].onclick = function(){
alert('四叶草');
}
// 方法监听注册事件 addEventListener
// (1)里面的事件类型是字符串 必定加引号 而且不带 on
// (2)同一个元素 同一个事件 可以添加多个事件处理程序
btns[1].addEventListener('click', function(){
alert('TFBOYS');
})
btns[1].addEventListener('click', function(){
alert('王俊凯');
})
btns[1].addEventListener('click', function(){
alert('王源');
})
btns[1].addEventListener('click', function(){
alert('易烊千玺');
})
// 3.attachEvemt IE9以前的版本支持
btns[2].attachEvent('onclick', function(){
alert('四叶草');
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: coral;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
var divs = document.querySelectorAll('div');
divs[0].onclick = function(){
alert('TFBOYS');
// 1.传统方式删除事件
divs[0].onclick = null;
}
// 2.removeEventListener 删除事件
divs[1].addEventListener('click', fn) //里面的fn 不需要调用加小括号
function fn(){
alert('王俊凯');
divs[1].removeEventListener('click',fn);
}
// 3. detachEvent 删除事件 IE9以前的版本
divs[2].attachEvent('onclick', fn1);
function fn1(){
alert('王源');
divs[2].detaEvent('onclick',fn1);
}
</script>
</body>
</html>DOM 事件流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father{
width: 400px;
height: 400px;
background-color: blue;
margin: 100px auto;
}
.son{
width: 200px;
height: 200px;
background-color: coral;
transform: translate(50%,50%);
line-height: 200px;
text-align: center;
}
</style>
</head>
<body>
<div class="father">
<div class="son">son盒子</div>
</div>
<script>
// dom 事件流 三个阶段
// 1.JS代码中只能执行捕获或者冒泡其中的一个阶段
// 2.onclick 和 attachEvent( ie ) 只能到冒泡阶段
// 3.捕获阶段 如果addEventListener 第三个参数是true ，那么则处于捕获阶段 document —— html——body——-father——son
// var son = document.querySelector('.son');
// son.addEventListener('click', function(){
// alert('son');
// }, true);
// var father = document.querySelector('.father');
// father.addEventListener('click', function(){
// alert('father');
// }, true);
// 4.冒泡阶段 如果addEventListener 第三个参数是FALSE或者省略 ，那么则处于冒泡阶段 son——-father——body—— html——document
var son = document.querySelector('.son');
son.addEventListener('click', function(){
alert('son');
}, false);
var father = document.querySelector('.father');
father.addEventListener('click', function(){
alert('father');
}, false);
document.addEventListener('click',function(){
alert('document');
})
</script>
</body>
</html> 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: coral;
}
</style>
</head>
<body>
<div>123</div>
<script>
// 事件对象
var div = document.querySelector('div');
div.onclick = function(event){
console.log(event);
console.log(window.event);
e = e || window.event;
}
// div.addEventListener('click',function(event){
// console.log(event);
// })
// 1. event 就是一个事件对象 写到侦听函数的小括号里面 当形参来看
// 2.事件对象只有有了事件才会存在，它是系统自动给创建的，不需要我们传递参数
// 3.事件对象是事件一系列相关数据的集合 跟事件有关的 比如鼠标点击里面就包含了鼠标的相关信息，鼠标坐标啥的， 如果是键盘事件，里面就包含的键盘事件的信息 比如：判断用户按下了哪个键
// 4.这个事件对象可以自行命名 比如：event evt e
// 5.存在兼容性问题 IE678 通过 window.event 兼容性写法 e = e || window.event;
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: cyan;
}
</style>
</head>
<body>
<div>123</div>
<ul>
<li>acdwvrgb</li>
<li>acdwvrgb</li>
<li>acdwvrgb</li>
<li>acdwvrgb</li>
</ul>
<script>
// 常见事件对象的属性和方法
// 1. e.target 返回的是触发事件的对象 （元素） this 返回的是绑定事件的对象（元素）
// 区别：
// e.target 点击了哪个元素，就返回哪个元素
// this 哪个元素绑定了这个点击事件 ，那么就返回谁
var div = document.querySelector('div');
div.addEventListener('click', function(e){
console.log(e.target);
console.log(this);
})
var ul = document.querySelector('ul');
ul.addEventListener('click', function(e){
// 给ul 绑定了事件 那么 this 就指向了 ul
console.log(this);
console.log(e.currentTarget);
// e.target 指向了我们点击的哪个对象 谁触发了这个事件 我们点击的是 li e.target 指向的就是li
console.log(e.target);
})
// target 兼容性问题处理
// div.onclick=function(e){
// e = e || window.event;
// var target = e.target || e.srcElement;
// console.log(target);
// }
// 了解 跟this 有个非常相似的属性 currentTarget ie678 不认识
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>123</div>
<a href="http://www.baidu.com">百度</a>
<form action="http://www.baidu.com">
<input type="submit" value="提交" name="sub">
</form>
<script>
// 常见事件对象的属性和方法
// 1、返回事件类型
var div = document.querySelector('div');
div.addEventListener('click',fn);
div.addEventListener('mouseover',fn);
div.addEventListener('mouseout',fn);
function fn(e){
console.log(e.type);
}
// 2、阻止默认行为（默认） 让链接不跳转 或者 让提交按钮不提交
var a = document.querySelector('a');
a.addEventListener('click', function(e){
e.preventDefault(); //dom标准写法
})
// 传统的注册方法
a.onclick = function(e){
// 普通浏览器 e.preventDefault();
// e.preventDefault(); //方法
// 低版本浏览器 IE678
// e.returnValue; //属性
// 可以利用 return false 也能阻止默认行为 没有兼容性问题
// 特点： return 后面的代码不执行了 而且只限于传统的注册方法
return false;
}
</script>
</body>
</html> 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
overflow: hidden;
width: 300px;
height: 300px;
margin: 100px auto;
background-color: pink;
text-align: center;
}
.son {
width: 200px;
height: 200px;
margin: 50px;
background-color: purple;
line-height: 200px;
color: #fff;
}
</style>
</head>
<body>
<div class="father">
<div class="son">son儿子</div>
</div>
<script>
// 常见事件对象的属性和方法
// 阻止冒泡 dom 推荐的标准 stopPropagation()
var son = document.querySelector('.son');
son.addEventListener('click', function(e){
alert('son');
e.stopPropagation(); //stop 停止 Propagation 传播
e.cancelBubble = true; //非标准 cancel 取消 bubble 泡泡
}, false);
var father = document.querySelector('.father');
father.addEventListener('click', function(){
alert('father');
}, false);
document.addEventListener('click',function(){
alert('document');
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>我亲爱的祖国</li>
<li>我亲爱的祖国</li>
<li>我亲爱的祖国</li>
<li>我亲爱的祖国</li>
<li>我亲爱的祖国</li>
<li>我亲爱的祖国</li>
</ul>
<script>
// 事件委托的核心原理：给父节点添加侦听事件 再利用冒泡影响每一个子节点
var ul = document.querySelector('ul');
ul.addEventListener('click',function(e){
// alert('我亲爱的祖国');
// e.target 可以得到点击的对象
e.target.style.backgroundColor = 'orange';
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
我试衣服俺不愿意分享的
<script>
// 1. contextmenu 可以禁用右键菜单
document.addEventListener('contextmenu' ,function(e){
e.preventDefault();
})
// 2. selectstart 禁止选中文字
document.addEventListener('selectstart',function(e){
e.preventDefault();
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
height: 3000px;
}
</style>
</head>
<body>
<script>
// 鼠标事件对象 MouseEvent
document.addEventListener('click',function(e){
// 1. client 鼠标在可视区的 x 和 y 坐标
console.log(e.clientX);
console.log(e.clientY);
console.log('---------------------------');
// 2. page 鼠标在页面文档的 x 和 y 坐标
console.log(e.pageX);
console.log(e.pageY);
console.log('---------------------------');
// 3. screen 鼠标在电脑屏幕的 x 和 y 坐标
console.log(e.screenX);
console.log(e.screenY);
})
</script>
</body>
</html> 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img{
position: absolute;
top: 2px;
left: 2px;
}
</style>
</head>
<body>
<!-- 案例︰跟随鼠标的天使 -->
<!-- 这个天使图片一直跟随鼠标移动 -->
<img src="./第三天/code/images/angel.gif" alt="">
<script>
// 鼠标不断的移动，使用鼠标移动事件:mousemove
// 在页面中移动，给document注册事件
// 图片要移动距离，而且不占位置，我们使用绝对定位即可
// 核心原理︰每次鼠标移动，我们都会获得最新的鼠标坐标，把这个x和y坐标做为图片的
// top和left值就可以移动图片
var pic = document.querySelector('img');
document.addEventListener('mousemove', function(e){
// 1.mousemove 只要鼠标移动 1px 就会触发这个事件
// console.log(1);
// 2.核心原理︰每次鼠标移动，我们都会获得最新的鼠标坐标，把这个x和y坐标做为图片的 top和left值就可以移动图片
var x = e.pageX;
var y = e.pageY;
console.log('x坐标是' + x ,'y坐标是' + y );
// 千万不要忘记给 left 和 top 添加 px 单位
pic.style.left = x-50 + 'px';
pic.style.top = y-40 + 'px';
})
</script>
</body>
</html>
1304
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
