zoukankan html css js c++ java

常用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>

查看全文

相关阅读:
【随手记】常用16进制代表的容量或位置
 精通css——position属性
 Ubuntu安装GitLab
Linux内核
 分布式（一）——分布式系统的特性
 【树莓派】入门
 Intel CPU发展历史
 C++读mnist数据
 实验代码一：用来链表实现单向图
 Hadoop配置+centos6.5

原文地址：https://www.cnblogs.com/sunfan1988/p/3505937.html