标签：12 qu 07 innerHTML 循环 let 2022 shi document
目录今日重点：文档对象模型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 改变事件
onl oad 加载事件
*/
//当设置了对应的事件之后，会执行目标函数
//点击按钮，弹出一个弹窗
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>标签：12,qu,07,innerHTML,循环,let,2022,shi,document 来源： https://www.cnblogs.com/laizhedong/p/16471852.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。