目录
循环结构
控制一段代码,反复执行很多次。
一、for循环
控制一段代码,反复执行很多次。
格式:
for (初始化语句;循环条件;迭代语句) {
循环体语句(重复执行的代码);
}
示例
for(let i=0;i<10;i++){
console.log(i);
}
1.1 for循环案例1
A:求1-5之间的数据和,并把求和结果在控制台输出。
分析:
①定义for循环使其能够依次访问到:1、2、3、4、5。
for(let i=1;i<=5;i++){
}
②在循环外定义一个整数变量sum用来累加这些数据。
//为什么要放在外面??只需要一个变量,放到循环外,相当于在外面准备了一个盒子,每次变量到一个数据,就把这个数据加上去。
let sum=0;
for(int i=1;i<=5;i++){
sum+=i;
//把别人的数据加给自己用 += ,循环1就加一给自己。
//sum=sum+i
}
console.log(sum);
③循环结束后,输出球和变量即是结果。
1.2 for循环案例2
A:求1-10之间的奇数和,并把求和结果在控制台输出。
方法一:
①定义for循环使其能够依次访问到:1、2、3、4、5.....10。
②在for循环中,通过 if 筛选出奇数
for (let i = 1; i <=10; i++) {
if( i % 2 == 1){
//i=1,3,5,7..
}
}
③在循环外定义一个整数变量sum用来累加这些数据。
let sum=0;
for (let i = 1; i <=10; i++) {
if( i % 2 == 1){//求偶数,就i % 2 == 0
sum+=i;
//i=1,3,5,7..
}
}
console.log(sum);
方法二:
①定义for循环使其能够依次访问到:1、2、3、4、5、7、9
for (let i = 1; i <=10; i+=2) {
}
②在循环外定义一个整数变量sum用来累加这些数据。
let sum=0;
for (let i = 1; i <=10; i+=2) {//求偶数,i就等于2
sum+=i;
}
console.log(sum);
二、while循环
初始化语句:
while(循环条件){
循环体语句(被重复执行的代码);
迭代语句;
}
什么时候用for循环?什么时候用while循环?
• 功能上完全一样,for能解决的while也能解决,反之亦然。
• 使用规范:知道循环几次:使用for;不知道循环几次建议使用:while。
while循环案例1
今年是2022年,公司有10个人, 每年公司会以百分之10的比重招人,问:哪一年公司人数突破100人。
代码如下(示例):
function count(){
let year = 2022;
let sum = 10;
while(sum <= 100) {
sum *= 1.1;
year++;
}
return year + "年人数超过了100人,人数是:" + sum;
}
// 需求就是最后我要打印输出哪一年超过了100人,人数是:xxxx
console.log(count());
三、do-while循环
先执行再判断循环条件。
do-while循环的特点:一定会先执行一次循环体
初始化语句;
do {
循环体语句;
迭代语句;
}while (循环条件);
三种循环的区别:
🟢for循环和while循环(先判断后执行)
🟢do...while(第一次先执行后判断)
for和while的区别:
🟢for循环和while循环的执行流程是一模一样的。
🟢如果已知循环次数建议使用for循环,如果不知道循环几次建议使用while循环。
🟢for循环中,控制循环的变量旨在循环中可以使用。while循环中,控制循环的变量旨在循环后还可以继续使用。
四、死循环
一直循环的执行下去,如果没有干预不会停止下来。
for(;;){
console.log("a");
}
//经典做法
while(true){
.......
}
do{
.....
}while(true);
五、抓取元素
根据id去抓取HTML元素
let div1 = document.getElementById("div1");
console.log(div1);
根据class抓取HTML元素,得到的时一堆元素
let divs = document.getElementsByClassName("div1");
console.log(divs[0]);
根据tag抓取HTML元素,得到的是一堆元素
let divs = document.getElementsByTagName("div");
console.log(divs[0]);
新方法
根据选择器去抓取一个元素
let div = document.querySelector('.div2');
console.log(div);
根据选择器去抓取全部元素
let divs = document.querySelectorAll('.div1');
console.log(divs[0]);
改变元素的内容
div.innerText = "<h1>我是通过JS来的</h1>";
div.innerHTML = "<h1>我是JS来的</h1>";
六、事件
事件就是当我们和HTML标签元素发生交互时产生的行为
onclick:单击事件
ondblclick:双击事件
onblur:失去焦点
onfocus:获得焦点
onload:加载
当设置了对应的事件之后,会执行目标函数
点击按钮,弹出一个弹窗
function jump(a){
alert("按钮被点击了..." + a);
}
function valid(){
console.log("失去了焦点...");
}
function get(){
console.log("获得了焦点...");
}
function change(){
console.log("发生了改变...");
}
function load(){
console.log("已经加载完毕...");
}
总结
以上就是今天主要学习的循环结构、事件、抓取元素。本文仅仅简单介绍了循环结构、事件、抓取元素的使用。总的来说我基本了解,想要完全了解还需要更多的项目案例进行巩固。