html javascript 简单页面追加jQuery

时间 2019-11-11

标签 html javascript 简单页面追加 jquery 栏目 HTML 繁體版

原文原文链接

对本身这两天学习html javascript的一个简单的小运用。如上图所示，一个简答的小页面，并未实现页面链接功能，只是有页面布局和事件处理。对姓名、密码、邮箱的输入格式要求，括不能为空、格式正确、长度大于6位javascript

主要记录下本身的思路和克服的问题：html

　　思路：页面布局完后，javascript 对页面文本框事件处理。java

　　　　一丶经过window.onload() = function() {}来做为主体，表示页面加载完后运行函数。jquery

　　　　二丶经过document.getElementById得到dom对象。dom

　　　　三丶经过format()函数来判断所得的值的格式符合什么样的条件，并返回相应的String:"above","kong","match"值eclipse

　　　　四丶姓名密码邮箱分别作个事件函数 dom对象.onblur = function () {}函数

　　　　五丶分别将 dom对象.value 经过函数format()来判断获得的值，而后经过switch() {}来进行相应处理布局

　　　　六丶处理是将输入框的文字看做是 span 再经过 dom对象.innerHTML赋值获得相应的改变。学习

　　解决问题和收获：ui

　　　　一丶开始采用的是别的思路。先将若是文本为空做为一类函数。这样写的错误是姓名、密码、邮箱文本框被事件处理，后面若是在写格式正确和长度大于6位的函数又会对文本框onblur事件处理。而一个文本框只能一个相同事件处理，前面的　　　　　　　　　　会被后面的所覆盖。因此就只能侦测到一种格式。改成以姓名、密码、邮箱分别为一个函数处理。

               function isNull(span,div) {
                  div.onblur = function() {
                   if (div.value == "") {
                        span.innerHTML = "<font color =red>为空</font>"
                        //得到js对象可是不能带js对象的属性赋值在利用。innerHTML须要每次代入写
                   }
                     }
                 }

                 isNull(namespan,namediv)
                 isNull(passwordspan,passworddiv)
                 isNull(emailspan,emaildiv)

　　　二丶得到dom对象的属性别先赋下来，属性是随着页面的变更而变更的，每次用dom对象.value来调用。

三丶div.onblur = function() 本身将他理解为一个阻塞式的函数。当执行到这里时程序会等着事件发生，若是发生了则会另开相似线程的将后面的执行而且会再会回到这里来等待。若是没有发生执行后面的可是也会留个线程来等待事件发生。

　　　四丶html虽然是由上而下的执行，可是在javascript中上面的函数也能够调用下面的函数。

目标：用jQuery写出来实现

}
})

</script>

javascript +html代码

<html>
<head>
  <title>注册页面</title>
     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
     <meta http-equiv="description" content="this is my page">
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <script type="text/javascript">
         window.onload = function() {
   var nameDiv = document.getElementById("namediv")
   var nameSpan = document.getElementById("namespan")
   /* var nameVal = nameDiv.value; */
   //不能先获得他的value值由于随时都在改变，因此先获得不能用在后面
   var passwordDiv = document.getElementById("passworddiv")
   var passwordSpan = document.getElementById("passwordspan")
   var emailDiv = document.getElementById("emaildiv")
   var emailSpan = document.getElementById("emailspan")

   nameDiv.onblur = function () {
    var str = format(nameDiv.value)
    //这里是个阻塞式程序只要发生时间就再一次玩下执行，而且再次等待
    switch(str) {
    case "kong" :
     nameSpan.innerHTML = "<font color =red>姓名不为空</font>"
    break;
    case "above" :
     nameSpan.innerHTML = "<font color =red>正确</font>"
    break;
    default :
     nameSpan.innerHTML = "<font color =red>需超过6位</font>"
    }
   }
   //名字的


   emailDiv.onblur = function () {
    var str = format(emailDiv.value)
    //这里是个阻塞式程序只要发生时间就再一次玩下执行，而且再次等待
    switch(str) {
    case "kong" :
     emailSpan.innerHTML = "<font color =red>不能为空</font>"
    break;
    case "match" :
     emailSpan.innerHTML = "<font color =red>正确</font>"
    break;
    default :
     emailSpan.innerHTML = "<font color =red>输入正确邮箱</font>"
    }
   }

   passwordDiv.onblur = function () {
    var str = format(passwordDiv.value)
    //这里是个阻塞式程序只要发生时间就再一次玩下执行，而且再次等待
    switch(str) {
    case "kong" :
     passwordSpan.innerHTML = "<font color =red>不能为空</font>"
    break;
    case "above" :
     passwordSpan.innerHTML = "<font color =red>正确</font>"
    break;
    default :
     passwordSpan.innerHTML = "<font color =red>大于6位密码</font>"
    }
   }


      function format(val) {
      var email =/^(\w)+@(\w)+(\.\w+)+$/
      var len = /^(\w){6,}$/
    if(val == "") {
     return "kong"
    }

    if(email.test(val)) {
     return "match"
    }

    if(len.test(val)) {
     return "above"
    }

   }
}

