1.立即执行函数 例:(function () { console.log("666") })() 注 :多个这种要以(;)间隔,否则无效
2.闭包 外界可以拿到局部变量 可以让一个变量一直驻留
3.json对象:把无数个繁杂的属性封装成一个整体的容器,没有顺序
json对象的定义 键值对的形式 key:value
let uname = "iKun"
let age = 23
function sing() {
console.log("sing~~~")
}
function rap() {
console.log("rap~~")
let stu = { "uname": 'ikun', age: 23, "score": 100, "sing": function () { console.log("sing~~~")
}, "rap": function () { console.log("rap~`~~~") } } 键名必须带双引号 如何读取对象的属性 1、分量运算符 对象名.属性名 console.log(stu.uname) stu.rap() 2、下标法 对象名[索引的值] console.log(stu["age"]) stu["rap"]()
添加 对象名.新的属性名 = 属性值 stu.gender = "M" 改 stu.uname = "zhangsan" console.log(stu)
// json的遍历 for in for (let i in stu) { console.log(i) console.log(stu[i]) }
4.json进阶
let data = { "info": "学生的三门成绩", "score": [ { "kemu": "语文", "score": 77 }, { "kemu": "数学", "score": 21 }, { "kemu": "英语", "score": 33 } ] } console.log(data.score[1].kemu)
5.定时器
setTimeout():让某一个函数或者某一段代码(加'')在多少毫秒之后执行 返回一个整数,作为定时器的编号 setTimeout(func|code,delay) 即函数名或者一段字符串版的代码
setTimeout(() => { console.log("66666666") }, 2000)
function fn() { console.log("666") } setTimeout(fn, 2000),此处函数不能带括号
setTimeout('console.log("666")', 2000)
setTimeout((a, b) => { console.log(a + b) }, 2000, 2, 5) //2,5会在2000毫秒之后函数执行时,作为参数传递给函数的形参
let obj = { x: 2, y: 4, fn: function () { console.log(this.x) this指向obj但会变 console.log(this) } } obj.fn() let tim = window.setTimeout(function () { obj.fn() }, 2000) console.log(tim) bind()绑定this的指向 let timer = setTimeout(obj.fn.bind(obj), 2000) console.log(timer) 通过定时器编号,清除定时器 clearTimeout(tim)
let timer = setInterval(() => { 每隔几秒运行一次 console.log("6666") console.log("77777") }, 1000)
clearInterval(timer)
6.获取元素对象
获取元素 通过css选择器获取元素对象
const box = document.querySelector(".box") console.dir(box) 把对象的全部属性和方法打印出来
const li3 = document.querySelector("ul li:nth-child(3)") const li = document.querySelector("ul li")只获取第一个
const lis = document.querySelectorAll("ul li")获取全部
<div class="box">你是一个盒子</div> <ul> <li>11</li> <li>21</li> <li id="li3">31</li> <li>41</li> <li>51</li> </ul>
console.log(document.getElementById("li3")) id console.log(document.getElementsByClassName("box")) 类名 console.log(document.getElementsByTagName("li")) 标签
7.元素对象内容
// 1、获取元素对象 let box = document.querySelector(".box") 2、更改 box.innerText = `<h1>你是一个盒子</h1>`无法用模板字符串,只支持文本的方式 box.innerHTML = `<h1>你是一个盒子</h1>`
8.用户注册倒计时 应用的例子
1、获取元素 let btn = document.querySelector(".btn") 2、倒计时 let i = 5 let timer = setInterval(() => { i-- btn.innerHTML = 我已经阅读用户协议(${i})
if (i === 0) { // 关闭定时器 clearInterval(timer) btn.innerHTML = 同意
} }, 1000)
9.更改元素对象的属性
<img src="../images/1.jpg" alt="" title=""> <input type="password" name="" id=""> <button disabled>点击</button>
对象.属性=值 1、获取元素 let img = document.querySelector("img") let ipt = document.querySelector("input") let btn = document.querySelector("button") 2、更改src属性 所有的属性 img.src = "../images/2.jpg"(这里的../是没有提示的,要注意) img.title = "你是一个好人" ipt.type = "text"(密码会显示出来) btn.disabled = false(从不可以点击变为可以)