运算符+事件三要素

运算符+事件三要素

运算符与表达式

运算符：也被称为操作符，用于执行程序代码运算，会针对一个以上操作数来进行运算

表达式：是由一个或多个操作数通过运算符连接起来的式子，每个表达式最终都会有一个结果，返回给开发者

运算符的分类

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

算术运算符

加+ 隐士转换: “string”+任意类型数据 = “string”;

规则：

1、如果两边都是数字，则就是普通的数学计算

2、如果有一边是字符串，则另一边也转成字符串，变成字符串的拼接

3、如果没有字符串，则调用 Number 方法，转成数字，再进行相加

4、如果有一边是对象，则对象调用 toString 得到字符串表示，再进行计算

var a = 5;
var b = '20';
console.log(a + b); // '520'

console.log(true + null); // 1
console.log(1 + {}); // '1[object Object]'

console.log(null + undefined); // NaN
console.log(0 + false); // 0
console.log('' + false); // 'false'
console.log('' + undefined); // 'undefined'



var a = 5;
var b = 20;
// console.log('5+20的和是25');
console.log(a + '+' + b + '的和是' + (a + b));
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

​ - * / 隐士转换: number -*/ 任意类型数据 = number;

操作符的两边都调用Number转成数字再计算

console.log(5 - '20'); // -15
console.log(false - null); // 0
console.log('小王' - 5); // NaN
1
2
3

% 取模 取余

console.log(10 % 3); // 1
console.log(10 % '12'); // 10
console.log(10 % null); // NaN

// 一个递增的变量取模n，返回的是0--n-1之间的数
console.log(0 % 3); // 0
console.log(1 % 3); // 1
console.log(2 % 3); // 2
console.log(3 % 3); // 0
console.log(4 % 3); // 1
console.log(5 % 3); // 2
console.log(6 % 3); // 0
1
2
3
4
5
6
7
8
9
10
11
12

递增++ 递减–

var n = 3;
n++; // n = n + 1
++n; // n = n + 1
console.log(n);
1
2
3
4

加加在前(前置递增)，先自增，然后参与表达式的计算(再返回)。

加加在后(后置递增)，先参与表达式的计算，再自增(再返回)。

var num1 = 2;
var num2 = 20;
var num3 = num1-- + num2;
var num4 = num1 + num2;
console.log(num3, num4);



var a = 10;
var b = ++a + a++;
console.log(a, b); // 12 22
1
2
3
4
5
6
7
8
9
10
11

赋值运算符

= += -= *= /= %=

// =    赋值
// += -= *= /= %=   操作符的两边先操作，结果赋给左边

var a = 5; // 将5赋给a
a += 2; // a = a+2;
a *= 3;
console.log(a); // 21
1
2
3
4
5
6
7

3、比较运算符

比较运算符返回的是布尔值

> >= < <=

规则：

1、如果操作数的两边都是字符串，则是字符串的比较，比较的是字符串的编码，字符串是一位一位的比较

2、操作数的两边有一边不是字符串，则都转成数字，再进行比较

console.log(5 > 3); // true
console.log(5 >= 5); // true

console.log(12 > 2); // true
console.log(12 > '2'); // true
console.log('12' > '2'); // false
console.log(null >= ''); // true
1
2
3
4
5
6
7

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AaXQYlPh-1632923100626)(C:\Users\Administrator\Desktop\课堂笔记\第二阶段\笔记\image\ASCII.png)]

== !=

两个等号的相等，为了比较，会隐式类型转换，都转成数字进行比较

null和undefined不转换，只有null和undefined它们相比较时为真

console.log(10 == '10'); // true
console.log(false == 0); // true
console.log('' == 0); // true
console.log(null == 0); // false
console.log(null == undefined); // true
console.log(null != undefined); // false
1
2
3
4
5
6

=== !== (工作中推荐)

三个等号的比较（全等），必须类型和值都相等，不会进行转换

console.log(10 === '10'); // false
console.log(null === undefined); // false
console.log(null !== undefined); // true
1
2
3

4、逻辑运算符

1、&& 与 并且 找假反假

//找假反假
console.log(12 > 10 && 12 >= 12);
12>10为真，继续执行，12>=12为真，继续，后无&&，直接返回最后的真。

console.log(12 > 10 && 12 > 12);
12>10为真，继续执行，12>12为假，直接返回假。

