作业，笔记

最新推荐文章于 2024-03-24 12:39:39 发布

m0_62077482

最新推荐文章于 2024-03-24 12:39:39 发布

阅读量48

点赞数

本文链接：https://blog.csdn.net/m0_62077482/article/details/123413435

版权

JavaScript 点击事件解构赋值运算符对象操作

关键词由CSDN通过智能技术生成

<!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>
*{
margin:0px;padding:0px;
}
.container{
width: 450px;
height: 300px;
border: 1px solid #4013af;
padding:8px;
margin:0 auto;
}
.container h2{
text-align: center;
}
.container .item{
border: 1px dashed red;
margin-top: 12px;
padding:12px 0px;
}
</style>
</head>
<body>
<div class="container">
<h2>点击换色</h2>
<div class="item">one</div>
<div class="item">two</div>
<div class="item">three</div>
<div class="item">four</div>
</div>
<script>
// 1. 获取到需要绑定单击事件的标签
var divObj = document.getElementsByClassName("item")
// 2. 给标签绑定单击事件
for(let i = 0;i<divObj.length;i++){
console.log(i);
divObj[i].οnclick=function(){
// alert(i)
// 3. 改变div的背景颜色 this 表示当前这个对象
this.style.backgroundColor = 'rgb(120,130,240)'
/*
扩展：1. 点击的时候随机换色 Math.random()
2. 两个颜色之间互相切换
*/
}
}

</script>
</body>
</html>

<!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>
</head>
<body>
<script>
// 1. 变量名比等号右侧的值少,且没有其他特殊处理的话，多出的值会被忽略
let [a,b,c] = [10,15,17,23,31] //结果:a 10 b 15 c 17
// 2. 变量名比等号右侧的值多,多出的变量名值为undefined
let [a1,b1,c1] = [10,15] // 结果：a1 10 b1 15 c1 undefined
// console.log(c1);
// 3. 剩余运算符(...) ,会将剩下的值以数组的方式存储到c2变量中
let [a2,b2,...c2] = [10,15,17,23,31] //结果:a2 10 b2 15 c2
console.log(c2);
// 4. 默认值,当等号左侧的变量设置了默认值，在等号右侧又可以找到匹配的值，那么变量的值使用等号右侧匹配的值
let [a3,b3,c3='default'] = [10,15,'zhangsan']
console.log(c3); // 结果:zhangsan
let [test = 12] = [undefined];
console.log(test); // 结果为 12
let [test1 = 12] = [null];
console.log(test1); // 结果为 null
</script>
</body>
</html>

<!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>
</head>
<body>
<script>
// js中如何定义对象,对象中有属性和值() 属性名:值
// let obj = {
// name:"张三",
// age:18,
// sex:1,
// study:function(){}
// }
// // 使用对象中的某个值对象名称.属性名
// obj.age // 访问对象中的属性
// obj.study() // 调用方法
/*
对象的解构赋值
a. 等号左侧要使用花括号({})包裹变量名
b. 变量名要和对象中要要解构的属性名保持一致
c. 等号右侧就是要解构的对象
*/
let obj1 = {
name:"张三",
age:18,
sex:1,
study:function(){}
}
let {name,age} = obj1
console.log(name);
</script>
</body>
</html>

<!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>
</head>
<body>
<script>
/*
运算符:帮助我们完成业务逻辑
运算符的分类
算术运算符
+ - * / % ++ --
比较运算符
> < >= <= != == !== ===
问:= == ===的作用(区别)
= 表示赋值 ,就是把等号右边赋值给等号左边的变量
== 表示比较,如果两边的值相等,返回true,否则返回false,忽略数据类型
=== 表示比较两边的值和数据类型都相同时,返回true,否则返回false
赋值运算符
= += -= *= /= %=
a+=b 等价于 a = a+b
逻辑运算符大多数情况都会用在条件里边
&& 只有当两边的条件都为真时,整体返回true,其他情况全返回false
|| 只有当两边的条件都为假时,整体返回false,其他情况全返回true
! 非真即假非假即真
字符串拼接运算变量和字符串拼接
+
5+5 // 10
10+'5' // 105
三元运算符
条件?条件为真的执行:条件为假的执行
*/
// 取余运算 %
// ++ -- 注意:参与运算的是一个变量
var num = 10
// ++num 和 num++ 对于num这个变量来讲没有任何区别
// var res = ++num // num = 11 res = 11
var res = num++ // num = 11 res = 10
</script>
</body>
</html>

<!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>
</head>
<body>
<script>
// 指数运算符符号 **
// 5的3次方
console.log( 5**3);
// 指数赋值运算符符号 **=
var a = 2;
a**=4 // 等价于 a = a**4
console.log(a);
</script>
</body>
</html>

m0_62077482

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
作业，笔记

<!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>点击换...
复制链接

扫一扫