2023-03-14_DOMDay02-排它思想开关思想以及鼠标
2023-03-13 本文已影响0人
远方的路_
1. 操作多个元素的内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>02_排他思想-点击第一个li标签，然后将所有的li标签的内容修改为哈哈</title>
</head>
<body>
<ul>
<li>斗罗大陆</li>
<li>斗破苍穹</li>
<li>坏蛋是怎样练成</li>
<li>上门龙婿</li>
</ul>
<script>
// 1.获取所有的li
// 2.从所有的li中找到第一个li
// 3.点击第一个li
// 4.将所有的li的内容修改为哈哈
// 1.获取所有的li
var li_list = document.querySelectorAll('ul li');
// 2.从所有的li中找到第一个li
// 3.点击第一个li
li_list[0].onclick = function(){
// 4.将所有的li的内容修改为哈哈
// a.遍历所有的li
// b.拿到li中间的内容
// c.修改
for(var i = 0; i < li_list.length; i++){
li_list[i].innerHTML = '哈哈';
}
}
// 排他思想-点击任意一个li标签，然后将所有的li标签的内容修改为哈哈
for (var i = 0; i < li_list.length; i++) {
li_list[i].onclick = function () {
for (var j = 0; j < li_list.length; j++) {
li_list[j].innerHTML = '哈哈'
}
}
}
// 排他思想-方法1-点击任意一个li-将当前点击的li修改为哈哈-其他li修改嘿嘿
for (var i = 0; i < liList.length; i++) {
liList[i].onclick = function() {
for(var j = 0; j < liList.length; j++) {
liList[j].innerHTML = '嘿嘿'
}
this.innerHTML = '哈哈'
}
}
// 排他思想-方法2-点击任意一个li-将当前点击的li修改为哈哈-其他li修改嘿嘿
for (var i = 0; i < liList.length; i++) {
// 给li对象上添加一个属性 属性的名字叫做index
// 属性的值是i
liList[i].index = i;
liList[i].onclick = function() {
for(var j = 0; j < liList.length; j++) {
liList[j].innerHTML = '嘿嘿'
}
liList[this.index].innerHTML = '哈哈'
}
}
</script>
</body>
</html>
排它思想:
1. 先让所有的元素处于同样的状态
2. 再让那个特殊的自己改变
- 案例练习---排它思想-轮播小圆点切换
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>07_排他思想-轮播小圆点切换</title>
<style>
* {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
.uu::after {
content: '';
display: block;
clear: both;
}
.uu li {
width: 40px;
height: 40px;
background-color: gainsboro;
border-radius: 50%;
float: left;
margin-right: 10px;
}
li.current {
background-color: greenyellow;
}
</style>
</head>
<body>
<ul class="uu">
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
var li_list = document.querySelectorAll('.uu li');
for(var i = 0; i < li_list.length; i++){
li_list[i].onclick = function(){
for(var j = 0; j < li_list.length; j++){
li_list[j].style.backgroundColor = 'gainsboro';
}
this.style.backgroundColor = 'yellowgreen';
}
}
</script>
</body>
</html>
2. 鼠标事件
-
onclick// 点击 -
ondblclick//双击 -
oncontextmenu//右击 -
onmousemove// 鼠标移动 -
onmouseover/onmouseout// 鼠标移入移出 -
nmouseenter/onmouseleave// 鼠标移入移出 -
onmousedown/onmouseup// 鼠标点击和抬起
- 案例练习-风车案例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>demo-风车案例</title>
<style>
*{
padding: 0;
margin: 0;
}
ul li{
list-style: none;
}
.box {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 400px;
background-color: red;
}
.box ul {
width: 300px;
height: 300px;
animation: move 2s linear infinite;
}
@keyframes move {
from{transform:rotate(0)}
to{transform:rotate(360deg)}
}
.box ul li {
float: left;
width: 150px;
height: 150px;
}
.box ul li:nth-child(1),.box ul li:nth-child(4){
background-color: aqua;
border-radius: 0 90% 0 90%;
}
.box ul li:nth-child(2),.box ul li:nth-child(3) {
background-color: pink;
border-radius: 90% 0 90% 0;
}
.box button {
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%);
}
</style>
</head>
<body>
<div class="box">
<ul id="list">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<button>转/停</button>
</div>
<script>
var ul = document.querySelector('#list')
var btn = document.querySelector('button')
var flag = true
btn.onclick = function() {
if(flag) {
ul.style.animationPlayState = 'paused';
} else {
ul.style.animationPlayState = 'running';
}
flag = !flag
}
</script>
</body>
</html>
3. 开关思想
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>20_开关思想-显示隐藏</title>
<style>
div {
width: 200px;
height: 200px;
background-color: aqua;
/* 元素隐藏方式 */
/* display: none; 不占位 */
/* visibility: hidden; 占位 */
/* opacity: 0; 占位 */
/* transform: translateX(10000px);占位 */
/* transform: scale(0);占位 */
/* transform: rotateY(90deg);占位 */
/* transform: skew(90deg); */
/* width: 0;占位 */
/* height: 0;占位 */
}
</style>
</head>
<body>
<div></div>
<button>按钮</button>
<script>
var btn = document.querySelector('button');
var div = document.querySelector('div');
var flag = true;
btn.onclick = function(){
if(flag) {
div.style.visibility = 'hidden';
}else {
div.style.visibility = 'visible';
}
flag = !flag;
}
</script>
</body>
</html>
4. 键盘事件
- onkeyup // 按键抬起
- onkeydown // 按键落下
- onfocus // 获取焦点
- onblur // 失去焦点
4.1 onkeyup和onkeydown使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" />
<!--键盘事件除了给表单类元素添加以外还能给document-->
<script type="text/javascript">
window.onload = function(){
var inputNode = document.querySelector('input');
// inputNode.onkeydown = function(){
// console.log('按下');//如果按下不放，那么这个按下事件是重复触发
// }
inputNode.onkeyup = function(){
console.log('抬起');//只会触发一次，用的比较多，可以保证事件函数只执行一次
}
}
</script>
</body>
</html>
4.2 keycode键码
案例: 如果输入的是回车则打印回车，如果输入的是shift那么就打印shift
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" />
<script type="text/javascript">
window.onload = function() {
var inputNode = document.querySelector('input');
inputNode.onkeyup = function(e) {
//与其说我们在讲键盘事件，不如说我们在讲怎么区分哪个键的事件
//区分哪个键，我们需要通过键码去区分
//键码在事件对象当中：每一个事件触发的时候都会有独立事件对象
// 事件对象就是回调函数的第一个参数，所有的事件触发的时候都会有这个对象
// 事件对象是一个对象，不是我们自己封装的对象，而是当触发事件的时候，系统会
// 自动的帮我们把和这一次触发事件相关的信息封装为 一个对象
// 系统会调用我们的回调函数，会把这个事件对象传给回调函数的第一个形参
// console.log(e);
//如果是回车，那么就打印回车
if (e.keyCode === 13) {
console.log('回车')
} else if (e.keyCode === 16) {
console.log('shift')
}
}
}
</script>
</body>
</html>
4.3 onfocus和onblur
- onfocus获取焦点
- onblur 失去焦点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
input{
outline: none;
}
</style>
</head>
<body>
<input type="text" value="老马大哥" />
<script>
//获取焦点的时候，input当中的值字体颜色为green 背景色为red
//失去焦点的时候，input当中的值字体颜色和背景色都随机变色（变色龙）
var inputNode = document.querySelector('input');
//获取焦点事件
inputNode.onfocus = function() {
this.style.color = 'green';
this.style.backgroundColor = 'red';
};
//失去焦点事件.
inputNode.onblur = function() {
//给字体颜色求的随机颜色
var red1 = Math.floor(Math.random() * 256);
var green1 = Math.floor(Math.random() * 256);
var blue1 = Math.floor(Math.random() * 256);
//给背景颜色求的随机颜色
var red2 = Math.floor(Math.random() * 256);
var green2 = Math.floor(Math.random() * 256);
var blue2 = Math.floor(Math.random() * 256);
//设置随机颜色
this.style.color = 'rgb(' + red1 + ',' + green1 + ',' + blue1 + ')';
this.style.backgroundColor = 'rgb(' + red2 + ',' + green2 + ',' + blue2 + ')';
};
</script>
</body>
</html>
-
案例练习-- 全选,全不选,反选
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="checkbox" id="c1"/>
<label for="c1">抽烟</label>
<label>
<input type="checkbox" />喝酒
</label>
<label>
<input type="checkbox" />烫头
</label>
<label>
<input type="checkbox" />打豆豆
</label>
<br />
<button>全选</button>
<button>全不选</button>
<button>反选</button>
<script>
var btns = document.querySelectorAll('button');
var inputNodes = document.querySelectorAll('input');
//全选
btns[0].onclick = function(){
for(var i = 0; i < inputNodes.length; i++){
inputNodes[i].checked = true;
}
}
//全不选
btns[1].onclick = function(){
for(var i = 0; i < inputNodes.length; i++){
inputNodes[i].checked = false;
}
}
//反选
btns[2].onclick = function(){
for(var i = 0; i < inputNodes.length; i++){
inputNodes[i].checked = !inputNodes[i].checked;
}
}
</script>
</body>
</html>
-
案例练习---轮播的左右切换渐变效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
img{
display: block;
/*vertical-align: middle;*/
}
a{
text-decoration: none;
}
input{
outline: none;
}
.clearFix:after{
content: '';
display: table;
clear: both;
}
#box{
position: relative;
width: 600px;
height: 300px;
margin: 50px auto;
overflow: hidden;
}
#box .list{
width: 3000px;
height: 300px;
}
#box .list li{
float: left;
width: 600px;
height: 300px;
}
#box .list li img{
width: 600px;
height: 300px;
}
#box span{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 100px;
background-color: rgba(200,200,200,.7);
font-size: 50px;
text-align: center;
line-height: 100px;
color: white;
opacity: 0;
transition: opacity 2s;
}
#box .left{
left: 0;
}
#box .right{
right: 0;
}
#box .iconList{
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 10px;
overflow: hidden;
}
#box .iconList li{
float: left;
width: 40px;
height: 40px;
margin-right: 10px;
border-radius: 50%;
background-color: gray;
}
#box .iconList li.current{
background-color: red;
}
</style>
</head>
<body>
<div id="box">
<ul class="list">
<li><img src="img/1.jpg"/></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
<li><img src="img/4.jpg"/></li>
<li><img src="img/5.jpg"/></li>
</ul>
<span class="left"> < </span>
<span class="right"> > </span>
<ul class="iconList">
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script type="text/javascript">
var box = document.querySelector('#box');
var span_list = document.querySelectorAll('#box span');
box.onmouseenter = function(){
span_list[0].style.opacity = '.7';
span_list[1].style.opacity = '.7';
}
box.onmouseleave = function(){
span_list[0].style.opacity = 0;
span_list[1].style.opacity = 0;
}
</script>
</body>
</html>
-
案例练习---一级菜单联动二级菜单
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>01_案例练习-一级菜单联动二级菜单</title>
<style>
* {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
ul li a {
text-decoration: none;
}
.list {
position: relative;
width: 200px;
height: 210px;
border: 1px solid #000;
/* box-sizing: border-box; */
}
ul li {
height: 70px;
text-align: center;
line-height: 70px;
background-color: aquamarine;
}
.list > li:nth-child(2) {
border-top: 1px solid #000;
border-bottom: 1px solid #000;
box-sizing: border-box;
}
ul li .listIn{
display: none;
position: absolute;
left: 201px;
top: -1px;
border: 1px solid #000;
width: 200px;
height: 210px;
}
</style>
</head>
<body>
<ul class="list">
<li>
<a href="javascript:;">手机</a>
<ul class="listIn">
<li>苹果</li>
<li>华为</li>
<li>小米</li>
</ul>
</li>
<li>
<a href="javascript:;">电脑</a>
<ul class="listIn">
<li>宏碁</li>
<li>戴尔</li>
<li>联想</li>
</ul>
</li>
<li>
<a href="javascript:;">汽车</a>
<ul class="listIn">
<li>奔驰</li>
<li>奥迪</li>
<li>宝马</li>
</ul>
</li>
</ul>
<script>
var list = document.querySelectorAll('.list > li')
var listIn = document.querySelectorAll('.list > li .listIn')
for(var i = 0; i < list.length; i++) {
list[i].index = i;
list[i].onmouseenter = function() {
listIn[this.index].style.display = 'block'
}
list[i].onmouseleave = function() {
listIn[this.index].style.display = 'none'
}
}
</script>
</body>
</html>
