运算符
算术运算符 运算符前后空格隔开
区别算术运算符 + 和字符串拼接符 + 加号两边只要有一边是字符串,则为字符串拼接符
减号两边如果有字符串,会将字符串隐式转化为数值,如果字符串内非数字,则返回NaN
* 同上
** //指数运算 2**3 2的3次方 前一个叫底数,第二个叫指数,可以为负数
% // 模 取余 大模小取余 小模大取小
//小案例 随机颜 {MOD}
let arr = ["red","pink","skyblue","yellow"]
let str = ""
for (let i = 0; i < 20; i++) {
str += `${i}`
// 4可以由arr.length 替代
}
box.innerHTML = str
效果图:
赋值运算符
等号赋值先看右边,将右边的最终得值 赋予给左边
+= // x = x + y => x += y 同一个变量,原来的值 + 一个值 赋予给新的自己
-= // x = x - y => x -= y 同一个变量,原来的值 - 一个值 赋予给新的自己
%= // x = x % y => x %= y
/= // x = x / y => x /= y
*= // x = x * y => x *= y
++ // x = x + 1 => x++
-- // x = x - 1 => x--
前置 ++ 和后置++的区别
前置 ++ 先运算 再赋值 后置 ++ 先赋值后运算 如下
let a = 1 let c = a++ console.log(a, c)//2 1
let b = 1; let d = ++b console.log(b, d)//2 2
console.log((++a)+(a++)+(++a));//2 + 2 + 4 = 8
一:++赋值2 参与运算 二:取值2参与运算 背后赋值成3 三:++并赋值为4 4参与运算 ```
比较运算符
< >= <= == === != !== //全等 和 等等于的区别 , 全等需要类型一致 一般使用全等于
3 == "3" true
3 === "3" false // 引用类型比较的不是值一样否 而是地址是否一样
let arr1 = [1] let arr2 = [1] console.log(arr1 == arr2) //false ```
第一题:
一张纸1mm 对折多少次可以达到珠穆朗玛峰的高度 8848m
let a = 1;
let b = 8848*1000;//转换单位 保持单位一致 毫米
let i = 0;
while (true)
{
i++;// i记录 折叠次数
a *= 2; //每折叠一次, 高度翻倍
if(a > b){
//判断 高度是否达到
console.log(i);
console.log(a);
break //完成即可跳出 否则无限循环
}
}
自定义属性
属性是对象附属的东西,对象下面都有他们相对应的属性.合法的对象属性 : 系统自带的对象属性, 非法的对象属性,是人为自定义的.
自定义标签属性 // 标签内部的属性
```html
```
对象.属性的操作只会搜索js内对象下的属性,而不能进入标签内查询
因此需要操作自定义标签属性及标签属性,需要如下操作:
1.
setAttribute 设置自定义标签属性
wrap.setAttribute("ss","123")//前一个是要设置的属性名 后一个是属性值
2.
getAttribute 获取标签属性
let value = wrap.getAttribute("zz")//可以访问合法标签属性 console.log(value) // 123
3.
removeAttribute 移除标签属性
wrap.removeAttribute("qq")//可以移除合法标签属性
虽然以上能修改合法属性,但是不需要这样使用,合法的标签属性可以直接通过对象 . 属性操作
在html5中规定 自定义标签属性 需要以data- 开头 data- key = value key会自动转为小写.
自定义属性
基础类型的对象不能设置自定义属性 ==>和包装对象相关
复杂类型可以设置自定义属性==>函数 JSON 数组等等
自定义属性不需要声明,挂载到对象身上,有了归属,则可以被识别.可以把对象.属性视为一个特殊的变量,一个只为这个对象服务的变量,别人不能操作.
自定义属性主要用来 , 存值 , 或者标记我们需要的信息 ,因为附属在单个的对象下,所以很方便用来记录这个对象的状态,我们就可以通过这个状态来决定下一步的操作.
小案例
let box = document.getElementsByClassName("box")
for (let i = 0; i < box.length; i++) {
box[i].index = true //记录当前每个div的状态 如果是true点击变红 如果是false 点击变粉
box[i].onclick = function () {
if(this.index){
box[i].style.backgroundColor = "red"
}
else
{
box[i].style.backgroundColor = "pink"
}
this.index = !this.index //每次点击完之后,取反
}
}
区别
寄存在js环境下 人为定义的为自定义属性 写在标签里面 人为写的属性 叫自定义标签属性 自定义标签属性不能直接通过 . 访问 默认找自定义属性,而不找自定义标签属性 因为js和html标签是相互独立的. 要想操控标签,必须借助DOM提供的API
classList 操作class属性值 不兼容低版本 ie
box[0].classList.add("uu")//添加一个类名,如果有,则不添加
box[0].classList.remove("rr")//移除一个类名,如果没有, 也不报错
box[0].classList.toggle("vv",)//有则删 无则加
box[0].classList.toggle("ee", true)//当有第二个参数时 第二个参数转化为布尔值 true则加 false则删除
box[0].classList.contains("hh") //判断对象是否存在此类名 返回布尔值
box[0].classList.replace("old","new") //替换 new 替换 old
运用toggle来达到开关的效果 方法即函数 内部已经进行了细分
special{background:red;}
let box = document.getElementsByClassName("box")
for (let i = 0; i < box.length; i++) {
box[i].onclick = function () {
box[i].classList.toggle("special")
}
}