一、操作语句之for 循环

1、应用环境

当需要按照某种规律重复的去一件事情的时候，就需要用for循环

2、基础语法

2-1、想要依次打印出下面的语法

var ary=[1,2,3];
for (var i=0;i<ary.length;i++){
     console.log(ary[i]);
}
复制代码

定义初始值
制定循环条件，只要条件成立就会执行循环体中的内容
循环体（大括号就是循环体）
定义的初始值累计操作

2-2、把下面的数组从后到前依次打印出来

var ary=[1,2,3,4];
for(var i=ary.length-1; i>=0;i--){
    console.log(ary[i]);
}
复制代码

2-3、打印所有的奇数项

var ary=[1,2,3,4];
for(var i=0;i<ary.length;i++){
       //i=0   第一项 
       //i=1   第二项
       //i=3   第三项
       // 索引是偶数的话，就是奇数项，只用判断索引，并取相反的值
       //i%2==0 的时候就是偶数项
       if(i%2==0){
           console.log(ary[i]);
       }
}
复制代码

3、两个重要的关键词

continue：结束本次循环，继续下一轮循环
break：强制结束整个循环

3-1、案例解说具体含义

for(var i=0;i<10;i++){
       if(i<5){
          i++;//
          continue;
       }
       if(i>7){
          i+=2;
          break;
       }
       i+=1;
}
console.log(i);
复制代码

3-2、练习题

下面的案例，最终打印的是几？打印几次

for(var i=1;i<=10;i+=2){
       if(i<=5){
          i++;//
          continue;
       }else{
          i-=2;
          break;
       }
       i--;
       console.log(i);
       
}
console.log(i);
复制代码

二、开关灯案例:

1、【相关知识铺垫】

1-1、元素包含的常用属性：

className: 存储的是字符串，代表当前元素的类名
id：存储的是字符串，代表当前元素的id名
innerHTML：存储当前元素的所有内容，包含标签
innerText：存储当前元素的文本内容
style：存贮当前元素的所有行内样式
onclick：点击事件属性
onmouseover：鼠标滑过事件
onmouseout：鼠标离开事件

1-2、通过id 获取一个元素：document.getElementById(“id名字”)

<div id="box1">box1</div>
<script>
   var Obox1=document.getElementById("box1");
   console.log(Obox1)
</script>
复制代码

1-3、通过标签名去获取一类标签:[context].getElementsByTagName;

var olis=document.getElementsByTagName("li"); // 获取文档中左右的li标签
var box1=document.getElementById("box1");
var lis=box1.getElementsByTagName("li");// 获取box1 下面所有的li元素
复制代码

1-4、通过style属性去添加或者修改元素的样式

<div id="box1">box1</div>
<script>
   var Obox1=document.getElementById("box1");
       Obox1.style.backgroundColor="pink";
</script>
复制代码

1-5、给元素添加类名

var Obox1=document.getElementById("box1");
 Obox1.className="current";
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{
        margin:0;
        padding:0;
    }
    body{
        background:darkturquoise;
    }
    #main{
        width:300px;
        border:1px solid green;
        margin:0 auto;
    }
    #button{
        width:100%;
        height:50px;
        background:lightblue;
        text-align: center;
    }
    #imgbox{
        display:block;
    }
    </style>
</head>
<body>
    <div id="main">
        <button id="button">隐藏</button>
        
        <img id="imgbox" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1577444372587&di=1684c649c2b1d4b1fdcd5910968c508b&imgtype=0&src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fpcdlc%2F1709%2F16%2Fc79%2F59427944_1505500668556.gif" >
        
    </div>
</body>
</html>
<script>
/* 
  默认：图片是显示的，按钮的内容 隐藏
  点击按钮的时候，如果按钮原来是隐藏，
    + 按钮内容变成“显示”
    + 图片消失
  点击按钮的时候，如果按钮是显示，
    + 按钮内容变成“隐藏”
    + 图片显示
*/
var button=document.getElementById("button");
var oimg=document.getElementById("imgbox");
button.onclick=function(){
     var value=button.innerText;
     if(value=="隐藏"){
        button.innerHTML="显示";
        oimg.style.display="none";
     }else{
        button.innerHTML="隐藏";
        oimg.style.display="block";
     }
}
</script>
复制代码

