常用JS整理
目录
1 事件
a addEventListener--绑定事件
b removeEventListener--解绑事件，只能解开addEventListener绑定的事件
2 JS获取节点信息
a byTagName,byName,byId
b parentNode
c childNodes
d firstChild
e lastChild
f nodeName,nodeType
g nextSibling--下一个兄弟节点
h previousSibling--上一个兄弟节点
3 JS对节点进行增删改
a createElement
b removeChild
c appendChild
4 小应用
a 触发事件后,DIV可编辑(contentEditable)
b 触发事件后，在DIV里面写入下拉框(createElement,appendChild,addEventListener,removeEventListener)
c 触发事件后,更变原有节点的类型(replaceChild)
一、事件
1 获得键盘按键对应的keyCode
document.onkeydown = function(event){ alert("您按的键对应的keyCode: "event.keyCode); }
2 键盘按键触发事件
按上下左右触发事件
<script type="text/javascript"> document.onkeydown = function(event) { if (event.keyCode == 38) //up alert("up"); if (event.keyCode == 40) //down alert("down"); if (event.keyCode == 37) //left alert("left"); if (event.keyCode == 39) //right alert("right"); } </script>
3 获得光标所在位置的网页X,Y坐标
<script type="text/javascript"> document.onmousedown = function(event) { x = event.clientX; y = event.clientX; alert("X坐标: " + x + ", Y坐标: " + y) } </script>
4 获得光标所在位置的屏幕X,Y的坐标
<script type="text/javascript"> document.onmousedown = function(event) { x = event.screenX; y = event.screenY; alert("X坐标: " + x + ", Y坐标: " + y) } </script>
5 动态绑定事件（addEventListener，注意给对象添加事件的时候对象得先初始化）
<html> <head> <script type="text/javascript"> function test(){ var b1 = document.getElementById("button1"); b1.addEventListener("click",t,false); //动态给button1 绑定t()函数 } function t(){ alert("ok"); } </script> </head> <body> <input id="button1" type="button" value="test1"> <input id="button2" type="button" value="test2" onclick="test()"> </body> </html>
6 动态解除绑定（RemoveEventListener方法只能移除addEventListener添加的事件，注意给对象添加事件的时候对象得先初始化）
<html> <head> <script type="text/javascript"> function test(){ var b1 = document.getElementById("button1"); alert("移除button1的事件"); b1.removeEventListener("click",t,false); } function t(){ alert("button1事件"); } </script> </head> <body> <input id="button1" type="button" value="test1" > <input id="button2" type="button" value="test2" onclick="test()"> </body> <script type="text/javascript"> var b1 = document.getElementById("button1"); b1.addEventListener("click",t,false); </script> </html>
二 JS获取节点
HTML文本
<body>
<div>
<p id="pid" name="pname">pNode</p>
<a id="aid" name="aname">aNode</a>
</div>
<input type="button" value="test" onclick="test()">
</body>
1 byTagName,byName,byId 三种常用获取HTML对象的方式
<script type="text/javascript"> function test() { var byTag = document.getElementsByTagName("p"); var byName = document.getElementsByName("pname"); var byId = document.getElementById("pid"); alert(byTag[0].innerHTML); alert(byName[0].innerHTML); alert(byId.innerHTML); } </script>
2 获取父节点
function test() { var pNode = document.getElementById("pid"); parentNode=pNode.parentNode; alert(parentNode); }
3 获取全部的子节点
function test() {
var divNode = document.getElementsByTagName("div");
childNodes = divNode[0].childNodes;
for (i = 0; i < childNodes.length; i++) {
if (childNodes[i].nodeName != "#text") //去除FF浏览器空节点
alert(childNodes[i].nodeName);
}
}
4 获取第一个子节点
function test() { var divNode = document.getElementsByTagName("div"); childNode=divNode[0].firstChild; alert(childNode); }
5 获取最后一个子节点
function test() { var divNode = document.getElementsByTagName("div"); childNode=divNode[0].lastChild; alert(childNode); }
6 向下获取获取兄弟节点 ---->由于会存在回车、空格节点，所以这里做了一个循环判断，不知道有没有更好的办法（FF浏览器）
function test() { var pNode = document.getElementById("pid"); for (; pNode.nextSibling != null;) { if (pNode.nextSibling.nodeName != "#text") alert(pNode.nextSibling.nodeName); pNode = pNode.nextSibling; } }
7 向上获取兄弟节点
function test() { var aNode = document.getElementById("aid"); for (; aNode.previousSibling != null;) { if (aNode.previousSibling.nodeName != "#text") alert(aNode.previousSibling.nodeName); aNode = aNode.previousSibling; } }
三、 JS对节点进行增删改
HTML
<body>
<div>
<table>
<tr>
<th>th1</th>
<th>th2</th>
</tr>
<tr>
<td><a href="http://www.baidu.com">baidu</a></td>
<td>td2</td>
</tr>
</table>
</div>
<input type="button" value="test" onclick="test()">
</body>
1 修改<a>标签的内容
function test() { var aNode = document.getElementsByTagName("a")[0]; aNode.href="http://www.sina.com"; aNode.innerHTML="sina"; }
2 在body处新增一个P标签
function test() {
var p = document.createElement("p");
p.innerHTML = "ppp";
b = document.getElementsByTagName("body")[0];
b.appendChild(p);
}
3 新增一个单元格
function test() { var td = document.createElement("td"); td.innerHTML="tdtd"; tr1 = document.getElementsByTagName("tr")[1]; tr1.appendChild(td); }
4 删除一个单元格
function test() { var td = document.getElementsByTagName("td")[1]; tr1 = document.getElementsByTagName("tr")[1]; tr1.removeChild(td); }
5 删除一行单元格（其实就是删除了一个父节点）
function test() { var td = document.getElementsByTagName("td")[1]; tr1 = document.getElementsByTagName("tr")[1]; tr1.parentNode.removeChild(tr1); }
四、 小应用
1 触发事件后DIV可编辑
<html> <head> <script type="text/javascript"> function test(obj) { obj.contentEditable=true; } </script> </head> <body> <table border="1"> <tr> <th>第一列</th> <th>第二列</th> <th>第三列</th> </tr> <tr> <td><div onclick="test(this)">点我修改</div></td> <td><div onclick="test(this)">点我修改</div></td> <td><div onclick="test(this)">点我修改</div></td> </tr> </table> </body> </html>
2 触发事件后，在DIV里面写入下拉框
<html> <head> <script type="text/javascript"> var select; var option1; var option2; function test() {//把新增的节点挂在div下面 obj = document.getElementById("d1"); obj.innerHTML=""; createSelectNode(); obj.appendChild(select); d.removeEventListener("click", test, false); } function createSelectNode() {//新建select和option节点 select = document.createElement("select"); option1 = document.createElement("option"); option2 = document.createElement("option"); option1.innerHTML = "option1"; option2.innerHTML = "option2"; select.id="slt"; select.appendChild(option1); select.appendChild(option2); } </script> </head> <body> <table border="1"> <tr> <th>第一列</th> <th>第二列</th> </tr> <tr> <td><div id="d1" >点我修改</div></td> <td> <div> <select> <option>option1</option> <option>option2</option> </select> </div> </td> </tr> </table> </body> <script type="text/javascript"> d = document.getElementById("d1"); d.addEventListener("click",test,false); //初始化绑定test方法 </script> </html>
3 更变原有节点的类型
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; UTF-8" />
<script type=text/javascript>
function test(){
var newNode=document.createElement("input");
newNode.type="text";
var oldNode=document.getElementsByTagName("p")[0];
oldNode.parentNode.replaceChild(newNode,oldNode);
}
</script>
</head>
<body>
<p>我是P[0]节点</p>
<p>我是P[1]节点</p>
<p>我是P[2]节点</p>
<br/>
<input type="button" value="test" onclick="test()">
</body>
</html>
