文章目录

• 前端 -HTML
• • 标签
  • • head 标签
    • body 标签
    • • 文本与实体字符
      • 多媒体
      • 超链接与锚点
      • 列表
      • 表格
  • 内嵌框架
  • 表单
• 前端 -CSS
• • 书写方式
  • 选择器
  • • 基本选择器
    • 关系选择器
    • 伪选择器
  • 浮动 float
  • 定位 position
  • 盒子模型
• 前端 -JS
• • 书写方式
  • 数据类型
  • 事件
  • BOM
  • DOM
• 前端 -jQuery
• • 页面加载
  • 选择器
  • • 基本选择器
    • 属性选择器
    • 位置选择器
    • 表单选择器
  • DOM
  • 动画效果
  • 表单验证

前端 -HTML

网络传输：客户端输入 URL 后根据 HTTP 协议在服务端请求资源，服务端响应给客户端 HTML（描述网页的语言），通过浏览器自带的 HTML 解析器进行解析

标签

head 标签

head>
    
    title>百度一下，你就知道title>
    
    meta charset="utf-8" />
    
    
    
    
    
    meta name="author" content="msb;213412@qq.com" />
    
    meta name="keywords" content="马士兵教育; 线上培训; 架构师课程" />
    
    meta name="description" content="马士兵教育详情页" />
    
    link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon" />
head>

body 标签

文本与实体字符

            
            
            h5>媒体：为人父母，要不要“持证上岗”？h5>
            
            hr width="300px" align="center"/>
            hr width="30%" align="center"/>


p>   5 月  26 日，“建议父母持合格 父母证 > 上岗©”。p>

i>u>b>加粗倾斜下划线b>u>i>

del>你好 你不好del>

pre>
System.out.println("hello msb....");
pre>

5 月 26 日，“建议父母持合格父母证上岗”冲上微博 br /> 热搜，迅速的全国两会上，全国政

font color="#397655" size="7" face="萝莉体 第二版 "> 建议父格证上岗font>

多媒体

img src="img/s.jpg" width="300px" title="这是一个 " alt=" 图片加载失败"/>

embed src="music/ 我要你.mp3">embed>

embed src="video/ 周杰伦 - 说好的幸福呢.mp4" height="500px">embed>

超链接与锚点

 
a href="">这是一个超链接 02a> 
a href="https://www.baidu.com" target="_self">这是一个超链接 04a>
a href="https://www.baidu.com" target="_blank">这是一个超链接 05a>



a name="1F">a>
h1>手机h1>
p>华为 p40p>
a name="2F">a>
h1>化妆品h1>
p>大宝p>
a name="3F">a>
h1>母婴产品h1>
p>奶粉p>
a name="4F">a>
h1>图书h1>
p>thinking in javap>
a href="#1F">手机a>
a href="#2F">化妆品a>
a href="#3F">母婴产品a>
a href="#4F">书籍a>

列表

h1>起床以后需要做的事h1>
ul type="square">
li>睁眼li>
li>穿衣服li>
li>上厕所li>
li>吃早饭li>
li>洗漱li>
li>出门li>
ul>

h1>学习 java 的顺序h1>
ol type="A" start="3">
li>JAVASEli>
li>ORACLEli>
li>MYSQLli>
li>HTMLli>
li>CSSli>
li>JSli>
ol>

表格

                table border="1px" cellspacing="0px" width="400px" height="300px" bgcolor="darkseagreen" >
                        tr bgcolor="bisque">
                                th>学号th>
                                th>姓名th>
                                th>年纪th>
                                th>成绩th>
                        tr>
                        tr>
                                td align="center">1001td>
                                td>丽丽td>
                                td>19td>
                                td rowspan="3">90.5td>
                        tr>
                        tr>
                                td colspan="2" align="center">2006td>
                                td>30td>
                        tr>
                        tr>
                                td>3007td>
                                td>小明td>
                                td>18td>
                        tr>
                table>

内嵌框架

在 myname 的内嵌框架打开 img/java 核心技术.jpg

DOCTYPE html>
html>
        head>
                meta charset="UTF-8">
                title>title>
        head>
        body>
                iframe src="书籍导航页面.html" height="700px" width="30%">iframe>
                
                iframe name="iframe_my" width="67%" height="700px" src="img/think in java.jpg">iframe>
        body>
