运算符和交互基础

day02 运算符和交互基础

1.运算符

• 算术运算符

  + - * / % ++ --
  

• 赋值运算符

  // = += -= *= /= %=
  var a = 10; // 赋值号 把右边的值给左边的变量
  
  // += 累加
  var b = 10;
  b += 2; // b = b + 2;  在原来的基础上增加
  console.log(b);
  
  // -= 累减
  var c = 10;
  c -= 3; // c = c -3
  console.log(c); // 7
  
  // %=
  var d = 10;
  d %= 3; // d = d%3
  console.log(d); // 1
  

• 比较运算符

  // > <  >= <= ==等于 !=不等于 ===全等 !== 不全等
  // 隐式转换：在运算过程中尽可能转化为对应类型再参与运算
  console.log(1 > '2'); // 1>2 false
  
  // 字符串之间的比较，比较的是ASCII值，0-48 a-97 A-65
  console.log('100' > '2'); // false
  
  // ==比较两个值是否相等，会进行隐式转换
  console.log(1 == '1'); // true 
  console.log(1 != '1'); // false
  
  // ===全等，不会进行隐式转换，值和类型一模一样
  console.log(1 === '1'); // false
  console.log(1 !== '1'); // true
  
  // 特殊
  // ECMA规定null和undefined是相等的
  console.log(null == undefined); // true
  console.log(null === undefined); // false
  
  console.log(NaN == NaN); // 不和自身相等  false
  

• 逻辑运算符

  // 多个表达式之间连接需要使用逻辑运算符
  // 逻辑与&&：全为真结果才为真，一假为假
  console.log(2>1 && 5>1);// true && true
  console.log(2<1 && 5>1);// false && true -》 false
  
  // 逻辑或||：全部为假结果才为假，一真为真
  console.log(1>2 || 5>2); // false || true -> true
  console.log(1>2 || 5<2); // false || false -> false
  
  // 逻辑非!：取反，结果是个布尔值
  console.log(!true); // false
  console.log(!1); // false
  console.log(!null); // true
  
  // 逻辑与的短路运算：如果第一个表达式为假，结果已经决定为假，不会再运行第二个表达式了
  var a = 1, // 0
      b = 1;
  --a && b++;
  // 0 && b++不会执行了
  console.log(a, b); // 0 1
  
  // 逻辑或的短路运算：如果第一个表达式为真，结果已经决定为真，不会再运行第二个表达式了
  var x = 1, // 0
      y = 1;
  x-- || y--;
  // 1 || y--不会再执行
  console.log(x, y); // 0 1
  
  // 前边的表达式已经决定结果了，后续的表达式没有意义了，不会再执行了
  

• 三目运算符

  条件 ? 条件成立执行的代码 : 不成立时执行的代码;
  var n = 8;
  // 判断是大于10的还是小于10的
  n > 10 ? console.log("这个数是大于10的") : console.log("这个值小于10");
  

• 优先级

  // 运算符优先级：算数运算符 > 比较运算符 > 逻辑运算符
  console.log(2 + 5*3); //2+15 ->17 
  console.log(1>2 && 5>2); // false && true -> false
  console.log( 1+2 > 5 && 2+3 > 5 );
  //             3 > 5 &&  5 > 5
  //              false && false
  // flase
  

2.获取标签

• 通过id获取

  document.getElementById()：获取到具体的标签

  // 1.1 通过id获取标签：document.getElementById("id名")
  var oCon = document.getElementById("con");
  console.log(oCon); // <li id="con">1</li>
  
  // 2.给标签添加事件 标签.onclick = function(){}
  oCon.onclick = function(){
      // 3.要做的事情
      alert('你点了我');
  }
  

• 通过标签名获取

  • document.getElementsByTagName(标签名)
  • 父元素.getElementsByTagName(标签名)
  • 获取是元素集合，不能直接使用，必须通过具体的下标

  // 1.2 通过标签名获取  
  // 1.2.1 document.getElementsByTagName("标签名"):获取整个文档中的对应标签
  var oLi = document.getElementsByTagName("li");
  console.log(oLi); // 获取是元素集合 HTMLCollection(5) 
  console.log(oLi.length); // 获取长度 5
  // 获取某个标签 oLi[下标]，下标丛0开始的
  console.log(oLi[2]); // <li>今天真好</li>
  
  // 注意：元素集合不能直接使用，必须通过下标获取具体的标签
  
  // 无效使用
  oLi.onclick = function(){
      console.log("哈哈哈哈");
  }
  
  oLi[0].onclick = function(){
      console.log("这是第一个li");
  }
  oLi[1].onclick = function(){
      console.log("这是第二个li");
  }
  
  // 1.2.2 父元素.getElementsByTagName("标签名"):获取父元素中的对应标签
  var oUl = document.getElementsByTagName('ul')[1];
  console.log(oUl); // <ul></ul>
  var oLi2 = oUl.getElementsByTagName('li');
  console.log(oLi2); // HTMLCollection(5) [li, li, li, li, li]
  

