2023 12.12笔记

原创已于 2023-12-14 13:42:50 修改 · 145 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#笔记

于 2023-12-14 13:42:39 首次发布

本文介绍了JavaScript中的基本概念，如立即执行函数表达式、闭包的作用，以及JSON对象的使用、对象属性操作、定时器（setTimeout和setInterval）、DOM元素的选择和内容修改。还探讨了如何绑定`this`和清除定时器。

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（从不可以点击变为可以）