html>

DOCTYPE html>
html>
        head>
        head>
        body>
               a href="img/java 核心技术.jpg" target="iframe_my">java 核a>
        body>
html>

DOCTYPE html>
html>
        head>
                meta charset="UTF-8">
                title>title>
        head>
        
        frameset rows="20%,*,30%">
                frame />
                frameset cols="30%,40%,*">
                        frame />
                        frame src="index.html"/>
                        frame />
                frameset>
                frameset cols="50%,*">
                        frame />
                        frame />
                frameset>
        frameset>
html>

表单

-name：表单提交时的名称
-action：提交到的地址
-method：提交方式，有 get 和 post 两种，默认为 get

https://www.baidu.com/s?wd=123123&rsv_spt=1&rsv_iqid=0xb7c24b2f08ce4098&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=1&rsv_dl=ib&rsv_sug3=6&rsv_sug1=1&rsv_sug7=100

action="https://www.baidu.com/s"
内容的 name=wd value=123123

DOCTYPE html>
html>
        head>
                meta charset="UTF-8">
                title>title>
        head>
        body>
                
                
                form action="aaa" method="post">
                        用户名：input type="text" name="username" />br />
                        密码：input type="password" name="pwd" />br />
                        input type="submit" />
                form>
        body>
html>

表单元素

DOCTYPE html>
html>
        head>
                meta charset="UTF-8">
                title>title>
        head>
        body>
                form action="" method="get">
                        
                        
                        input type="text" name="uname"  placeholder="请录入身份证信息"/>
                        input type="text" name="uname2" value="123123" readonly="true"/>
                        input type="text" name="uname3" value="456456" disabled="disabled"/>
                        
                        input type="password" name="pwd"  />
                        
                        性别：input type="radio" name="gender" value="1" checked="checked"/>男
                        input type="radio" name="gender" value="0"/>女
                        
                        
                        你喜欢的语言：input type="checkbox" name="favlan" value="1" checked="checked"/>java
                        input type="checkbox" name="favlan" value="2" checked="checked"/>python
                        input type="checkbox" name="favlan" value="3"/>php
                        input type="checkbox" name="favlan" value="4"/>c#
                        
                        
                        input type="file" />
                        
                        input type="hidden" name="uname6" value="123123" />
                        
                        input type="button" value="普通按钮" />
                        
                        input type="reset" />
                        
                        input type="image" src="img/java 核心技术.jpg" />
                        
                        
                        
                        br/>你喜欢的城市：select name="city" multiple="multiple">
                                option value="0">--- 请选择 ---option>
                                option value="1">哈尔滨市option>
                                option value="2" selected="selected">青岛市option>
                                option value="3">郑州市option>
                                option value="4">西安市option>
                                option value="5">天津市option>
                        select>
                        
                        
                        br/>自我介绍：textarea style="resize: none;" rows="10" cols="30">请在这里填写信息。。textarea>
                        br />
                        
                        label for="uname">用户名：label>input type="text" name="uername" id="uname"/>
                        
                     	
                        input type="email" name="email" />
                        input type="url" />
                        input type="color" />
                        input type="number" min="1" max="10" step="3" value="4"/>
                        1input type="range" min="1" max="10" name="range" step="3"/>10
                        input type="date" />
                        input type="month" />
                        input type="week" />
                    
                        
                        input type="submit" />
                form>
        body>
html>

前端 -CSS

选择器 + 样式

书写方式

就近原则

• 内联样式
• 内部样式
• 外部样式

DOCTYPE html>
html>
        head>
                meta charset="UTF-8">
                title>title>
                
                style type="text/css">
                        h1{
                                color: yellow;
                        }
                style>
            	
                link rel="stylesheet" type="text/css" href="css/mystyle.css"/>
                
        head>
        body>
            	
                h1 style="color: red;">这是一个标题h1>
        body>
html>

选择器

基本选择器

id 选择器>class 选择器>元素选择器

