算数运算符&流程控制

冫马
231 阅读9分钟

算术运算符 

+ 加、- 减、* 乘、/ 除、% 取模（求余数）、++、--

•取模的时候，如果前面的数字比后在的数字小，那得到的结果就是前面的数字
•取模的时候，后面的数字不能为0，如果为0的话得到的结果就是NaN
•++ 递增
•-- 递减
•它俩可以放在操作数的前面，也可以放在操作数的后面
•如果只操作自己
•++放在操作符的前面与后在都是一样的，让自己加1
•--放在操作符的前面与后在都是一样的，让自己减1
•如果在与其它数据运算时
•++或--放在前面 是先+1 或减1 之后再与其它数据运算

•++或—放在后面 是先与其它数据运算 之后本身大+1或-1

<script type="text/javascript">
      console.log(4343%3);//2
      console.log(15%18);//15
      //取模的时候，如果前面的数字比后在的数字小，那得到的结果就是前面的数字
      console.log(15%0)//NaN
      //取模的时候，后面的数字不能为0，如果为0的话得到的结果就是NaN
      var n=10;
      n++;
      console.log(n);//11;
      //n=n++;
      //console.log(n);//11
      n=++n;
      console.log(n);//12
      //++在后面先运算后增加1
      //++在前面先增加1后运算
      //--的前面选减1再运算
      //--在后面选运算再减1
      var m=12;
      m=m--;//12
      --m;//11
      console.log(m++)//11
      console.log(m)//12
    </script>

赋值运算符

=、+= 、-=、/=、%= 

<script type="text/javascript">
      var m=8;
      m+=2;//m=m+2
      console.log(m);//10
      m-=2;//m=m-2;
      console.log(m);//8
      m%=2;//m=m%2
      console.log(m);//0
      m++;
      m/=2; 
      //m=m/2;
      console.log(++m)//1.5
    </script>

关系运算符

•>,<,>=,<=,==,===,!=,!==
•关系运算符会把结果转换成boolean值

==比较两个值是否相同，相同反回true

===首先比较两个值的类型，若不同直接返回false, 若类型相同再进行值比较，

如果相等返回true,

!=比较两个是不同，不同返回 true,相同返回false

!==只有两边数据类型不同，值不同才返回true

undefined只与null相等

字符串比较的话，比较的是对应的ascii码

<script type="text/javascript">
      console.log(10>9);//true
      console.log(10>=9);//true
      console.log(10<9);//false
      console.log(10<=9);//false
      console.log(10==9);//false
      console.log(10=='10');//true 
      //==操作时 若数据类型不同 ，先把两边的数据转换成相同的类型再运算 
      console.log(10==='10');//false
      //===时选判断类型相同不，若不同返回false,若相同再进行值的判断
      console.log(3!=8);//true;
      console.log(8!=8);//false
      console.log(8!='8');//false
      console.log(8!=='8');//true  三个运算符在一起严格运算
      console.log(undefined==null);//true
      console.log(undefined===null);//false
      var m=10,n=18;
      console.log(m>n)//false
      console.log('a'<'b');//字母和字母比较时按ascii 97<98 true
    </script>

逻辑运算符

•&&与、||或，！否、三目运算符
•&& 并且的意思
–如果当左边与右边的条件同时成立的时候，整个条件才成立
–当左边为真的时候，返回右边的值。当左边为假的话，返回左边的值
•|| 或者的意思
–如果有一个条件成立的话，整个条件就成立
–当左边为真的时候，返回左边的值。当左边为假的时候，返回右边的值
•！非，取反的意思
–返回一个布尔值，把值转为布尔值
–一个!代表先把数据转成布尔值，然后再取反
–二个!代表把数据转成布尔值
•三目运算也叫三元运算 操作数有三个？：
•一元运算符，操作数有一个 ++ -- typeof !
•二元运算符，操作数有两个 + - * / % %=…
•三元运算符操作数用3个
•a?b:c

如果 a 的值成立返回b，否则返回c