• 通过类名获取

  • document.getElementsByClassName(类名名)
  • 父元素.getElementsByClassName(类名名)
  • 获取是元素集合，不能直接使用，必须通过具体的下标

  // 1.4 通过类名获取：
  // document.getElementsByClassName("类名"):获取整个文档中的有对应类名的标签
  // 父元素.getElementsByClassName("类名"):获取父元素中的有对应类名的标签
  var oBox = document.getElementsByClassName('box');
  console.log(oBox); // 获取的是元素集合 HTMLCollection(6) [li.box, li.box, li.box, li.box, li.box, li.box]
  
  var oClassLi = oUl.getElementsByClassName('box');
  console.log(oClassLi); // 获取父元素中的
  

3.常用鼠标事件

• onclick：点击事件
• ondblclick：双击事件
• onmouseover / onmouseenter：鼠标移入事件
  • onmouseover：子元素可以触发父元素的事件
  • onmouseenter：子元素不能触发父元素的事件
• onmouseout / onmouseleave：鼠标移出事件
  • onmouseout：子元素可以触发父元素的事件
  • onmouseleave：子元素不能触发父元素的事件
• onmousemove：鼠标移动事件
• onmousedown：鼠标按下事件
• onmouseup：鼠标抬起事件
• oncontextmenu：右击菜单事件

4.操作标签

4.1 操作标签内容

4.1.1 操作表单元素的内容

• 获取：标签.value
• 设置：标签.value = 值

// 点击获取按钮，获得表单元素的内容
// 1.获取标签
var oInp = document.getElementsByTagName('input')[0];
var oSel = document.getElementsByTagName('select')[0];
var oText = document.getElementsByTagName('textarea')[0];
var oBtn = document.getElementsByTagName('button');

// 2.给获取按钮添加点击事件
oBtn[0].onclick = function(){
    // 3.获得表单元素的内容  标签.value
    var v1 = oInp.value;
    console.log(v1); // 哈哈哈哈哈

    var v2 = oSel.value;
    console.log(v2); // 郑州

    var v3 = oText.value;
    console.log(v3); // 评论1111
}

// 4.给设置按钮添加点击事件
oBtn[1].onclick = function(){
    // 5.设置表单元素的内容  标签.value = 值
    oInp.value = "床前明月光";
    oSel.value = "广州";
    oText.value = "好评"
}

4.1.2 操作闭合标签的内容

• 获取：标签.innerHTML /innerText
• 设置：标签.innertHTML / innerText = 值
  • innerText：不识别标签，会覆盖原来的内容
  • innerHTML：是识别标签，会覆盖原来的内容

// 1.获取标签
var oDiv = document.getElementsByTagName('div')[0];
var oBtn = document.getElementsByTagName('button');

// 2.点击获取按钮
oBtn[0].onclick = function(){
    // 3.获取div的内容   标签.innerHTML
    var html = oDiv.innerHTML;
    console.log(html); // <p>床前明月光</p>

    var text = oDiv.innerText;
    console.log(text); // 床前明月光
}

// 4.点击设置按钮
oBtn[1].onclick = function(){
    // 5.更改标签内容  标签.innerHTML/innerText = 值’
    // oDiv.innerHTML = "<h2>疑是地上霜</h2>";
    // 原来的值 + 新的内容
    // oDiv.innerHTML = oDiv.innerHTML + "<h2>疑是地上霜</h2>";
    oDiv.innerHTML += "<h2>疑是地上霜</h2>"; // 累加

    // 5.2 
    oDiv.innerText += "<h2>疑是地上霜</h2>"; // 累加
}

4.2 操作标签属性

• 获取：标签.属性名
• 设置：标签.属性名 = 属性值
• 特殊：标签.className 操作类名

// 1.获取属性
var id = oDiv.id;
console.log(id); // con

// 获取class类名   标签.className
var classN = oDiv.className;
console.log(classN);
console.log(oDiv.title);

// 2.设置  标签.属性名 = 属性值
oDiv.id = "warp";
oDiv.className = "active";

4.3 操作标签样式

• 设置：
  • 标签.style.样式名 = 值
  • 标签.style.cssText = “”
    • cssText重写标签的style属性，原本写在行内的样式就没有了

// 1.获取标签
var oDiv = document.getElementsByTagName('div')[0];
var oP = document.getElementsByTagName('p')[0];

// 2.操作样式
oDiv.style.background = "pink";
oDiv.style.width = "300px";
oDiv.style.fontSize = "30px";
oDiv.style.border = "5px solid red";

// 3.标签.style.cssText = ""
// cssText重写标签的style属性，原本写在行内的样式就没有了
oP.onmouseover = function(){
    oP.style.cssText = "font-size: 30px; height: 100px; background: plum"
}