DOCTYPE html>
html>
        head>
                style type="text/css">
                    	
                        *{
                                margin: 0px;
                                border: 0px;
                                padding: 0px;
                        }
                		
                        .mycls{
                                color: red;
                        }
                        
                        #myid{
                                color: yellow;
                        }
                        
                        h1{
                                color: greenyellow;
                        }
                    	input[type="text"][value="zhaoss1"]{
                                background-color: yellow;
                        }
                style>
        head>
        body>
                h1 class="mycls" id="myid">我是标题h1>
            
            	用户名：input type="text" value="zhaoss1" />
            	用户名 2：input type="text" value="zhaoss2" />
        body>
html>

关系选择器

div 占行，span 占行内一部分

伪选择器

DOCTYPE html>
html>
        head>
                style type="text/css">
                        
                        a:link{
                                color: yellow;
                        }
                        
                        a:hover{
                                color: red;
                        }
                        
                        a:active{
                                color: blue;
                        }
                        
                        
                        a:visited{
                                color: green;
                        }
                style>
        head>
        body>
                a href="index.html">超链接a>
        body>
html>

浮动 float

使元素脱离文档流

style="float:left/right/none"

消除浮动

• 浮动父节点添加 overflow:hidden
• 浮动父节点添加 height
• 被影响物体添加 clear:both

定位 position

• 静态定位 static

• 相对定位 relative

• 绝对定位 absolute

• 固定定位 fixed

盒子模型

• 控制当前元素相对于外部元素的位置：margin
• 控制内部元素相对于当前元素的位置：padding
• 控制当前元素的实际内容：width;height
• 控制当前元素的填充色：padding+width;height

前端 -JS

• ECMAScript：JS 的基础语法部分
• DOM：使用 document 对象操作文档内容的编程
• BOM：使用 window 对象操作浏览器行为的编程

书写方式

DOCTYPE html>
html>
        head>
                
                script type="text/javascript">script>
            	
            	script type="text/javascript" src="js/myjs.js">script>
        head>
        body>
                input type="button" value="点我呀" onclick="fun1()" />
        body>
html>

数据类型

• 数据定义

  var 变量 = 值
  
  String Number boolean null undefined object
  Math Date
  

• 数据运算

  / mod
  能除尽, 则默认结果就是一个整数, 不能除尽, 结果默认就是浮点数
  除零 => Infinity
  和 0 取余数 => NaN(not a number)
  
  +
  如果一段是字符串, 就变成了文字拼接
  数字和 boolean 类型相加  true 会转变成 1  false 会转变成 0  再做数学运算
  
  ==
  先比较类型, 如果类型一致, 再比较内容, 如果类型不一致, 会强制转换为 number 再比较内容
  
  ===
  数据类型不同 直接返回 false 如果类型相同 才会比较内容
  

• 函数

  /*
  * 第一种语法格式 常见
  * function 函数名(参数列表){js 代码}
  * 第二种语法
  * var 函数名 =function(参数列表){JS 代码}
  * 第三种语法 不常用 了解
  * var 函数名 =new Function('js 代码')
  * */
  function fun1(){alert("你好");
  }
  var fun2=function(){alert("你很好")
  }
  var fun3=new Function('alert(" 你非常好 ");');
  
  /*
  *
  * 1 传入的实参可以和形参个数不一致 
  * 2 如果函数中有返回值, 那么直接用 return 关键字返回即可
  * */
  function fun1(a,b,c){alert("a:"+a);
  alert("b:"+b);
  alert("c:"+c);
  }
  
  //fun1(10,"hello js",false);
  // 少传参数 OK
  //fun1(1,2);
  // 多传参数 OK 多出来的参数相当于没传
  

