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。

简单示例：表单提交

Day5 JavaScript（三）事件、表单验证以及初识jQuery详解编程语言

  1 <!DOCTYPE html> 
  2 <html> 
  3     <head> 
  4         <meta charset="UTF-8"> 
  5         <title></title> 
  6         <script type="text/javascript"> 
  7             var userPass = false; 
  8             var pwdPass = false; 
  9             var repwdPass = false; 
 10             var mailPass = false; 
 11              
 12             function regUser(ele){ 
 13                 var val = ele.value; 
 14                 var nextSpan = ele.nextElementSibling; 
 15                 var reg = /^/w{6,20}$/; 
 16                 console.log(reg.test(val)); 
 17                 if(reg.test(val)){ 
 18                     nextSpan.innerHTML = "用户名符合要求"; 
 19                     nextSpan.style.color="greenyellow"; 
 20                     userPass = true;             
 21                 }else{ 
 22                     nextSpan.innerHTML = "用户名不符合要求"; 
 23                     nextSpan.style.color="red"; 
 24                     userPass = false; 
 25                 } 
 26             } 
 27              
 28             function regPwd(ele){ 
 29                 var val = ele.value; 
 30                 var nextSpan = ele.nextElementSibling; 
 31                 var reg = /^/w{8}$/; 
 32                 if(reg.test(val)){ 
 33                     nextSpan.innerHTML = "密码符合要求"; 
 34                     nextSpan.style.color="greenyellow"; 
 35                     pwdPass = true; 
 36                 }else{ 
 37                     nextSpan.innerHTML = "密码不符合要求"; 
 38                     nextSpan.style.color="red"; 
 39                     pwdPass = false; 
 40                 } 
 41             } 
 42              
 43             function regRePwd(ele){ 
 44                 var val = ele.value; 
 45                 var pwd = document.getElementById("pwd").value; 
 46                 var nextSpan = ele.nextElementSibling; 
 47                 if(val != pwd){ 
 48                     nextSpan.innerHTML = "密码不一致"; 
 49                     nextSpan.style.color="red"; 
 50                     repwdPass = false; 
 51                 }else{ 
 52                     nextSpan.innerHTML = "密码一致"; 
 53                     nextSpan.style.color="greenyellow"; 
 54                     repwdPass = true; 
 55                 } 
 56             } 
 57              
 58             function regMail(ele){ 
 59                 var val = ele.value; 
 60                 var reg = /^[A-Za-z0-9/u4e00-/u9fa5]+@[a-zA-Z0-9_-]+(/.[a-zA-Z0-9_-]+)+$/; 
 61                 var nextSpan = ele.nextElementSibling; 
 62                 if(reg.test(val)){ 
 63                     nextSpan.innerHTML = "邮箱格式正确"; 
 64                     nextSpan.style.color = "greenyellow"; 
 65                     mailPass = true; 
 66                 }else{ 
 67                     nextSpan.innerHTML = "邮箱格式不正确"; 
 68                     nextSpan.style.color = "red"; 
 69                     mailPass = false; 
 70                 } 
 71             } 
 72              
 73             function regSub(){ 
 74                 return userPass&&pwdPass&&repwdPass&&mailPass; 
 75             } 
 76              
 77         </script> 
 78         <style> 
 79             #register{ 
 80                 width: 1000px; 
 81                 float: left; 
 82             } 
 83             form{ 
 84                 float: left; 
 85                 margin-left: 20px; 
 86             } 
 87             .txt{ 
 88                 margin-left: 10px; 
 89              
 90             } 
 91             .beforeTxt{ 
 92                 float: left; 
 93                 width: 72px; 
 94             } 
 95         </style> 
 96     </head> 
 97     <body> 
 98         <div id="register"> 
 99         <form action="#" method="get" onsubmit="return regSub()"> 
100             <p> 
101                 <div class="beforeTxt">用户名:</div> 
102                 <input type="text" onblur="regUser(this)" name="user" class="txt" /> 
103                 <span>*用户名长度为6~20位 
104             </p> 
105             <p> 
106                 <div class="beforeTxt">密码:</div> 
107                 <input type="password" id="pwd" name="pwd" onblur="regPwd(this)" class="txt" /> 
108                 <span>*密码长度最少为8位     
109             </p> 
110             <p> 
111                 <div class="beforeTxt">确认密码:</div> 
112                 <input type="password" onblur="regRePwd(this)" class="txt" /> 
113                 <span>*密码长度最少为8位     
114             </p> 
115             <p> 
116                 <div class="beforeTxt">邮箱:</div> 
117                 <input type="text" onblur="regMail(this)" class="txt" /> 
118                 <span>*邮箱格式必须正确     
119             </p> 
120             <p><input type="submit" value="注册" " /></p> 
121         </form> 
122         </div> 
123     </body> 
124 </html>

