一、循环 (掌握一般)
1.for循环
for(let i = 0;i < 10;i++){
// // 循环体
console.log(i);
1.let i = 0;初始化条件,当i=0时,循环开始,只走一次,第一次循环开启之前初始化 | a.i可以看做是一个局部变量 |
2.i < 10;判断条件,会和初始化条件配合循环的执行,决定了循环什么时候停止 | b.循环条件是可以根据实际情况更改的 |
3.循环体,循环在重复做什么事情 | c.当修改循环条件时,要确保循环可以向着终点前进去改变 |
4.i++ 循环条件,每次循环体执行完毕让i产生变化 | d.我们在开发中,尽量避免死循环 |
for循环的特殊写法
1.for(;;){}
2. for(let i = 0;;){}
3.for(let i = 0;;i++){ }
4.for(let i = 0; i < 10;){}
练习1
判断一个数在数组中是否存在,如果存在,返回它的下标,如果不存在,返回-1。
let arr = [10,5,9,7,-5,100,257];
function exists(num,array){
let index = -1;
for(let i = 0;i < array.length;i++){
if(array[i] == num){
index = i;
}
}
return index;
}
console.log(exists(100,arr));
当变量的作用域出现了重叠,不要出现重名的情况,尤其是全局和局部,变量最好不好重名
练习2
找出数组中的最大值,可以用三元,可以用if...else..
let arr = [10,5,9,7,-5,100,257];
let max = arr[0];
for(let i = 0;i < arr.length;i++){
if(max < arr[i]){
max = arr[i];
}
}
console.log("最大值为:" + max);
2.for in循环
let arr = [1,2,3,4,5];
// for in语句,能做得事情较少,只能做遍历操作
// 可以理解为a是arr数组的下标通过映射给a
for(let a in arr){
console.log(arr[a]);
}
3.while循环
while循环的执行流程:
- 初始化条件
- 判断条件
- 执行循环体
- 自增
while循环与for循环 的区别
while循环 | for循环 |
初始化条件不好控制 | 每个for循环的初始化条件都是隔离的 |
循环条件不好控制 | 每个for循环的a++都是隔离的 |
写函数时,返回值便于管理 |
练习
今年是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());
4.do...while循环
let a = 10;
do {
console.log(a);
a++;
} while (a > 100);
二、内置函数(需要巩固)
Array:
1.concat()连接
2.join('-')设置分隔符连接数组为一个字符串
3.pop()删除最后一个元素
4.sort()排序,从小到大排序
Global:
1.isNaN():判断一个值是不是数字
2.parseFloat():把一个整数转换成小数
3.parseInt():把一个小数转成整数,取整
4.number():把一个值转成number类型
5.string():把其他类型转成字符串110 120 119
String:
1.charAt(1):取出指定位置的字符
2.indexOf('a'):判断指定的字符是否存在,如果存在返回下标,如果不存在,返
3.lastIndexOf('a'):从后往前找
4.replace('a','b'):替换字符串
5.split('-'):根据-去拆分字符串,得到一个数组
6.substring(1,6):字符串截取
Math:
1.ceil()向上取整
2.floor()向下取整
3.round()四舍五入
4.random()随机,生成一个0-1的随机数
5.tan() sin cos cot
6.E PI
Date:
1.new Date();获取系统当前日期
2.getDate():返回日期的日 1~31
3.getHours():返回时间中的时0~23
4.getMinutes():返回时间中的分
5.getSeconds():返回时间中的秒
6.getTime():获取系统当前时间
7.getYear():获取年
三、抓取元素
<input type="text" id="username">
<script>
let input = document.querySelector("input");
input.value = "我是JS放进文本框的";
</script>
1.根据选择器去抓取一个元素
// let div = document.querySelector('.div2');
// console.log(div);
2.根据选择器去抓取全部元素
// let divs = document.querySelectorAll('.div1');
// console.log(divs[0]);
// let div = document.querySelector("div");
// 获取元素内部的文本,不会获取到内部的HTML标签
// console.log(div.innerText);
// 获取元素内部的所有内容,包括HTML标签
// console.log(div.innerHTML);
// 改变元素的内容
// div.innerText = "<h1>我是通过JS来的</h1>";
// div.innerHTML = "<h1>我是JS来的</h1>";
四、事件(掌握良好)
事件就是当我们和HTML标签元素发生交互时产生的行为
onclick: | 单击事件 |
ondblclick: | 双击事件 |
onblur: | 失去焦点 |
onfocus: | 改变 |
onchange: | 加载 |
当设置了对应的事件之后,会执行目标函数,点击按钮,弹出一个弹窗
function jump(a){
alert("按钮被点击了..." + a);
}
function valid(){
console.log("失去了焦点...");
}
function get(){
console.log("获得了焦点...");
}
function change(){
console.log("发生了改变...");
}
function load(){
console.log("已经加载完毕...");
}
五、三级联动(掌握一般)
<select id="sheng" onchange="setshi()">
<option >---请选择省---</option>
<option value="jl">吉林省</option>
<option value="js">江苏省</option>
</select>
<select id="shi" onchange="setqu()">
<option >---请选择市---</option>
</select>
<select id="qu">
<option >---请选择区---</option>
</select>
<script>
function setshi(){
let sheng=document.querySelector("#sheng").value;
let shi=document.querySelector("#shi");
let qu=document.querySelector("#qu");
shi.innerHTML='<option >---请选择市---</option>'
qu.innerHTML='<option >---请选择区---</option>'
let html =shi.innerHTML;
if(sheng=='jl'){
html +='<option value="cc">长春市</option> <option value="yj">延吉市</option>';
shi.innerHTML=html;
}
if(sheng=='js'){
html +='<option value="nj">南京市</option> <option value="sz">苏州市</option>';
shi.innerHTML=html;
}
}
function setqu(){
let shi=document.querySelector("#shi").value;
let qu=document.querySelector("#qu");
qu.innerHTML='<option >---请选择区---</option>'
let html =qu.innerHTML;
if(shi=='cc'){
html +='<option value="ed">二道区</option> <option value="ng">南关区</option>';
qu.innerHTML=html;
}
if(shi=='yj'){
html +='<option value="bd">北大</option> <option value="tn">铁南</option>';
qu.innerHTML=html;
}
if(shi=='nj'){
html +='<option value="qh">秦淮区</option> <option value="xw">玄武区</option>';
qu.innerHTML=html;
}
if(shi=='sz'){
html +='<option value="gs">姑苏区</option> <option value="wj">吴江区</option>';
qu.innerHTML=html;
}
}
总结 :InnerText和innerHTML弊端:会覆盖。
今日收获:对三级联动有了一定的思路,虽然今天的内容有点多,但是有一点收获,今日心情愉悦!