<script type="text/javascript">
      //&&  与也是并且   左边和右边的条件同时成立返回true，否false
         // 当左边为真的时候，返回右边的值。
         //当左边为假的话，返回左边的值

      console.log(8>5&&4>7);//false
      var n=7;
      console.log(n-->6&&n==6);//true
      
      console.log(n&&n++);//6  n=7
      console.log(0&&n--);//0
      var m;
      console.log(m&&n);//undefined
      //|| 或 当左右是条件时 只要有一个成立，返回值是true
        // 当左边的值是真的时侯返回自已
         //当左边的值是假的话，返回右边的值
      console.log(8>5||4>7);//true
      //console.log(n||n++);//7
      console.log(0||n++);//8
      console.log(m||n);//7 8
      //！取反
        //一个!代表先把数据转成布尔值，然后再取反
        //二个!代表把数据转成布尔值
    
      console.log(!m);// !false -> true
      console.log(!0);//true
      console.log(!8);//false
      console.log(!!8);// !8->false-> !false->true
    </script>

三目运算

也叫三元运算 操作数有三个

 一元运算符，操作数有一个 ++ -- typeof ! 

二元运算符，操作数有两个 + - * / % %=… 

三元运算符操作数用3个 a?b:c 如果 a 的值成立返回b，否则返回c 

//      if(条件1){
//        条件1成立要执行的内容
//      }

//      if(条件1){
//        条件1成立要执行的内容
//      }else{
//        条件1不成立要执行内容
//      }

//      if(条件1){
//        条件1成立要执行的内容
//      }else if(条件2){
//        条件1不成立条件2成立要执行内容
//      }else{
           //  条件1和2都不成立执行的
         
//      }

//      var score=60;
//      if(score>=60){
//        console.log('及格')
//      }
//      
//      var score=59;
//      if(score>=60){
//        console.log('及格')
//      }else{
//        console.log('不及格')
//      }

//      var score=45;
//      if(score>=60&&score<=70){
//        console.log('中等')
//      }else if(score>70){
//        console.log('优秀')
//      }else{
//        console.log('不及格')
//      }


  //    条件?条件成立执行的内容:条件不成立执行的内容
      var s=59;
      s>60?console.log('及格'):console.log('不及格');

流程控制语句if

•If语法

If(判断条件1)｛

判断条件1成立执行的代码

｝else if(判断条件2)｛

判断条件1不成立，判断条件2成立执行的代码

｝else{

判断条件1，判断条件2都 不成立执行的代码

–}
• 布尔值

true:真

false:假

程序首先会把if后括号中的判断条件转为true或者false,然后再判断

流程控制语句switch

•switch(n) {
–case 值: 执行代码块 1;break;
–case 值： 执行代码块 ;2 break;
– default: n 与 case 1 和 case 2 不同时执行的代码
•}

•判断 n 和值是否相等时用=== 

If实例-下拉菜单

•需求

1、点击按钮，当下拉菜单隐藏时显示

2、点击按钮，当下拉菜单显示时隐藏

•思路：

1、点击按钮、判断下拉菜单display为block的时候，改为none

2、点击按钮，判读下拉菜单display为none时改为block

•问题：

Style只能操作行间样式 

显示隐藏例子

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
      
      #box{width:100px;
            height:200px;
            border:1px solid red}
      li{list-style: none;}
    </style>
  </head>
  <body>
    <input type="button"  value="显示/隐藏" id="btn"/>
    <div id="box">
      <ul>
        <li>我显示了</li>
        <li>我也是</li>
        <li>我也是</li>
      </ul>
    </div>
    <script type="text/javascript">
      var obtn=document.getElementById('btn');
      var obox=document.getElementById('box');
      var show=true;//自定义变量来判断是否显示或者隐藏
      btn.onclick=function(){
        if(show){
          obox.style.display="none";
          btn.value="显示";
        }else{
          obox.style.display="block";
          btn.value="隐藏"
        }
        show=!show;
      }
      
    </script>
  </body>
</html>

获取一组元还素

getElementsByTagName(“标签名”)

通过html标签获取一组元素

getElementsByClassName(“类名”)

通过class类名获取一组元素

querySelector(“css选择器”)

通过css选择器获取一个元素

querySelectorAll(“css选择器 ”)

通过css选择器获取一组元素、

集合属性

