一、数组
//数组是一种有序的数据格式.(纯对象是无序的)
用arr存储了3个数据,1,2,3
const arr = [1,2,3];
let x = 1;
let y = 2;
let z = 3;- 创建数组方法
1.let arr = [1, 2, 3];
2.let arr = new Array(1, 2, 3);// class01表示一个数组.
// '张三', '王五', '李四', '赵六 => 数组的成员(元素).
// 每个元素之间用,隔开. 书写时,后面有空格.
const class01 = ['张三', '王五', '李四', '赵六'];
// 通过下标(索引)来访问数组的元素.
// 数组的下标默认从0开始,依次+1.
// 下标 => 元素的门牌号.
console.log(class01[3]);
console.log(class01[2]);
console.log(class01[1]);
console.log(class01[0]);
- 数组的长度（.length）
// length属性表示数组的元素个数.（也是数组的长度）
console.log(class01.length);增删改查
增 => 数组[下标] = 新的值
改 => 数组[下标] = 新的值
查 => 数组[下标]
// 在最后的位置插入一个新元素.
class0621[4] = '小陈';
// 5-9的位置没有元素.这时数组的length是11而不是6.有5个空的元素.
class0621[10] = '小邓';
// 不存在的元素,空的元素,返回undefined.(访问对象不存在的属性也是undefined)
console.log(class0621[5]);
// 修改第一个元素
class0621[0] = '小张';二、获取元素
<body>
<div>111</div>
<div>222</div>
<div>333</div>
<div>444</div>
<div>555</div>
</body>querySelectorAll参数是选择器 => 获取匹配选择器的所有元素.
然后返回一个存储着这些元素的数组.
aDiv就是一个存储着5个div的数组.
- 单个标签推荐o开头,数组推荐用a开头.
const aDiv = document.querySelectorAll('div');
- 通过aDiv可以访问所有的标签
console.log(aDiv);
- 通过下标访问对应的标签
console.log(aDiv[2]);
- 通过下标修改指定标签样式.
aDiv[2].style.backgroundColor = 'red';
- 获取的标签个数
console.log(aDiv.length);
不能通过aDiv新增元素来在页面上新增标签。
页面上不会多出一个标签。
aDiv[5] = '<div>666</div>';
三、其他获取元素方法
<body>
<div>111</div>
<div>222</div>
<div class='active'>333</div>
<div class='active'>444</div>
<div>555</div>
</body>
- getElementsByTagName 的参数是标签名.
- 能够获取指定标签的元素.
- document.getElementsByTagName('div') => 只获取div标签
const aDiv = document.getElementsByTagName('div');
console.log(aDiv.length);
- 获取匹配选择器.active的所有标签。
const aActive = document.querySelectorAll('.active');
console.log(aActive);
getElementsByClassName => 参数是类名.
const aBox = document.getElementsByClassName('active');
console.log(aBox);
四、获取元素
<body>
<div>
<input class='active' type="text" />
<input class='active' type="text" />
<input class='active' type="text" />
<input class='active' type="text" />
<input class='active' type="text" />
<p class='active'>pppp</p>
</div>
<div>
<input class='active' type="text" />
<input class='active' type="text" />
</div>
</body>如果想要获取第一个div内的5个input，那么我们要怎么去获取?
- document => 整个页面
- document.querySelectorAll('[type="text"]') => 在整个页面中找input
const aInput = document.querySelectorAll('[type="text"]');
console.log(aInput);// 7个
const aDiv = document.querySelectorAll('div');
- 在第一个div中找input
const aIn = aDiv[0].querySelectorAll('input');
console.log(aIn);// 5个
- 在第一个div中找input标签
const aIn = aDiv[0].getElementsByTagName('input');
console.log(aIn);// 5个
- 在第一个div中找类是active的标签.
const aIn = aDiv[0].getElementsByClassName('active');
console.log(aIn);// 5个
五、单个元素的数组
<body>
<div>11111</div>
</body> // document.getElementsByClassName('active');
// document.getElementsByTagName('div');
const aDiv = document.querySelectorAll('div');
// 只有一个元素,aDiv也是一个数组
console.log(aDiv);// 访问唯一的元素,也必须添加下标.
// 通过下标修改标签背景色
// aDiv[0].style.backgroundColor = 'red';
// 修改数组的style属性的backgroundColor属性
// 数组是没有style属性的,隐藏style属性是undefined.
// 通过undefined修改backgroundColor属性,会报错.
// Cannot set property 'backgroundColor' of undefined(报错信息)
aDiv.style.backgroundColor = 'red';
console.log(aDiv.style);六、循环
循环 => 批量处理相同的代码逻辑 => 可以减少重复的代码。
- 语法 => for (表达式1; 表达式2; 表达式3) { 重复执行的代码 }
- 循环什么时候会停止? => 表示式2返回false,循环就停止.返回true就一直循环.
- 永远停不下来的循环 => 死循环.
console.log(100);
console.log(100);
console.log(100);
console.log(100);
console.log(100);//列如几段没有用for循环来优化，则会出现很多的重复代码
- 表达式1 => 从几开始数数
- 表达式2 => 数到几
- 表达式3 => 几个几个数
- let i = 0 => 从0开始数
- i < 5 => 数到4
- i++ => 一个一个数
for (let i = 0; i < 5; i++) {
console.log(100);
}for (let i = 10; i < 15; i++) {
console.log(100);
}for (let i = 10; i < 20; i += 2) {
console.log(100);
}for (let i = 15; i > 10; i--) {
console.log(100);
} // 从20开始倒着数,每次数-2.
for (let i = 20; i > 10; i -= 2) {
console.log(100);
}七、循环计数
以下三种形式，前两种是用简单的硬代码来写最后一种用for循环，可想而知使用for循环代码量的简化也会大大提高了工作效率。
// console.log(100);
// console.log(200);
// console.log(300);
// console.log(400);
// console.log(500);
//硬代码
// let i = 1;
// console.log(100 * i);
// i++;
// console.log(100 * i);
// i++;
// console.log(100 * i);
// i++;
// console.log(100 * i);
// i++;
// console.log(100 * i);
// 循环中的变量i => 循环计数
// 每次循环,i的值都会变化.
// i的值如何变化,取决于第三个表达式.
for (let i = 1; i < 6; i++) {
console.log(i);// 1,2,3,4,5
console.log(100 * i);
} let arr = ['张三', '李四', '王五', '赵六'];
// console.log(arr[0]);
// console.log(arr[1]);
// console.log(arr[2]);
// console.log(arr[3]);
// let i = 0;
// console.log(arr[i]);
// i++;
// console.log(arr[i]);
// i++;
// console.log(arr[i]);
// i++;
// console.log(arr[i]);
for (let i = 0; i < 4; i++) {
console.log(arr[i]);
} //硬代码表示方式
console.log('你1');
console.log('我2');
console.log('他3');
console.log('你4');
console.log('我5');
console.log('他6');
console.log('你7');
console.log('我8');
console.log('他9'); let arr = ['你', '我', '他'];
for (let i = 1; i < 10; i++) {
console.log(arr[(i-1) % 3] + i);
}
for (let i = 0; i < 3; i++) {
console.log('你' + (i * 3 + 1));
console.log('我' + (i * 3 + 2));
console.log('他' + (i * 3 + 3));
}
for (let i = 1; i < 10; ) {
console.log('你' + i++);
console.log('我' + i++);
console.log('他' + i++);
}八、循环时如何运行的
for (表达式1;表达式2;表达式3) { 表达式4 };
以上表达式的执行顺序如何的?
表达式1 => 表达式2 => 表达式4 => 表达式3 => 表达式2 => 表达式4 => 表达式3 => .... => 直到表达式2返回false...
for (let i = 0; i < 3; i++) {
console.log(i);// 0,1,2
} //硬代码表示方式
let i = 1;
i < 10;
console.log('你' + i++);
console.log('我' + i++);
console.log('他' + i++);
i < 10;
console.log('你' + i++);
console.log('我' + i++);
console.log('他' + i++);
i < 10;
console.log('你' + i++);
console.log('我' + i++);
console.log('他' + i++); // i < 10 => false 停止循环打印
for (let i = 1; i < 10;) {
console.log('你' + i++);
console.log('我' + i++);
console.log('他' + i++);
}九、continue
continue => 跳过当前循环，继续后面的循环。
let arr = [1,2,3,4,5];
for (let i = 0; i < 5; i++) {
if (i == 2) {
// 跳过当前循环，不执行continue后面的代码。后续循环还继续执行。
continue;
}
console.log(arr[i]);
}硬代码表示方法。
let i = 0;
if (i != 2) {
console.log(arr[i]);
}
i++;
if (i != 2) {
console.log(arr[i]);
}
i++;
if (i != 2) {
console.log(arr[i]);
}
i++;
if (i != 2) {
console.log(arr[i]);
}
i++;
if (i != 2) {
console.log(arr[i]);
}十、break
break => 终止整个循环。
let arr = [1,2,3,4,5];
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
// 下标是2时，就终止整个循环。(提前结束循环)
if (i == 2) {
break;
}
}当一个死循环一直循环时，可以用上break来直接终止整个循环。
for (;;) {
// 返回true表示用户点击确定，返回false表示用户选择取消
let flag = confirm('你喜欢我吗?');
// 如果用户点击确定,就终止这个死循环.
if (flag) {
alert('我也喜欢你');
break;
}
}十一、循环处理DOM
<style>
div{
width: 200px;
height: 200px;
border:1px solid #000;
}
</style>
</head>
<body>
<button id='btn1'>隐藏div</button>
<button id='btn2'>改变颜色</button>
<div id='div1' style="display:none">11111</div>
<div id='div2' style="display:block">22222</div>
</body><script>
// 点击 第一个按钮,隐藏显示的div.显示被隐藏的div.(谁显示隐藏谁,谁隐藏显示谁)
// 点击 第二个按钮,把显示的div的背景改成红色.隐藏的div的背景色清空.(白色)
const aBtn = document.querySelectorAll('button');
const aDiv = document.querySelectorAll('div');
aBtn[0].onclick = function() {
// 循环两个div设置隐藏或显示
for (let i = 0; i < aDiv.length; i++) {
if (aDiv[i].style.display === 'none') {
aDiv[i].style.display = 'block';
} else if (aDiv[i].style.display === 'block'){
aDiv[i].style.display = 'none';
}
}
}
aBtn[1].onclick = function() {
// 循环两个div设置背景色
for (let i = 0; i < aDiv.length; i++) {
if (aDiv[i].style.display === 'block') {
aDiv[i].style.backgroundColor = 'red'
} else if (aDiv[i].style.display === 'none') {
aDiv[i].style.backgroundColor = ''
}
}
}
</script>十二、循环添加事件
<body>
<ul>
<li>11111</li>
<li>22222</li>
<li>33333</li>
<li>44444</li>
<li>55555</li>
<li>66666</li>
</ul>
</body>for循环表达方式
<script>
// 点击每个li,都弹他自己的内容.
const aLi = document.querySelectorAll('li');
for (let i = 0; i < aLi.length; i++) {
aLi[i].onclick = function() {
alert(aLi[i].innerText)
}
}
</script>硬代码表达方式
aLi[0].onclick = function() {
alert(aLi[0].innerText)
}
aLi[1].onclick = function() {
alert(aLi[1].innerText)
}
aLi[2].onclick = function() {
alert(aLi[2].innerText)
}
2364
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
