4月30日学习 - 《JavaScript》

dom查询
- 获取元素节点的字节点
- 父节点和兄弟节点
图片切换
全选框

dom查询

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <script type="text/javascript">
    //查找单个
              window.onload = fubction{
        var btn01 = document.getElementById("btn01");
        btn01.onclick = function(){
          var bj = document.getElementById("bj");
          alert(bj.innerHTML);
        };
        //查找所有li节点
        var btn02 = document.getElementById("btn02");
        btn02.onclick = function(){
          var lis = document.getElementsByTagName("li");
          alert(lis.length);//遍历打印lis[i].innerHTML
        };
        //查找name为gender的所有节点
         var btn02 = document.getElementById("btn03");
        btn03.onclick = function(){
          var inputs = document.getElementsByTagName("gender");
          alert(inputs[i].value);//读取属性
          //读取class 要用className
        };
  </script>
    <title>测试</title>
</head>
<body>
</body>
</html>

获取元素节点的字节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <script type="text/javascript">
        //查找#city下的所有li节点
        var btn04 = document.getElementById("btn04");
    btn04.onclick = function(){
      var city = document.getElementById("city");
      var lis = city.getElementsByTagName("li");
      alert(lis[i].innerHTML);
    };
      //返回#city的所有子节点
      var btn05 = document.getElementById("btn05");
    btn04.onclick = function(){
      var city = document.getElementById("city");
      var lis = city.childNodes;//不止是元素
      var lis = city.children;//只有元素
      var first = city.firstChild;
      var first = city.firstElementChild;
    };
  </script>
    <title>测试</title>
</head>
<body>
</body>
</html>

父节点和兄弟节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <script type="text/javascript">
        //定义函数，绑定单机响应函数
    function myClick(idStr,fun){
      var btn = document.getElementById(idStr);
      btn.onclick = fun;
    };
    myClick("btn07",function(){
          var bj = document.getElementByID("bj");
          var pn = bj.parentNode;
          alert(pn.innerHTML);
          alert(pn.innerText);//只获取文本内容
    });
    myClick("btn08",function(){
          var and = document.getElementByID("android");
          var ps = and.previousSibling;//也可能空白文本
          var ps = and.previousElementSibling;
          alert(ps);
    });
    //获取bj中的文本节点
    var bj = document.getElementById("bj");
    var fc = bj.firstChild;
    alert(fc.nodeValue);
  </script>
    <title>测试</title>
</head>
<body>
</body>
</html>

图片切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <script type="text/javascript">
        window.onload = function(){
        //获取2个按钮呢
        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <script type="text/javascript">
    //查找单个
              window.onload = fubction{
        var prev = document.getElementById("prev");
        var next = document.getElementById("next");
        var img = document.getElementsByTagName("img");
        var img-arr = [1,2,3,4,5];
        var index = 0;
        var info = doucment.getElementById("info");
                perv.onclick = function(){
          index--;
          if(index<0){
            index = img-arr.length-1;}
          img.src = img-arr[index];
          info.innerHTML = "一共"+img-arr.length+"张图片，当前第"+(index+1)+"张";
        };
        next.onclick = function(){
          index++;
          if(index>img-arr.length-1){
            index=0;}
          img.src = img-arr[index];
          info.innerHTML = "一共"+img-arr.length+"张图片，当前第"+(index+1)+"张";
        };
  </script>
    <title>测试</title>
</head>
<body>
</body>
</html>
  </script>
    <title>测试</title>
</head>
<body>
  ...
</body>
</html>

全选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <script type="text/javascript">
        window.onload = function(){
    //全选/全不选 多选框
       var checkedAllBox = document.getElementById("checkedAllBox");
        checkedAllBox.onclick = function(){
          for(var i=0;i<items.length;i++){
            items[i].checked = this.checked;  //响应函数是给谁绑定的this就是谁
          }
        };
      };
    //4个都选中，则checkedAllBox也应该选中
    //4个多选框都没选中，则checkedAllBox也不应该选中
    for(var i=0;i<items.length;i++){
      items[i].onclick = function(){
        checkAllBox.checked=true;//设置默认
        for(var j=0;j<items.length;j++){
          if(!items[j].checked){
            checkAllBox.checked=false;
            //一旦进入就可以得到结果
            break;
          }
        }
      };
    }
  </script>
    <title>测试</title>
</head>
<body>
</body>
</html>
  </script>
    <title>测试</title>
</head>
<body>
  ...
</body>
</html>