• 数组

  /* 创建
  空数组 new Array();
  定长数组 new Array(5);
  var arr3=new Array("asdf",10,20.3,true);
  var arr4=["asdf",10,20.3,true];
  */
  
  /* 修改长度(length、索引)
  var arr = [1,2,3]; 
  arr.length=5;
  arr[9]=99;
  */
  
  /* 遍历
  script>
      var arr=[5,7,3,1,6,2,4,9,8];
      for(var i=0;iarr.length;i++){
          console.log(arr[i])
      }
      for (var i in arr){
          console.log(arr[i])
      }
  script>
  */
  
  /* 
  script>
      var arr=[1,2,3,4,5,6,7,8,9];
      var index =arr.indexOf(7);
  
      
      var children = hege.concat(stale);
      
      var family = parents.concat(brothers, children);
      
      var fruits = ["Banana", "Orange", "Apple", "Mango"];
      var fs =fruits.join();
      
      var fruit=fruits.pop();
      
      fruits.push("Grape");
      
      fruits.reverse();
      
      var ss =fruits.shift();
      
      fruits.unshift("火龙果");
      
      var citrus = fruits.slice(1,3);
      
      
      var numbers=[5,7,9,6,1,8,3,4,2];
      numbers.sort(function(a,b){return b-a});
  script>
  */
  

• object

  script>
      
      var obj =new Object();
      obj.name="张思锐";
      obj.eat=function(food){
     		console.log(this.name+"正在吃"+food)	
      }
  
      
      function Person(pname,page){
          this.pname=pname;
          this.eat=function(food){
          console.log(this.pname+"正在吃"+food);
          }	
      }
  	var p1=new Person("张思锐",10);
  
      
      var person ={
          name:"晓明",
          eat:function(food){
              console.log(this.name+"正在吃"+food)
          }
      };
  script>
  

  • 原型的_proto_属性执行 Object(Object 对象是所有的原型)

  script>
  	
      function Person(pname,page){
          this.pname=pname;
          this.page=page;
          this.eat=function(food){
              console.log(this.page+"岁的"+this.pname+"正在吃"+food);
          }	
      }
  
      
      Person.prototype.gender="男";
      
      Person.prototype.sleep=function(){
          console.log(this.page+"岁的"+this.gender+"孩儿"+this.pname+"正在睡觉");
      }
      
      
      Object.prototype.gender="男";
      
      Object.prototype.sleep=function(){
          console.log(this.page+"岁的"+this.gender+"孩儿"+this.pname+"正在睡觉");
      }
  script>
  

事件

• 鼠标事件

  onclike ondblclick 双击 oncontextmenu 右键
  onmouse + down/enter/leave/over/mvove/out/up
  

• 键盘事件

  onkey + down/up/press
  

• 表单事件

  onblur 失去焦点 onfocus 获得焦点 onchange oninput onreset onsearch onselect onsubmit
  

• 页面加载

BOM

• location

  function fun1(){console.log(location.host);// 服务器的 IP+ 端口号
  console.log(location.hostname);// IP 
  console.log(location.port);// 端口号
  console.log(location.href);// 地址栏中具体的文字
  
  location.href="https://www.baidu.com"
  }
  

• history

  function fun1(){window.history.forward();
  }
  function fun2(){history.back();
  }
  function fun3(){history.go(2); // 正整数 向前跳转 * 页  负整数 向后跳转 * 页
  }
  

• screen

  console.info(window.screen.width)
  console.info(window.screen.height)
  console.info(navigator.userAgent)
  console.info(navigator.appName)
  

• 弹窗

  window.alert("你好呀");// 普通信息提示框                                
  var con =window.confirm("确定要删除 ***?"); // 确认框
  var message =window.prompt("请输入 3 号名字","例如: 小刚"); // 信息输入框
  

• 定时器

  script>
  
      var intervalIDS =new Array(); 
      
      function startInterval(){
          
          var intervalID = window.setInterval(
              function(){
                  var today =new Date();
                  var hours=today.getHours();
                  var minutes=today.getMinutes();
                  var seconds =today.getSeconds();
                  var str = hours+"点"+minutes+"分"+seconds+"秒";
  
                  var ta =document.getElementById("timeArea");
                  ta.value =str;
  
              },
              1000
          );
          intervalIDS.push(intervalID);
      }
      function stopInterval(){
          while(intervalIDS.length >0){
              window.clearInterval(intervalIDS.shift());
          }
  
  
      }
  
      var timeoutIDS =new Array();
      
      function startTimeout(){
  
          var timeoutID =window.setTimeout(
              function(){
                  var today =new Date();
                  var hours=today.getHours();
                  var minutes=today.getMinutes();
                  var seconds =today.getSeconds();
                  var str = hours+"点"+minutes+"分"+seconds+"秒";
                  console.log(str)
  
              },
              5000
          );
  
          timeoutIDS.push(timeoutID);
      }
  
      function stopTimeout(){
          while(timeoutIDS.length >0){
              window.clearTimeout(timeoutIDS.shift());
          }
      }
  
  script>
  
  

