Day5 JavaScript（三）事件、表单验证以及初识jQuery

事件

1)鼠标事件

mousedown

mouseup

2)键盘事件

a) keydown:键被按下

b) keyup:键抬起

c) keypress:按下可打印字符的键时。

document.onkeydown = function(ev){

    if(ev.keyCode == 13){

        console.log("提交");

    }

}

3)焦点事件

a) 获取焦点:focus

b)失去焦点:blur

4)其他事件

a) change:选择发生改变触发事件(单选,多选,select)

b) select:选择(下拉)

简单实例：省市联动

//1.数据模拟

var arr = new Array();

arr["北京市"]=["海淀区","昌平区","崇文区"];

arr["上海市"]=["闵行区","徐汇区","松江区"];

arr["重庆市"]=["北碚区","随便去"];

//2.设置省份值

var province = document.getElementsByName("province")[0];

for(var i in arr){

    //option   value   内容区

    //创建option

    var option = new Option(i,i);

    //添加到province

    province.appendChild(option);

}

//3.设置城市

var city = document.getElementsByName("city")[0];

//获取选择的省份

province.onchange = function(){

    var cities = arr[this.value];

    //清空

    city.options.length=1;

    for(var i in cities){

        var option = new Option(cities[i],cities[i]);

        city.appendChild(option);

    }

}

表单验证

1)什么是表单验证

前台验证。请求未发出之前进行的校验。

2)为什么使用表单验证

a) 减轻服务器压力

b) 保证数据安全

c) 提升用户体验

3) 如何实现表单验证

1.阻止默认提交 onsubmit return false;

2.验证表单项(失焦事件) onblur

正则表达式

弥补字符串验证的局限性。简洁。

符号表示

符号	描述
/…/	代表一个模式的开始和结束
^	匹配字符串的开始
$	匹配字符串的结束
\s	任何空白字符
\S	任何非空白字符
\d	匹配一个数字字符，等价于[0-9]
\D	除了数字之外的任何字符，等价于[^0-9]
\w	匹配一个数字、下划线或字母字符，等价于[A-Za-z0-9_]
.	除了换行符之外的任意字符
符号	描述
{n}	匹配前一项n次
{n,}	匹配前一项n次，或者多次
{n,m}	匹配前一项至少n次，但是不能超过m次
*	匹配前一项0次或多次，等价于{0,}
+	匹配前一项1次或多次，等价于{1,}
？	匹配前一项0次或1次，也就是说前一项是可选的，等价于{0,1}

校验方式

a) str.match(regex)

返回值为null为不满足规范。

b)regex.test(str)

验证通过为true；否则为false。

简单示例：表单提交

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <script type="text/javascript">

             var userPass = false;

             var pwdPass = false;

             var repwdPass = false;

             var mailPass = false;

             function regUser(ele){

                 var val = ele.value;

                 var nextSpan = ele.nextElementSibling;

                 var reg = /^\w{6,20}$/;

                 console.log(reg.test(val));

                 if(reg.test(val)){

                     nextSpan.innerHTML = "用户名符合要求";

                     nextSpan.style.color="greenyellow";

                     userPass = true;

                 }else{

                     nextSpan.innerHTML = "用户名不符合要求";

                     nextSpan.style.color="red";

                     userPass = false;

                 }

             }

             function regPwd(ele){

                 var val = ele.value;

                 var nextSpan = ele.nextElementSibling;

                 var reg = /^\w{8}$/;

                 if(reg.test(val)){

                     nextSpan.innerHTML = "密码符合要求";

                     nextSpan.style.color="greenyellow";

                     pwdPass = true;

                 }else{

                     nextSpan.innerHTML = "密码不符合要求";

                     nextSpan.style.color="red";

                     pwdPass = false;

                 }

             }

             function regRePwd(ele){

                 var val = ele.value;

                 var pwd = document.getElementById("pwd").value;

                 var nextSpan = ele.nextElementSibling;

                 if(val != pwd){

                     nextSpan.innerHTML = "密码不一致";

                     nextSpan.style.color="red";

                     repwdPass = false;

                 }else{

                     nextSpan.innerHTML = "密码一致";

                     nextSpan.style.color="greenyellow";

                     repwdPass = true;

                 }

             }

             function regMail(ele){

                 var val = ele.value;

                 var reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;

                 var nextSpan = ele.nextElementSibling;

                 if(reg.test(val)){

                     nextSpan.innerHTML = "邮箱格式正确";

                     nextSpan.style.color = "greenyellow";

                     mailPass = true;

                 }else{

                     nextSpan.innerHTML = "邮箱格式不正确";

                     nextSpan.style.color = "red";

                     mailPass = false;

                 }

             }

             function regSub(){

                 return userPass&&pwdPass&&repwdPass&&mailPass;

             }

         </script>

         <style>

             #register{

                 width: 1000px;

                 float: left;

             }

             form{

                 float: left;

                 margin-left: 20px;

             }

             .txt{

                 margin-left: 10px;

             }

             .beforeTxt{

                 float: left;

                 width: 72px;

             }

         </style>

     </head>

     <body>

         <div id="register">

         <form action="#" method="get" onsubmit="return regSub()">

             <p>

                 <div class="beforeTxt">用户名:</div>

                 <input type="text" onblur="regUser(this)" name="user" class="txt" />

                 <span>*用户名长度为6~20位</span>

             </p>

             <p>

                 <div class="beforeTxt">密码:</div>

                 <input type="password" id="pwd" name="pwd" onblur="regPwd(this)" class="txt" />

                 <span>*密码长度最少为8位</span>

             </p>

             <p>

                 <div class="beforeTxt">确认密码:</div>

                 <input type="password" onblur="regRePwd(this)" class="txt" />

                 <span>*密码长度最少为8位</span>

             </p>

             <p>

                 <div class="beforeTxt">邮箱:</div>

                 <input type="text" onblur="regMail(this)" class="txt" />

                 <span>*邮箱格式必须正确</span>

             </p>

             <p><input type="submit" value="注册" " /></p>

         </form>

         </div>

     </body>

 </html>