console.log(12 < 10 && 12 == 12);
12<10为假，直接返回假，后面不运算不执行。
1
2
3
4
5
6
7
8
9

// &&   与（并且）
// 操作符的两边都为真，结果为真

// 短路操作：左边为假，则不用跑右边
// 如果左边为假，则不用跑到右边；直接看左边，如果左边是表达式，则表达式求值，如果左边是值，则返回这个值
// 如果左边为真，则跑到右边；直接看右边，如果右边是表达式，则表达式求值，如果右边是值，则返回这个值

console.log(12 > 10 && 12 >= 12); // true
console.log(12 < 10 && 12 >= 12); // false

console.log(12 > 10 && 3); // 3
console.log(false && 3); // false
1
2
3
4
5
6
7
8
9
10
11
12

逻辑&&应用
function fn (callback){
    callback && callback();
}

callback如有实参，则为真，继续执行后面语句callback()。
callback如无实参，则为假，不执行（中断）后面语句callback()。
1
2
3
4
5
6
7

2、|| 或 或者 找真反真

console.log(12 < 10 || 12 > 12);
12<10为假，继续执行，12>12为假，继续，后无||，直接返回最后的假。

console.log(1 || 12 >= 12);
1为真，直接返回1，后面不执行不运算。

console.log(12 > 10 || 12 > 12);
12>10为真，直接返回真，后面不执行不运算。

1
2
3
4
5
6
7
8
9

// ||   或（或者）
// 操作符的两边只要有一边为真，结果为真
// 短路操作：左边为真，则不用跑右边

// 如果左边为真，则不用跑到右边；直接看左边，如果左边是表达式，则表达式求值，如果左边是值，则返回这个值
// 如果左边为假，则跑到右边；直接看右边，如果右边是表达式，则表达式求值，如果右边是值，则返回这个值

console.log(12 > 10 || 12 <= 12); // true
console.log(12 < 10 || 12 <= 12); // true
console.log(12 < 10 || 12 <= 11); // false

console.log(12 > 10 || 3); // true
console.log(12 < 10 || 3); // 3
console.log('' || 3); // 3
console.log(5 || 3); // 5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

3、! 非 取反

// !    非（取反）
var a = 12;
console.log(!a); // false
console.log(!!!!!!!!!a); // false
1
2
3
4

综合案例

var a = 1,
    b = 1;
var n = --a && --b;
console.log(n, a, b);
var n = ++a && ++b;
console.log(n, a, b);


var a = 1,
    b = 1;
var n = --a || --b;
console.log(n, a, b);
var n = ++a || ++b;
console.log(n, a, b);
1
2
3
4
5
6
7
8
9
10
11
12
13
14

5、三目运算符

三目（三元）

格式：表达式 ? 表达式为真执行代码 : 表达式为假执行的代码;

var age = 7;
// age >= 7 ? alert('上小学') : alert('上大班');


// 推荐使用方法
var v = age >= 7 ? '上小学' : '上大班';
console.log(v);
1
2
3
4
5
6
7

6、优先级

https://github.com/xhlwill/blog/issues/16

​ [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Wal8M3kJ-1632923100628)(C:\Users\Administrator\Desktop\web js笔记及思维图\js二阶段\笔记\image\截图20210906092507.png)]

7、隐式类型转换

// 加 +
console.log(10 + 100); // 110
console.log(10 + 'string'); // '10string'
console.log(19 + 10 + 'age' + 18 + 10)    //'29age1810'
console.log(10 + '100'); // '10100'
console.log(10 + true); // 11
console.log(true + false); // 1
console.log('10' + true); // '10true'
console.log('' + 100); // '100'
console.log(10 + null); // 10
console.log(10 + undefined); // NaN 
// 减 -
console.log(100 - 10); // 90
console.log(100 - 't'); // NaN
console.log(100 - ''); // 100
console.log(100 - true); // 99
console.log(100 - '80'); // 20
console.log(100 - null); // 100
console.log(100 - undefined); // NaN
// 乘 *
console.log(100 * 'a'); // NaN
console.log(100 * ''); // 0
console.log(100 * '100');// 10000
console.log(100 * null); // 0
console.log(100 * undefined);// NaN
// 除 /
console.log(100 / 'a'); // NaN
console.log(100 / ''); // 无穷大
console.log(100 / '70'); // 10/7
console.log(100 / null); // 无穷大
console.log(100 / undefined); // NaN
// 取余 %
console.log(100 % 'a'); // NaN
console.log(100 % ''); // NaN
console.log(100 % '70'); // 30
console.log(100 % null); // NaN
console.log(100 % undefined); // NaN
// ++
var n = '10';
n++; // 1、n转为数字10   2、n++  
console.log(n); // 11
// 取反
console.log(!true); // false
console.log(!10); // false
console.log(!'web'); // false
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

