文章目录
事件基础(三要素)
- JavaScript使我们有能力创建动态页面,而事件是可以被JavaScript侦测到的行为
简单理解:触发—响应机制
- 网页中的每个元素都可以产生某些可以触发JavaScript的事件,我们可以在用户点击某按钮时产生一个事件,然后去执行某些操作。
1.事件源
事件被触发的对象 谁 按钮
<body>
<button id="button">涛涛</button>
<script>
var b = document.getElementById('button');
</script>
</body>
2.事件类型
事件类型 如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
3.事件处理程序
时间处理程序 通过一个函数赋值的方式 完成
<body>
<button id="button">涛涛</button>
<script>
var b = document.getElementById('button');
b.onclick = function(){
alert('点我啊!!'); //点完按钮后弹出,点我啊!!
}
</script>
</body>
处理事件思路(代码举例)
- 获取事件源
- 注册事件(绑定事件)
- 添加事件处理程序
<body>
<div>涛涛</div>>
<script>
//执行事件步骤
//目标:点击div控制台输出 我被选中了
//1.获取事件源
var a = document.querySelector('div');
//2.注册事件(绑定事件)
//div.onclick
//3.添加事件处理程序
a.onclick = function(){
console.log('我被选中了');
}
</script>
</body>
常见的鼠标事件
鼠标事件 | 触发条件 |
---|---|
onclick | 鼠标点击左键触发 |
onmouseover | 鼠标经过触发 |
onmouseout | 鼠标离开触发 |
onfocus | 获得鼠标焦点触发 |
onblur | 失去鼠标焦点触发 |
onmousemove | 鼠标移动触发 |
onmouseup | 鼠标弹起触发 |
onmouseup | 鼠标弹起触发 |
onmousedown | 鼠标按下触发 |
操作元素(DOM核心)
- JavaScript的DOM操作可以改变网页内容、结构和样式,我们可以利用DOM操作元素来改变元素里面的内容、属性等。注意以下都是属性
改变元素内容(innerText)
element.innerText
从起始位置到终止位置的内容,但它去除html标签,同时空格和换行也会去掉
<body>
<button>显示当前时间</button>
<div>某个时间</div>
<script>
//当我们点击了按钮,div里面的文字会发生变化
//1.获取元素
var a = document.querySelector('button');
var b = document.querySelector('div');
//2.注册事件
a.onclick = function(){
b.innerText = 'ff';
}
</script>
</body>
案例1
<style>
div{
color:red;
}
</style>
<body>
<button>显示当前时间</button>
<div>某个时间</div>
<script>
//当我们点击了按钮,div里面的文字会发生变化
//1.获取元素
var a = document.querySelector('button');
var b = document.querySelector('div');
//2.注册事件
a.onclick = function(){
b.innerText = getDate();
console.log(b)
}
function getDate(){
var date = new Date();
console.log(date.getFullYear());
console.log(date.getMonth() + 1); //返回的月份小一个月
console.log(date.getDate()); //返回几号
console.log(date.getDay()); //周一返回1 周六返回的是 6 但是周日返回的 0
//我们写一个 2022年 1月 20日 星期四
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
var day = date.getDay();
return '今天是:' + year + '年' + month + '月' + dates + '日' + arr[day];
}
</script>
</body>
案例2
<body>
<p>显示时间</p>
<script>
//获取元素
var a = document.querySelector('p');
//注册事件
a.innerText = getDate();
function getDate(){
var date = new Date();
//我们写一个 2022年 1月 20日 星期四
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
var day = date.getDay();
return '今天是:' + year + '年' + month + '月' + dates + '日' + arr[day];
}
</script>
</body>
改变元素内容(innerHTML)
element.innerHTML
起始位置到终止位置的全部内容,包括html标签,同时保留空格和换行
Text和HTML区别
案例1
<body>
<div></div>
<script>
//innerText 和 innerHTML的区别
//1.innerText (非标准)
var a = document.querySelector('div');
a.innerText = '<strong>今天是:</strong>2022'; //无法使用html标签
//2.innerHTML (W3C标准)
a.innerHTML = '<strong>今天是:</strong>2022'; //可以使用html标签
</script>
</body>
案例2
<body>
<p>
我是文字
<span>123</span>
</p>
<script>
var c = document.querySelector('p');
console.log(c.innerText); //我是文字123
console.log(c.innerHTML); //返回的HTML文档格式
</script>
</body>
常用元素的属性操作
- innerText,innerHTML改变元素内容
- src、href
- id、alt、title
案例
<body>
<button id="ldh">攻略</button>
<button id="zxy">笔记</button> <br>
<img src="jjj.jpg" alt="">
<script>
//修改元素属性
//1.获取元素
var a1 = document.getElementById('ldh');
var a2 = document.getElementById('zxy');
var img = document.querySelector('img');
//2.注册事件 处理程序
a2.onclick = function(){
img.src = 'jing2.jpg';
img.title = '笔记';
}
a1.onclick = function(){
img.src = 'jjj.jpg';
img.title = '攻略';
}
</script>
</body>
表单元素的属性操作
- 利用DOM可以操作如下表单元素的属性:
type、value、checked、selected、disabled
案例(仿京东显示密码)
- 核心思路:点击眼睛按钮,把密码框类型改为文本框就可以看见里面的密码
- 一个按钮两个状态,点击一次,切换为文本框,继续点击一次切换为密码框
- 算法:利用一个flag变量,来判断flag的值,如果是1就切换为文本框,flag设置为0,如果是0,就切换为密码框,flag设置为1
实现样式
<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>
.box{
position:relative;
width:400px;
border-bottom:1px solid #ccc;
margin: 100px auto;
}
.box input{
width:370px;
height:30px;
border:0;
outline: none;
}
.box img{
position: absolute;
top: 2px;
right: 2px;
width: 24px;
}
</style>
</head>
<body>
<div class="box">
<lablel for=""></lablel>
<img src="emo.jpg" alt="">
<input type="password" name="" id="">
</div>
<script>
</script>
</body>
实现功能
<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>
.box{
position:relative;
width:400px;
border-bottom:1px solid #ccc;
margin: 100px auto;
}
.box input{
width:370px;
height:30px;
border:0;
outline: none;
}
.box img{
position: absolute;
top: 2px;
right: 2px;
width: 24px;
}
</style>
</head>
<body>
<div class="box">
<lablel for=""></lablel>
<img src="emo.jpg" alt="" id="eye">
<input type="password" name="" id="pwd">
</div>
<script>
//1.获取元素
var a = document.getElementById('eye');
var b = document.getElementById('pwd');
//2.注册事件 处理程序
var flag = true;
a.onclick = function(){
if(flag == true){
b.type = 'text';
a.src = 'emo2.jpg';
flag = false;
}else{
b.type = 'password';
a.src = 'emo.jpg';
flag = true;
}
}
</script>
</body>
学习网页中控制页面元素
样式属性操作
我们可以通过js修改元素的大小、颜色、位置等样式
1.element.style //行内样式操作
1.行内样式代码举例(element.style)
<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>
div{
width:200px;
height:200px;
background-color:aqua;
}
</style>
</head>
<body>
<div></div>
<script>
//1.获取元素
var a = document.querySelector('div');
//2.注册事件 处理程序
a.onclick = function(){
//div.style里面的属性采取驼峰命名法
this.style.backgroundColor = 'purple';
this.style.width = '400px';
}
</script>
</body>
注意
-
JS里面的样式采取驼峰命名法,比如 fontSize,backgroundColor
-
JS修改 style 样式操作,产生的是行内样式,css权重比较高
案例一(淘宝点击关闭二维码)
当鼠标点击二维码关闭按钮的时候,则关闭整个二维码
思路
- 利用样式的显示和隐藏完成,display:none隐藏元素 display:block显示元素
- 点击按钮,就让这个二维码盒子隐藏起来即可
代码
<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>
.box{
position:relative;
width: 500px;;
height:auto;
border:1px solid #ccc;
margin:100px auto;
font-size:12px;
text-align:center;
color:#f40;
display: block;
}
.box img{
width: 500px;
magin-top: 5px;
}
.close-btn{
position:absolute;
top:-1px;
left: -16px;
width: 14px;
height:14x;
border: 1px solid #ccc;
line-height: 14px;
font-family: Arial,Arial, Helvetica, sans-serif;
cursor:pointer;
}
</style>
</head>
<body>
<div class="box">
我的小镜<br>
<img src="jing.jpg" alt="">
<i class='close-btn'>x</i>
</div>
<script>
//1.获取元素
var a = document.querySelector('.box');
var b = document.querySelector('.close-btn');
//2.注册事件 处理程序
b.onclick = function(){
a.style.display = 'none';
}
</script>
</body>
案例二(显示隐藏文本框内容)
- 获得焦点(onfocus)
- 失去焦点(onblur)
<body>
<input type="text" value="手机">
<script>
//1.获取元素
var a = document.querySelector('input');
//2.注册事件 获得焦点事件 onfocus
a.onfocus = function(){
console.log('你得到了焦点');
if(a.value == '手机'){
a.value = '';
}
//获得焦点需要把文本框里面的文字颜色变黑
this.style.color = 'red';
}
//3.注册事件 失去焦点事件 onblur
a.onblur = function(){
console.log('你失去了焦点');
if(a.value == ''){
this.value = '手机';
}
//失去焦点需要把文本框里面的文字颜色变浅色
this.style.color = '#999';
}
</script>
</body>
2.类名样式操作 element.className
引出类名样式操作
<style>
div{
width: 50px;
height: 50px;
border:1px solid;
}
</style>
</head>
<body>
<div>文本</div>
<script>
//1.使用 element.style 获得修改元素样式 如果样式比较少 或者 功能简单的情况下使用
var test = document.querySelector('div');
test.onclick = function(){
this.style.backgroundColor = 'purple';
this.style.color = '#fff';
this.style.fontSize = '25px';
}
</script>
</body>
使用类名操作改进
<style>
div{
width: 50px;
height: 50px;
border:1px solid;
}
.change{
background-color: purple;
color:#fff;
font-size:25px;
}
</style>
</head>
<body>
<div>文本</div>
<script>
//1.使用 element.style 获得修改元素样式 如果样式比较少 或者 功能简单的情况下使用
var test = document.querySelector('div');
test.onclick = function(){
// this.style.backgroundColor = 'purple';
// this.style.color = '#fff';
// this.style.fontSize = '25px';
//2.我们可以通过 修改元素的className更改元素的样式 适用于样式较多或者功能复杂的情况
this.className = 'change';
}
</script>
</body>
重要细节(类覆盖)
<style>
div{
width: 50px;
height: 50px;
border:1px solid;
}
.change{
background-color: purple;
color:#fff;
font-size:25px;
}
.first{
color:red;
}
</style>
</head>
<body>
<!-- 注意:此时div引进一个类 -->
<div class="first">文本</div>
<script>
var test = document.querySelector('div');
test.onclick = function(){
//注意:this.className会覆盖原先的类
this.className = 'change';
//注意:如果想要保留原先的类名,我们可以用多类名选择器
this.classNmae = 'first change';
}
</script>
</body>
案例(密码验证)
信息验证
<style>
.ipt{
}
div{
width:300px;
height:100px;
margin:250px auto;
}
.message{
font-size: 10px;
}
.wrong{
color:red;
}
.right{
color:aqua;
}
</style>
</head>
<body>
<div>
<input type="text" class = "ipt">
<p class = "message">请输入6-16位密码</p>
</div>
<script>
//1.获取元素
var t = document.querySelector('.ipt');
var s = document.querySelector('.message');
// 2.注册事件
t.onblur = function(){
if(this.value.length < 6 || this.value.length > 16){
console.log('错误');
s.className = 'message wrong';
s.innerHTML = '你输入的位数不对';
}else{
s.className = 'message right';
s.innerHTML = 'Clear!';
}
}
</script>
</body>