发表于: 2023-02-22 21:40:40
0 255
js知识:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件对象</title>
<style>
/*div {*/
/* height: 100px;*/
/* width: 100px;*/
/* background-color: pink;*/
/*}*/
</style>
</head>
<body>
<!-- <div>123</div>-->
<!-- <ul>-->
<!-- <li>我是li</li>-->
<!-- <li>我是li</li>-->
<!-- <li>我是li</li>-->
<!-- </ul>-->
<input type="text">
<script>
//事件对象
// var div = document.querySelector('div');
// // div.onclick = function (event) {
// // console.log(event);
// // }
//
// div.addEventListener('click',function (e) {
// console.log(e);
// console.log(e.target);
// console.log(this);
// })
//1. event 就是一个事件对象 写到我们的侦听函数的 小括号里面 当形参来看
//2.事件对象只有有了事件才会存在,它是系统给我们自动创建的,不需要我们传递参数
//3.事件对象 是 我们事件的一系列相关数据的集合 跟事件相关的 比如鼠标点击里面就包含了鼠标的相关信息,
//鼠标坐标啊,如果是键盘事件里面就包含的键盘事件信息 比如 判断用户按下个那个键
//4.这个事件对象我们可以自己命名 比如 event 、evt 、 e
//5.事件对象也有兼容性问题 ie678 通过 window.event 兼容性的写法 e = e || window.event;
//常见事件对象的属性和方法
//1、e.target 返回的是触发事件的对象(元素) this 返回的是绑定事件的对象(元素)
// 区别 : e.target 点击了那个元素,就返回那个元素 this那个元素绑定了这个点击事件,那么就返回谁
// var ul = document.querySelector('ul');
// ul.addEventListener('click',function (e) {
// //我们给ul 绑定了事件 那么this 就指向ul
// console.log(this); //ul
// console.log(e.currentTarget); //ul
// // e.target 指向我们点击对象 谁触发了这个事件 我们点击的是li e.target 指向的是 li
// console.log(e.target); //li
// })
//2、了解 跟 this 有个非常相似的属性 currentTarget ie678不认识
const input = document.querySelector('input')
input.addEventListener('keyup', function (e) {
// console.log(11)
// console.log(e.key)
if (e.key === 'Enter') {
console.log('我按下了回车键')
}
})
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button>点击</button>
<script>
//每个对象都有this 环境对象 普通函数里面的this 指向的是window
// function fn() {
// console.log(this)
// }
// fn()
const btn = document.querySelector('button')
btn.addEventListener('click', function () {
console.log(this) //指向当前对象 btn
this.style.color = 'red'
})
</script>
</body>
</html>
js案例:
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.wrapper {
min-width: 400px;
max-width: 800px;
display: flex;
justify-content: flex-end;
}
.avatar {
width: 48px;
height: 48px;
border-radius: 50%;
overflow: hidden;
background: url(../../js2-DOM/images/1.jpg) no-repeat center / cover;
margin-right: 20px;
}
.wrapper textarea {
outline: none;
border-color: transparent;
resize: none;
background: #f5f5f5;
border-radius: 4px;
flex: 1px;
padding: 10px;
transition: all 0.5s;
height: 30px;
}
.wrapper textarea:focus {
border-color: #e4e4e4;
background: #fff;
height: 50px;
}
.wrapper button {
background: #00aeec;
color: #fff;
border: none;
border-radius: 4px;
margin-left: 10px;
width: 70px;
cursor: pointer;
}
.wrapper .total {
margin-right: 80px;
color: #999;
margin-top: 5px;
opacity: 0;
transition: all 0.5s;
}
.list {
min-width: 400px;
max-width: 800px;
display: flex;
}
.list .item {
width: 100%;
display: flex;
}
.list .item .info {
flex: 1;
border-bottom: 1px dashed #e4e4e4;
padding-bottom: 10px;
}
.list .item p {
margin: 0;
}
.list .item .name {
color: #FB7299;
font-size: 14px;
font-weight: bold;
}
.list .item .text {
color: #333;
padding: 10px 0;
}
.list .item .time {
color: #999;
font-size: 12px;
}
</style>
</head>
<body>
<div class="wrapper">
<i class="avatar"></i>
<textarea id="tx" placeholder="发一条评论" rows="2"></textarea>
<button>发布</button>
</div>
<div class="wrapper">
<span class="total">0/200字</span>
</div>
<div class="list">
<div class="item" style="display: none;">
<i class="avatar"></i>
<div class="info">
<p class="name"清风徐来></p>
<p class="text">大家都辛苦啦,感谢大家</p>
<p class="time">2023-10-1 20:20:20</p>
</div>
</div>
</div>
<script>
//获取元素
const tx = document.querySelector('#tx')
const total = document.querySelector('.total')
const item = document.querySelector('.item')
const text = document.querySelector('.text')
//获得焦点
tx.addEventListener('focus', function () {
total.style.opacity = 1
})
//失去焦点
tx.addEventListener('blur', function () {
total.style.opacity = 0
})
//检测用户输入
tx.addEventListener('input', function () {
// console.log(tx.value.length) 得到输入的长度
total.innerHTML = `${tx.value.length}/200字`
})
//按下回车发布评论
tx.addEventListener('keyup', function (e) {
// console.log(e.key)
if (e.key === 'Enter') {
// tx.value.trim() trim()去除左右空格
// if (tx.value.trim() !== '') {
// item.style.display = 'block'
// // console.log(tx.value) //用户输入的内容
// text.innerHTML = tx.value
// }
if (tx.value.trim()) {
item.style.display = 'block'
// console.log(tx.value) //用户输入的内容
text.innerHTML = tx.value
}
//等我们按下回车之后 清空文本域
tx.value = ''
//按下回车之后 要把字符统计 复原
total.innerHTML = `${tx.value.length}/200字`
}
})
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.tab {
width: 590px;
height: 340px;
margin: 20px;
border: 1px solid #e4e4e4;
}
.tab-nav {
width: 100%;
height: 60px;
line-height: 60px;
display: flex;
justify-content: space-between;
}
.tab-nav h3 {
font-size: 24px;
font-weight: normal;
margin-left: 20px;
}
.tab-nav ul {
list-style: none;
display: flex;
justify-content: flex-end;
}
.tab-nav ul li {
margin: 0 20px;
font-size: 14px;
}
.tab-nav ul li a {
text-decoration: none;
border-bottom: 2px solid transparent;
color: #333;
}
.tab-nav ul li a.active {
border-color: #e1251b;
color: #e1251b;
}
.tab-content {
padding: 0 16px;
}
.tab-content .item {
display: none;
}
.tab-content .item.active {
display: block;
}
.tab-content img {
width: 500px;
height: 300px;
}
</style>
</head>
<body>
<div class="tab">
<div class="tab-nav">
<h3>每日特价</h3>
<ul>
<li><a class="active" href="javascript:;">精选</a></li>
<li><a href="javascript:;">美食</a></li>
<li><a href="javascript:;">百货</a></li>
<li><a href="javascript:;">个护</a></li>
<li><a href="javascript:;">预告</a></li>
</ul>
</div>
<div class="tab-content">
<div class="item active"><img src="../../js2-DOM/images/1.jpg"></div>
<div class="item"><img src="../../js2-DOM/images/2.jpg"></div>
<div class="item"><img src="../../js2-DOM/images/3.jpg"></div>
<div class="item"><img src="../../js2-DOM/images/4.jpg"></div>
<div class="item"><img src="../../js2-DOM/images/2.jpg"></div>
</div>
</div>
<script>
//获得a元素
const as = document.querySelectorAll('.tab-nav a')
for (let i = 0; i < as.length; i++) {
as[i].addEventListener('mouseenter', function () {
// console.log('鼠标经过')
//排他思想
document.querySelector('.tab-nav .active').classList.remove('active')
this.classList.add('active')
//下面五个大盒子一一对应 item
document.querySelector('.tab-content .active').classList.remove('active')
//对于序号的 item 显示 添加 active 类
document.querySelector(`.tab-content .item:nth-child(${i + 1})`).classList.add('active')
})
}
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 500px;
margin: 100px auto;
text-align: center;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
height: 24px;
}
td {
border: 1px solid #d0d0d0;
color: #404040;
padding: 10px;
}
.allCheck {
width: 80px;
}
</style>
</head>
<body>
<table>
<tr>
<th class="allCheck">
<input type="checkbox" name="" id="checkAll"> <span class="all">全选</span>
</th>
<th>商品</th>
<th>商家</th>
<th>价格</th>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck">
</td>
<td>小米手机</td>
<td>小米</td>
<td>¥1999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck">
</td>
<td>小米进化器</td>
<td>小米</td>
<td>¥3999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck">
</td>
<td>小米电视</td>
<td>小米</td>
<td>¥5999</td>
</tr>
</table>
<script>
//获取大复选框
const checkAll = document.querySelector('#checkAll')
//获取所有的小复选框
const cks = document.querySelectorAll('.ck')
//点击大复选框
checkAll.addEventListener('click', function () {
//得到当前大复选框的选中状态
// console.log(this.checked) //得到的是true 或者是 false
//遍历所有的小复选框 让小复选框的 checked = 大复选框的 checked
for (let i = 0; i < cks.length; i++) {
// cks[i].checked = checkAll.checked
cks[i].checked = this.checked
}
})
//小复选框控制到大复选框
//点击事件
for (let i = 0; i <cks.length; i++) {
cks[i].addEventListener('click', function () {
//判断选中的小复选框个数 总的小复选矿个数
//要写到点击里面,因为每次都要获得最新的个数
// console.log(document.querySelectorAll('.ck:checked').length)
// console.log(document.querySelectorAll('.ck:checked').length === cks.length)
checkAll.checked = document.querySelectorAll('.ck:checked').length === cks.length
})
}
</script>
</body>
</html>
评论