目录
今日重点：文档对象模型DOM、四种循环
知识点掌握情况：了解
学习心得：今天感觉良好，能基本跟上老师的节奏，比之前更有学习的兴趣了。继续加油！
1.1函数名的命名规则
1.1.1小驼峰式
变量一般用小驼峰式标识 除第一个单词之外，其他单词首字母大写
let myStudentCount
1.1.2大驼峰法
常用于类名，属性，命名空间等 每一个单词的首字母都大写
class = "DataBaseUser"
1.2循环
1.2.1 for循环
- let i = 0; 初始化条件，当i=0，循环开始 只走一次 在第一次循环的时候初始化
- i < 10; 判断条件 会和初始化条件配合循环的执行
- 循环体：循环在重复做什么事情
- i++ 循环条件 每次循环体执行完毕让i产生变化
for(let i = 0;i <10; i++){
console.log(i);
}
注意:
- i可以看做是一个局部变量
- 循环条件可以根据实际情况更改的
- 当修改循环条件时，要确保循环可以向着终点前去改变
- 开发时，要避免死循环
1.2.2 for in 循环
for in语句 只能做遍历操作
可以理解为a是arr数组的下标通过映射给a
let arr = [1,2,3,4,5];
for(let a in arr){
console.log(arr[a]);
}
1.2.3 while循环
语法:
while(a < 100){ //循环判断语句
let a = 10; //初始化条件
console.log(a); //循环体
a++; //循环条件
}
while 如果条件不成立，一次都不执行
练习：
公司有10个人 每年公司会以百分之10的比重招人
问：哪一年公司人数突破100人 （今年是2022年）
<script>
function count(b, year) {
while (b < 100) {
b *= 1.1;
year += 1;
}
console.log(year + "年突破" + b);
}
count(10, 2022);
</script>
1.2.4 do...while循环
语句:
let a = 10; //初始化条件
do {
console.log(a); //循环体
a++; //循环条件
} while(a < 100);
do...while先执行一次，再判断 无论条件是否成立，都执行一次
死循环：
for(;;){}
while(true){}
do{}while(true);
1.3 DOM(重点)
1.DOM是文档对象模型：当网页被加载时，浏览器会创建页面的文档对象模型。
2.通过 DOM，可访问 JavaScript HTML 文档的所有元素。
1.3.1通过抓取HTML元素
<body>
<div class="div1" id="div1">
<div class="div2" id="div2"></div>
</div>
<script>
//1.通过id抓取
let div1 = document.getElementById("div1");
//2.根据class抓取HTML元素
let div1 = document.getElementsByClassName("div1");
//3.根据tag(标签)来抓取HTML元素
let div1 = document.getElementsByTagName("div");
//新方法
// 1.根据选择器去抓取第一个元素
let div = document.querySelector(".div1");
// 2.根据选择器去获取全部元素
let divs = document.querySelectorAll(".div1");
//获取元素内的所有内容，包括HTML标签
console.log(div.innerHTML);
//获取元素内的文本 不会获取到内部的HTML标签
console.log(div.innerText);
//改变元素的内容
div.innerText = "<b>我是加粗的</b>";
console.log(div.innerText);
</script>
</body>
1.3.2改变元素的内容
<body>
//改变元素的内容
div.innerText = "<b>我是加粗的</b>";
console.log(div.innerText);
</script>
</body>
1.4事件
事件是您在编程时系统内发生的动作或者发生的事情，系统响应事件后，如果需要，您可以某种方式对事件做出回应。
不要出现双引号套双引号 要么双引号套单引号 要么单引号套双引号
<body>
<input type="text" onblur="valid()">
<button type="button" ondblclick="jump('你好')">按钮</button>
<select onchange="change()">
<option value="">吉林省</option>
<option value="">辽宁省</option>
</select>
<script>
//事件就是当我们和HTML标签元素发生交互时产生的行为
/*
onclick 单击事件
ondblclick 双击事件
onblur 失去焦点
onfocus 获得焦点
onchange 改变事件
onload 加载事件
*/
//当设置了对应的事件之后，会执行目标函数
//点击按钮，弹出一个弹窗
function jump(a) {
alert("按钮被点击了" + a);
}
function valid() {
console.log("失去了焦点");
}
function change() {
console.log("发生了改变");
}
</script>
</body>
1.5练习
<script>
// 需求 当用户名为admin 密码为123456时，提示登录成功
// 否则，提示用户名或者密码错误
/*
思路:给按钮添加单击按钮
当点击提交时，获取用户名和密码框输入的值
然后进行判断 if()登录成功else用户名或者密码错误!
*/
let text = document.querySelector("#username");
let password = document.querySelector("#password");
function jump() {
// value 拿用户名框输入的内容
if (text.value == "admin" && password.value == "123456") {
console.log("登录成功");
alert("登录成功");
} else {
console.log("用户名或者密码错误!");
alert("用户名或者密码错误!");
}
}
</script>
<script>
/*
在用户名的文本框都输入用户名
如果用户名为admin, 在span显示用户名已被占用
否则,显示用户名可用
分析:
需要给文本框添加onchange onblur
输入函数需要想span中写入内容 innerText innerHTML
*/
let input = document.querySelector("#username");
let span = document.querySelector("span");
function ll() {
if (input.value == "admin" || " ") {
span.innerText = "用户名已被占用";
} else {
span.innerText = "用户名可用";
}
}
</script>
<body>
<select id="sheng" onchange="setShi()">
<option>----请选择省----</option>
<option value="jl">吉林省</option>
<option value="ln">辽宁省</option>
</select>
<select id="shi" onchange="setQu()">
<option>----请选择市----</option>
</select>
<select id="qu">
<option>----请选择区----</option>
</select>
<script>
function setShi() {
/*
思路:
1.抓取省的下拉菜单，知道你选择了哪个省
2.判断选择了哪个省
3.构建市的下拉菜单选项
4.抓取市的下拉菜单
区的注意事项:
1.初始状态区没有选项
2.选择了省、区没有选项
3.选择了省、选择了市，选择了区，切换了一下省
*/
let sheng = document.querySelector("#sheng").value
let shi = document.querySelector('#shi');
let qu = document.querySelector("#qu");
//在写入选项之前，先清空一次
shi.innerHTML = null;
qu.innerHTML = null;
shi.innerHTML = '<option>----请选择市----</option>';
qu.innerHTML = '<option>----请选择区----</option>';
let html = shi.innerHTML;
let html1 = qu.innerHTML;
if (sheng == 'jl') {
//追加
html += '<option value="cc">长春市</option><option value="sp">四平市</option>';
//把拼接好的下拉菜单选项通过innerHTML放回到下拉菜单选项
shi.innerHTML = html;
}
if (sheng == 'ln') {
//追加
html += '<option value="sy">沈阳市</option><option value="dl">大连市</option>';
//在写入选项之前，先清空一次
//把拼接好的下拉菜单选项通过innerHTML放回到下拉菜单选项
shi.innerHTML = html;
}
}
function setQu() {
let shi = document.querySelector('#shi').value;
let qu = document.querySelector("#qu");
qu.innerHTML = null;
qu.innerHTML = '<option>----请选择区----</option>';
let html1 = qu.innerHTML;
if (shi == 'cc') {
html1 += '<option value="ed">二道区</option><option value="ng">南关区</option>';
qu.innerHTML = html1;
}
if (shi == 'sp') {
html1 += '<option value="tx">铁西区</option><option value="td">铁东区</option>';
qu.innerHTML = html1;
}
if (shi == 'sy') {
html1 += '<option value="hp">和平区</option><option value="hg">皇姑区</option>';
qu.innerHTML = html1;
}
if (shi == 'dl') {
html1 += '<option value="zs">中山区</option><option value="">西岗区</option>';
qu.innerHTML = html1;
}
}
</script>
</body>
