Day 11/13/2017 前端基础之JS(三)
节点操作
创建节点:
createElement(标签名) :创建一个指定名称的元素。 例:var tag=document.createElement(“input") tag.setAttribute('type','text');
添加节点:
追加一个子节点(作为最后的子节点)
父节点.appendChild(子节点);
somenode.appendChild(newnode) 把增加的节点放到某个节点的前边 somenode.insertBefore(newnode,某个节点);
删除节点:
removeChild():获得要删除的元素,通过父元素调用删除
父节点.removeChild(子节点);
替换节点:
somenode.replaceChild(newnode, 某个节点);
父节点.replaceChild(新节点,替换节点)
拷贝节点:
element.cloneNode(true)
DOM Event(事件)
事件类型
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onfocus 元素获得焦点。 练习:输入框
onblur 元素失去焦点。 应用场景:用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景:通常用于表单元素,当元素内容被改变时触发.(三级联动)
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onmouseleave 鼠标从元素离开
onselect 文本被选中。
onsubmit 确认按钮被点击。
ondblclick,onfocus,onblur
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> * { margin:0;padding:0; } </style> </head> <body> <p>QQQQ</p> <input type="text" id="i1" value="aaa" > <script> var ele_p=document.getElementsByTagName('p')[0]; ele_p.ondblclick=function () { console.log(this.innerHTML) }; var ele_i=document.getElementById('i1'); ele_i.onfocus=function () { this.value=""; }; ele_i.onblur=function () { this.value="aaa"; } </script> </body> </html>
onchange
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> * { margin:0;padding:0; } </style> </head> <body> <select id="s1"> <option value="x">请选择</option> <option value="1">A</option> <option value="2">B</option> <option value="3">C</option> <option value="4">D</option> </select> <select id="s2"> <option value="x">请选择</option> </select> <script> var data={'1':['A','AA','AAA'],'2':['B','BB','BBB'],'3':['C','CC','CCC'],'4':['D','DD','DDD']}; var ele_s1=document.getElementById('s1'); var ele_s2=document.getElementById('s2'); ele_s1.onchange=function () { ele_s2.options.length=1; if(data[this.value]){ var ele_v_list=data[this.value]; for(var i=0;i<ele_v_list.length;i++){ var ele_op=document.createElement('option'); ele_op.innerHTML=ele_v_list[i]; ele_s2.appendChild(ele_op); } } } </script> </body> </html>
onkeydown
Event 对象:Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用,函数不会在事件发生前被执行!event对象在事件发生时系统已经创建好了,并且会在事件函数被调用时传给事件函数.我们获得仅仅需要接收一下即可.比如onkeydown,我们想知道哪个键被按下了,需要问下event对象的属性,这里就时KeyCode.
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> * { margin:0;padding:0; } </style> </head> <body> <input id="i1" placeholder="用户名"> <script> var ele_i=document.getElementById('i1'); ele_i.onkeydown=function (e) { var a=e.keyCode; if(a!==13){ return true } alert('123'); } </script> </body> </html>
onload
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function fun() { var ele=document.getElementById("ppp"); alert(ele.innerText); } </script> </head> <body onload="fun()"> <p id="ppp">hello p</p> </body> </html>
onmouseout, onmouseover
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .d1{ background-color: red; width: 200px; height: 200px; } </style> </head> <body> <div class="d1"></div> <script> var ele_div=document.getElementsByClassName('d1')[0]; //div标签触发的事件 ele_div.onmouseout=function () { this.style.backgroundColor='blue'; }; ele_div.onmouseover=function () { this.style.backgroundColor='red'; }; </script> </body> </html>
onmousemove,onmousedown
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .d1{ background-color: red; width: 200px; height: 200px; } </style> </head> <body> <div class="d1"></div> <script> var ele_div=document.getElementsByClassName('d1')[0]; //在div标签中触发 移动鼠标事件 ele_div.onmousemove=function (e) { var x=e.clientX; var y=e.clientY; console.log(x,y); }; //在div标签中触发 点击鼠标事件 ele_div.onmousedown=function () { alert(123); } </script> </body> </html>
onmouseout与onmouseleave
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #container{ width: 300px; } #title{ background-color: darkblue; color: white; line-height: 30px; text-align: center; } #list .item1{ background-color: gray; line-height: 20px; } #list .item2{ background-color: #f0ad4e; line-height: 20px; } #list .item3{ background-color: green; line-height: 20px; } .hide{ display: none; } </style> </head> <body> <p>先看下使用mouseout的效果:</p> <div id="container"> <div id="title">使用了mouseout事件↓</div> <div id="list" class="hide"> <div class="item1">第一行</div> <div class="item2">第二行</div> <div class="item3">第三行</div> </div> </div> <script> var ele_title=document.getElementById("title"); var ele_list=document.getElementById("list"); var ele_container=document.getElementById("container"); ele_title.onmouseover=function () { ele_list.classList.remove("hide"); }; // 1.不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。 // ele_container.onmouseout=function () { // ele_list.classList.add("hide"); // }; // 2.只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。 ele_container.onmouseleave=function () { ele_list.classList.add("hide"); } </script> </body> </html>
onselect
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" id="i1"> <script> var ele=document.getElementById("i1"); ele.onselect=function () { alert(1234); } </script> </body> </html>
onsubmit
注:onsubmit是form标签的事件,form标签下必须有个input标签且type为submit
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form id="form1"> <input type="text" id="i1"><span class="s1"></span> <br/> <input type="submit"> </form> <script> function foo() { ele_s1.innerText='' } var ele_i1=document.getElementById("i1"); var ele_form1=document.getElementById("form1"); var ele_s1=document.getElementsByClassName('s1')[0]; ele_form1.onsubmit=function () { console.log(123); var a=ele_i1.value; if(a.length>5 && a.length<10){ alert(123); } else { ele_s1.innerText='123'; setTimeout(foo,3000); return false } } </script> </body> </html>
事件传播
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="abc_1" style="border:1px solid red;width:300px;height:300px;"> <div id="abc_2" style="border:1px solid red;width:200px;height:200px;"> </div> </div> <script type="text/javascript"> document.getElementById("abc_1").onclick=function(){ alert('111'); }; document.getElementById("abc_2").onclick=function(event){ alert('222'); event.stopPropagation(); //阻止事件向外层div传播. } </script> </body> </html>