• JavaScript学习篇(7)


     

    DOMtree

     获取元素 

    样式获得

    document.getElementById(“id 名称”);

    例子:

    <body>
      <p style="我一个p</p>
      <script>
       window.onload = function(){
        var p1 = document.getElementById("p1");
        p1.style.backgroundColor="yellow";
       }
      </script>
     </body>

    查找节点元素: 2大类  

    1:按 html属性查找
        1.1: id
        var node = document.getElementById("id值");
        效率最快
        获取元素里面的值
     document.getElementById(“id 名称”).value;
        1.2: 标签名称查找所有子元素
        var nodes=node.getElementsByTagName("标签名");

    window.onload=function(){
        1 获得id为box的元素
        var d = document.getElementById("box");
        console.log(d);
        2  获得class  为base的元素
        var rows = document.getElementsByClassName("base");
        console.log(rows);
        3 获得ul下的所有的li
        var ro = document.getElementsByTagName("li");
        console.log(ro);
         4 innerHTML    获取或者设置
         var h1 = document.getElementById("h1");
         console.log(h1.innerHTML);
         h1.innerHTML="<span style='color:green'>hello world</span>";
         5删除
          var box = document.getElementById("box");
          box.innerHTML="";
          6 添加元素
          h2.innerHTML = "<select><option>--请选择--</option></select>"

    事件:

    onsubmit 表单提交事件  onclick 点击事件 onfocus聚焦式的输入框 onblur当离开输入框时马上进行验证 onmouseover 鼠标移入事件 onmouseout 鼠标移出事件

    具体事件的应用:

    <script>
       function checkForm(){
        //验证函数是否绑定onsubmit
        //1 alert();
        //2 获取用户输入的数据
        var username = document.getElementById("user").value;
        if(username==""){
         var un= document.getElementById("un");
         un.innerHTML ="<span style ='color:pink;'>用户名不能为空</span>";
        }else{
         var un= document.getElementById("un");
         un.style.display="none";
        }
    //    3 密码不能为空
        var password = document.getElementById("password").value;
        if(password==""){
         var keyword= document.getElementById("keyword");
         keyword.innerHTML ="<span style ='color:pink;'>密码不能为空</span>";
        }else{
         var keyword= document.getElementById("keyword");
         keyword.style.display="none";
        }
        //4 确认密码
        var repassword = document.getElementById("repassword").value;
        if(repassword!=password){
         var rekeyword= document.getElementById("rekeyword");
         rekeyword.innerHTML ="<span style ='color:pink;'>密码不能为空</span>";
        }else{
         var rekeyword= document.getElementById("rekeyword");
         rekeyword.style.display="none";
        }
        //5 邮箱验证、
        var Email = document.getElementById("email").value;
            if(!/^([a-zA-Z0-9])+@([a-zA-Z0-9_-]+(.[a-zA-Z0-9_-])+)/.test(Email)){
             var ema= document.getElementById("ema");
         ema.innerHTML ="<span style ='color:pink;'>邮箱格式不对</span>";
        }else{
         var ema= document.getElementById("ema");
         ema.style.display="none";
            }
        return false;
       }
      </script>

    <div class="regist_main center">
         <div class="username">用&nbsp;&nbsp;户&nbsp;&nbsp;名:&nbsp;&nbsp;<input class="shurukuang" type="text" name="username" placeholder="请输入你的用户名" id="user"/><span id="un">用户名不能为空</span></div>
         <div class="username">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:&nbsp;&nbsp;<input class="shurukuang" type="password" name="password" placeholder="请输入你的密码" id="password"/><span id ="keyword">请输入6位以上字符</span></div>
         
         <div class="username" id="">确认密码:&nbsp;&nbsp;<input class="shurukuang" type="password" name="repassword" placeholder="请确认你的密码"/ id="repassword"><span id="rekeyword">两次密码要输入一致哦</span></div>
         <div class="username">邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱:&nbsp;&nbsp;<input class="shurukuang" type="text"  placeholder="请输入你的邮箱" id="email"/><span id="ema">正确的邮箱地址</span></div>
         <div class="username">手&nbsp;&nbsp;机&nbsp;&nbsp;号:&nbsp;&nbsp;<input class="shurukuang" type="text" name="tel" placeholder="请填写正确的手机号"/><span>填写下手机号吧,方便我们联系您!</span></div>
         <div class="username">
          <div class="left fl">验&nbsp;&nbsp;证&nbsp;&nbsp;码:&nbsp;&nbsp;<input class="yanzhengma" type="text" name="username" placeholder="请输入验证码"/></div>
          <div class="right fl"><img src="./image/yanzhengma.jpg"></div>
          <div class="clear"></div>
         </div>
        </div>
        <div class="regist_submit">
         <input class="submit" type="submit" name="submit" value="立即注册" >
        </div>

     

  • 相关阅读:
    指针理解
    http和https区别
    js 日历控件
    Linux 目录详解!(转)
    互换位置输出
    晨时跌荡起伏的心情
    c++冒泡排序
    游标使用
    防止Sql注入
    ssl加密原理
  • 原文地址:https://www.cnblogs.com/sonerwx/p/10385795.html
Copyright © 2020-2023  润新知