7、强制类型转换和隐式类型转换

1、强制类型转换

Number(参数)   
parseInt(参数)   
parseFloat(参数)   
String(参数)   
参数.toString()   
Boolean(参数)
1
2
3
4
5
6

2、隐式类型转换

+ - * / % ++ -- 都具有隐式类型转换的作用
1

javaScript交互基础

找元素

通过ID

通过ID获取元素: 
document.getElementById('ID');
返回这个元素的引用，返回的是一个元素

document文档 seletor 选择器  get获取    Element元素    ById通过ID  query查询 
1
2
3
4
5

// 元素.事件 = function () { 要做的事 }

var box = document.getElementById('box');
// console.log(box);
box.onclick = function () {
    alert('姐妹，上课了');
}
1
2
3
4
5
6
7

获取特殊标签

• document.title = ‘醒醒别睡着了’; // title
• document.body; // body
• document.documentElement; // html

通过标签名

// 2、通过标签名获取元素，返回的是一组元素（对象、类数组、伪数组），它有长度，可以通过下标获取某一个
// document.getElementsByTagName('标签名');  找整个页面下的元素
// 父级.getElementsByTagName('标签名');      找这个父级下的元素

var lis = document.getElementsByTagName('li'); // 找整个页面的
var lis = list1.getElementsByTagName('li'); // 找list1下面的
console.log(lis);
console.log(lis.length); // 6
console.log(lis[2]); // 通过下标获取某一个