/*    function isNull(span,div) {
    div.onblur = function() {
     if (div.value == "") {
          span.innerHTML = "<font color =red>为空</font>"
          //得到js对象可是不能带js对象的属性赋值在利用。innerHTML须要每次代入写
     }
       }
   }

   isNull(namespan,namediv)
   isNull(passwordspan,passworddiv)
   isNull(emailspan,emaildiv)
   //下面的阻塞式只能一个进行事件检测。后面的会将前面的覆盖。
   //因此设计程序的思想有错，应该先检测格式，再检测事件，而不是先检测事件
   //再检测格式
   document.getElementById("emaildiv").onblur =function() {
    alert(1)
    var email =/^(\w)+@(\w)+(\.\w+)+$/
    if(email.test(emaildiv.value)) {
      emailspan.innerHTML = "<font color =red>为空</font>"
    }
   }
   */

   //下面相似一个阻塞式程序，程序执行到这个时候，会分为两个线程，一个线程
   //继续执行，一个线程等着重复执行
/*   namediv.onblur = function() {
    if (namediv.value == "") {
        alert(1)
         namespan.innerHTML = "<font color =red>为空</font>"
         //得到js对象可是不能带js对象的属性赋值在利用。innerHTML须要每次代入写
    } */

</script>
</head>

<body>
  <div id= top>
   <table>
    <tr>
          
     <td><image src = images/logo.png width = 100 height = 30 ></image></td>
     <td>
           
           
           
           
      <image src = images/cart.gif></image>
      <a><font>购物车</font> </a>|
      <a><font>帮助中心</font></a>|
      <a><font>个人帐户</font></a>|
      <a><font>新用户注册</font></a>
     </td>
    </tr>
   </table>
  </div>
  <div id = menu>
   <table bgcolor = #1C3F09 width = 100% >
    <tr align = center>
     <td>
      <a href="http://www.baidu.com"><font color = white size = 5>文学</font></a>        <a><font color = white size = 5>生活</font></a>        <a><font color = white size = 5>计算机</font></a>        <a><font color = white size = 5>外语</font></a>        <a><font color = white size = 5>经管</font></a>        <a><font color = white size = 5>所有商品目录</font></a>            </td>    </tr>   </table>  </div >  <div id= content>   <table width = 100% bgcolor = #B6B684>    <tr>     <td align = right>      Search<input/ type = text name= text>      <input/ type=submit name=s value= 搜索>         </td>    </tr>   </table>  </div>  <div>   <table width = 100%>     <div>      <tr>       <table width=40% align = center >        <tr>         <td>          <h1>新会员注册</h1>          </td>        </tr>       </table>      </tr>      <form action = * method = get>       <table align = center>        <tr>          <td>姓名</td>           <td><input type = "text" name = "textname" value = "超过6位中文"                 id = "namediv" />          </td>          <td>           <span id = "namespan"><font color =red>请输入姓名</font></span>          </td>         </tr>         <tr>          <td>密码</td>          <td><input type = "password" name = "passwordname" id = "passworddiv"/></td>          <td>           <span id = "passwordspan"><font color =red>请输入密码</font></span>          </td>         </tr>         <tr>          <td>性别</td>          <td>           <input/ type = "radio" name = "sex" value = girl checked = 0>女           <input/ type = radio name = sex value = boy>男          </td>         </tr>         <tr>          <td>爱好</td>          <td>           <input/ type = "checkbox"   name = aihao value = basketball checked = 1>篮球           <input/type = "checkbox" name = aihao value = zuqiu > 足球           <input/type = "checkbox" name = aihao value = pingpang> 乒乓          </td>         </tr>         <tr>          <td> 国籍</td>          <td>           <select name = guoji size = 1>             <option value = china >中国</option>            <option value = america>美国</option>            <option value = japan>日本</option>           </select>          </td>         </tr>         <tr>          <td>邮箱</td>          <td><input/ type = text   name = mail id = emaildiv></td>          <td>           <span id = "emailspan"><font color =red>请输入邮箱</font></span>          </td>                   </tr>         <tr>          <td>上传头像</td>          <td><input/ type = file name = touxiang ></td>         </tr>         <tr>          <td> 备注</td>          <td><textarea name = text ></textarea></td>         </tr>         <tr align = "center">          <td colspan = 2>           <input/ type = submit name = zhuce value = 注册>           <input/ type = reset name = quxiao value = 取消>          </td>         </tr>         <tr align = center>          <td colspan = 2><input type = image name = xiangpian src = "img.jpg"/></td>         </tr>       </table>      </form>     </div>    </tr>   </table>  </div>  <div>   <table width=100%>    <tr>     <td rowspan=2 align = center>      <image src = "G:/myeclipse Workbench/day 01/WebRoot/html/images/logo.png"></image>     </td>     <td align =left>                                           CONTACT US     </td>    </tr>    <tr>     <td align =left>                                       copyright 2008©BookStore All Rights RESERVED     </td>    </tr>   </table>     </div> </body></html>

html javascript 简单页面 追加jQuery

html javascript 简单页面追加jQuery