DOM

• 获取节点

  var element1 =document.getElementById("d1");
  var elements =document.getElementsByClassName(className);
  var elements =document.getElementsByTagName("input");
  var elements=document.getElementsByName("hobby");
  
  for(var i =0;i

• 操作节点属性和样式

  var node =document.getElementById("in1");
  // 改变属性值
  node.type="button";
  node.value="你好我也好";
  
  //getAttribute   setAttribute
  console.log(node.getAttribute("type"));
  node.setAttribute("value","大家好");
  
  element.style.width="200px";
  element.style.height="200px";
  element.style.border="10px solid green";
  

• 操作标签文本

  var element1=document.getElementById("d1");
  /*
  * innerText  不包含 HTML 结构
  * innerHTML  包含 HTML 结构
  * */
  console.log("innerText>>>"+element1.innerText);
  element1.innerText="一刻也不能分割"
  element1.innerHTML="
  一刻也不能分割
  "
  element1.value="无论我走到哪里";
  

• 修改节点

  • 创建元素 createElement()
  • 增加元素 appendChild()
  • 删除元素 removeChild()

  DOCTYPE html>
  html>
          head>
                  meta charset="utf-8">
                  title>title>
                  style>
                          #d1{
                                  border: 1px solid red;
                                  width: 80%;
                                  height: 200px;
                          }
                  style>
                  script>
                          function fun1(){
                                  var div1=document.getElementById("d1");
                                  
                                  var in1=document.createElement("input");
                                  in1.setAttribute("type","text");
                                  in1.setAttribute("value","请输入内容");
                                  
                                  var in2=document.createElement("input");
                                  in2.setAttribute("type","password");
                                  in2.setAttribute("value","123456789");
                                  
                                  var in3=document.createElement("input");
                                  in3.setAttribute("type","button");
                                  in3.setAttribute("value","删除");
                                  
                                  var br=document.createElement("br");
                                  
                                  in3.onclick=function (){
                                          div1.removeChild(in1)
                                          div1.removeChild(in2)
                                          div1.removeChild(in3)
                                          div1.removeChild(br)
                                  }
                                  div1.appendChild(in1);
                                  div1.appendChild(in2);
                                  div1.appendChild(in3);
                                  div1.appendChild(br);
                          }
                  script>
          head>
          body>
                  div id="d1">
                          
                  div>
                  input type="button" value="增加" onclick="fun1()" />
          body>
  html>
  

前端 -jQuery

页面加载

jQuery(document).ready(function(){});
$(document).ready(function({}));
$(function(){})

选择器

基本选择器

$(function(){// 标签选择器 $("a")   
    //$("h3").addClass("myClass"); 
    //$("p").addClass("myClass"); 
    
    //ID 选择器 $("#id")    
    //$("#h31").addClass("myClass"); 
    //$("h3#h31").addClass("myClass"); 
    
    // 类选择器 $(".class") 
    //$(".red1").addClass("myClass"); 
    
    // 通配选择器 $("*") 
    //$("*").addClass("myClass"); 
    
    // 并集选择器 $("elem1,elem2,elem3") 
    //$("#h31,span,div").addClass("myClass"); 
    
    // 后代选择器 $(ul li)   
    //$("p span").addClass("myClass");   
    
    // 父子选择器 $(ul>li)   
    //$("p>span").addClass("myClass"); 
    
    // 后面第一个兄弟元素 prev + next 
    //$("h3+p").addClass("myClass"); 
    
    // 后面所有的兄弟元素 prev ~ next 
    $("h3~p").addClass("myClass"); 
})

属性选择器

