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"
}