zoukankan      html  css  js  c++  java
  • JavaScript:DOM访问

    getElementById:通过id属性,获得元素节点对象

      案例:当帐号为空时,阻止表单提交

    <body>
        <form action="xxx" onsubmit="return login()">
            <p>帐号:<input id="username"/></p>
            <p>电话:<input id="phone"/></p>
            <p><button>登录</button></p>
        </form>
    
        <script>
            function login() {
                var name = document.getElementById("username").value ;
                if(name == ""){
                    alert("帐号不能为空!");
                    return false; // 阻止表单的提交
                }
                return true; // 放行,让表单提交
            }
        </script>
    </body>

    getElementsByName:通过name属性获得元素节点对象集

      案例:购物车全选效果

    <body>
        <h2>我的购物车</h2>
        <table border="1" cellspacing="0">
        <tr>
            <td><input type="checkbox" onchange="quan(this)" /> 全选</td>
           <td>名称</td>
           <td>单价</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="one" />1</td>
            <td>功能性饮料-尖叫</td>
           <td>4.0</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="one" />2</td>
            <td>火腿肠</td>
            <td>2.0</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="one" />3</td>
            <td>包子</td>
            <td>1.5</td>
        </tr>
    </table>
    
      <p>
          <button>提交订单</button>
      </p>
    
      <script>
          function quan(all) {
              var arr = document.getElementsByName("one");
              for (var i = 0; i < arr.length; i++) {
                  arr[i].checked = all.checked; // 将全选框的状态,赋值给每一个复选框
              }
          }
        </script>
    </body>

    getElementsByTagName:通过标签名称获得元素节点对象集

      案例:表格隔行变色

      

    <body>
        <table border="1" cellspacing="0">
            <tr>
                <td><input type="checkbox" onchange="quan(this)" /> 全选</td>
                <td>名称</td>
               <td>单价</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="one" />1</td>
                <td>功能性饮料-尖叫</td>
                <td>4.0</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="one" />2</td>
                <td>火腿肠</td>
                <td>2.0</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="one" />3</td>
                <td>包子</td>
                <td>1.5</td>
            </tr>
        </table>
    
    
        <script>
            var rows = document.getElementsByTagName("tr"); //通过标签名获得元素对象
    集合
            for (var i = 0; i < rows.length; i++) {
            if(i % 2 == 1){ // 奇数
               rows[i].style.backgroundColor = "pink";
            }
        </script>
    </body>
    
        
  • 相关阅读:
    HDOJ 5294 Tricks Device 最短路(记录路径)+最小割
    国家人工智能(AI)的美好前景
    预防埃博拉病毒感染的试验疫苗投入人体试验
    MySQL同步复制搭建方法指南详细步骤
    正则表达式,用相反的方式过滤掉特殊字符
    Linux入门教程
    Linux:-bash: ***: command not found
    linux命令大全
    linux下打开、关闭tomcat,实时查看tomcat运行日志
    chmod u+x ./j2sdk-1_4_2_04-linux-i586.bin的含义
  • 原文地址:https://www.cnblogs.com/JasperZhao/p/15134520.html
Copyright © 2011-2022 走看看