循环
for循环
- 语法
//1.int i=0; 初始化条件
//2.i<10 判断条件 会和初始化条件结合使用 决定了循环什么时候停止
//4.i++ 循环条件 每次循环体执行完毕 会让i产生变化
//i可以看作是一个局部变量
for(int i=0;i<10;i++){
//3.循环体:循环在重复做的事情
}
- 注意:当修改循环条件时 确保循环可以向着终点前进
- 我们在开发中尽量避免死循环
- 初始化条件只走一次
for循环的特殊写法(死循环)
//死循环
for(let i=0;i<10){
console.log("i");
}
//死循环
for(let i=0;i++){
console.log("i")
}
//死循环
for(let i=0){
console.log("i")
}
//死循环
for(;;){
console.log("i")
}
for循环结合数组
let arr=[0,1,2,3,4,5,6,7,8]
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
- 数组的长度:就是数组中有几个元素
- 把数组中的每个元素都操作一遍叫做数组的遍历 迭代
for in 循环
- 语法
for(let a in arr){
console.log(a);
}
- 用于遍历数组
while循环
while循环
- while
let a=10;
while(条件表达式a<100){
console.lot("while循环")
a++;
}
- 执行流程
- let a=10初始化条件
- a<100判断条件
- 执行循环体
- 步进表达式
do while 循环
- 语法
let a=10;//初始化条件
do{
//做什么事
a++;//步进表达式
}while(a>100)
- do while 和 while 的区别
- do while 是先执行一次在判断,
- while循环是条件不成立一次都不走
- js 的内置函数
- concat :连接数组
- join:设置分隔符连接数组为一个字符串
- pop:删除数组的最后一个元素
- parseInt():将小数转为整数(取整)不是四舍五入
- number():将一个数转为number类型
- parseFloat():将一个数转为小数
- string():把其他类型转为字符串
- charAt():取出指定位置的字符
- indexOf():判断指定的字符是否存在,存在就返回下标
- lastIndexOf:从后往前找
- replace(‘a’,‘b’):替换字符串
- split(“-”);根据参数去拆分字符串得到数组
- subString(1,6):根据参数下标进行字符串的截取
- cell():向上取整
- floor:向下取整
- round:四舍五入
- random:生成一个0-1的随机数
- getdata:返回日期的日 1-31 号
- getHourse():返回时间的小时
- getMinutes():返回时间的分
- getSeconds():返回时间的秒
- getTime():返回当前时间
获取控件
-
方法
1. document.getElementById:根据id获取控件 2. document.getElementsByClassName:根据class获取控件 3. document.getElementsByTagName:根据标签获取控件
-
新方法:
document.querySelector("可放id class 标签")//返回单个控件 //如果相同class名称的控件有多个,默认选中第一个 document.quarySelectorAll("可放id class 标签")//返回控件数组 //获得单个控件需要如获取数组元素方法
-
获取控件的元素:
<input type"text" id="username">
<script>
let username=document.querySelector("#username");
username.value//获取控件的值 还可以设置控件的value
username.innerHTML//添加代码
</script>
练习
-
实现地区下拉条 ,三级下拉菜单连接
-
思路:为第一个和第二个下拉菜单添加οnchange=""事件,获取下拉菜单控件,当控件中的值发生改变,就改变下一级的值
-
html代码
<select id="sheng" onchange="setshi()">
<option>请选择省</option>
<option>吉林省</option>
<option>辽宁省</option>
</select>
<select id="shi" onchange="setqu()">
<option>请选择市</option>
</select>
<select id="qu">
<option>请选择区</option>
</select>
- javascript代码
<script>
function setshi(){
let sheng=document.querySelector("#sheng").value;
let shi=document.querySelector("#shi");
let qu=document.querySelector("#qu");
let shiValue =shi.value
let quHtml=qu.innerHTMLh
let html=shi.innerHTML;
if(sheng=='请选择省'){
html="<option>请选择市</option>"
shi.innerHTML=html;
quHtml="<option>请选择区</option>"
qu.innerHTML=quHtml;
}
if(sheng=='吉林省'){
html="<option>请选择市</option><option>长春市</option><option>四平市</option>"
quHtml="<option>请选择区</option>"
qu.innerHTML=quHtml;
shi.innerHTML=html;
}
if(sheng=='辽宁省'){
html="<option>请选择市</option><option>沈阳市</option><option>大连市</option>"
quHtml="<option>请选择区</option>"
qu.innerHTML=quHtml;
shi.innerHTML=html;
}
}
function setqu(){
let sheng=document.querySelector("#sheng").value;
let shiValue =shi.value
let qu=document.querySelector("#qu");
let quHtml=qu.innerHTML
let quValue=qu.value
if(shiValue=='请选择市'){
quHtml="<option>请选择区</option>"
qu.innerHTML=quHtml;
}
if(shiValue=='长春市'){
quHtml="<option>请选择区</option><option>长春宽城区</option><option>长春二道区</option>"
qu.innerHTML=quHtml;
}
if(shiValue=='四平市'){
quHtml="<option>请选择区</option><option>四平铁西区</option><option>四平东铁区</option>"
qu.innerHTML=quHtml;
}
if(shiValue=='沈阳市'){
quHtml="<option>请选择区</option><option>沈阳大东区</option><option>沈阳浑南区</option>"
qu.innerHTML=quHtml;
}
if(shiValue=='大连市'){
quHtml="<option>请选择区</option><option>大连西岗区</option><option>大连沙河口区</option>"
qu.innerHTML=quHtml;
}
}
</script>
- 难点:当改变省时,市和区都需要改变,改变市的时候区也需要改变