html javascript 简单页面 追加jQuery

　　

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

主要记录下自己的思路和克服的问题：

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

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

　　　　二丶通过document.getElementById获得dom对象。

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

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

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

　　　　六丶处理是将 输入框的文字看作是 span 再通过 dom对象.innerHTML赋值得到相应的改变。

　　解决问题和收获：

　　　　一丶开始采用的是别的思路。先将如果文本为空 作为一类函数 。 这样写的错误是姓名、密码、邮箱文本框被事件处理，后面如果在写格式正确和长度大于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 type="text/javascript" src = "jquery-1.8.3.js"></script>
      <script type="text/javascript">
         $(function() {
   var  nameDiv = $("#namediv")
   var nameSpan = $("#namespan") 
   var  passwordDiv =  $("#passworddiv")
   var passwordSpan =$("#passwordspan")
   var emailDiv = $("#emaildiv")
   var emailSpan =$("#emailspan")
   
   nameDiv.blur(function() {
    var str = format(nameDiv.val())
    //这里是个阻塞式程序 只要发生时间就再一次玩下执行，并且再次等待
    switch(str) {
    case "kong" :
     nameSpan.html("<font color =red>姓名不为空</font>")
    break;
    case "above" :
     nameSpan.html("<font color =red>正确</font>")
    break;
    default :
     nameSpan.html( "<font color =red>需超过6位</font>")
    }
   })
   //名字的
   
   
   emailDiv.blur(function () {
    var str = format(emailDiv.val())
    //这里是个阻塞式程序 只要发生时间就再一次玩下执行，并且再次等待
    switch(str) {
    case "kong" :
     emailSpan.html("<font color =red>不能为空</font>")
    break;
    case "match" :
     emailSpan.html("<font color =red>正确</font>")
    break;
    default :
     emailSpan.html("<font color =red>输入正确邮箱</font>")
    }
   })
   
   passwordDiv.blur( function () {
    var str = format(passwordDiv.val())
    //这里是个阻塞式程序 只要发生时间就再一次玩下执行，并且再次等待
    switch(str) {
    case "kong" :
     passwordSpan.html("<font color =red>不能为空</font>")
    break;
    case "above" :
     passwordSpan.html( "<font color =red>正确</font>")
    break;
    default :
     passwordSpan.html ("<font color =red>大于6位密码</font>")
    }
   })
   
    
      function format(val) {
       var email =/^(\w)[email protected](\w)+(\.\w+)+$/
       var len = /^(\w){6,}$/
    if(val == "") {
     return "kong"
    }
       
    if(email.test(val)) {
     return "match"
    }
    
    if(len.test(val)) {
     return "above"
    }

}
 })

