一、动态添加和删除元素
- ~兄弟选择器
+相邻兄弟选择器
- a标签有默认的跳转页面的行为，有两种方法可以阻止它的默认行为
1- href设置为javascript:void(0) --（什么都不做） 功能性链接
2- preventDefault()阻止事件的默认行为,低版本IE不适用evt.preventDefault();
-
document.createElement()创建新元素(标签)
- 在父类标签下面追加子类标签
ul.appendChild(li);
insertBefore()第一个参数是需要添加的参数,第二个参数是需要在谁的前面插入添加
如果是lastChild,并且ul里面，li标签后面有回车,回车是最后一个节点(文本节点)
- trim()去掉字符串左右两边的空白
-
input.focus()让文本框获得焦点,光标会在文本框上闪烁
-
removeChild():在父节点中删除子节点
- 键盘事件(keydown:按下按键，keypress: 某个键盘按键被按下并松开, keyup:按键弹起)
- evt.keyCode或者evt.which返回onkeypress事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码。
- a标签的href属性置空可以出现手指图表
- 查CSS在浏览器中预览效果
<!-- 查CSS在浏览器中预览效果 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
#container {
margin: 20px 50px;
}
#fruits li {
list-style: none;
width: 200px;
height: 50px;
font-size: 20px;
line-height: 50px;
background-color: cadetblue;
color: white;
text-align: center;
margin: 2px 0;
}
#fruits>li>a {
float: right;
text-decoration: none;
color: white;
position: relative;
right: 5px;
}
/* ~兄弟选择器
+相邻兄弟选择器*/
#fruits~input {
border: none;
outline: none;
font-size: 18px;
}
#fruits~input[type=text] {
border-bottom: 1px solid darkgray;
width: 200px;
height: 50px;
text-align: center;
}
#fruits~input[type=button] {
width: 80px;
height: 30px;
background-color: coral;
color: white;
vertical-align: bottom;
cursor: pointer;
}
</style>
</head>
<body>
<div id="container">
<ul id="fruits">
<!-- a标签有默认的跳转页面的行为，有两种方法可以阻止它的默认行为 -->
<!-- 1.href设置为javascript:void(0) --（什么都不做） 功能性链接-->
<!-- <li>苹果<a href="javascript:void(0)">×</a></li>
<li>香蕉<a href="javascript:void(0)">×</a></li>
<li>火龙果<a href="javascript:void(0)">×</a></li>
<li>西瓜<a href="javascript:void(0)">×</a></li> -->
<li>苹果<a href="">×</a></li>
<li>香蕉<a href="">×</a></li>
<li>火龙果<a href="">×</a></li>
<li>西瓜<a href="">×</a></li>
</ul>
<input type="text" name="fruit">
<input id="ok" type="button" value="确定">
</div>
<script type="text/javascript">
var input = document.querySelector('#container input[type=text]');
var ul = document.getElementById('fruits');
// 根据文本框输入的内容添加li标签和a标签
function addItem(){
// trim()去掉字符串左右两边的空白
var fruitName = input.value.trim();
if (fruitName.length > 0){
// document.createElement()创建新元素(标签)
var li = document.createElement('li');
li.textContent = fruitName;
// 在父类标签下面追加子类标签
// ul.appendChild(li);
// insertBefore()第一个参数是需要添加的参数,第二个参数是需要在谁的前面插入添加
// 如果是lastChild,并且ul里面，li标签后面有回车,回车是最后一个节点(文本节点)
ul.insertBefore(li, ul.firstChild);
// 创建a标签
var a = document.createElement('a');
// a标签的href属性置空可以出现手指图表
a.href='';
a.textContent = 'x';
// 在li标签下面追加a标签
li.appendChild(a);
// 给a标签的点击事件绑定删除操作
a.addEventListener('click', removeItem)
}
// 清空文本框
input.value = '';
// 让文本框获得焦点,光标会在文本框上闪烁
input.focus();
}
/*定义一个删除li标签的函数*/
function removeItem(evt){
// preventDefault()阻止事件的默认行为,低版本IE不适用
evt.preventDefault();
var a = evt.target || evt.srcElement;
var li = a.parentNode;
// removeChild():在父节点中删除子节点;
li.parentNode.removeChild(li);
}
// 后代选择器
var anchors = document.querySelectorAll('#fruits a');
// document.querySelectorAll('#fruits>li>a')
// 循环给a标签绑定'click'事件
for (var i = 0; i < anchors.length; i += 1){
anchors[i].addEventListener('click', removeItem)
}
/*定义按下回车键和okButton效果等同，添加元素 的函数*/
// 键盘事件(keydown:按下按键，keypress: 某个键盘按键被按下并松开, keyup:按键弹起)
input.addEventListener('keypress', function (evt){
// evt.keyCode或者evt.which返回onkeypress事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码。
var key = evt.keyCode || evt.which;
if (key == 13){
addItem()
}
})
var okButton = document.getElementById('ok');
okButton.addEventListener('click', addItem)
</script>
</body>
</html>
二、表格效果
- 直接调用匿名函数
方法一: (function (a, b){})(a, b);
方法二: +function (a, b){}(a, b);
可以采用此方法减少全局变量的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#data {
border-collapse: collapse;
}
#data td, #data th {
width: 120px;
height: 40px;
text-align: center;
border: 1px solid black;
}
#buttons {
margin: 10px 0;
}
</style>
</head>
<body>
<table id="data">
<caption>数据统计表</caption>
<tbody>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>身高</th>
<th>体重</th>
</tr>
<tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
<td>Item4</td>
<td>Item5</td>
</tr>
<tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
<td>Item4</td>
<td>Item5</td>
</tr>
<tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
<td>Item4</td>
<td>Item5</td>
</tr>
<tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
<td>Item4</td>
<td>Item5</td>
</tr>
<tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
<td>Item4</td>
<td>Item5</td>
</tr>
<tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
<td>Item4</td>
<td>Item5</td>
</tr>
</tbody>
</table>
<div id="buttons">
<button id="pretty">隔行换色</button>
<button id="clear">清除数据</button>
<button id="remove">删单元格</button>
<button id="hide">隐藏表格</button>
</div>
<script src="js/mylib.js"></script>
<script>
function prettify() {
var trs = document.querySelectorAll('#data tr');
for (var i = 1; i < trs.length; i += 1) {
trs[i].style.backgroundColor =
i % 2 == 0 ? 'lightgray' : 'lightsteelblue';
}
}
function clear() {
var tds = document.querySelectorAll('#data td');
for (var i = 0; i < tds.length; i += 1) {
tds[i].textContent = '';
}
}
function removeLastRow() {
var table = document.getElementById('data');
if (table.rows.length > 1) {
table.deleteRow(table.rows.length - 1);
}
}
function hideTable() {
var table = document.getElementById('data');
table.style.visibility = 'hidden';
}
+function() {
var prettyBtn = document.querySelector('#pretty');
prettyBtn.addEventListener('click', prettify)
var clearBtn = document.querySelector('#clear');
clearBtn.addEventListener('click', clear);
var removeBtn = document.querySelector('#remove');
removeBtn.addEventListener('click', removeLastRow);
var hideBtn = document.querySelector('#hide');
hideBtn.addEventListener('click', hideTable);
}();
</script>
</body>
</html>
三、闪烁的方块
- className可以设置类名,与之前用类选择器.small写的CSS样式绑定,class是关键字
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#container {
width: 800px;
height: 400px;
margin: 10px auto;
border: 1px solid black;
overflow: hidden;
}
#buttons {
width: 800px;
margin: 10px auto;
text-align: center;
}
#add, #fla {
border: none;
outline: none;
width: 80px;
height: 30px;
background-color: red;
color: white;
font-size: 16px;
cursor: pointer;
}
.small {
width: 80px;
height: 80px;
float: left;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="buttons">
<button id="add">添加</button>
<button id="fla">闪烁</button>
</div>
<script src="js/mylib.js"></script>
<script>
var bigDiv = document.querySelector('#container');
var addButton = document.querySelector('#add');
addButton.addEventListener('click', function() {
var smallDiv = document.createElement('div');
smallDiv.className = 'small';
// smallDiv.style.width = '80px';
// smallDiv.style.height = '80px';
// smallDiv.style.float = 'left';
smallDiv.style.backgroundColor = randomColor();
bigDiv.insertBefore(smallDiv, bigDiv.firstChild);
});
var flaButton = document.querySelector('#fla');
var isFlashing = false;
var timerId;
flaButton.addEventListener('click', function(evt) {
isFlashing = !isFlashing;
if (isFlashing) {
timerId = window.setInterval(function() {
var divs = document.querySelectorAll('#container>div');
for (var i = 0; i < divs.length; i += 1) {
divs[i].style.backgroundColor = randomColor();
}
}, 200);
flaButton.textContent = '暂停';
} else {
window.clearInterval(timerId);
flaButton.textContent = '闪烁';
}
});
</script>
</body>
</html>
