js的对象操作、运算符

1 简单的对象操作

通过 document.getElementById('wp') 获取 html中的dom元素

1. 每一个html标签都是一个对象，成为dom对象

2. 每一个标签的属性也是一个对象的属性

3. 设置对象属性的值 obj.属性名 = ‘aa’;

4. 获取对象属性的值 obj.属性名

每一个html标签都有一个style属性，因此可以使用js操作该style，如果设置style属性，则是给标签行间添加一个style属性

1.1 标题

鼠标悬浮的时候会出现title里的内容

<div id="aa" class="wp" title="这里是内容" >这里是内容</div>

1.2 添加点击事件

给btn添加点击事件

btn.onclick = function(){
        这里是事件内容
    };

1.3 设置对象

1. 通过原生js设置对象
2. 使用{}创建对象，它里面设置属性的是方式 key:value
   key 是属性名 value是属性值
   获取属性的值 obj.key
   设置属性的值 obj.key=value

let obj={
        name:'雷震子',
        age:20,
        sex:'男'
    };

如果访问一个对象中不存在的属性，那么他的结果是 undefined

// obj1中没有属性run，因此结果是undefined
    console.log(obj1.run);

2 js的运算符

1. 算术运算符
2. 比较(关系)运算符
3. 逻辑运算符
4. 三元运算符
5. 赋值运算符

从1到5运算符的优先级依次减弱

2.1 算术运算符

2.1.1 + 运算符

如果 + 的两边有一个是字符串，则表示的是字符串的拼接
原理：如果两个不同类型的数据相加，有一个是字符串，则另一个数据会被隐式转化为字符串，然后通过 + 和另一个数据拼接在一起

let num1=10;
let num2=20;
let num3=num1+num2;
console.log(num3);
//输出num3的值为30

let str='莫愁前路无知己';
let num4 = str + num2 + num2; 
console.log(num4);
//输出 莫愁前路无知己2020

2.1.2 - 运算符

-运算符，可以把他两边的字符串类型隐式转化为数字类型
如果被转化的字符串是一个数字，则参与减法运算
如果被转化的字符串是一个普通字符，则得出的结果是 NaN

除了 + 运算的时候，把数字转化为字符串，其他的算术运算符都是把字符串转化为数字

let str1 = '西出阳关无故人';
let num6=200;
let num7=100;
let num8='300';
console.log(num6-num7);//输出100
console.log(str1-num7);//输出NaN
console.log(num6+num8);//输出200300
console.log(num6-num8);//输出-100

2.1.3 * 运算符和 / 运算符

let num1=2;
let num2=4;
console.log(num1*num2);//输出8
console.log(num2/num1);//输出2

2.1.4 % 运算符

% 取余，又称 模运算
运算的结果是 相处之后的余数
被除数%除数 返回结果是 余数

被除数和除数不一定都是整数

let num3=10;
let num4=3;
console.log(num3%num4);//输出1

2.1.5 + + 运算符和 - - 运算符

a++ 、 ++a 都是自增写法

c = a++; 先把a的值赋值给c，然后在执行a的自增
c = ++a; 先执行a的自增，然后在把a的值赋值给c

let a=10;
let c=a++; 
//1.把a的值赋值给c，此刻c=10；
//2.执行a的自增，此刻a=11
console.log(c,a);//c输出10  a输出11

– 自减，a-- --a使用方式和上面的 ++ 一致
c = a–; 先把a的值赋值给c，然后在执行a的自减
c = --a; 先执行a的自减，然后在把a的值赋值给c

++ 和 – 的运算优先级高于 + - * / %

2.2 关系运算符

大于 >，小于< ，
大于等于>= ，小于等于<=
等于== ，不等于 !=，
全等 === ，不全等!==

关系表达式的返回值是 true 或者 false
== 只比较数值，不比较类型
=== 不但比较数值，而且比较类型

console.log(3>5);//输出false
console.log(5>=5);//输出true
let num1=30;
let num2='30';
console.log(num1===num2);//输出false
console.log(num1!==num2);//输出true

2.3 逻辑运算符

或 ||
与(并且) &&
非 !

2.3.1 判断规则

1. 或 || ：两边的判断条件，只要有一个为真(true)，则返回结果为真

console.log(3>4 || 2>3);//输出false
console.log(3>4 || 2<3);//输出true

2. 与 && ：两边的判断条件，都为真(true)，则返回结果为真

console.log(3>4 && 2<3);//输出false
console.log(3<4 && 2<3);//输出true

3. 非 ! ：取当前结果返回布尔值的 反向值，就是取反的意思

2.4 短路算法

逻辑算法的短路算法
表达式1 || 表达式2 表达式1为真的时候，表达式2不会被解析
表达式1 && 表达式2 只有表达式1为真的时候，表达式2才会被解析

let num=10;
num>2&&num++;
console.log(num);//11
    
let n=10;
console.log(n<2||n++);//10

2.5 运算符的优先级

1. 小括号()
2. !
3. 算术运算符
4. 比较运算符 > <
5. 逻辑运算符 || &&
6. 赋值运算符
   赋值的简写

= += -= *= /=

    简写形式       含义
    n+=1          n=n+1
    n-=1          n=n-1
    n*=1          n=n*1
    n/=1          n=n/1

3 显示转换

1. 把数据转换为字符串，使用 String()
2. 把数据转换为number，使用 Number()
3. 把数据转换为boolean，使用 Boolean()

另外，非0即为真
0，''，null，undefined，都会被转化为 false

4 三元运算符

三元运算符 ? :
判断条件 ? 判断条件为真执行当前代码 : 判断条件为假执行当前代码

//执行表达式
6>4 ? console.log('代码1') : console.log('代码2');
//输出 代码1

5 获取html中的元素对象

5.1 通过id获取元素

document.getElementById('id名');

let ul = document.getElementById('id名');

5.2 通过标签名获取元素

document.getElementsByTagName('标签名');

5.2.1 特点

1. 调用对象可以是 document 之外的对象
   如果通过document对象获取的标签，则是获取页面上所有的标签对象
   如果通过 其他对象获取的标签，则是获取该对象下所有的标签对象
2. 获取的元素对象不仅仅是一个，可以有多个
3. 获取的标签对象存放在数组中，也就是该方法的返回值是一个数组

5.2.2 数组

数组，在数组中可以存放任意类型的数据
let arr = [‘电影’,‘作业’,‘美食’,‘游戏’,2134,345,true];

数组的下标从0开始计算，因此如果需要从数组中获取内容则：
arr[内容对应的下标]

let arr = ['电影','作业','美食','游戏',2134,345,true];
console.log(arr[2]);//输出 美食

5.3 通过class类名获取元素

document.getElementsByClassName('class名');

返回值是 一个数组，数组中包含了所有具有该class名的元素对象
特点和 getElementsByTagName 一致

5.4 获取body的方法

1. document.getElementsByTagName('body')[0];
2. document.body

1.  let body1=document.getElementsByTagName('body')[0];
2.  document.body.style.background='#f60';