发表于： 2023-02-23 21:33:13
0 269
今天的js：
<!DOCTYPE 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>
.father {
width: 500px;
height: 500px;
background-color: pink;
}
.son {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<!-- <button>点击</button>-->
<script>
const fa = document.querySelector('.father')
const son = document.querySelector('.son')
//捕获阶段
// document.addEventListener('click', function () {
// alert('爷爷')
// },true)
// fa.addEventListener('click', function () {
// alert('爸爸')
// },true)
// son.addEventListener('click', function () {
// alert('儿子')
// },true)
//冒泡阶段
// document.addEventListener('click', function () {
// alert('爷爷')
// })
// fa.addEventListener('click', function () {
// alert('爸爸')
// })
// son.addEventListener('click', function (e) {
// alert('儿子')
// //阻止冒泡 阻止流动传播
// e.stopPropagation()
// })
fa.addEventListener('mouseenter', function () {
console.log('鼠标经过')
})
fa.addEventListener('mouseleave', function () {
console.log('鼠标离开')
})
//
// const btn = document.querySelector('button')
// // btn.onclick = function () {
// // alert('点击了')
// // // L0 事件移除解绑
// // btn.onclick = null
// // }
//
// btn.addEventListener('click', function fn() {
// alert('我点击了')
// //事件移除解绑
// btn.removeEventListener('click', fn)
// })
</script>
</body>
</html>
<!DOCTYPE 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>
<form action="http://www.baidu.com">
<input type="submit" value="跳转">
</form>
<script>
const form = document.querySelector('form')
form.addEventListener('submit', function (e) {
// 阻止默认行为 提交
e.preventDefault()
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<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>
body {
padding-top: 100px;
height: 3000px;
}
div {
display: none;
margin: 100px;
overflow: scroll;
width: 200px;
height: 200px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div>
我里面有很多的文字我里面有很多的文字我里面有很多的文字我里面有很多的文字我里面有很多的文字
我里面有很多的文字我里面有很多的文字我里面有很多的文字我里面有很多的文字我里面有很多的文字
我里面有很多的文字我里面有很多的文字我里面有很多的文字我里面有很多的文字我里面有很多的文字
我里面有很多的文字我里面有很多的文字我里面有很多的文字我里面有很多的文字我里面有很多的文字
</div>
<script>
const div = document.querySelector('div')
window.addEventListener('scroll', function () {
// console.log('我滚动了')
console.log(document.documentElement.scrollTop)
const n = document.documentElement.scrollTop
if ( n >= 100) {
div.style.display = 'block'
}else {
div.style.display = 'none'
}
})
// const div = document.querySelector('div')
// div.addEventListener('scroll', function () {
// // console.log(11)
// // scrollTop 被卷去的头部
// console.log(parseInt(div.scrollTop))
// })
</script>
</body>
</html>
案例练习：
<!DOCTYPE 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>
<ul>
<li>第一个li</li>
<li>第二个li</li>
<li>第三个li</li>
<li>第四个li</li>
<li>第五个li</li>
<p>这里是p</p>
</ul>
<script>
const ul = document.querySelector('ul')
ul.addEventListener('click', function (e) {
// alert(11)
// this.style.color = 'red'
// console.log(e.target) //就是我们点击的那个对象
// e.target.style.color = 'red'
//我们想只要点击li才会有效果 tagName 是全大写
if (e.target.tagName === 'LI') {
e.target.style.color = 'red'
}
})
</script>
</body>
</html>
<!DOCTYPE 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:;" data-id="0">精选</a></li>
<li><a href="javascript:;" data-id="1">美食</a></li>
<li><a href="javascript:;" data-id="2">百货</a></li>
<li><a href="javascript:;" data-id="3">个护</a></li>
<li><a href="javascript:;" data-id="4">预告</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')
// })
// }
//事件委托 父类控制子类
const ul = document.querySelector('.tab-nav ul')
const items = document.querySelectorAll('.tab-content .item')
ul.addEventListener('click', function (e) {
// console.log(e.target) //e.target 是我们点击的对象
// 只有点击了 a 才会进行 添加类和删除类操作
// console.log(e.target.tagName) // e.target.tagName 点击那个对象的 标签名
if (e.target.tagName === 'A') {
// console.log('我选择的是a')
//排他思想
// 先移除 active
document.querySelector('.tab-nav .active').classList.remove('active')
// 当前元素添加 active 是 e.target
// this指向ul 所以不能用this
e.target.classList.add('active')
//下面大盒子模块
// console.log(e.target.dataset.id)
const i = +e.target.dataset.id
//排他思想 先移除 原来的 active
document.querySelector('.tab-content .active').classList.remove('active')
// 对应的大盒子 添加 active
// document.querySelector(`.tab-content .item:nth-child(${i + 1})`).classList.add('active')
//第二种方法 获取 item元素 得到索引号
items[i].classList.add('active')
}
})
</script>
</body>
</html>
返回列表
评论