-
有一个input输入框,以及4个操作按钮
- 点击"左侧入",将input中输入的数字从左侧插入队列中;
- 点击"右侧入",将input中输入的数字从右侧插入队列中;
- 点击"左侧出",读取并删除队列左侧第一个元素,并弹窗显示元素中数值;
- 点击"右侧出",读取并删除队列又侧第一个元素,并弹窗显示元素中数值;
- 点击队列中任何一个元素,则该元素会被从队列中删除
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>队列操作</title> <style type="text/css"> *{ margin: 0; padding: 0; } #content{ width: 500px; margin: 200px auto 0; text-align: center; } #show{ height: 40px; margin-top: 3px; } #show span { display: inline-block; margin-right: 2px; line-height: 40px; padding: 0 2px; font-size: 20px; color: #fff; background: #f00; } </style> </head> <body> <div id="main"> <div id="content"> <div id="user_area"> <input name="user_input" type="text"> <input type="button" name="left_in" value="左侧入"> <input type="button" name="right_in" value="右侧入"> <span style="display: inline-block;width: 20px;"></span> <input type="button" name="left_out" value="左侧出"> <input type="button" name="right_out" value="右侧出"> </div> <div id="show"></div> </div> </div> <script type="text/javascript"> var show = document.getElementById("show"); var user_area = document.getElementById("user_area"); user_area.addEventListener("click",function (e) { //事件委托 var num = document.getElementsByName("user_input")[0].value; var name = e.target.name; if(!+num&&(name === "left_in"||name === "right_in")) { //对输入是否为空做判断 alert("请输入一个数字"); }else{ switch (name) { //根据name来设置不同的行为 case "left_in": show.insertBefore(addNumber(num), show.firstChild); break; case "left_out": if(show.hasChildNodes()) { show.removeChild(show.firstChild); }else{ alert("没有元素了"); } break; case "right_in": show.appendChild(addNumber(num)); break; case "right_out": if(show.hasChildNodes()) { show.removeChild(show.lastChild); }else{ alert("没有元素了"); } break; } } }); function addNumber(num) { var span = document.createElement("span"); span.innerHTML = num; return span; }; </script> </body> </html>
1,关于获取元素:
getElementsByClassName("这里写上类名,不需要点号") ——返回文档中所有指定类名的元素集合,作为 NodeList 对象。
getElementById("这里写ID,不加#号") ——返回对拥有指定 ID 的第一个对象的引用,注意不是集合,如果ID不存在,返回null,如果存在多个指定ID的元素,则返回undefined。
getElementsByName("这里写name的值") ——返回带有指定名称的对象的集合。
getElementsByTagName("填写标签名") ——返回带有指定标签名的对象的集合。参数填写*号,会返回所有元素。
querySelector("这里写css选择语句")—— 返回文档中匹配指定 CSS 选择器的第一个元素。
querySelectorAll("同上")—— 返回文档中匹配指定 CSS 选择器的所有元素(集合)。
ps:得到集合可以使用索引获取指定元素节点。
2,关于事件代理:
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){ alert(this.id); }, false);
btn.addEventListener("click", function(){ alert("Hello world!"); }, false);
这两个事件处理程序会按照添加它们的顺序触发,通过 addEventListener()添加的事件处理程序只能使用 removeEventListener()来移除;移 除时传入的参数与添加处理程序时使用的参数相同。这也意味着通过 addEventListener()添加的匿 名函数将无法移除。