标签:页面 nload event 多个 属性 length ext 函数 括号
第一章 标签的查找
1.1直接查找
直接查找标签可以分为三种:
(1)根据类的名称进行查找。这种方式是用的比较广泛的一种,使用方法为:document.getElementsByClassName(“name”),这种查找的方式找到的对象有一个或多个,所以通常想要具象化出一个对象需要在后面放上一个数字,也就是:document.getElementsByClassName(“name”)[id],比如:找到类名为dev的第一个标签,使用方法为document.getElementsByClassName(“dev”)[0]。
(2)根据对象id进行查找。使用方法为document.getElementById(“idname”),因为id是唯一的,所以这种方法找到的对象只有一个,例如:找到id=p1的标签:document.getElementById(“p1”),这个就表示找到的对象。
(3)根据标签名进行查找。这种方法查到的标签也是一个或多个,使用方法为:document.getElementsByClassName(“name”),类似于根据类查找,这种方式找到的对象也得后面加一个id,例如:查找第一个div标签:document.getElementsByClassName(“div”)[0],第二个那么后面的方括号里写1.
1.2导航查找
通过与正操作的标签的关系的方式进行标签的查找就是导航查找,目前导航查找的方式一般如下:
parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
例如:找到当前标签的父标签:
this.parentElement
第二章 事件
click事件
表示鼠标点击时发生的事件,使用方法一般是对象。onclick=function(){},例如新增一行表格,可以用如下代码做到:
qian_commit.onclick=function () { var tr1=document.createElement("tr"); for(i=0;i<qian_input.length;i++){ var td1=document.createElement("td"); console.log(qian_input[i].value); td1.innerHTML=qian_input[i].value; td1.classList.add("bianji"); tr1.appendChild(td1); }; var td2=document.createElement("td"); var button1=document.createElement("button"); var button2=document.createElement("button"); button1.innerHTML="保存"; button2.innerHTML="删除"; button1.classList.add("edit1"); button2.classList.add("del1"); td2.appendChild(button1); td2.appendChild(button2); tr1.appendChild(td2); qian_body[0].appendChild(tr1); qian_back[0].style.display="none"; qian_del.length=qian_del.length+1; del(); edit(); save(); };
onload事件
onload 属性开发中 只给 body元素加.这个属性的触发 标志着 页面内容被加载完成.应用场景: 当有些事情我们希望页面加载完立刻执行,那么可以使用该事件属性.。例如:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> /* window.onload=function(){ var ele=document.getElementById("ppp"); ele.onclick=function(){ alert(123) }; }; */ function fun() { var ele=document.getElementById("ppp"); ele.onclick=function(){ alert(123) }; } </script> </head> <body onload="fun()"> <p id="ppp">hello p</p> </body> </html>
onsubmit事件
当表单在提交时触发. 该属性也只能给form元素使用.应用场景: 在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应该阻止表单的提交。
例如:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> window.onload=function(){ //阻止表单提交方式1(). //onsubmit 命名的事件函数,可以接受返回值. 其中返回false表示拦截表单提交.其他为放行. var ele=document.getElementById("form"); ele.onsubmit=function(event) { // alert("验证失败 表单不会提交!"); // return false; // 阻止表单提交方式2 event.preventDefault(); ==>通知浏览器不要执行与事件关联的默认动作。 alert("验证失败 表单不会提交!"); event.preventDefault(); } }; </script> </head> <body> <form id="form"> <input type="text"/> <input type="submit" value="点我!" /> </form> </body> </html>
还有很多常见的事件:onselect、onchange、onkeydown、onmouseout、onmouseleave等。
标签:页面 nload event 多个 属性 length ext 函数 括号
原文地址:http://www.cnblogs.com/qianmeng/p/7742495.html