一、JS表达式

JS表达式：执行一段代码，“有返回结果”的，被称为JS表达式
例如：num变量也算表达式{获取的是存储的值}
1+1运算也算表达式
…

二、声明多个变量

/* 
// 连续声明多个变量，可以省略后续声明的“var”关键字，
   最后基于“逗号”分隔即可
var a = 12,
    b = 13;
// 等价于
var a = 12;
var b = 13; 
*/

三、连等式

var a = b = 10;
// 1. 创建10
// 正常顺序：从右到左
// 2. b=10 {b前面是没有var关键字的}
// 3. var a=10; 
*/

四运算符 = [== /!=] [===/!==]

=代表赋值运算符

如下特殊情况除外 if(num=20) 赋值并且判断

var num=10;
 if(num=20){
    // 赋值操作的结果是true【先给num赋值20 然后再判断num的值是true/false】 此时也把num改为20 条件也成立
    //@1 num=20
     //@2 if(num){....}
}

== 比较[等于运算符]

    A==B值比较

@1 A/B类型一样则直接比较值即可

console.log(1 == 1); //true 
console.log('zhufeng' == 'peixun'); //false

@2 A/B类型不一样则需要先转换为相同的数据类型然后再比较

规则：

1.对象==字符串对象转换为字符串
2.null==undefined 结果是true 但是null或者undefined和其它任何值都不相等
1. NaN==NaN NaN和自己本身也不相等和谁都不相等

4.剩下所有两边类型不一致的情况下都是转换为数字然后再比较

Symbol唯一值类型== 也是先转为数字在进行比较

console.log(null == undeﬁned); //true 
console.log(null == 0); //false
console.log(undeﬁned == ""); //false
console.log([12] == "12"); //[12]->'12'  => true
console.log("10" == 10); //Number("10") -> 10   10==10 => true
console.log(false == ""); //0 == 0  => true
console.log(true == 0); //1==0 => false
console.log(true == 2); //1==2 => false

===绝对相等【在项目中推荐使用】

1.A/B类型一样则直接比较值即可
2.A/B类型不一样结果是false 不会进行数据类型转换

    null===undefined=>false
    null==undefined=>true

==比较规则

