Day03-JavaScript03

最新推荐文章于 2022-12-29 23:55:58 发布

jjizh

最新推荐文章于 2022-12-29 23:55:58 发布

阅读量222

点赞数

分类专栏： java学习随记文章标签： javascript

本文链接：https://blog.csdn.net/jjizh/article/details/73088187

版权

java学习随记专栏收录该内容

47 篇文章 0 订阅

订阅专栏

Day05-JavaScript03

js的剩余问题和注意要点
1）节点问题：

DOM树的节点关系：

 对于一个节点，它的属性是和这个节点是平行关系，它的文本才能够算作是这个节点的子节点。

2）this关键字

this关键字代表的是触发该时间的标签和元素，哪个标签触发了这个事件，this就代表哪个标签。

for(var i=0;i<right_select.length;i++){
     right_select[i].ondblclick = function(){
           left_select.appendChild(this);
           setLeftEvent();
     }
}

上述例子的this是表示right_selecti[i];

3）尖括号的写法：
右尖括号 >
左尖括号 <

4）关于remove需要注意的要点

for(var i=0;i<oldOption.length;){

      addCity.removeChild(oldOption[i]);
}

下述是错误的理解：
~~这个地方的for循环中没有加上i++，因为在做了remove操作之后，指针会自动往下移动的。加上了i++就会出现删除原来节点不完全的情况。~~
正解：
因为移除了之后，oldOption.length 会改变，导致不能完全移除其中的元素。下一个元素上移，同时i++，那么就会导致跳过了被删除元素的下一个元素，导致删除不完全。

5）排除bug方法要点：
这里写图片描述

案例：
左右选择案例：

<!DOCTYPE html>
<html>
      <head>
            <meta charset="UTF-8">
            <title>左右选择案例</title>
            <script>
                  window.onload = function(){
                        left_select = document.getElementById("selectLeft");
                        right_select = document.getElementById("selectRight");
                        var add_a = document.getElementById("add");
                        var addAll_a = document.getElementById("addAll");
                        var remove_a = document.getElementById("remove");
                        var removeAll_a = document.getElementById("removeAll");

                        //双击把左边的option移动到右边去
                        for(var i=0;i<left_select.length;i++){
                              left_select[i].ondblclick = function(){
                                    right_select.appendChild(this);
                                    setRightEvent();
                              }
                        }
                        //双击把右边的option移动到左边去
                        for(var i=0;i<right_select.length;i++){
                              right_select[i].ondblclick = function(){
                                    left_select.appendChild(this);
                                    setLeftEvent();
                              }
                        }
                        //点击添加按钮，把左边选中的项添加到右边去
                        add_a.onclick = function(){
                              for(var i=0;i<left_select.length;i++){
                                    if(left_select[i].selected){
                                          right_select.appendChild(left_select[i]);
                                          setRightEvent();
                                          i--;
                                    }
                              }
                        }
                        //点击删除按钮，把右边选中的选项移动到左边
                        remove_a.onclick = function(){
                              for(var i=0;i<right_select.length;i++){
                                    if(right_select[i].selected){
                                          left_select.appendChild(right_select[i]);
                                          setLeftEvent();
                                          i--;
                                    }
                              }
                        }

                        //点击全部添加按钮，把左边的所有选项全部添加到右边去
                        addAll_a.onclick = function(){
                              for(var i=0;i<left_select.length;i++){
                                    right_select.appendChild(left_select[i]);
                                    setRightEvent();
                                    i--;
                              }
                        }
                        //点击全部删除按钮，把右边的所有选项全部添加到左边去。
                        removeAll_a.onclick = function(){
                              for(var i=0;i<right_select.length;i++){
                                    left_select.appendChild(right_select[i]);
                                    setLeftEvent();
                                    i--;
                              }
                        }
                  }
                  //当其中的选项改变的时候，重新设置每一个option的点击函数
                  function setLeftEvent(){
                        for(var i=0;i<left_select.length;i++){
                              left_select[i].ondblclick = function(){
                                    right_select.appendChild(this);
                              }
                        }
                  }
                  //当其中的选项改变的时候，重新设置每一个option的点击函数
                  function setRightEvent(){
                        for(var i=0;i<right_select.length;i++){
                              right_select[i].ondblclick = function(){
                                    left_select.appendChild(this);
                              }
                        }
                  }

            </script>
      </head>

      <body>
            <table border="1" width="400" align="center">
                  <tr>
                        <td>
                              分类名称
                        </td>
                        <td>
                              <input type="text" name="cname" value="手机数码"/>
                        </td>
                  </tr>
                  <tr>
                        <td>
                              分类描述
                        </td>
                        <td>
                              <textarea name="cdesc" rows="4" cols="20">手机数码类商品</textarea>
                        </td>
                  </tr>
                  <tr>
                        <td>
                              分类商品
                        </td>
                        <td>
                              <span style="float: left;">
                                    已有商品<br/>
                                    <select id="selectLeft" multiple>
                                          <option>IPhone6s</option>
                                          <option>小米4</option>
                                          <option>锤子T2</option>
                                    </select>
                                    <p><a href="#" id="add">&gt;&gt;</a></p>
                                    <p><a href="#" id="addAll">&gt;&gt;&gt;</a></p>
                              </span>
                              <span style="float: right;">
                                    未有商品<br/>
                                    <select id="selectRight" multiple="multiple">
                                          <option>三星Note3</option>
                                          <option>华为6s</option>
                                    </select>
                                    <p><a href="#" id="remove">&lt;&lt;</a></p>
                                    <p><a href="#" id="removeAll">&lt;&lt;&lt;</a></p>
                              </span>
                        </td>
                  </tr>
                  <tr>
                        <td colspan="2">
                              <input type='submit' value="修改"/>
                        </td>
                  </tr>
            </table>
      </body>
</html>