一、事件
1、鼠标事件
鼠标事件 | 意义 |
---|---|
onclick | 鼠标单击事件 |
ondbclick | 鼠标双击事件 |
onmouseover | 鼠标移动到某一个网页对象 |
onmouseout | 鼠标离开某一个网页对象 |
onmouseenter | 鼠标移入 |
onmouseleave | 鼠标移出 |
onmousedown | 鼠标按下(点击) |
onmousemove | 移动鼠标 |
onmouseup | 鼠标抬起(松开) |
案例1:通过单击事件实现如下图所示的选项卡切换的效果
效果图:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选项卡切换</title>
<style>
ul{
list-style: none;
padding: 0;
margin: 0;
}
nav ul li{
display: inline-block;
padding: 10px 40px;
color: white;
background-color: red;
}
.active{
background-color: brown;
}
main{color: white;}
main div{
width: 386px;
height: 100px;
display: none;
}
main div:first-child{background-color: lightgreen;}
main div:nth-child(2){background-color: yellowgreen;}
main div:last-child{background-color: green;}
.active_div{
display: block;
}
</style>
</head>
<body>
<nav>
<ul>
<li class="active">Home</li>
<li>About</li>
<li>Login</li>
</ul>
<main>
<div class="active_div">Home</div>
<div>About</div>
<div>Login</div>
</main>
</nav>
<script>
var list = document.querySelectorAll('nav ul li');
var divs = document.querySelectorAll('main div');
// 循环给每一个li标签绑定单击事件
for(var i=0;i<list.length;i++){
// 给每个li添加一个自定义属性data-index
list[i].dataset.index=i;
list[i].onclick=function(){
// console.log(list[i]);//结果为:undefined
// 编写该事件要处理的功能
// 先将所有li上面的active删掉
for(var j=0;j<list.length;j++){
list[j].classList.remove('active')
divs[j].classList.remove('active_div')
}
/*for(var n=0;n<divs.length;n++){
divs[n].classList.remove('active_div')
}*/
// 将active添加到当前点击的li上
this.classList.add('active')
// 获取当前点击的元素上的自定义属性data-index的值
var index = this.dataset.index
console.log(index);
divs[index].classList.add('active_div')
}
}
</script>
</body>
</html>
案例2:鼠标滑动小案例
效果图:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background: url(img/bg1.jpg) no-repeat 0 0;
background-size: 100%;
}
nav{
width: 100%;
height: 100%;
background-color: rgba(128, 128, 128, 0.784);
}
.list{
width: 1200px;
height: 200px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.list img{
width: 100%;
height: 100px;
margin-left: 10px;
/* color: darkgrey; */
border-radius: 5px;
border: 5px solid rgb(157, 157, 157);
}
.list img:hover{border: 5px solid white;}
</style>
</head>
<body>
<nav>
<div class="list">
<img src="img/bg1.jpg" alt="">
<img src="img/bg2.jpg" alt="">
<img src="img/bg3.jpg" alt="">
<img src="img/bg4.jpg" alt="">
<img src="img/bg5.jpg" alt="">
<img src="img/bg6.jpg" alt="">
</div>
</nav>
<script>
var imgs = document.querySelectorAll('.list img');
var body = document.body;
// 给图片绑定鼠标移入事件
for(var i=0;i<imgs.length;i++){
// 绑定事件
imgs[i].onmouseover=function(){
// console.log(this.src);
body.style.backgroundImage='url('+this.src+')'
}
}
</script>
</body>
</html>
注意:
两种移入移出的区别:
- onmouseover和onmouseout:不仅在元素本身起作用,还会将事件绑定在子元素身上
- onmouseenter和onmouseleave:仅仅在元素本身起作用,在其子元素上不起作用
2、键盘事件
键盘事件 | 意义 |
---|---|
onkeydown | 按下一个键 |
onkeyup | 松开一个键 |
onkeypress | 在用户按下键(在键盘上)时发生 |
3、表单事件
表单事件 | 意义 |
---|---|
onfocus | 获取焦点 |
onblur | 失去焦点 |
onchange | 对比获取焦点和失去焦点时里面内容不一样才会触发 |
oninput | 只要内容不一样就触发 |
onreset | 重置事件 |
onsubmit | 提交事件 |
注意: onreset和onsubmit必须在form表单中才能使用
4、移动端触摸事件
移动端触摸事件 | 意义 |
---|---|
ontouchstart | 在用户触摸一个元素时发生 |
ontouchmove | 当用户从元素上移开手指时发生 |
ontouchend | 当用户触摸元素时发生 |
ontouchcancel | 当用户在屏幕上移动手指时发生 |
二、正则表达式
语法:/正则表达式主体/修饰符(可选)
案例:var reg = /\b[a-zA-Z0-9]{6,8}\b/
案例解析:只能输入字母数字,并且长度至少是6位但不多于8次
1、使用字符串方法
方法 | 属性 |
---|---|
search() | 用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串,并返回子串的起始位置 |
replace() | 用于在字符串中用一些字符串替换另一些字符串,或替换一个与正则表达式匹配的子串 |
2、正则表达式方法
方法 | 属性 |
---|---|
test() | 用于检测一个字符串是否匹配某个模式,如果字符串中含有匹配的文本,则返回 true,否则返回 false。 |
exec() | 用于检索字符串中的正则表达式的匹配。 |