三、案例之隔行变色

1、css 实现

 如果每隔三行实现一个变色，就是:
     .main>li:nth-child(3n+1) 
     .main>li:nth-child(3n+2)   
     .main>li:nth-child(3n)    
复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{
        margin:0;
        padding:0;
    }
    ul,ol{
        list-style: none;
    }
    body{
        background:lightseagreen;
    }
    .main{
        width:500px;
        /* border:1px solid #000; */
        margin:50px auto;
        color:#666;
    }
    .main>li{
        height:40px;
        line-height:40px;
        text-indent: 20px;
        
    }
    .main>li:nth-child(even){
         background:yellow;
    }
    .main>li:nth-child(odd){
        background:lightgreen;
    }
    .main>li:hover{
        background:lightblue;
    }
    </style>
</head>
<body>
    <ul class="main">
        <li>你永远是最胖的</li>
        <li>你永远是最胖的</li>
        <li>你永远是最胖的</li>
        <li>你永远是最胖的</li>
        <li>你永远是最胖的</li>
        <li>你永远是最胖的</li>
    </ul>
</body>
</html>
复制代码

2、js实现奇偶行变色

2-1、分析：隔行变色的原理：

+ 操作的元素：li ，
+ 让 处于奇数的li 变一个颜色1
+ 让 处于偶数行的li 变一个颜色2
复制代码

方法一：通过style行内属性来改变

var omain=document.getElementById("main");
     var lis=omain.getElementsByTagName("li");
     for(var i=0;i<lis.length;i++){
         if(i%2!=0){
            lis[i].style.backgroundColor="yellow";
         }else{
            lis[i].style.backgroundColor="pink";
         }
     }
复制代码

方法二：通过添加类名

 <style>
    .color1{
        background:lightsalmon;
    }
    .color2{
        background:yellow;
    }
 
 </style>
 
 for(var i=0;i<lis.length;i++){
         if(i%2!=0){
            lis[i].className="color1";
         }else{
            lis[i].className="color2";
         }
     }
复制代码

全部用js实现，隔行变色，并且鼠标滑上去的时候，改变颜色，鼠标离开之后，还原原有的颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{
        margin:0;
        padding:0;
    }
    li{
        height:30px;
        line-height: 30px;
    }
    </style>
</head>
<body>
    <ul class="main" id="main" style="background:blue">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>
</html>
<script>
/* 
 原理：获取到所有的li元素，如果这个li是偶数我们就让它是一个颜色，如果不是偶数就是另一个颜色
*/
var omain=document.getElementById("main");
var lis=omain.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
  if(i%2==0){
      lis[i].style.background="blue";
  }else{
      lis[i].style.background="yellow";
  }
  // 鼠标滑上li的时候，改变那个li的背景颜色
  lis[i].onmouseover=function(){
          // 把原有的颜色绑定上去
          this.bgColor=this.style.backgroundColor;
          this.style.background="lightpink";
  }
  // 鼠标离开的时候，恢复原有的颜色
  lis[i].onmouseout=function(){
        this.style.background=this.bgColor;
  }
}
</script>
复制代码

四、阿里面试题

let a={
    n:1,
}
let b=a;
a.x=a={
    n:2
}
console.log(a.x);
console.log(b)
复制代码

连等赋值：是按照从右向左

var a=b=20;
// 第一步：先创建一个值
// 第二步：b=20
// 第三步：var a=20；
a.x 的优秀级高，所以先给a.x进行赋值，再给a进行赋值；

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

undefined
{ n: 1, x: { n: 2 } }

复制代码

文章版权归作者所有，未经允许请勿转载。

THE END

前端