对象和对象进行比较的时候：空间地址，如果空间地址相同就是true，不同就是false
对于不同的数据类型在进行比较的时候：除了以下的对象和字符串，剩下的都是先转为数字(隐式转换为Number)再比较
- 1.对象和字符串进行比较的时候，把对象转化为字符串，再进行比较
- 2.null和undefined永远不等于任何一个数据类型，但是null==undefined（true）；null===undefined（false）；
- 3.NaN永远不等于任何一种数据类型 ``` 1==true ===> true 1==false ===> false 2==true ===> false

[]==true ;//false ![]==true;// ===>先计算左边：![];转为布尔并取反（false）===》false==true;//false

[]==[] ; //false var ary1=[1,2]; var ary2=ary1;

ary1==ary2;// ture;

<a name="juXyS"></a>
## 思考题：
console.log([] == false); <br />console.log(![] == false); 
<a name="Q39YF"></a>
## JS类型比较规则
![image.png](https://cdn.nlark.com/yuque/0/2021/png/12917596/1617719726889-d068865b-c8c4-41de-b9de-0f7000b9312f.png#align=left&display=inline&height=532&id=1KFD3&margin=%5Bobject%20Object%5D&name=image.png&originHeight=532&originWidth=877&size=47395&status=done&style=none&width=877)
<a name="nMIpW"></a>
# 累加符号（在前、在后的区别）

/ 无论是++i 还是i++ 最终的i 值都是加了1 var b=++i; 加号在前，先自身累加，然后再赋值给 b就是3 var b=i++; 加号在后，先赋值，（b就是2）再自身累加 / var i=2 i++ console.log(i) ++i console.log(i)

<a name="PzLbz"></a>
# 五：运算符优先级
[https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_Precedence](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_Precedence)

<a name="RzUa4"></a>
# <br />
<a name="wybr5"></a>
# 六、操作语句之for 循环
<a name="B8Wv1"></a>
#### 1、【应用环境】
当需要按照某种规律重复的去一件事情的时候，就需要用for循环
<a name="Gi4qE"></a>
#### 2、【基础语法】
for循环步骤如下

- 1. var i=0; 设置循环的初始值
- 2. i<5; 设置循环能够执行的条件「不符合条件后，循环结束」
- 3. 执行循环体中的代码
- 4. i++ 循环的步长累计

/* for(var i=0;i<5;i++){ // 循环体：每一轮要干的事情 console.log(i);//0 1 2 3 4 } console.log(“外面的i的值是”+i);//5

练习题：

for(var i=2;i<10;i—){ console.log(i);//2 4 6 8 i+=3; } console.log(“外面的i值是：”+i); //10


/* <br />    需求 ：迭代数组每一项<br />    思路：数组中有多少项，我们就需要重复多少次 arr.length;每一次重复做的事情:拿到数组当前项 arr[索引];索引从零开始...<br />*/

var arr=[10,20,30,40]; for(i=0;i<arr.length;i++){ // 第一轮: i=0 i<4 arr[0] i++:i=1 // 第二轮: i=1 i<4 arr[1] i++:i=2 // … // i=4 i<4 循环结束 console.log(arr[i]); }

<a name="uWSk2"></a>
#### 3、【两个重要的关键词】
break & continue：出现在循环体中    <br />break：中断，强制结束整个循环操作{循环体中,break下面代码不执行了；步长累计也不再处理了；}<br />continue:继续，结束本轮循环，继续执行下一轮循环 {结束本轮，continue下面代码不执行了；<br />       继续下一轮，所以步长累计还是需要再处理的}
<a name="wTGPB"></a>
#### 4、案例
<a name="dG2x2"></a>
##### 1.break练习

/ for (var i = 0; i < 5; i++) { if (i > 3) { // i=4 条件成立 i++; break; } console.log(i); //0 1 2 3 } console.log(外面输出：${i}); //5 /

<a name="fPRRf"></a>
##### 2.continue练习

for (var i = 0; i < 5; i++) { if (i > 1) { // i才等于2开始，条件就成立了 i++; continue; } console.log(i); //0 1 } console.log(外面输出：${i}); //6

<a name="nTSVF"></a>
##### 3.综合练习

for (var i = 0; i < 5; i++) { i++; if (i > 2) { i += 2; break; } else { i++; continue; } console.log(i); } console.log(外面输出：${i});//6

<a name="YzYQe"></a>
# 七、函数的基本操作 function
> 函数：方法 它是一个功能封装体 “把视线某个功能的代码进行封装，封装在一个函数中，以后再想实现这个功能 没必要把代码重新写一遍，只需要把函数执行一次即可=={低耦合、高内聚：减少页面中的冗余代码，提高代码的使用率}”

<a name="M691j"></a>
####    1.关于函数的初步认识和语法
但凡功能需要多次的时候 需要函数<br />        @1  创建函数：把实现某个功能的代码进行封装<br />            function 函数名(形参1，形参2...){<br />                函数体：具体要做的功能<br />            }<br />        @2  执行函数: 让功能实现<br />            函数名(实参1，实参2...);
<a name="bBL0w"></a>
##### 基本语法

function fn(){ var result=100+200; result=result/50; result=result*20; console.log(result); } fn();

<a name="Pgx65"></a>
#### 2.实参和形参
很多时候，我们创建一个函数去实现某个功能，但是在创建的时候，有时候原材料并不知道，需要用户执行函数的给我才可以，<br />此时我们在创建函数中提供对应的入口 =>"形参[变量]" ；以后函数执行的时候，把对应的内容传递进来即可"实参[值]";

function sum(n,m){ //形参[变量] var total=n+m; console.log(total); } sum(10,20);//实参[值] sum(100);//设定形参入口，但是执行的时候没有传递实参值，默认传递的值是undefined

sum();//把函数执行,目的是执行函数体中的代码，实现功能 sum;//不加小括号，不是执行函数，而是代表函数本身“函数名其实也是变量名这个变量存储的值就是这个函数对象 ”

/ 不加小括号类似于： var sum=function(n,m){} //函数表达式 /



<a name="pA8vf"></a>
# 八、事件绑定 onclick
```javascript
var btn=document.getElementById("submit"); //找到页面中的按钮
btn.onclick=function(){//进行事件绑定
    //此时是创建一个函数，把函数赋值给元素的某个事件，当触发元素的相关操作行为，这个函数才会执行
    alert("点击执行");
};

九、开关灯案例:

2.1【相关知识铺垫】

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

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

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

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

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

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

4、通过style属性去添加或者修改元素的样式
注意：此时的style是修改的行内，并不是行外

<div id="box1">box1</div>

<script>
   var Obox1=document.getElementById("box1");
       Obox1.style.backgroundColor="pink";
