你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。
算术运算符
算术运算符不能用小数做运算,要先把小数转整数,再除相对应的倍数,以下是几种算术运算符
加—————[+]
减—————[-]
乘—————[*]
除—————[ / ]
取模、取余 —[%]
- 隐式类型转换
+ 在有字符串的时候,会进行字符串拼接
- * / % 会尽力把不是数字的转化为数字,如果两边有任意一边有不是字符串数字 就会 出现NaN
布尔值和数字运算会转换成0(false)和1(ture) 运算
false + 8 = 8
除number string boolean 外,讨论其他对象和另一个对象的加法无意义
%:
10%3 = 1
取余数
5.5%2 = 1.5
取余数 1.5
%会有小数
++:
let a = 10
console.log(a++) //10 后置自增表达式还是原来的值
console.log(++a) //11 前置自增先自增
取表达式整体时才有区别
let a = 10
let b = 5
alert(a++b)//报错
alert(a+++b)//15
–:
let a = 10
a--//9
意思和++一样
隐式转换
++或-- 会强行转数字进行运算,返回值也是数字
-
NaN ——————————–not a number(不是一个数字)
不是数字的数字类型(number类型)
NaN和自己都不相等
isNaN( obj ) 判断是否为NaN,是返回true,否返回false; -
显示类型转化
-
模板字符串
let oWrap = document.getElementById("wrap")
let x = "啦啦啦啦"
oWrap.innerHTML = "<p></p>"字符串不能换行
oWrap.innerHTML = "<p"+ x +
"</p>"
用+拼接
单引号或双引号描述的字符串内部不能换行,但是模板字符串 可以` ` (在键盘左上角Esc下面)
oWrap.innerHTML = `<p>
<a>${x}</a>
</p>`
想显示$,用\转义符(转义只存在字符串或正则里)
oWrap.innerHTML = `<p>
<a>\${x}</a>
</p>`
赋值运算符
let a = 20
a+=5 //a = a + 5
<div id="wrap">
<p id="goudan"></p>
</div>
let oWrap = document.getElementById("wrap")
let oP = document.getElementById("goudan")
oWrap.innerHTML = oWrap.innerHTML + "<a>1234</a>"
oP.innerHTML = "789"
console.log(oWrap) //有p标签,但是标签里不会加文字
或者在改变oWrap 以后再获取oP,就可以获取到了
+=
赋值后再改变这个标签,会找不到之前的标签
也可以在不影响以前内容,添加标签
=
let a = 5
a -=2 //a = a - 2 //3
a=3 //a = a * 3 //
a/=6 //a = a / 5 //
a %= 5 //a = a % 5 //0
a%5 结果不可能超过5,不可能超过被磨的那个数
比较运算符
比较运算符,得到的结果都是布尔值
= 赋值运算符
== 只比较值是否相等,不会管数据类型
=== 值和数据类型都要一样,先会判断数据类型,再判断值
如果不是特别有必要,(模糊比较)否则都用===判断,===效率更快
!= 不等
!== 不全等
let a = 10
let b = 10
console.log( a == b)//true
console.log(a === b)//true
let a = 10
let b = “10”
console.log( a == b)//true
console.log(a === b)//false
比较指针
let a = [10]
let b = [10]
console.log( a == b)//false
console.log(a === b)//false
基础数据类型(栈内存)
string number boolean undefined null symbol
引用数据类型(堆内存)
boject
[]{}
引用数据类型在做判断时,是比较指针指向
不要用基础数据类型和引用数据类型作比较,无意义
> < >= <=
let a = 10
let b = 50
console.log(a > b)//false
let a = "3"
let b = "20"
console.log(a > b)//true
字符串比较是通过ascll码来比较的
判断结果是boolean值
逻辑运算符
与—————[&&]
或—————[ || ]
非—————[!]
- && 遇到假停
let a = true && false; 只考虑布尔值时,真真为真,其他为假,两边都为真,才是真
console.log(a)//false
真正的运用:遇到假就停,取这个假值,否则取最后的值
假的意思:数据被强行转成布尔值,是真是假
哪些数据在被转成布尔值的时候是 false:
0 undefined null false ‘’ NaN
取数值本身,不会取布尔值
let a = '' && 8 && 9
console.log(a)//''
let a = 2 && 7 && 9
console.log(a)//9
- || 遇到真停
let a = true || false; 只考虑布尔值时,假假为假,两边有一个为真,就是真
真正的运用:遇到真就停,取真值,否则取后面的值
let a = 4 || 0 || NaN
console.log(a) //4
let a = '' || 0 || NaN
console.log(a) //NaN
- !
只考虑布尔值时,取反
真正的作用:取数据对应相反的布尔值
非运算完一定是一个布尔值结果
let a = !0
console.log(a)//true
let a = !!0
console.log(a)//false //如果想知道这个数据对应的是真值还是假值,就可以用!!
取某一个数据对应的布尔值
- , 运算符
let a = (4,5,6)
运算符优先级
从等级最高依次降低等级
. [] () 等级最高
++ – ! typeof
* / %
+ -
> < >= <=
&&
||
三目 ?:
=
, 等级最低
小例子
//例子1:
let a = 8 || 9 && 0
a = 8
//例子2:
let a = 10,
let b= 5
a = 8 || (b=6)
console.log(a)//8
console.log(b)//5
//例子3:
let a = 8 || 5 && (b=6)
console.log(a)//8
console.log(b)//5
从最惰性的开始解析,有近路可以走,就直接走近路了
惰性运算,按最低优先级开始判断是否有必要进行运算
拓展-位运算
二进制 逢二进一 0 1 2 3 4
0 1 10 11 100
let a = 15
15的二进制
00000000 00000000 00000000 00001111 (28个0)共32位)
第一位代表符号位,0代表正数
-15的二进制
00000000 00000000 00000000 00001111 先取15的二进制
11111111 11111111 11111111 11110000 取反码
11111111 11111111 11111111 11110001 反码+1
按位取非~
let a = 7
let b = ~a
b是个十进制
先求a的二进制
00000000 00000000 00000000 00000111
再按位取非
11111111 11111111 11111111 11111000 这就是b的值
得到b的十进制数
11111111 11111111 11111111 11110111 减1
00000000 00000000 00000000 00001000 取反码
b = -8
按位与 是两个数之间的操作
let a = 10
let b = 8
let c = a&b
00000000 00000000 00000000 00001010 10的二进制码
00000000 00000000 00000000 00001000 8的二进制码
console.log©//8
操作不合法标签属性(自定义标签属性)
还可以操作合法标签属性,一般不会用他们操作合法标签属性,合法标签属性可以直接·操作,更快
1、getAttribute() 拿属性
2、setAttribute() 设置属性
3、removeAttribute() 移除属性
<div id="wrap" one="789"></div>
cument.getElementById("wrap")
- 获取自定义标签属性
console.log(oWrap.getAttribute("one")) //获取到自定义标签one 的值789
- 设置自定义标签属性
console.log(oWrap.setAttribute("one","123"))//第一个值是要设置的自定义标签,第二个值是修改后的值
console.log(oWrap.setAttribute("two","1234"))也可以新增一个自定义属性
自定义属性的作用:
框架最根本的原理就是基于自定义标签属性去操作的,可以把一些信息,存在自定义标签里,在HTML里存储简单信息的一种方式
vue,angular框架,都是基于自定义的属性去操作的,解析标签的自定义属性,从而把他变成对应的dom结构
- 移除自定义标签属性
console.log(oWrap.removeArribute("one"))
- 获取标签的内容
<div id="wrap">123456789</div>
let oWrap = document.getElementById("wrap")
console.log(oWrap.innerHTML)//123456789
.innerHTML 可以解析标签
-innerText 不可以解析标签,会显示标签 火狐低版本没有,需要用.textContent
input用innerHTML获取不到里面的文字,要用.value
<input type="text" id="inp">
<button id="btn"></button>
let oInp = document.getElementById("inp")
let oBtn = document.getElementById("btn")
document.oBtn.onclick = function(){
console.log(oInp.innerHTML)//不能获取input框里的文字
console.log(oInp.value)//这样才可以获取到input框里的文字
}
CSS选择器补充
div#wrap.on.goudan{ //首先满足是个div ,id是wrap ,class名是on和狗蛋
width:100px;
height:100px;
background-color:pink;
}
<div id="wrap" class="on goudan"></div>