简单示例：简易计算器

  1 <!DOCTYPE html> 
  2 <html> 
  3     <head> 
  4         <meta charset="UTF-8"> 
  5         <title>计算器</title> 
  6          
  7         <script type="text/javascript"> 
  8             window.onload = function(){ 
  9                 var divs = document.getElementsByClassName("clickBlock"); 
 10                 var oInput = document.getElementsByTagName("input")[0]; 
 11                 var str=""; 
 12                 for(var i in divs){ 
 13                     divs[i].onmousedown = function(){                     
 14                         this.style.background="red"; 
 15                         if(this.innerHTML ==="="){ 
 16                             str = eval(str); 
 17                             console.log(str); 
 18                             oInput.value = str; 
 19                         }else{ 
 20                             str += this.innerHTML; 
 21                             oInput.value = str; 
 22                         } 
 23                     } 
 24                     divs[i].onmouseup = function(){                     
 25                         this.style.background="black"; 
 26                     } 
 27                 }     
 28                  
 29             } 
 30              
 31         </script> 
 32          
 33          
 34         <style> 
 35             #calculator{ 
 36                 width: 400px; 
 37                 height: 400px; 
 38                 background: #ccc; 
 39                 position: relative; 
 40             } 
 41             #input input{ 
 42                 width: 330px; 
 43                 height: 30px; 
 44                 margin-left: 30px; 
 45                 margin-top: 10px; 
 46                 margin-bottom: 10px; 
 47                 position: relative; 
 48             } 
 49             #input{ 
 50                 background: lawngreen; 
 51             } 
 52             .rows{ 
 53                 float: left; 
 54                 background: yellow; 
 55                 width: 100%;     
 56             } 
 57             ul{ 
 58                 height: 60px; 
 59                 list-style-type: none; 
 60                 float: left; 
 61             } 
 62             ul li{ 
 63             float: left; 
 64             margin: 0px 20px 0px 0px; 
 65             } 
 66             .clickBlock{ 
 67                 position: relative; 
 68                 text-align: center; 
 69                 padding:20px; 
 70                 float: left; 
 71                 width: 20px; 
 72                 height: 20px; 
 73                 background: black; 
 74                 color: white; 
 75             } 
 76         </style> 
 77     </head> 
 78     <body> 
 79         <div id="calculator"> 
 80             <div id="input"> 
 81                 <input type="text" name="txt" id="txt" readonly/> 
 82             </div> 
 83              
 84             <div class="rows"> 
 85                 <ul> 
 86                     <li><div class="clickBlock">1</div></li> 
 87                     <li><div class="clickBlock">2</div></li> 
 88                     <li><div class="clickBlock">3</div></li> 
 89                     <li><div class="clickBlock">+</div></li> 
 90                 </ul> 
 91             </div> 
 92              
 93             <div class="rows"> 
 94                 <ul> 
 95                     <li><div class="clickBlock">4</div></li> 
 96                     <li><div class="clickBlock">5</div></li> 
 97                     <li><div class="clickBlock">6</div></li> 
 98                     <li><div class="clickBlock">-</div></li> 
 99                 </ul> 
100             </div> 
101              
102             <div class="rows"> 
103                 <ul> 
104                     <li><div class="clickBlock">7</div></li> 
105                     <li><div class="clickBlock">8</div></li> 
106                     <li><div class="clickBlock">9</div></li> 
107                     <li><div class="clickBlock">*</div></li> 
108                 </ul> 
109             </div> 
110              
111             <div class="rows"> 
112                 <ul> 
113                     <li><div class="clickBlock">0</div></li> 
114                     <li><div class="clickBlock">.</div></li> 
115                     <li><div class="clickBlock">=</div></li> 
116                     <li><div class="clickBlock">/</div></li> 
117                 </ul> 
118             </div> 
119              
120         </div> 
121     </body> 
122 </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']"));

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/11160.html