</script>

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">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .main{
            width: 1000px;
            margin: 0 auto;
            border: 2px solid pink;
        }
        button{
            display: block;
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: center;
        }
        img{
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="main">
        <button id="btn">隐藏</button>
        <img id="img" src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1605078711&di=edbe7252606e3affd800a358edd44ce0&src=http://c-ssl.duitang.com/uploads/item/201908/03/20190803230834_nefkn.thumb.700_0.jpeg" alt=""></div>
</body>
</html>
<script>
    /* 
要做的事情：点击按钮
如果按钮里面的文字：隐藏：
   1、更改按钮里面的文字内容：显示
   2、更改图片样式：隐藏
如果按钮里面的文字：显示   
  1、更改按钮里面的文字内容：隐藏
  2、更改图片样式：显示
*/ 
//1、先获取操作的元素
    var btn=document.getElementById("btn")
    var img=document.getElementById("img")
// 2给按钮绑定点击事件
    btn.onclick=function(){
        // 点击按钮的时候，要做的一些事情
        // value 按钮里面的文字内容
        var valve=btn.innerText;
        if(valve=="隐藏"){
             btn.innerText="显示";
             img.style.display="none";
        }else{
            btn.innerText="隐藏";
            img.style.display="block";
        }
    }
</script>

十、案例隔行换色

1.css实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>隔行换色之Css实现</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul,ol{
            list-style: none;
        }
        .box{
            width: 300px;
            box-sizing: border-box;
            margin: 20px auto;
        }
        .box li{
            line-height: 50px;
            border-bottom:1px dashed lightcoral;
        }
         /* 
            Css实现奇偶行变色，鼠标滑过高亮
         */
        .box li:nth-child(even){
            background-color: lightpink;
        }
        .box li:hover{
            background-color:lightskyblue;
        }
    </style>
</head>
<body>
    <ul class="box" id="box">
        <li>第一行</li>
        <li>第二行</li>
        <li>第三行</li>
        <li>第四行</li>
        <li>第五行</li>
    </ul>
</body>
</html>

2.js实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>隔行换色之Css实现</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        ol {
            list-style: none;
        }

        .box {
            width: 300px;
            box-sizing: border-box;
            margin: 20px auto;
        }

        .box li {
            line-height: 50px;
            border-bottom: 1px dashed lightcoral;
        }
    </style>
</head>

<body>
    <ul class="box" id="box">
        <li>第一行</li>
        <li>第二行</li>
        <li>第三行</li>
        <li>第四行</li>
        <li>第五行</li>
    </ul>
</body>
<script>
    /* 
    1.想操作谁就先获取谁
        boxlist是一个元素集合 类数组集合
        0：第一个li 元素
        1：第二个li 元素对象
        ...
        length：5
     2.循环给每一个li设置颜色[奇偶行处理]

    */
    var box = document.getElementById('box');
    var boxlist = box.getElementsByTagName('li');
    //boxlist是一个元素集合【类数组集合】
    //0:第一个LI元素对象
    //1:第二个LI元素对象
    //...
    //length:5
    for (var i = 0; i < boxlist.length; i++) {
        //i 集合中的某个索引
        //boxlist[i] 当前这一轮循环，获取的集合中这一项
        // 分析：
        // i=0  第一轮  boxList[0]第一个LI  奇
        // i=1  第二轮  boxList[1]第二个LI  偶
        // i=2  第三轮  boxList[2]第三个LI  奇
        // i=3  第四轮  boxList[3]第四个LI  偶
        // 奇数行的索引都是偶数 偶数行的索引都是奇数
        boxlist[i].myindex = i;//每一轮循环，都给每一个li对象设置一个自定义属性myIndex,存储自己的索引
        boxlist[i].style.background = i % 2 === 0 ? "#FFF" : "#DDD";
        boxlist[i].onmouseover = function () {
            //this：这个，触发哪一个li对象的事件，THIS就是哪一个LI对象
            this.style.background = 'pink';
        };

        boxlist[i].onmouseout = function () {
            var index = this.myindex;//获取当前操作这个Li的索引
            boxlist[index].style.background = index % 2 === 0 ? "#FFF" : "#DDD";
        };
    }
</script>
</html>

内存中的运转

微信图片_20210410224437.png

JS系列笔记

day05 表达式&连等式 & 运算符&运算符比较级 for

一、JS表达式

二、声明多个变量

三、连等式

四运算符 = [== /!=] [===/!==]

=代表赋值运算符

== 比较[等于运算符]

===绝对相等【在项目中推荐使用】

==比较规则

九、开关灯案例:

2.1【相关知识铺垫】

十、案例隔行换色

1.css实现

2.js实现

内存中的运转

day05 表达式&连等式 & 运算符&运算符比较级 for

一、JS表达式

二、声明多个变量

三、连等式

四 运算符 = [== /!=] [===/!==]

=代表赋值运算符

== 比较[等于运算符]

===绝对相等 【在项目中推荐使用】

==比较规则

九、开关灯案例:

2.1【相关知识铺垫】

十、案例隔行换色

1.css实现

2.js实现

内存中的运转

四运算符 = [== /!=] [===/!==]

===绝对相等【在项目中推荐使用】