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。
简单示例：表单提交
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位</span> 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位</span> 109 </p> 110 <p> 111 <div class="beforeTxt">确认密码:</div> 112 <input type="password" onblur="regRePwd(this)" class="txt" /> 113 <span>*密码长度最少为8位</span> 114 </p> 115 <p> 116 <div class="beforeTxt">邮箱:</div> 117 <input type="text" onblur="regMail(this)" class="txt" /> 118 <span>*邮箱格式必须正确</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的函数库。 (原生)
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']"));