$(function() {//[attribute] 
    //$("a").addClass("myClass"); 
    //$("a[href]").addClass("myClass"); 
    //[attribute1][attribute2] a 标签里有 href 和 title 属性的
    //$("a[href][title]").addClass("myClass"); 
    //[attribute=value]   
    //$("a[href='film-2.html']").addClass("myClass"); 
    //[attribute!=value]   
    //$("a[href][href!='film-2.html']").addClass("myClass"); 
    //[attribute^=value]   
    //$("a[href^='http']").addClass("myClass"); 
    //[attribute$=value   
    //$("a[href$='htm']").addClass("myClass"); 
    //[attribute*=value] a 标签里 href 包含 mashibing
    $("a[href*='mashibing']").addClass("myClass");
});

位置选择器

 $(function(){ 
     // 位置针对整个页面 
     //:first     :last   :odd   :even   
     //$("p:first").addClass("myClass"); 
     //$("p:last").addClass("myClass"); 
     //$("p:odd").addClass("myClass");// 索引从 0 开始 奇数的索引 1 3 5 第偶数的元素
     //$("p:even").addClass("myClass"); //
     //:eq(n)     :gt(n)   :lt(n) 
     //$("p:eq(4)").addClass("myClass");   //equals 
     //$("p:lt(4)").addClass("myClass");//less   than  
     //$("p:gt(4)").addClass("myClass");//greater   than 
     // 位置针对上级标签(父节点的第 n 个标签)
     //:first-child    :last-child   :only-child 
     //$("p:first-child").addClass("myClass"); 
     //$("p:last-child").addClass("myClass"); 
     //$("p:only-child").addClass("myClass"); 
     //:nth-child(n)   :nth-child(odd|even) :nth-child(xn+y)
     // 索引从 0 开始 只有此处从 1 开始
     //$("p:nth-child(2)").addClass("myClass");
     //$("p:nth-child(odd)").addClass("myClass"); 
     //$("p:nth-child(even)").addClass("myClass"); 
     //$("p:nth-child(3n+1)").addClass("myClass");//n=0,1,2,3 
 });

表单选择器