简单示例：简易计算器

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>计算器</title>

         <script type="text/javascript">

             window.onload = function(){

                 var divs = document.getElementsByClassName("clickBlock");

                 var oInput = document.getElementsByTagName("input")[0];

                 var str="";

                 for(var i in divs){

                     divs[i].onmousedown = function(){

                         this.style.background="red";

                         if(this.innerHTML ==="="){

                             str = eval(str);

                             console.log(str);

                             oInput.value = str;

                         }else{

                             str += this.innerHTML;

                             oInput.value = str;

                         }

                     }

                     divs[i].onmouseup = function(){

                         this.style.background="black";

                     }

                 }    

             }

         </script>

         <style>

             #calculator{

                 width: 400px;

                 height: 400px;

                 background: #ccc;

                 position: relative;

             }

             #input input{

                 width: 330px;

                 height: 30px;

                 margin-left: 30px;

                 margin-top: 10px;

                 margin-bottom: 10px;

                 position: relative;

             }

             #input{

                 background: lawngreen;

             }

             .rows{

                 float: left;

                 background: yellow;

                 width: 100%;

             }

             ul{

                 height: 60px;

                 list-style-type: none;

                 float: left;

             }

             ul li{

             float: left;

             margin: 0px 20px 0px 0px;

             }

             .clickBlock{

                 position: relative;

                 text-align: center;

                 padding:20px;

                 float: left;

                 width: 20px;

                 height: 20px;

                 background: black;

                 color: white;

             }

         </style>

     </head>

     <body>

         <div id="calculator">

             <div id="input">

                 <input type="text" name="txt" id="txt" readonly/>

             </div>

             <div class="rows">

                 <ul>

                     <li><div class="clickBlock">1</div></li>

                     <li><div class="clickBlock">2</div></li>

                     <li><div class="clickBlock">3</div></li>

                     <li><div class="clickBlock">+</div></li>

                 </ul>

             </div>

             <div class="rows">

                 <ul>

                     <li><div class="clickBlock">4</div></li>

                     <li><div class="clickBlock">5</div></li>

                     <li><div class="clickBlock">6</div></li>

                     <li><div class="clickBlock">-</div></li>

                 </ul>

             </div>

             <div class="rows">

                 <ul>

                     <li><div class="clickBlock">7</div></li>

                     <li><div class="clickBlock">8</div></li>

                     <li><div class="clickBlock">9</div></li>

                     <li><div class="clickBlock">*</div></li>

                 </ul>

             </div>

             <div class="rows">

                 <ul>

                     <li><div class="clickBlock">0</div></li>

                     <li><div class="clickBlock">.</div></li>

                     <li><div class="clickBlock">=</div></li>

                     <li><div class="clickBlock">/</div></li>

                 </ul>

             </div>

         </div>

     </body>

 </html>

jQuery

1) 什么是jQuery

JavaScript的函数库。 (原生)

http://jquery.cuishifeng.cn/

jQuery是一个快速，小巧，功能丰富的JavaScript库。它使诸如HTML文档遍历和操纵，事件处理，动画和Ajax等事情变得简单得多，而且易于使用的API可以在多种浏览器中使用。

2) jQuery使用

下载jQuery函数库,在script标签中引用

cdn(内容分发网络)

jQuery官方CDN路径:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js" ></script>

Google的CDN路径:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>

3) 基本语法

$(selector).action()

　　A. $()简写,jQuery

　　B. selector:选择器

　　C. action():操作

4) 选择器

a) 基本选择器

//1.id选择器

//document.getElementById("div1");   //dom对象

console.log($("#div1"));   //jQuery对象:dom对象的封装

//2.类选择器

console.log($(".box"));

//3.标签选择器

console.log($("div"));

//4.通配选择器

console.log($("*"));

b) 层级选择器

//1.后代选择器

console.log($("ul span"));

//2.子代选择器

console.log($("ul > span"));

//3.相邻选择器(后面的一个)

console.log($("#p1 + h2"));

//4.同辈选择器(后面的所有)

console.log($("#p1 ~ h2"));

c) 基本筛选器

//1.第一项

console.log($("li:first"));

//2.最后一项

console.log($("li:last"));

//3. =

console.log($("li:eq(1)"));

//4. >

console.log($("li:gt(1)"));

//5. <

console.log($("li:lt(1)"));

//6. 奇数

console.log($("li:odd"));

//7.偶数

console.log($("li:even"));

d) 可见性

console.log($(":hidden"));

console.log($(":visible"));

e) 属性选择器

//根据属性的名称获取元素

console.log($("[id]"));

//属性等于某值

console.log($("[id='p1']"));