长春人文学院第四组孙乃宇https://www.cnblogs.com/sunnaiyu/js dom

循环

for循环

1. 语法

//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]);
        }

1. 数组的长度：就是数组中有几个元素

2. 把数组中的每个元素都操作一遍叫做数组的遍历 迭代

for in 循环

1. 语法

for(let a in arr){
    console.log(a);
}

2. 用于遍历数组

while循环

while循环

1. while

let a=10;
while(条件表达式a<100){
      console.lot("while循环")
        a++;
      }

2. 执行流程

   1. let a=10初始化条件

   2. a<100判断条件

   3. 执行循环体

   4. 步进表达式

do while 循环

1. 语法

let a=10;//初始化条件
do{
    //做什么事
    a++;//步进表达式
}while(a>100)

2. do while 和 while 的区别

   1. do while 是先执行一次在判断，

   2. while循环是条件不成立一次都不走

3. js 的内置函数

   1. concat :连接数组

   2. join:设置分隔符连接数组为一个字符串

   3. pop：删除数组的最后一个元素

   4. parseInt():将小数转为整数（取整）不是四舍五入

   5. number():将一个数转为number类型

   6. parseFloat():将一个数转为小数

   7. string():把其他类型转为字符串

   8. charAt():取出指定位置的字符

   9. indexOf():判断指定的字符是否存在，存在就返回下标

   10. lastIndexOf:从后往前找

   11. replace(‘a’，‘b’):替换字符串

   12. split("-");根据参数去拆分字符串得到数组

   13. subString(1，6):根据参数下标进行字符串的截取

   14. cell():向上取整

   15. floor:向下取整

   16. round:四舍五入

   17. random:生成一个0-1的随机数

   18. getdata:返回日期的日 1-31 号

   19. getHourse():返回时间的小时

   20. getMinutes():返回时间的分

   21. getSeconds():返回时间的秒

   22. getTime():返回当前时间

获取控件

1. 方法

   1. document.getElementById:根据id获取控件
   2. document.getElementsByClassName:根据class获取控件
   3. document.getElementsByTagName:根据标签获取控件

2. 新方法：

   document.querySelector("可放id class 标签")//返回单个控件
   //如果相同class名称的控件有多个，默认选中第一个
   document.quarySelectorAll("可放id class 标签")//返回控件数组
   //获得单个控件需要如获取数组元素方法

3. 获取控件的元素：

<input type"text" id="username">
    <script>
    	let username=document.querySelector("#username");
		username.value//获取控件的值 还可以设置控件的value
		username.innerHTML//添加代码
    </script>

练习

• 实现地区下拉条 ，三级下拉菜单连接

• 思路：为第一个和第二个下拉菜单添加onchange=""事件，获取下拉菜单控件，当控件中的值发生改变，就改变下一级的值

• 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>

• 难点：当改变省时，市和区都需要改变，改变市的时候区也需要改变