$(function() {
    //:text   :password    :radio  :checkbox  :hidden    :file  :submit 

	//:input  匹配所有 input, textarea, select 和 button 元素 
    //var arr = $(":input"); 
    //:selected    :checked  :enabled  :disabled   
    //var arr = $(":disabled"); 
    //var arr = $(":enabled"); 
    //var arr = $(":input:not(:disabled)"); 
    //var arr = $(":checked"); 
    //var arr = $(":selected"); 
    
    /* var   arr = $(":input:visible")
    for(var i = 0; i 

DOM

使用原生 JSDOM 对象转换成 jQuery 对象方式是 $(dom 对象)

jQuery 对象转换成 DOM 对象的方式是 jQuery 对象[0]/.get(0)

• 操作属性和样式

  $("#f1").attr("color")
  $("#f1").attr("color","green")
  $("#f1").removeAttr("color")
  
  $("#d1").css("width")
  $("#d1").css("width","200px")
  
  $("#d2").addClass("b")
  $("#d2").removeClass("b")
  $("#d2").toggleClass("b")// 原来有 b 则删除, 如果没有, 则增加 b
  

• 文本与增添元素

  $("#d1").text("
  牛气冲天
  ");
  $("#d1").html("
  牛气冲天
  ");
  $("#i1").val("你好");
  $("#d1").empty();
  $("#d1").remove(); // 移除当前元素本身
  
  // 创建元素
  var span1=$("");
  // 设置文字
  span1.text("今天天气很好");
  $('#d1').append(span1)
  
  var h =$("
  测试文字
  ").css("color","red").css("border","1px solid green")
  h.appendTo($('#d1'))
  $("#d1").before(span1);
  span1.insertBefore($("#d1"));
  $("#d1").after(span1);
  span1.insertAfter($("#d1"));
  

• 绑定和触发事件

• 遍历

  var $lis =$('li')
  for(var i = 0;i>>'+$(e).text())
  })
  $.each($lis,function (i,e){console.info(i+'>>>'+$(e).text())
  })
  

动画效果

• 出现和隐藏

  $("#d1").show(2000,'swing',function(){alert("动画执行结束")
  })
  $("#d1").hide(3000)
  $("#d1").toggle(5000) //show 时 hide，hide 时 show
  

• 上下滑动

  $("#d1").slideDown(2000);
  $("#d1").slideUp(3000)
  $("#d1").slideToggle(5000);
  

• 淡入淡出

  $("#d1").fadeIn(2000);
  $("#d1").fadeOut(3000)
  $("#d1").fadeToggle(5000);
  $("#d1").fadeTo(5000,0.2);// 0-1 
  

• 自定义

  $(function(){//$("").animate({动画内容}, 执行时间, 动画结束后要执行的方法)
  	$("#d1").animate({
          width:"100px",
          height:"100px",
          opcity:0.5,
          borderRadius:"50px"
      },2000,function(){alert("动画执行结束了")
      })
  })
  

表单验证

• 对于表单的提交，要给 form 标签绑定 onSubmit 事件，而不是给 submit 按钮绑定 onClick 事件,onsubmit 绑定的方法时要有 return 关键字, 绑定的方法要返回 true/false

• 表单项内容不管输入的是字符串、数字、日期，js、jQuery、JSP 接收后都是 String 类型

• 表单的验证和 String 对象有密切关系 length charAt(i) indexOf(“@”)

• 如果表单项内容为空，js 收到的不是 null，而是空字符串。判断条件不能写 username == null，而要写 username=="" 或 username.length ==0

• 验证出错要 return false，验证无错要 return true，并且 οnsubmit="return checkForm()

DOCTYPE html>
html>
        head>
                meta charset="UTF-8">
                title>title>
                script type="text/javascript" src="js/jquery.min.js">script>
                script>
                        function checkUsername(){
                                var reg1=/^D{6,}$/
                                var username =$("#user").val();
                                if(!reg1.test(username)){
                                        $("#usertip").html("格式必须是至少六位的非数字");
                                        return false;
                                }
                                
                                $("#usertip").html("OK")
                                return true;
                                
                        }
                        
                        function checkPassword(){
                                var reg2=/^S{5,}$/
                                var pwd =$("#pwd").val();
                                if(!reg2.test(pwd)){
                                        $("#pwdtip").html("至少为 5 位非空格");
                                        return false;
                                }
                                $("#pwdtip").html("OK");
                                return true;
                        }
                        
                        function checkRepwd(){
                                var p1=$("#pwd").val();
                                var p2=$("#repwd").val();
                                
                                if(p1.length 5 || p1 != p2){
                                   $("#repwdtip").html("两次密码不一致");
                                   return false;
                                }
                                
                           $("#repwdtip").html("OK");
                           return true;
                        }
                        
                        function checkEmail(){
                                var em=$("#email").val();
                                var regex3 = /^w{6,}@[0-9A-Za-z]{2,}(.[a-zA-Z]{2,3}){1,2}$/; 
                                if(!regex3.test(em) ){
                                        $("#emailtip").html("邮箱格式有误");
                                    return false;
                                }
                                $("#emailtip").html("OK");
                                return true;
                        }
                        
                        function checkForm(){
                                return checkUsername()&&checkPassword()&&checkRepwd()&&checkEmail();
                        }
                script>
        head>
        body>
                table id="center" border="0" cellspacing="0" cellpadding="0">
                        form action="http://www.baidu.com" method="get" onsubmit="return checkForm()">
                                tr>
                                        td>您的姓名：td>
                                        td>
                                                input id="user" type="text" name="username" onblur="checkUsername()"/>
                                                div id="usertip" style="display: inline;">div>
                                        td>
                                tr>
                                tr>
                                        td>输入密码：td>
                                        td>
                                                input id="pwd" name="pwd" type="password" onblur="checkPassword()"/>
                                                div id="pwdtip" style="display: inline;">div>
                                        td>
                                tr>
                                tr>
                                        td>再输入一遍密码：td>
                                        td>
                                                input id="repwd" type="password" onblur="checkRepwd()"/>
                                                div id="repwdtip" style="display: inline;">div>
                                        td>
                                tr>
                                tr>
                                        td>您的 Email：td>
                                        td>
                                                input id="email" type="text" onblur="checkEmail()"/>
                                                span id="emailtip">span>
                                        td>
                                tr>
                                tr>
                                        
                                        td colspan="2">
                                                input type="submit" value="注册" class="rb1" />
                                        td>
                                tr>
                        form>
                table>
        body>
html>