javascript:；等价于javascript:void(0)；删除留言和动态表格
2020-08-11 18:18
411 查看
javascript:;和#在链接里的区别：#先跳转到页面顶部在跳转到相应链接，javascript::直接跳转到链接
取自js dom bom pink老师p46删除留言案例
以下作用域是js在es6版本之前（es6版本新增块级作用域{}如if{} for{}）：
全局变量：
在全局作用域（script）（且函数外部声明的变量）内声明的变量：
在全局作用域内都能用
特殊：在函数内不使用var声明的变量也是全局变量。
局部变量（在函数内部定义var声明）：
只能在函数内部使用
函数的形参也是局部变量
区别：
全局变量只能在浏览器关闭才会被销毁比较占内存
局部变量：只能在函数内部使用所在代码块执行会被初始化，代码块运行结束被销毁，省内存
以下是js dom bom pink老师的p46删除留言案例和p49动态生成表格案例删除操作对比：
<!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>
<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>
</ul>
<script>
// 1. 获取元素
var btn = document.querySelector('button');
var text = document.querySelector('textarea');
var ul = document.querySelector('ul');
var as;
// 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='javascript:;'>删除</a>";
// (2) 添加元素
// ul.appendChild(li);
ul.insertBefore(li, ul.children[0]);
// (3) 删除元素 （2020-8-11）以下删除留言模块不可以放在按钮点击函数之外（猜测：li作为在函数内创建的ul新成员不可以在函数域外被调用）区分js dom pink老师 动态生成表格案例，那个案例删除操作可以放在两个for循环（分别用来创建表格的行和列）外边因为for循环里边新创建的li可以在for循环外调用因为script内为全局作用域，函数内为局部作用域，for循环内外没有区域之分（取自js零基础到精通pink老师p136全局变量和局部变量）。注：js在es6时才新增块级作用域{}(if{} for{})内为块级作用域。
// 另注：如script点击事件前定义var as=null随后把删除操作的as赋值之后的for{}放在点击函数之外。script全局变量和script内函数里的局部变量重名时，即便修改局部变量，也不能对全局变量造成覆盖。
as = document.querySelectorAll('a');
for (var i = 0; i < as.length; i++) {
as[i].onclick = function() {
ul.removeChild(this.parentNode);
}
}
}
}
/* var as = document.querySelectorAll('a');
for (var i = 0; i < as.length; i++) {
as[i].onclick = function() {
// node.removeChild(child); 删除的是 li 当前a所在的li this.parentNode;
ul.removeChild(this.parentNode);
}
} */
</script>
</body>
</html>
动态表格案例
// js文件等页面加载完毕再执行
window.addEventListener('load', function() {
var arrow1 = document.querySelector('.arrow-l');
var arrow2 = document.querySelector('.arrow-r');
var focus = document.querySelector('.focus');
// 鼠标经过经过显示左右按钮
focus.addEventListener('mouseenter', function() {
arrow1.style.display = 'block';
arrow2.style.display = 'block';
});
focus.addEventListener('mouseleave', function() {
arrow1.style.display = 'none';
arrow2.style.display = 'none';
});
var ul = focus.querySelector('ul');
var ol = focus.querySelector('.circle');
console.log(ul.children.length);
for (var i = 0; i < ul.children.length; i++) {
var li = document.createElement('li');
ol.appendChild(li);
// 直接生成小圆圈同时绑定点击事件,如把点击事件放在生成小圆圈事件之外，点击事件的li是最后一次生成的小圆圈，只能给最后一个生成的小圆圈绑定点击事件，边生成边点击可以保证每一次新生成即所有的小圆圈都能绑定点击事件
// 把点击小圆圈事件放在创建小圆圈事件里，类似生产一个消费一个相当于每一次新创建完立刻给新创建的小圆圈绑定点击事件（注意此时点击事件的检索范围必须局限在新创建里：表格删除留言点击事件放在创建表格里时点击事件的是td.querySelector不能是document.querySelector），
// 如把点击事件放在创建时间外相当于全部生产完毕再启动消费
li.addEventListener('click', function() {
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
this.className = 'current';
});
}
/* var lis = focus.querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
lis[i].addEventListener('click', function() {
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
this.className = 'current';
});
} */
// ol.children[0].className = 'current';
});
对比三：轮播图小圆圈创建及点击
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?tomleg');
src: url('fonts/icomoon.eot?tomleg#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?tomleg') format('truetype'), url('fonts/icomoon.woff?tomleg') format('woff'), url('fonts/icomoon.svg?tomleg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
* {
padding: 0;
margin: 0;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
.focus {
position: relative;
width: 721px;
height: 455px;
background-color: pink;
}
.focus ul {
width: 400%;
}
.focus ul li {
float: left;
}
.arrow-l {
display: none;
position: absolute;
left: 0;
top: 270px;
width: 20px;
height: 20px;
background-color: #fff;
opacity: .5;
font-family: 'icomoon';
}
.arrow-r {
display: none;
position: absolute;
right: 0;
top: 270px;
width: 20px;
height: 20px;
background-color: #fff;
opacity: .5;
font-family: 'icomoon';
}
ol {
position: absolute;
bottom: 10px;
left: 300px;
}
ol li {
float: left;
width: 10px;
height: 10px;
margin: 0 10px;
border: 2px solid yellow;
border-radius: 5px;
}
.current {
background-color: yellow;
}
</style>
</head>
<body>
<div class="focus">
<div class="arrow-l"></div>
<div class="arrow-r"></div>
<ul>
<li><img src="upload/focus.jpg" alt=""></li>
<li><img src="upload/focus1.jpg" alt=""></li>
<li><img src="upload/focus2.jpg" alt=""></li>
<li><img src="upload/focus3.jpg" alt=""></li>
<li><img src="upload/focus3.jpg" alt=""></li>
</ul>
<ol>
</ol>
</div>
<script>
var al = document.querySelector('.arrow-l');
var ar = document.querySelector('.arrow-r');
var f = document.querySelector('.focus');
var ol = document.querySelector('ol');
var ul = document.querySelector('ul');
window.addEventListener('load', function() {
f.addEventListener('mouseenter', function() {
al.style.display = 'block';
ar.style.display = 'block';
});
console.log(ul.children.length);
for (var i = 0; i < ul.children.length; i++) {
// createElement调用者只能是document
var li = document.createElement('li');
ol.appendChild(li);
// 小圆圈点击事件放在创建小圆圈事件内相当于生产一个消费一个
li.addEventListener('click', function() {
for (var i = 0; i < ul.children.length; i++) {
ol.children[i].className = '';
}
this.className = 'current';
});
}
// 由于dom文档中往往不只一个li组合，所以检索设定在ol无序列表范围
/* var lis = ol.querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
lis[i].addEventListener('click', function() {
for (var i = 0; i < ul.children.length; i++) {
ol.children[i].className = '';
}
this.className = 'current';
});
} */
f.addEventListener('mouseleave', function() {
al.style.display = 'none';
ar.style.display = 'none';
});
});
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 使用Javascript动态增加，删除表格（使用DHTML对象模型）
- 使用JavaScript操作DOM动态增加删除表格
- 利用javaScript动态增加表格行，删除表格行
- javascript动态添加删除表格数据管理
- JavaScript动态操作表格（添加，删除行、列及单元格）
- javascript实例教程：动态增加、删除表格
- JavaScript动态添加删除表格行(支持FireFox)
- javascript 动态创建表格：新增、删除行和单元格
- JavaScript动态操作表格实例(添加,删除行,列及单元格)
- javascript动态创建表格：新增、删除行和列
- javascript表格操作大全：表格排序/倒序、动态添加列、批量删除、删除一行、隔行变色、鼠标悬浮切换背景色、全选/反选。（IE、火狐都兼容）
- javascript动态增加、删除、填充表格内容
- JavaScript 动态添加删除表格行
- javascript动态增加、删除、填充表格内容
- 使用Javascript动态增加，删除表格（使用DHTML对象模型）
- 使用Javascript动态增加，删除表格
- Javascript动态创建表格及删除行列的方法
- javascript 动态创建表格：新增、删除行和单元格
- JavaScript 动态创建表格：新增、删除行和单元格
- 基于JavaScript实现动态添加删除表格的行