Length

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
      li{background: red;}
      .yel{background: yellow;}
    </style>
  </head>
  <body>
    <ul id="ul">
      <li class="yel">1</li>
      <li>2</li>
      <li class="yel">3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li class="yel">7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
    </ul>
    <script type="text/javascript">
//      var Id=document.getElementById('ul'); //一个元素
//      console.log(Id);
//      Id.style.paddingTop="200px";
      var oul=document.getElementsByTagName('ul');//一组元素
      console.log(oul);
      oul[0].style.paddingTop="200px";
      
      
      var oLis=document.getElementsByTagName('li');//通过标签名获取一组元素
      var classname=document.getElementsByClassName('yel');//通过class名获取一组元素
      for(var j=0;j<classname.length;j++){
        classname[j].style.color="red"
      }
      console.log(oLis);
//      oLis[0].style.backgroundColor="yellow";
//      oLis[1].style.backgroundColor="yellow";
//      oLis[2].style.backgroundColor="yellow";
//      oLis[3].style.backgroundColor="yellow";
//      oLis[4].style.backgroundColor="yellow";
//      oLis[5].style.backgroundColor="yellow";
//      oLis[6].style.backgroundColor="yellow";
//      oLis[7].style.backgroundColor="yellow";
//      oLis[8].style.backgroundColor="yellow";
//      oLis[9].style.backgroundColor="yellow";
      for(var i=0;i<oLis.length;i++){
        oLis[i].style.backgroundColor='blue'
      }
        var yel=document.querySelector(".yel");
        console.log(yel);
        var yels=document.querySelectorAll(".yel");
        console.log(yels);
    </script>
  </body>

流程控制语句-for

•for循环语法及执行顺序
•作用：
–根据一定的条件，重复执行一行或多行代码
•语法：
–for(条件初始化；条件判断；条件变化){

当条件判断满足真的时侯，重复执行的代码

–}
•执行流程
–第一步：条件初始化
–第二步：条件判断
–第三步：当条件判断满足真的时候要执行的代码
–第四步：执行条件变化

重复第二步、第三步、第四步直到条件判断为假时，整个for循环就执行结束了

<head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    for(条件初始化；条件判断；条件变化){
      当条件判断满足真的时侯，重复执行的代码
    }
    <script type="text/javascript">
      for(var n=1;n<10;n++){
        n+=5;
      }
      console.log(n)
      //var n=1 1<10  n=1+5  n=6 6++
      //7<10 n=7+5 n=12  12++
      
    </script>
  </body>

隔行变色

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
      li{background: gray;}
      
    </style>
  </head>
  <body>
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <script type="text/javascript">
      var oLis=document.getElementsByTagName('li');
      //三行
//      for(var i=0;i<oLis.length;i++){
//        if(i%3==0){
//          oLis[i].style.backgroundColor="red"
//        }else if(i%3==1){
//          oLis[i].style.backgroundColor="yellow"
//        }else{
//          oLis[i].style.backgroundColor="green"
//        }
//      }
      for(var i=0;i<oLis.length;i+=2){
        oLis[i].style.backgroundColor="red"
      }
    </script>
  </body>

for in

循环，用来遍历对象中的数据

语法：

for(var 变量名 in 对象)｛

变量名 对象里的属性名（key）

对象[属性名] 属性名对应的值

｝

获取到一个对象里的所有数据，只能用for in 方法 

var person={name:’老李’,age:30,height:’180cm’}
for(var attr in person){
  console.log(atrtr,person[attr]);
}

while循环

•循环，条件循环。只有当条件满足的情况下才会去循环。
•语法：

While(条件)｛

当条件满足时会执行这里的代码；

｝

注：当while条年不具备停止条件的时侯，一定要在循环体内给一个条件变化。

否则就是一个死循环。

for 循环 知道循环次数

While 条件循环，知道结束条件时用它，它一般用在嵌套的元素，或者有嵌套的数据。

要做循环时，首选考虑for,如果for做不出来，那就选择while

var n=10,m=0;
      while(n>8){
        console.log(++m,n);
        n=n-2;
      }
 //10>8   1,10   n=10-2=8


avatar
文章
阅读
粉丝