js的简单对象操作

js的简单对象操作

通过let wp=document.getElementById(‘wp’); 获取html中的dom元素

每一个html标签都是一个对象，称为dom对象
每一个标签的属性，也是一个对象的属性

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

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

let abc = document.getElementById('bb');
    abc.style.color = '#f00';

如果属性是组合形式的，需要把-去掉，使用驼峰形式

abc.style.fontSize = '40px';
    console.log(abc.title);

给button添加点击事件

btn.onclick = function(){
        alert(txt.value);
        console.log(txt.value);
        txt.style.border='2px #f00 solid';
    };

使用{}创建对象，它里面设置属性的方式是 key：value
key是属性名 value是属性值
获取属性的值obj.key
设置属性的值 obj.key=value

let obj1={
        name:'王俊凯',
        age:22,
        sex:'男'
    }

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

js的运算符

1.算术运算符
2.比较（关系运算符）
3.逻辑运算符
4.三元运算符
5.赋值运算符
从1到5，运算符的优先级以此减弱

js通过input获取的value属性获取的值，是一个字符串，通过隐式转换 变成一个数字

let wp1=document.getElementById('wp1');
btn.onclick=function(){
    let v1=wp1.value-0;
    console.log(v1);
};

算数运算符

+ - * / % ++ --

+运算符

let num1=10;
let num2=20;
let num3=num1+num2;
console.log(num3);

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

let str='莫愁前路无知己';
let num4=str+num2+num2;
console.log(num4);
let str1='西出阳关无故人';
console.log(str+str1);

减号（-）运算符

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

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

%取余

%取余 ，又称模运算
运算的结果是相除之后的余数
被除数%除数 返回结果是 余数
被除数和除数不一定都是整数

++ –

a++ ++a 都是自增写法
c=a++;先把a的值赋值给c，然后再执行a的自增
c=++a；先执行a的自增，然后再把a的值赋值给c

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

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

关系运算符

关系运算符

大于， <小于， >= 大于等于，<=小于等于，==等于，！=不等于，===全等，！==不全等 关系表达式的返回值是true 或者false

== 只比较数值，不比较类型
=== 不但比较数值，而且比较类型

逻辑运算符

逻辑运算符
或 ||
与(并且) &&
非 ！

判断规则
或||：两边的判断条件，只要有一个为真（true），则返回结果为真（true）
与&&：两边的判断条件都为真（true）则，则返回结果为真（true）
非 ！：取当前结果返回的布尔值的 反向值

parseInt(num) 把数字num直接转化为整数，他会去掉num的小数部分

let num=325;
let s =num/100;
console.log(parseInt(s));

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

优先级
1.小括号（）
2.！
3.算术运算符
4.比较运算符
5.逻辑运算符
6.赋值运算符

隐式转换
boolean数据和number类型的数据运算的时候，布尔类型会隐式转化为number类型，其中false=>0 true=>1

显式转换

把数据转化为字符串,使用 String()
把数据转化为number,使用 Number()
把数据转化为boolean,使用 Boolean()

另外，非0即为真
0，‘’,null,undefined,都会被转化为false
字符串转数字

let num=Number('唐伯虎');

数字转字符串

let str=String(1000);

把数据转为Boolean值

let bol1=Boolean('唐伯虎');

三元运算符

？：
判断条件 ？ 判断条件为真，则执行当前代码 ： 判断条件为假，则执行当前代码

6>4? console.log(''): console.log('');

获取html中的元素

1.通过id名获取
2.通过标签名获取元素
let li=document.getElementsByTagName(‘li’);

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

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

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

3.通过类名获取元素
let liBox=document.getElementsByClassName(‘class名’);

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

特点和document.getElementsByTagName 一致

获取body的方法
1.document.getElementsByTagName(‘body’)[0]
2.document.body