a、微博输入删除小案例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.box {
600px;
margin: 100px auto;
border: 1px solid #000;
padding: 20px;
}
textarea {
450px;
height: 160px;
outline: none;
resize: none;
}
ul {
450px;
padding-left: 80px;
}
ul li {
line-height: 25px;
border-bottom: 1px dashed #cccccc;
}
input {
float: right;
}
</style>
</head>
<body>
<div class="box" id="weibo">
<span>微博发布</span>
<textarea name="" id="txt" cols="30" rows="10"></textarea>
<button id="btn">发布</button>
<ul id="ul">
</ul>
</div>
<script src="common.js"></script>
<script>
var ul = $$("ul");
var btn = $$("btn");
var txt = $$("txt");
btn.onclick = function () {
if (txt.value.length == 0) {
alert("请输入内容");
return;
}
var li = document.createElement("li");
li.innerHTML = txt.value;
var lis = ul.children;
if (lis.length == 0) {
ul.appendChild(li);
} else {
ul.insertBefore(li, lis[0]);
}
var input = document.createElement("input");
input.type = "button";
input.value = "删除";
li.appendChild(input);
input.onclick = function () {
this.parentNode.parentNode.removeChild(this.parentNode);
}
}
</script>
解题思路：
1. 先获得要操作的对象，文本域，发布按钮,ul
2. 给发布按钮注册单击事件
3. 点击发布按钮的时候，判断用户输入的内容是否为空，也就是判断文本域内容是否为空，为空则return，不再往下执行。
4. 动态的创建元素li,然后追加到ul中
5. 将用户输入的内容做为li的文本
6. 动态的创建删除按钮(input)，并添加对应的属性(type=button,value='删除')并追加到li中
7. 判断ul中是否有子元素，如果有则将创建的新的li往前插入(insertBefore)，如果是第一个li则是给ul追加(appendChild)
8. 给创建的input(删除按钮)注册单击事件，当点击删除按钮的时候，从ul中删除对应的li
b、模拟百度输入框小案例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
#box {
400px;
margin: 200px auto;
/*border: 1px solid #000;*/
}
#txtSearch {
300px;
}
#pop {
300px;
border: 1px solid red;
padding: 0px;
}
#pop ul {
list-style-type: none;
margin: 5px;
padding: 0px;
}
#pop ul li {
}
</style>
</head>
<body>
<div id="box">
<input type="text" value="" id="txtSearch"/>
<input type="button" value="搜索" id="btnSearch"/>
</div>
<script src="common.js"></script>
<script>
var array = ["a", "abc", "aaa", "aabbcc", "aaaaaaa", "abedoefjldkf", "bbddcc", "aa", "aaeeccss"];
var txt = document.getElementById("txtSearch");
var btn = document.getElementById("btnSearch");
var box = document.getElementById("box");
// txt.onkeyup = function () {
// var v = txt.value;
// var filterArr = [];
// for (var i = 0; i < array.length; i++) {
// if (array[i].indexOf(v) == 0) {
// filterArr.push(array[i]);
// }
// }
// var divPop = document.getElementById("pop");
// if (divPop) {
// box.removeChild(divPop);
// }
// if (filterArr.length == 0) {
// return;
// }
// if (v.length == 0) {//用户输入数据为空的时候，不再往下执行代码。
// return;
// }
// var divPop = document.createElement("div");
// divPop.id = "pop";
// box.appendChild(divPop);
// var ul = document.createElement("ul");
// divPop.appendChild(ul);
// for (var j = 0; j < filterArr.length; j++) {
// var li = document.createElement("li");
// ul.appendChild(li);
// li.innerHTML = filterArr[j];
// }
//
// }
txt.onkeyup= function () {
var v=txt.value;
var arr=[];
for(var i=0;i<array.length;i++){
if(array[i].indexOf(v)==0){
arr.push(array[i]);
}
}
var divPop=document.getElementById("pop");
if(divPop){
box.removeChild(divPop);//删除创建div的样式
}
if(arr.length==0){
return;
}
if(v.length==0){//如果用户不输入内容，不再执行下面代码；
return;
}
var divPop=document.createElement("div");
divPop.id="pop";
box.appendChild(divPop);
var ul=document.createElement("ul");
divPop.appendChild(ul);
for(var j=0;j<arr.length;j++){
var li=document.createElement("li");
ul.appendChild(li);
li.innerHTML=arr[j];
}
}
</script>
解题思路：
1. 当键盘按下并抬起的时候触发事件
2. 根据用户输入的内容去数组当中查找以用户输入的内容开头的数据
3. 将遍历到的以用户输入的内容为开头的数据放到一个新的数组当中
4. 动态创建元素div,ul等，然后追加，并设置样式
5. 循环遍历新数组，根据新数组中的元素个数，创建li,并追加到ul中
6. 根据新输入的数据在生成Div之前，看是否能够通过ID获得div,如果有的话，则在创建新元素之前删除之前的div
7. 如果数组元素为空的话，加return关键字，不再往下执行代码
8. 如果文本框的输入为空的话，加return关键字,也不再往下执行代码