您的位置：首页 > Web前端 > JQuery

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

2018-01-20 16:26 561 查看

事件

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">
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>
View Code

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']"));

 

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航