</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)[email protected](\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)[email protected](\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>
     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
     <td><image src = images/logo.png width = 100 height = 30 ></image></td>
     <td>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <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>&nbsp;&nbsp;
      <a><font color = white size = 5>生活</font></a>&nbsp;&nbsp;
      <a><font color = white size = 5>计算机</font></a>&nbsp;&nbsp;
      <a><font color = white size = 5>外语</font></a>&nbsp;&nbsp;
      <a><font color = white size = 5>经管</font></a>&nbsp;&nbsp;
      <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= 搜索>&nbsp;&nbsp;&nbsp;&nbsp;
     </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>
       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
       CONTACT US
     </td>
    </tr>
    <tr>
     <td align =left>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      copyright 2008©BookStore All Rights RESERVED
     </td>
    </tr>
   </table>
   
  </div>
 </body>
</html>

　　　　　　　　　　　　　　　　

时间： 2024-11-07 06:35:48

html javascript 简单页面 追加jQuery的相关文章

JavaScript 实现页面元素（ul-li）的简单排序

JavaScript 实现页面元素(ul-li)的简单排序 html页面: <input type="button" value="show" onclick="show()" /> <ul id="ul1"> <li>4</li> <li>3</li> <li>2</li> <li>1</li> </

JavaScript学习总结(四)——jQuery插件开发与发布

JavaScript学习总结(四)--jQuery插件开发与发布 目录 一.插件开发基础 1.1.$.extend 1.1.1.扩展属性或方法给jQuery 1.1.2.扩展对象 1.2.$.fn.extend 1.3.$.fn 二.插件开发 2.1.jQuery插件开发基本模式 2.2.获取上下文 2.3.第一个jQuery插件 2.4.链式编程 2.5.参数与默认值 2.5.1.默认值 2.5.2.参数对象 2.5.2.参数类型 2.6.命名空间与面向对象 2.7.插件与关联的CSS 2.8

JavaScript大杂烩14 - 使用JQuery(上)

JQuery意义 - Why? 为什么要使用JQuery,从我个人来说,就是这么几点:简化代码 + 统一行为 + 功能强大 + 搭配方便. 简化代码是从写代码的角度来说的,实现同样的功能,如果用JavaScript内置对象和函数去完成的话,需要写很多代码,而使用JQuery这种类库却很简洁,下面的例子会体现出来. 统一行为是从浏览器的兼容性的角度来说的,实现一个行为,如果用JavaScript内置对象和函数去完成的话,需要处理很多的兼容性问题,这个在前面我们已经见识过了,使用JQuery这种类库

JavaScript大杂烩15 - 使用JQuery(下)

前面我们总结了使用各种selector拿到了jQuery对象了,下面就是对这个对象执行指定的行为了. 2. 操作对象 - 行为函数action 执行jQuery内置的行为函数的时候,JQuery自动遍历jQuery对象中包装的所有对象,依次在这些对象上执行指定的行为,直白的说,就是JQuery执行的是批量的操作,所以在JQuery中,默认情况下,是不需要强行的遍历包装对象,然后独自的执行指定的行为的.下面是常用的行为函数介绍. 1). 遍历jQuery对象 虽然执行jQuery内置的方法的时候不

JavaScript（19）jQuery HTML 获取和设置内容和属性

jQuery HTML jQuery 拥有可操作 HTML 元素和属性的强大方法. jQuery DOM 操作 jQuery 中非常重要的部分,就是操作 DOM 的能力.jQuery 提供一系列与 DOM 相关的方法,这使访问和操作元素和属性变得很容易. 提示:DOM = Document Object Model(文档对象模型) DOM 定义访问 HTML 和 XML 文档的标准:"W3C 文档对象模型独立于平台和语言的界面,允许程序和脚本动态访问和更新文档的内容.结构以及样式."

JavaScript、Ajax与jQuery的关系

简单总结: 1.JS是一门前端语言. 2.Ajax是一门技术,它提供了异步更新的机制,使用客户端与服务器间交换数据而非整个页面文档,实现页面的局部更新. 3.jQuery是一个框架,它对JS进行了封装,使其更方便使用.jQuery使得JS与Ajax的使用更方便 详细情况: Actually only one of them is a programming language. Javascript is a programming language which is used mainly in

.net简单页面后台绑定下拉框，按钮，分页 前台aspx页面

一.aspx页面 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UpdateMTablesQCols.aspx.cs"    Inherits="BS.EAP.Portal.Business.DataQuery.UpdateMTablesQCols" EnableEventValidation="false" %> <%

html --- ajax --- javascript --- 简单的封装

Ajax的简单封装 Ajax的全称是AsynchronousJavaScriptAndXML 如有疑问请参考:http://zh.wikipedia.org/zh-cn/AJAX 以及传智播客的视频教程:http://java.itcast.cn/news/8308d118/740a/4dcd/8dbf/c73d2fe5bc60.shtml 其实已经有好多框架对它进行了封装,但是还是有好多时候用到自己封装的 透露一下,本人是宇多田光的听众之一哦! 封装后的代码如下: 文件路径:\web\Ajax

javascript 获取页面高度（多种浏览器）（转）

关于获取各种浏览器可见窗口大小的一点点研究 <script> function getInfo() { var s = ""; s += " 网页可见区域宽:"+ document.body.clientWidth; s += " 网页可见区域高:"+ document.body.clientHeight; s += " 网页可见区域宽:"+ document.body.offsetWidth + " (