2021-09-14

day02 js基础交互

1.运算符与表达式

• 概念

  • 运算符：用于执行程序代码的运算，针对于一个以上的操作数进行运算

    ​ 1 + 1 ： 1—操作数 +：运算符

  • 表达式：由一个或多个操作数通过运算符组成是式子

    ​ 1 + 1，a = 10, a++

  • 运算符：算术运算符、赋值运算符、逻辑运算符、比较运算符，三目运算符

1.1 算术运算符

种类：+ - * / %（取余，求模），++(自增，自加)， –

• 基本操作

   //1.算术运算符 + - * / %（取余，求模），++(自增，自加)， --
  console.log(10+4); //14
  console.log(10-4); //6
  console.log(10*4); //40
  console.log(10/4); //2.5  商
  console.log(10%4); //2  取余
  

• 取余

  //2.取余
  console.log(10 % 2 == 0); //偶数  判断倍数
  var num = 123;
  console.log(num%10); // 取数值中的某一位
  

• 精度缺失,不要用小数做判断

  //3.精度缺失,不要用小数做判断
  console.log(0.1+0.2 == 0.3); //false 0.30000000000000004
  console.log(0.07*100); //7.000000000000001
  

• ++

  //++在前，先自加后运算（运算，赋值，打印），++在后，先运算后自加
  var x = 10;
  var y = x++; //y=x=10,  x++ = 11
  console.log(x,y); //x=11,y=10
  
  var n = 10;
  var m = ++n; //++n = 11  m=n=11
  console.log(n,m); //n=11,m=11
  
  var a = 10;
  var b = ++a + a++ + a++;   //b = 11 + 11 + 12 =34        a=13
  var c = b++ + ++b + ++a;   //c = 34 + 36 + 14 = 84     a=14,b=36
  console.log(a,b,c); //14 36 84
  

• 隐式转换

  在运算符过程中会自动进行数据类型的转换，一般情况下都会转换成number进行运算，+号遇到字符串就会变成拼接符

  //5.隐式转换：在运算符过程中会自动进行数据类型的转换，一般情况下都会转换成number进行运算
  console.log(10 - "2"); //8   "2"--2
  console.log("2" * 3); //6
  console.log("10" / true); //10
  console.log("10" - null); // 10
  
  console.log(10+20+"age"+10+28); //+号遇到字符串就会变成拼接符  30age1028
  

1.2 赋值运算符

种类： = += -= *= /= %=

//赋值运算符： =  +=   -=  *=  /=  %=
var a = 10; //将10赋值给a 先算等号右边的，将右边的值赋值给左边

//+= : 累加
a += 2;  //在当前基础上+2   等价于a = a + 2
console.log(a); //12

1.3 比较运算符

种类： > < >= <= ==(相等) != (不相等) ===(恒等、全等) !==

• 普通的数字比较

   console.log(10 > 20); //false
  

• 字符串比较

  //1.字符串比较:一位一位比较，比较的是字符编码  “0”--48  “A”--65  “a”--97
  console.log("1000000" < "2"); //true
  console.log("Abc">"acc"); //false
  

• null和undefined比较

  //2.null和undefined只和自己，和彼此相等，其他都不相等
  console.log(NaN == NaN); //false  
  console.log(null == undefined); //true
  console.log(undefined == undefined);//true
  
  //所有的运算符再进行运算的时候都会进行隐式转换，都会尽量转换为number
  console.log(null >= 0); //true
  console.log(null <= 0); //true
  console.log(null == 0); //false   null在进行相等判断的时候不会进行隐式转换
  

• == 与 ===的区别

  //3.==  ===
  console.log("10" == 10);  //true,会进行隐式转换
  console.log("10" === 10); //false，不会进行隐式转换,一模一样才相等
  console.log(null === undefined); //false
  console.log(NaN === NaN); //false
  

1.4 逻辑运算符

种类：&& || ！

• 基本运算

  //逻辑运算符  && ||  ！
  var c = 98;
  //从左往右依次运算，代码中条件只能分段写,用&& ||连接多个条件
  console.log(100>c>90); //false  100>c-->true   true>90--->false
  
  //1.&&  :  条件都为真结果才为真
  console.log(100>c && c>90); //true
  
  //2.|| ： 条件有一个为真结果就为真
  //小于60，大于100打一顿
  var s = 59;
  console.log(s<60 || s>100);
  
  //3.!取反：结果是boolean true  false
  console.log(!1); //false
  console.log(!null); //true
  console.log(!undefined); //true
  

