一、動(dòng)態(tài)添加和刪除元素
- ~兄弟選擇器
+相鄰兄弟選擇器
- a標(biāo)簽有默認(rèn)的跳轉(zhuǎn)頁(yè)面的行為，有兩種方法可以阻止它的默認(rèn)行為
1- href設(shè)置為javascript:void(0) --（什么都不做） 功能性鏈接
2- preventDefault()阻止事件的默認(rèn)行為,低版本IE不適用evt.preventDefault();
-
document.createElement()創(chuàng)建新元素(標(biāo)簽)
- 在父類標(biāo)簽下面追加子類標(biāo)簽
ul.appendChild(li);
insertBefore()第一個(gè)參數(shù)是需要添加的參數(shù),第二個(gè)參數(shù)是需要在誰(shuí)的前面插入添加
如果是lastChild,并且ul里面炕贵，li標(biāo)簽后面有回車,回車是最后一個(gè)節(jié)點(diǎn)(文本節(jié)點(diǎn))
- trim()去掉字符串左右兩邊的空白
-
input.focus()讓文本框獲得焦點(diǎn),光標(biāo)會(huì)在文本框上閃爍
-
removeChild():在父節(jié)點(diǎn)中刪除子節(jié)點(diǎn)
- 鍵盤事件(keydown:按下按鍵蚕脏，keypress: 某個(gè)鍵盤按鍵被按下并松開(kāi), keyup:按鍵彈起)
- evt.keyCode或者evt.which返回onkeypress事件觸發(fā)的鍵的值的字符代碼，或者 onkeydown 或 onkeyup 事件的鍵的代碼竹挡。
- a標(biāo)簽的href屬性置空可以出現(xiàn)手指圖表
- 查CSS在瀏覽器中預(yù)覽效果
<!-- 查CSS在瀏覽器中預(yù)覽效果 -->
<!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標(biāo)簽有默認(rèn)的跳轉(zhuǎn)頁(yè)面的行為，有兩種方法可以阻止它的默認(rèn)行為 -->
<!-- 1.href設(shè)置為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');
// 根據(jù)文本框輸入的內(nèi)容添加li標(biāo)簽和a標(biāo)簽
function addItem(){
// trim()去掉字符串左右兩邊的空白
var fruitName = input.value.trim();
if (fruitName.length > 0){
// document.createElement()創(chuàng)建新元素(標(biāo)簽)
var li = document.createElement('li');
li.textContent = fruitName;
// 在父類標(biāo)簽下面追加子類標(biāo)簽
// ul.appendChild(li);
// insertBefore()第一個(gè)參數(shù)是需要添加的參數(shù),第二個(gè)參數(shù)是需要在誰(shuí)的前面插入添加
// 如果是lastChild,并且ul里面奖蔓，li標(biāo)簽后面有回車,回車是最后一個(gè)節(jié)點(diǎn)(文本節(jié)點(diǎn))
ul.insertBefore(li, ul.firstChild);
// 創(chuàng)建a標(biāo)簽
var a = document.createElement('a');
// a標(biāo)簽的href屬性置空可以出現(xiàn)手指圖表
a.href='';
a.textContent = 'x';
// 在li標(biāo)簽下面追加a標(biāo)簽
li.appendChild(a);
// 給a標(biāo)簽的點(diǎn)擊事件綁定刪除操作
a.addEventListener('click', removeItem)
}
// 清空文本框
input.value = '';
// 讓文本框獲得焦點(diǎn),光標(biāo)會(huì)在文本框上閃爍
input.focus();
}
/*定義一個(gè)刪除li標(biāo)簽的函數(shù)*/
function removeItem(evt){
// preventDefault()阻止事件的默認(rèn)行為,低版本IE不適用
evt.preventDefault();
var a = evt.target || evt.srcElement;
var li = a.parentNode;
// removeChild():在父節(jié)點(diǎn)中刪除子節(jié)點(diǎn);
li.parentNode.removeChild(li);
}
// 后代選擇器
var anchors = document.querySelectorAll('#fruits a');
// document.querySelectorAll('#fruits>li>a')
// 循環(huán)給a標(biāo)簽綁定'click'事件
for (var i = 0; i < anchors.length; i += 1){
anchors[i].addEventListener('click', removeItem)
}
/*定義按下回車鍵和okButton效果等同，添加元素 的函數(shù)*/
// 鍵盤事件(keydown:按下按鍵讹堤，keypress: 某個(gè)鍵盤按鍵被按下并松開(kāi), keyup:按鍵彈起)
input.addEventListener('keypress', function (evt){
// evt.keyCode或者evt.which返回onkeypress事件觸發(fā)的鍵的值的字符代碼吆鹤，或者 onkeydown 或 onkeyup 事件的鍵的代碼。
var key = evt.keyCode || evt.which;
if (key == 13){
addItem()
}
})
var okButton = document.getElementById('ok');
okButton.addEventListener('click', addItem)
</script>
</body>
</html>
二洲守、表格效果
- 直接調(diào)用匿名函數(shù)
方法一: (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>數(shù)據(jù)統(tǒng)計(jì)表</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">清除數(shù)據(jù)</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可以設(shè)置類名,與之前用類選擇器.small寫的CSS樣式綁定,class是關(guān)鍵字
<!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>
