算术运算符
+ - * / % ++ --
基础
console.log(10 + 20); // 30 console.log(10 - 20); // -10 console.log(10 * 20); // 200 console.log(20 / 10); // 2 // %: 取余 模 console.log(20 % 3); // 2 console.log(20 % 2); // 0
++
++: 在自身基础上加1 可以放在变量的前面 也可以放在后面
++和其他运算放在一起的时候, ++在前, 先自加, 在执行其他运算, ++在后, 先运行其他运算, 在自加
var a = 10; a++; // 10 + 1 = 11 --> a console.log(a); // 11 ++a; // 11 + 1 --> 12 --> a console.log(a); // 12 // ++和其他运算放在一起的时候, ++在前, 先自加, 在执行其他运算, ++在后, 先运行其他运算, 在自加 var b = 10; console.log(b++); // 输出和++放在一起 先输出b=10 在自加10+1=11 console.log(b); // 11 var c = 10; console.log(++c); // 输出和++放在一起, 先自加10+1=11 在输出c=11 console.log(c); // 11
--
--: 自减 可以放在前面可以放在后面
--和其他运算在一起的时候, --在前, 先自减, 在执行其他运算; --在后, 先执行其他运算, 在自减
// --: 自减 可以放在前面可以放在后面 var d = 10; d--; console.log(d); // 9 --d; console.log(d); // 8 // --和其他运算在一起的时候, --在前, 先自减, 在执行其他运算; --在后, 先执行其他运算, 在自减 var m = 10; console.log(m--); // 输出和-- 先输出m=10 再自减m=9 console.log(m); // 9 var n = 10; console.log(--n); // 先自减 m = 9 再输出m=9
隐式转换规则
隐式转换的规则主要发生在算术运算符之间:
\1. 有字符串的加法就是拼接
\2. 没有字符串的加法的其他运算, 尽可能的将数据都转成数值类型后在计算 隐式调用Number方法
\3. 数值之间正常计算
\4. 遇到复杂数据类型, 会先调用数据的toString方法转换成字符串之后, 在参考上述规则
console.log(1 + 'a'); // 1a
console.log('a' + true); // atrue
console.log('a' + null); // anull
console.log('a' - 10); // NaN - 10 = NaN
console.log(true * 100); // 1 * 100 = 100
console.log(100 / null); // 100 / 0 = Infinity
console.log('a' + {}); // a[object Object]
console.log('a' + [1,2]); // a1,2
var a = '10';
a++;
console.log(a); // 11
赋值运算符
赋值: = += -= *= /= %=
将等号右边的赋值给左边
var a = 10; // 将10给了a // a+=b: a = a + b; a += 100; console.log(a); // 110 a -= 20; console.log(a); a*=2; // a = a * 2; console.log(a); a /= 3; console.log(a); // 60 a %= 50; // a = a % 50; console.log(a); // 10
比较运算符
> >= < <= 用左右两边的数据进行比较判断 如等式成立 返回true 否则返回false
console.log(1 > 2); // false console.log(2 >= 1); // true console.log(1 < 2); // true console.log(1 <= 2); // true
== ===用于数据的比较判断
== 只比较值是否相等
=== 比较值是否相等 比较数据类型是否一致
// == ===用于数据的比较判断 // == 只比较值是否相等 console.log(1 == 1); // true console.log(1 == '1'); // true // === 比较值是否相等 比较数据类型是否一致 console.log(1 === '1'); // 值相等 数据类型不等 false
!=: 只比较值是否不相等
!==: 比较值是否不相等 比较数据类型是否不一致
// !=: 只比较值是否不相等 console.log(1 != '1'); // false console.log(1 != 2); // true // !==: 比较值是否不相等 比较数据类型是否不一致 console.log(1 !== 1); // false console.log(1 !== '1'); // 数值1 !== 字符串1 值相等 数据类型不等 true
字符串的比较: 从左往右依次比较每一个字符的ASCII码
''空字符串--0 '0'--48 '9'--57 'A'--65 'Z'--90 'a'--97 'z'--122
console.log('10000' < '2' ); // true 49 < 50 ? true
console.log('1000' < '1'); // 48 < 0 ? false
逻辑运算符
逻辑: && || !
&&
&&: 左右两边各自有一个判断条件, 如果两个条件都为真, 整个返回true, 如果有一个条件为假, 整个返回false
全真为真 一假为假
console.log(true && false); // false console.log(1 < 2 && 2 < 3); // true && true true console.log(1 > 2 && 2 < 3); // false && true false
||
||: 左右两边各自有一个判断条件, 如果两个条件都为假, 整个返回false, 如果有一个条件为真, 整个返回true
全假为假 一真为真
console.log(true || false); // true console.log(1 < 2 || 2 > 3); // true || false true console.log(1 > 2 || 2 > 3); // false || false false
!
!: 取反 返回的结果是true false
如果原来的是true 取反返回false 如果原来是false 取反就是true
js中为假: false 0 NaN '' null undefined
console.log(!''); // true
console.log(!1); // false
console.log(!{}); // false
短路运算
短路运算: 取值(两个值选择一个) 判断运算
逻辑与短路
逻辑与短路: 如果&&左边第一个条件为假, 第二个条件不执行 如果第一个为真 执行第二个条件
var a = 1, b = 1; var c = --a && --b; // --a a = 0 0是假 console.log(c, a, b); var m = 1, n = 1; var d = m-- && n--; // 1 1是真 (m--: m =0) 1 && n-- n = 1 d = 1 n-1 = 0 console.log(d, m, n); // 1 0 0
逻辑或短路
逻辑或短路: 如果第一个条件为真, 第二个条件不执行 如果第第一个条件为假 执行第二个条件
var o = 1, p = 1; var mn = o-- || p--; // o-- --在后 1 || p-- o=0 1 || p-- 1为真 p--不执行 console.log(mn, o, p); // 1 0 1
三目运算符
三目: 条件 ? 条件为真的时候执行的代码 : 条件为假的时候执行的代码;
代码只能有一句代码
1 > 2 ? alert('哇、1你牛了啊') : alert('还是2厉害');
运算优先级
获取元素
通过id获取
通过id: 通过id获取到的是单独的一个元素
语法: document.getElementById('id')
document: 文档
get: 获取
Element: 元素
ById: 通过id
var b = document.getElementById('box');
console.log(b);
通过标签获取
通过标签名: 获取到的是一个集合, 不可以直接做任何操作(添加事件、加样式)
语法: document/父元素.getElementsByTagName('标签名');
集合: 类数组, 有长度 有下标 但是不能使用数组的方法
长度: length
下标: 从左往右从0开始的数字
即使只有一个符合条件的元素, 当前拿到的也是集合
// 获取li
var lis = document.getElementsByTagName('li');
console.log(lis); // HTMLCollection(5) [li, li, li#box, li, li, box: li#box]
console.log(lis.length); // 5个
console.log(lis[0]); // 得到第一个li
// 获取ul
var uls = document.getElementsByTagName('ul');
console.log(uls); // HTMLCollection [ul]
console.log(uls[0]);
var ul = document.getElementsByTagName('ul')[0];
console.log(ul);
// 获取ul中的li
var lis1 = ul.getElementsByTagName('li');
console.log(lis1); // HTMLCollection(5) [li, li, li#box, li, li, box: li#box]
通过类名获取
通过类名: 获取到的是一个集合, 不可以直接做任何操作(添加事件、加样式)
语法: document/父元素.getElementsByClassName('classname');
集合: 类数组, 有长度 有下标 但是不能使用数组的方法
长度: length
下标: 从左往右从0开始的数字
即使只有一个符合条件的元素, 当前拿到的也是集合
ie8+
// 通过one获取元素
var ones = ul.getElementsByClassName('one');
console.log(ones);
鼠标事件
事件三部曲
事件三部曲:
\1. 找到谁 获取元素 获取到鼠标要操作的元素
\2. 加事件 元素.事件 = function (){
\3. 具体要做的操作
}
注意: 集合一定要通过下标获取到具体的元素之后 才能添加事件 否则没有效果
// 1. 获取 div
// 集合一定要通过下标获取到具体的元素之后 才能添加事件 否则没有效果
var div = document.getElementsByTagName('div')[0];
console.log(div);
// 2. 加事件
div.onclick = function () {
// 3. 具体要做的操作
console.log('点击');
};
鼠标事件
\1. 单击: onclick
\2. 双击: ondblclick
\3. 划入: onmouseenter onmouseover
\4. 划出: onmouseleave onmouseout
\5. 按下: onmousedown
\6. 抬起: onmouseup
\7. 移动: onmousemove
\8. 右键菜单: oncontextmenu
// 1. 获取 div
// 集合一定要通过下标获取到具体的元素之后 才能添加事件 否则没有效果
var div = document.getElementsByTagName('div')[0];
console.log(div);
// 2. 加事件
div.onclick = function () {
// 3. 具体要做的操作
console.log('点击');
};
div.ondblclick = function () {
console.log('双击');
};
// 划入
div.onmouseenter = function () {
console.log('enter');
};
div.onmouseover = function () {
console.log('over');
};
// 划出
div.onmouseleave = function () {
console.log('leave');
};
div.onmouseout = function () {
console.log('out');
};
// 按下
div.onmousedown = function () {
console.log('down');
};
div.onmouseup = function () {
console.log('up');
};
// 移动
div.onmousemove = function () {
console.log('move');
};
// 右键
div.oncontextmenu = function () {
console.log('menu');
};
over与enter的区别
enter: 子元素不会触发父元素身上的事件
over: 子元素会触发父元素身上的事件
// 1. 获取元素
var div = document.getElementsByTagName('div')[0];
console.log(div);
// 2. 加事件 元素.事件 = function(){}
div.onmouseenter = function () {
console.log('enter');
};
div.onmouseover = function () {
console.log('over');
};
操作元素内容
操作单标签内容
单标签中只有表单标签有元素的内容, 写在value上
操作表单元素的值:
获取: var 变量 = 元素.value;
设置: 元素.value = 值;
// 1. 获取输入框
var inp = document.getElementsByTagName('input')[0];
console.log(inp);
// 2. 获取: var 变量 = 元素.value;
var txt = inp.value;
console.log(txt);
// 3. 设置: 元素.value = 值;
inp.value = '张三';
// 4. 操作下拉列表
// 通过select的value直接拿到当前选中值
var sel = document.getElementsByTagName('select')[0];
console.log(sel);
var city = sel.value;
console.log(city);
sel.value = '广州';
操作闭合标签内容
操作闭合标签内容:
获取: var 变量名 = 元素.innerHTML/innerText;
设置: 元素.innerHTML/innerText = 值;
innerHTML与innerText的特性:
\1. innerHTML可以识别标签
\2. innerText不可以识别标签
\3. 都是操作闭合标签, 后面的会覆盖前面的
基于原有内容基础上来设置: 元素.innerHTML/innerText = 原内容 + 新内容;
// 1. 获取div
var div = document.getElementsByTagName('div')[0];
console.log(div);
// 2. 获取内容
var txt = div.innerText;
console.log(txt);
var html = div.innerHTML;
console.log(html);
// 3. 设置内容
// div.innerText = '<i>这是一个斜体标签</i>';
// div.innerHTML = '<i>这是一个斜体标签1111</i>';
// 4. 基于原有内容基础上来设置 元素.innerHTML/innerText = 原内容 + 新内容;
div.innerText = txt + '<i>这是斜体标签</i>';
div.innerHTML = html + '<i>这是斜体标签111</i>';
操作属性
获取: var 变量名 = 元素.属性名;
设置: 元素.属性名 = 值;
所有的属性都可以用上述方式操作, 其中class例外, 由于class关键字, 不能直接使用, 使用className
// 1. 获取元素
var div = document.getElementsByTagName('div')[0];
console.log(div);
// 2. 获取
var id = div.id;
console.log(id);
console.log(div.title); // div
console.log(div.className); // one
// 3. 设置 元素.属性名 = 值;
div.id = 'wrap';
// 4. 在轮播图中 设置当前被选中
div.className = 'active';
// 获取img
var img = document.getElementsByTagName('img')[0];
console.log(img);
// 设置地址
img.src = './img/2.jpg';
操作样式
单个样式设置
只做设置不做获取
设置样式: 通过js都是行内样式
元素.style.属性名 = 值;
在js中, -连字符不能使用, 需要转成驼峰命名法
// 1. 获取div
var div = document.getElementsByTagName('div')[0];
console.log(div);
// 2. 设置样式
div.style.width = '200px';
div.style.height = '200px';
div.style.background = 'pink';
div.style.fontSize = '30px';
批量设置样式:
元素.style.cssText = '属性名: 属性值; 属性名: 属性值;';
cssText直接设置给style属性, 覆盖原来标签上的行内样式
div.style.cssText = 'width: 300px;height: 300px; background: skyblue; font-size: 50px;';
338
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