• 短路运算

  //4.1 &&与短路，两真为真，如果第一个条件为假，第二个条件不执行
  //                       如果第一个条件为真，执行第二个条件
  var a = 1;
  var b = 1;
  //第一个条件为假，第二个条件不会执行，执行到那个语句就把那个语句的结果赋值给前面的变量
  var c = --a && ++b;
  console.log(a,b,c); //0  1 0
  
  var a = 1;
  var b = 10;
  //第一个条件为真，执行第二个条件，执行到那个语句就把那个语句的结果赋值给前面的变量
  var c = ++a && ++b;  //2 11 11
  console.log(a,b,c); //2 11 11
  
  //4.2 ||或短路，一真为真，如果第一个条件为假，执行第二个条件
  //                       如果第一个条件为真，第二个条件不执行
  var x = 1;
  var y = 1;
  //第一个条件为假，执行第二个条件，执行到那个语句就把那个语句的结果赋值给前面的变量
  var z = --x || ++y;
  console.log(x,y,z);//0 2 2
  
  var x = 10;
  var y = 10;
  //第一个条件为真，第二个条件不会执行，执行到那个语句就把那个语句的结果赋值给前面的变量
  var z = --x || --y;
  console.log(x,y,z); //9,10,9
  

1.5 三目运算符

语法：条件 ? 条件成立时执行的代码 : 条件不成立时执行的代码

//语法：条件?条件成立时执行的代码：条件不成立时执行的代码
var money = 100000000; //
//如果money > 100000,娶媳妇，否则单身
money > 100000 ? console.log("娶媳妇"):console.log("单身");

var tag = 10 > 20 ? true : false;
console.log(tag); //false

2.js基础交互

交互三步曲：找到对应的标签，添加事件，事件发生时的反馈

2.1 获取标签

• 通过id获取

  语法：document.getElementById(“id名”)：获取到的是一个唯一标签

  //1.通过id获取元素
  var oSs = document.getElementById("ss");
  //2.添加事件  标签.onclick = function(){  事件发生时要执行的操作  }
  oSs.onclick = function(){
      alert("easy");
  }
  

• 通过标签名获取

  语法：

  document.getElementsByTagName(“标签名”) ： 获取整个文档中对应标签名的标签

  父元素.getElementsByTagName(“标签名”) ： 获取对应父元素中对应标签名的标签

  //3.通过标签名获取元素:document.getElementsByTagName("标签名")
  var oLis = document.getElementsByTagName("li");
  console.log(oLis); //HTMLCollection(5)  元素集合
  console.log(oLis.length); //5  获取元素集合的个数
  console.log(oLis[2]); //通过下标获取元素，下标从0开始
  
  //元素集合是一个整体，必须通过下标一个一个取出来使用
  oLis[2].onclick = function(){
   alert("hello world");
  }
  oLis[1].onclick = function(){
   alert("hello world");
  }
  
  //4. 父元素.getElementsByTagName("标签名") ： 获取对应父元素中对应标签名的标签
  var oUl = document.getElementsByTagName("ul")[1];
  var uLi = oUl.getElementsByTagName("li");
  console.log(uLi);
  

• 通过类名获取：IE8不兼容

  语法：

  ​ document.getElementsByClassName(“类名”) ： 获取整个文档中对应类名的标签

  ​ 父元素.getElementsByClassName(“类名”) ： 获取对应父元素中对应类名的标签

  //5.通过类名获取元素：IE8-不兼容
  var bLi = document.getElementsByClassName("box");
  bLi[0].onclick = function(){
   alert("王一博");
  }
  

  注意：通过class和标签获取的都是元素集合，不管是几个元素都不能直接使用，必须通过下标获取到具体的元素进行操作

2.2 添加事件

• 事件：添加在标签上，可以被浏览器监听到的一些行为

• 语法：标签.事件 = function(){ 事件触发时执行 的代码 }