// 只能给某一个元素添加事件，而不能给这个虚拟的组添加事件
lis[1].onclick = function () {
    console.log('点我了');
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

通过class名

IE8及以下不支持

// 3、通过class名获取元素，返回的是一组元素（对象、类数组、伪数组），它有长度，可以通过下标获取某一个
// document.getElementsByClassName('class名')
// 父级.getElementsByClassName('class名')

// var abc = document.getElementsByClassName('abc');
var abc = list1.getElementsByClassName('abc');
console.log(abc);

abc[0].onclick = function () {
    console.log('睡觉的醒醒');
}
1
2
3
4
5
6
7
8
9
10
11

通过css样式

var a = document.querySeletor('ul li');
//返回第一个元素，里面为css样式
var as = document.querySeletorAll('li');
//返回一组元素（伪数组）
1
2
3
4

交互三要素

• 1、找到谁
• 2、做什么操作
• 3、干什么事

元素.事件 = function () { 要做的事 }

window.onload

当页面加载完成之后（页面包含的html\css\js\图片等等），执行这个函数

window.onload = 函数

window.onload = function () {
    var box = document.getElementById('box'); // 找元素

    console.log(box); // 检查找得对不对

    box.onclick = function () {
        alert('哥们，点了我')
    }
}
1
2
3
4
5
6
7
8
9

鼠标事件

• onclick ：点击事件
• ondblclick：双击事件
• onmouseover ： 鼠标移入元素
• onmouseout : 鼠标离开元素
• onmouseenter ：鼠标移入元素
• onmouseleave ：鼠标离开元素
• onmousemove: 鼠标在元素中移动
• onmousedown： 鼠标按下
• onmouseup： 鼠标抬起
• oncontextmenu ：鼠标右键菜单事件

window.onload = function () {
    var box = document.getElementById('box');

    // 点击
    box.onclick = function () {
        console.log('点我了');
    }

    // 双击
    box.ondblclick = function () {
        console.log('双击了');
    }

    // 鼠标按下
    box.onmousedown = function () {
        console.log('按下');
    }

    // 鼠标抬起
    box.onmouseup = function () {
        console.log('抬起');
    }

    // 鼠标在元素上滑动（抚摸），会不断的执行
    box.onmousemove = function () {
        console.log('移动了');
    }

    // 移入
    box.onmouseover = function () {
        console.log('进来了');
    }

    // 移出
    box.onmouseout = function () {
        console.log('离开了');
    }

    // 另一对移入移出
    // 移入
    box.onmouseenter = function () {
        console.log('进来了222');
    }

    // 移出
    box.onmouseleave = function () {
        console.log('离开了222');
    }

    // 右键(环境菜单)
    box.oncontextmenu = function () {
        console.log('右键执行了');
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

javaScript操作标签

元素内容操作

表单元素

• 获取：元素.value;
• 设置：元素.value = 值;

注意：设置会覆盖原来的内容

<input type="text">
<br>
<button>获取button>
<button>设置button>
1
2
3
4

// 获取：元素.vlaue
// 设置：元素.vlaue = 值;

var input = document.getElementsByTagName('input')[0];
var btn = document.getElementsByTagName('button');

// console.log(input, btn);

// 1、获取
btn[0].onclick = function () {
    console.log(input.value);
}

// 2、设置
btn[1].onclick = function () {
    input.value = '写代码';
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

双标签元素

识别标签

• 获取：元素.innerHTML
• 设置：元素.innerHTML = 值

不识别标签

• 获取：元素.innerText
• 设置：元素.innerText = 值

<div>你是<b>隔壁老王b>div>

<button>获取button>
<button>设置button>
1
2
3
4

// innerHTML: 识别标签
// 获取：元素.innerHTML
// 设置：元素.innerHTML = 值

// innerText: 不识别标签
// 获取：元素.innerText
// 设置：元素.innerText = 值

var div = document.getElementsByTagName('div')[0];
var btn = document.getElementsByTagName('button');

// 获取
btn[0].onclick = function () {
    console.log(div.innerHTML); // 你是隔壁老王
    console.log(div.innerText); // 你是隔壁老王
}

// 设置
btn[1].onclick = function () {
    // div.innerHTML = '你是平头妹';
    div.innerText = '你是平头妹';
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

操作元素属性

属性：写在起始标签里的名值对

• 获取：元素.属性名
• 设置：元素.属性名 = 值

class要改成className

• 获取：元素.className
• 设置：元素.className = 值

<div id="box" class="abc" title="不服就干">平头哥div>
1

var box = document.getElementById('box');

// 属性操作
console.log(box.title); // 获取
box.title = '平头哥找平头妹'; // 设置


// -------------------------------
// class要用className
console.log(box.className); // 获取
box.className = 'ddd'; // 设置

// 等号右边的先算，算完赋给左边
box.className = box.className + ' ddd';
box.className += ' ddd'; // 简写
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

操作元素样式

• 设置：元素.style.样式名 = 值; 设置的是行间的样式

• 获取：元素.style.样式名; 获取的行间的样式（不实用）

• 设置：元素.style.cssText = ‘width: 200px; height: 200px;’

<div id="box" style="border: 10px solid #ccc;">谁敢点我div>
1

// 需求：点击box，让它的宽高各为200，背景为红色，字号为30，颜色为白色

var box = document.getElementById('box');

box.onclick = function () {
    // box.style.width = '200px';
    // box.style.height = '200px';
    // box.style.backgroundColor = 'red';
    // box.style.fontSize = '30px';
    // box.style.color = 'white';


    // 一般不推荐，因为它会覆盖原来行间的样式
    box.style.cssText = 'width: 300px;height: 300px;background-color: pink; font-size: 30px; color: green;';
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.className + ’ ddd’;
box.className += ’ ddd’; // 简写

#### 操作元素样式

- 设置：元素.style.样式名 = 值;    设置的是行间的样式

- 获取：元素.style.样式名;       获取的行间的样式（不实用）

  

- 设置：元素.style.cssText = 'width: 200px; height: 200px;'

  

```html
谁敢点我
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// 需求：点击box，让它的宽高各为200，背景为红色，字号为30，颜色为白色

var box = document.getElementById('box');

box.onclick = function () {
    // box.style.width = '200px';
    // box.style.height = '200px';
    // box.style.backgroundColor = 'red';
    // box.style.fontSize = '30px';
    // box.style.color = 'white';


    // 一般不推荐，因为它会覆盖原来行间的样式
    box.style.cssText = 'width: 300px;height: 300px;background-color: pink; font-size: 30px; color: green;';
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15