116 lines
3.4 KiB
HTML
116 lines
3.4 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<title></title>
|
|||
|
|
<style>
|
|||
|
|
* {
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
}
|
|||
|
|
#fruits {
|
|||
|
|
width: 120px;
|
|||
|
|
margin: 20px 20px;
|
|||
|
|
}
|
|||
|
|
#fruits>li {
|
|||
|
|
list-style-type: none;
|
|||
|
|
height: 40px;
|
|||
|
|
color: white;
|
|||
|
|
background-color: #009966;
|
|||
|
|
line-height: 40px;
|
|||
|
|
text-align: center;
|
|||
|
|
margin-top: 2px;
|
|||
|
|
}
|
|||
|
|
#fruits>li>a {
|
|||
|
|
float: right;
|
|||
|
|
color: white;
|
|||
|
|
text-decoration: none;
|
|||
|
|
}
|
|||
|
|
#fruits~input {
|
|||
|
|
border: none;
|
|||
|
|
outline: none;
|
|||
|
|
text-align: center;
|
|||
|
|
margin: 20px 15px;
|
|||
|
|
}
|
|||
|
|
input[type=text] {
|
|||
|
|
border-bottom: 1px solid gray !important;
|
|||
|
|
}
|
|||
|
|
#ok {
|
|||
|
|
width: 80px;
|
|||
|
|
height: 30px;
|
|||
|
|
background-color: #CC3333;
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div id="container">
|
|||
|
|
<ul id="fruits">
|
|||
|
|
<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>
|
|||
|
|
function addListItem() {
|
|||
|
|
let name = input.value.trim()
|
|||
|
|
if (name) {
|
|||
|
|
// 通过document对象的createElement方法创建新元素
|
|||
|
|
let li = document.createElement('li')
|
|||
|
|
// 可以用textContent或innerHTML属性来修改标签的内容
|
|||
|
|
li.innerHTML = name
|
|||
|
|
let a = document.createElement('a')
|
|||
|
|
a.innerHTML = '×'
|
|||
|
|
a.href = ''
|
|||
|
|
a.addEventListener('click', removeListItem)
|
|||
|
|
li.appendChild(a)
|
|||
|
|
// 通过父元素的appendChild或insertBefore可以添加子元素
|
|||
|
|
ul.appendChild(li)
|
|||
|
|
input.value = ''
|
|||
|
|
// 元素的focus和blur方法可以让元素获得或失去焦点
|
|||
|
|
input.focus()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function removeListItem(evt) {
|
|||
|
|
// evt.stopPropagation()
|
|||
|
|
// 通过事件对象的preventDefault方法阻止事件的默认行为
|
|||
|
|
evt.preventDefault()
|
|||
|
|
// 通过元素获取父元素 - parentNode
|
|||
|
|
// 通过元素获取子元素 - children / firstElementChild / lastElementChild
|
|||
|
|
// 通过元素获取兄弟元素 - previousElementSibling / nextElementSibling
|
|||
|
|
let li = evt.target.parentNode
|
|||
|
|
// 通过父元素的removeChild方法可以删除指定的子元素
|
|||
|
|
ul.removeChild(li)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const ul = document.querySelector('#fruits')
|
|||
|
|
const input = ul.nextElementSibling
|
|||
|
|
input.addEventListener('keypress', (evt) => {
|
|||
|
|
let code = evt.keyCode || evt.which
|
|||
|
|
if (code == 13) {
|
|||
|
|
addListItem()
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
const ok = input.nextElementSibling
|
|||
|
|
ok.addEventListener('click', addListItem)
|
|||
|
|
let anchors = document.querySelectorAll('#fruits>li>a')
|
|||
|
|
for (let i = 0; i < anchors.length; i += 1) {
|
|||
|
|
// addEventListener方法有三个参数
|
|||
|
|
// 第一个参数是事件的名称，例如: click / dbclick / mouseover / mouseout
|
|||
|
|
// 第二个参数是事件发生时要执行的回调函数，函数的参数是事件对象:
|
|||
|
|
// ~ 传入一个已有函数的名字
|
|||
|
|
// ~ 写一个匿名函数 function(evt) {}
|
|||
|
|
// ~ 写一个箭头函数 (evt) => {}
|
|||
|
|
// 第三个参数表示使用事件捕获还是事件冒泡,如果不写表示事件冒泡(从里向外传播事件)
|
|||
|
|
// ~ 如果设置为true表示事件捕获(从外向里传播事件)
|
|||
|
|
// ~ 如果希望阻止事件的传播行为可以调用事件对象的stopPropagation方法
|
|||
|
|
anchors[i].addEventListener('click', removeListItem)
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|