• 鼠标事件

  • onclick：点击

  • onmouseover/onmouseenter：鼠标移入(悬停)

  • onmoueout/onmouseleave：鼠标移出

  • onmousemove：鼠标移动

  • onmouseup：鼠标抬起

  • onmousedown：鼠标按下

  • ondblclick ： 双击

  • oncontextmenu：右击

    //2.添加事件  标签.事件名 = function(){ 事件发生时执行的操作 }
    oDiv.onclick = function(){
        console.log("pink");
    }
    
    //2.onmouseover：鼠标移入
    oDiv.onmouseover = function(){
        console.log("鼠标移入");
    }
    

2.3 js操作标签

<div id=‘box’ class='box'>内容</div>
样式：height width

2.3.1 操作标签内容

• 标签内容：开始标签和结束标签中间的都是标签内容

• 操作表单元素内容

  • 获取内容： var 变量 = 表单元素.value

  • 设置内容： 标签.value = “值”

    //2.给button添加点击事件
    oBtns[0].onclick = function(){
        //3.获取输入框的值  ：var 变量 = 表单元素.value
        var v = oInp.value;
        console.log(v);
    }
    //4.设置
    oBtns[1].onclick = function(){
        // 设置内容： 标签.value = "值"
        oInp.value = "hello world";
    }
    
    //5.所有的表单元素都是  标签.value
    var v = oSel.value;
    console.log(v);
    

• 操作闭合标签内容

  • 获取：var 变量 = 标签.innerHTML / 标签.innerText

  • 设置：标签.innerHTML / 标签.innerText = “值”

  • innerHTML和innerText

    都是操作闭合标签内容，都会覆盖原有的内容
    innerHTML能识别标签，innerText不能识别标签
    

    /* 
      获取：var 变量 = 标签.innerHTML  /  标签.innerText
      设置：标签.innerHTM  /  标签.innerText = “值”
    
      innerHTML：识别标签,覆盖原有的内容
      innerText：只操作文本不识别标签,覆盖原有的内容
    */
    //1.获取元素
    var oDiv = document.getElementsByTagName("div")[0];
    
    //2.获取标签内容
    var html = oDiv.innerHTML;
    console.log(html); //  <p>代码之难，难于上青天</p>
    var text = oDiv.innerText;
    console.log(text); // 代码之难，难于上青天
    
    //3.设置标签内容，覆盖原有内容
    //oDiv.innerHTML = "<p>蚕丛及鱼凫，开国何茫然！</p>";
    //oDiv.innerText = "<p>蚕丛及鱼凫，开国何茫然！</p>";
    
    //4.追加    之前的 + 现在的
    //oDiv.innerHTML = oDiv.innerHTML + "<p>蚕丛及鱼凫，开国何茫然！</p>";
    oDiv.innerHTML += "<p>蚕丛及鱼凫，开国何茫然！</p>";
    

2.3.2 操作标签属性

<div id class title > 开始标签中的属性

• 获取： var 变量 = 标签.属性名

• 设置：标签.属性名 = 属性值

• 特殊：class是关键字，不能直接使用，class—className

  //1.获取元素
  var oDiv = document.getElementsByTagName("div")[0];
  
  //2.获取 var 变量 = 标签.属性名
  var s = oDiv.title;
  console.log(s);
  
  //3.设置 标签.属性名 = 属性值
  oDiv.id = "haha";
  
  //4.设置class
  oDiv.className = "cur";
  

2.3.3 操作标签样式

写在style标签中，width，height，bg

• 设置：标签.style.属性名 = 值

• 特殊：js中不允许出现-，要使用驼峰标识

  //2.设置元素样式 ： 标签.style.属性名 = 值  ,js操作标签样式都是行间
  //w:200,h:200,bg:green
  oDiv.style.width = "200px";
  oDiv.style.height = "200px";
  oDiv.style.background = "yellow";
  
  //特殊：js中不允许出现-，要使用驼峰标识
  oDiv.style.fontSize = "20px";
  

• cssText

  //1.获取元素
  var oDiv = document.getElementsByTagName("div")[0];
  
  //标签.style.cssText = "css样式"
  // oDiv.style.cssText = "width:200px;height:200px;background:green";
  
  //cssText重写style属性
  // oDiv.style.cssText = "width:200px;background:green";
  oDiv.style.width = "200px";
  oDiv.style.background = "green";