2022-07-12 第二组 张宁杰 JavaScript02学习笔记
JavaScript02
今日重点
1. switch...case语句的使用（如何计算今天是今年的第几天）
点击查看代码
function getCountDays(year,month,day){
let count = 0;
switch (month) {
case 12:
count += 30;
case 11:
count +=31;
case 10:
count +=30;
case 9:
count +=31;
case 8:
count +=31;
case 7:
count +=30;
case 6:
count += 31;
case 5:
count += 30;
case 4:
count += 31;
case 3:
count += (isRun2(year) ? 29 : 28);
case 2:
count += 31;
break;
case 1:
count += day;
break;
default:
break;
}
return count;
}
function isRun2(year){
switch (year % 400) {
case 0:
return true;
default:
if(year%4 == 0 && year%100 !=0){
return true;
}
return false;
}
}
2. 循环
3. 事件
4. 省市区三级联动
学习心得
今日学习的省市区三级联动难度较高，对于现阶段的我们来说，是一个富有挑战性的项目，但是在张鑫同学的帮助下，我成功解决了难题。
学习内容
1. 循环（4种）
for循环标准形式
for (let i = 0; i < 10; i++) {
const element = array[i];
}
- a.i可以看做一个局部变量
- b.循环条件可以根据实际情况更改
- c.当修改循环条件时，要确保循环可以朝着终点前进
- d.开发中，要尽量避免死循环
1.1死循环：
死循环的几种形式
for(let i = 0; i < 10)
for(let i = 0;;i++)
for(let i = 0;;)
while(true){}
do()while(true);
1.2判断一个数在数组中是否存在
如果存在，返回它的下标如果不存在，返回-1
是否存在
function exists(num,array) {
for (let i = 0; i < array.length; i++) {
let ext = -1;
if (num == array[i]) {
console.log(i);
}
}
return ext;
}
console.log(exists(10,arr));
1.3for in：
可以理解为a是arr数组的下标通过映射给a
for in
for(let a in arr) {
console.log(arr[a]);
}
1.4do...while
do...while循环,let a 初始化条件;do做什么事,log循环体,a > 100判断条件,a++循环条件.
do..while和while的区别：
do..while先执行一次，再判断，无论条件是否成立，至少执行一次while。如果条件不成立，一次都不运行。
2.JS的内置函数
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():取出指定位置的字符
2.indexOf：判断指定的字符是否存在，如果存在返回下标
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.三角函数
6.E PI
Date:
1.new Date():获取系统当前时间
2.getDate():返回日期的日1-31
3.getHours():返回时间中的时0-23
4.getMinutes():
5.getSeconds():
6.getTime():获取系统当前时间
7.getYear():获取年
3.抓取元素
点击查看代码
//根据id去抓取元素
document.getElementById("div1");
console.log(div1);
//根据class抓取html元素，得到的是一堆元素
let divs = document.getElementsByClassName("div1");
console.log(divs[0]);
//根据tag抓取html元素，得到的是一堆元素
let divss = document,getElementsByTagName("div");
console.log(divss[0]);
//新方法
//1.根据选择器去抓取一个元素
let di = document.querySelector('.div1');
console.log(div);
//2.根据选择器抓取全部元素
let dis = document.querySelectorAll('div');
console.log(dis[0]);
let div = document.querySelector("div");
//获取元素内部的文本,不会获取到内部的html标签
console.log(div.innerText);
//获取元素内部的所有内容，包括标签
console.log(div.innerHTML);
//改变元素的内容
div.innerText = "<h1>我是JSlaid</h1>";
div.innerHTML = "<h1>我是JSlaid</h1>";
let input = document.querySelector("input");
input.value = "我是JS放进文本框的"
4.事件的触发
事件就是当我们和HTML标签元素发生交互时产生的行为
onclick：单击事件
ondblclick：双击事件
onblur：失去焦点
onfocus：获得焦点
onchange：改变
onload：加载
5.省市区三级联动
思路：
1.抓取省的下拉菜单，知道你选择了哪个省
2.判断选择了哪个省
3.构建市的下拉菜单选项
4.抓取市的下拉菜单
区的注意事项：
1.初始状态区没有选项的
2.选择了省，区没有选项
3.选择了省，选择了市，选择了区，切换了一下省
掌握情况
对循环语句的掌握较好，但是对网页抓取元素的方法掌握不够熟练
