首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >每当我看到你,我的 document.querySelector(‘.heart‘).style.color = ‘red‘; 立刻变红,充满激情——全面深入浅出JS

每当我看到你,我的 document.querySelector(‘.heart‘).style.color = ‘red‘; 立刻变红,充满激情——全面深入浅出JS

作者头像
盛透侧视攻城狮
发布于 2025-06-15 01:42:51
发布于 2025-06-15 01:42:51
11300
代码可运行
举报
运行总次数:0
代码可运行

本篇技术博文摘要 🌟

  • 本文系统讲解JavaScript核心语法与前端DOM操作全链路知识体系。
  • 从函数基础出发,深入解析函数声明、匿名函数、函数表达式等定义方式,对比值传递与引用传递的内存机制差异,结合ES6箭头函数简化代码实践。通过数组遍历方法、字符串操作及对象CRUD(增删改查)等数据处理核心技能,构建复杂数据结构处理能力。
  • 重点剖析内置对象:Math数学计算工具集、Date时间处理模块的实战应用,结合数组对象实现数据集合操作。
  • DOM编程部分覆盖元素获取(querySelector)、内容修改(innerHTML)、属性操作(setAttribute)、样式控制(style)等关键交互技术,通过随机点名案例演示事件驱动开发模式。
  • 进阶部分整合定时器异步机制与注册协议动态校验逻辑,还原京东式表单交互实现过程。全文贯穿"理论+案例"双主线,形成从JavaScript语法基础到企业级前端功能开发的能力闭环,为构建动态网页应用提供完整技术解决方案。

引言 📘

  • 在这个变幻莫测、快速发展的技术时代,与时俱进是每个IT工程师的必修课。
  • 我是盛透侧视攻城狮,一名什么都会一丢丢的网络安全工程师,也是众多技术社区的活跃成员以及多家大厂官方认可人员,希望能够与各位在此共同成长。

01-函数

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // parseInt('200px')
        // getSum(20, 30)


        function sayHi() {
            console.log('hello,function!')
        }


        // 函数必须进行调用,才会执行
        sayHi()
        let age = 21

        // 函数要有返回值,一定要添加return关键字,否则返回值为undefined
        function getSum() {
            // console.log(a + b)
            // return a + b
            // arguments  接收所有实参,并保存到arguements数组里
            console.log(arguments)
            let sum = 0
            console.log(age)
            for (let i in arguments) {
                sum += arguments[i]
            }
            return sum
        }
        let e = getSum(3, 4, 3, 4, 65, 7, 44, 5, 6, 7, 5)

        console.log(e)

    </script>
</body>

</html>
回显效果图:

02-匿名函数

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // function sayHi(fn) {
        //     fn()
        //     console.log('nihao')
        // }
        // function () {
        //     console.log('jiangjia')
        // }
        // sayHi(sayHello)


        // function sayHi()

        setInterval(function (){console.log('你真傻') }, 1000)

    </script>
</body>

</html>
回显效果图:

03-函数表达式

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // let a = function getSum() {
        //     console.log('jiangjia')
        // }
        // a()


        // 立即执行函数
        (function () { console.log('liqingyu') })()
        //    (function () { console.log('jiangjia') }())
    </script>
</body>

</html>
回显效果图:

04-值传递、引用传递

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 值传递,没有传地址,不改变
        let a = 10
        let b = 20
        function change(x, y) {
            x = 30;
            y = 50;
        }
        change(a, b);
        alert(a + "--" + b)


        let arr = [1, 3, 4, 5]
        // 引用传递    传地址,发生改变
        function change2(b) {
           b. push(1000)
        }
        change2(arr)
        alert(arr)
    </script>
</body>

</html>
回显效果图:

05-默认值参数

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        function getCir(r, PI = 3.14) {
            return PI * r * r
        }
        let a = getCir(3)
        console.log(a)
    </script>
</body>

</html>
回显效果图:

06-箭头函数

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // setInterval(function () {
        //     console.log('i love you')
        // }, 1000)
        setInterval(() => {
            console.log('i hate you')
        }, 1000)
    </script>

</body>

</html>
回显效果图:

07-递归

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 9!  
        // 9*8!
        function jiecheng(n) {
            if (n === 1) {
                return 1
            } else {
                return n * jiecheng(n - 1)
            }
        }
        let a = jiecheng(10086)



        alert(a)



        // 练习:递归求1~n的和
        // 100+1~99的和 

        function he(n) {
            if (n == 1) {
                return 1
            } else {
                return n + he(n - 1)
            }
        }

        alert(he(5))
    </script>
</body>

</html>

08-数组遍历

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let arr = ['a', 2, 3, 4, 5, 6]
        for (let i = 0; i < arr.length; i++) {
            console.log(arr[i])
        }
    </script>
</body>

</html>
回显效果图:

09-字符串的常见方法

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let str = new String()
       //  let str = '你是who'
        console.log(str.split('w'))
        console.log(str.substring(2, 4))
        console.log(str.startsWith('你'))
        console.log(str.endsWith('你'))
        console.log(str.includes('w'))



    </script>
</body>

</html>
回显效果图:

10-对象

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // let arr = [160, 160]
        // 对象:无序的数据集合
        let obj = {
            uname: 'zhangfei',
            age: 21,
            gender: 'nan'
        }
        // console.log(obj)

        // 查找对象元素
        console.log(obj.uname)
        console.log(obj['age'])

        // let obj2 = new Object()

        let obj2 = {
            uname: '刘德华',
            age: 60,
            sing: function () {
                console.log('我要唱歌了')
            }
        }
        obj2.sing()
       // console.log(obj2.sing)




    </script>
</body>

</html>
回显效果图:

11-对象的增删改查

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let obj = {
            uname: 'zhangfei',
            age: 21,
            gender: 'nan'
            
        }
        // obj.uname
        // obj['age']

        // 改:对象.属性名
        obj.uname = 'GGBond'

        // 增加  对象.新属性名
        obj.sing =function () {
            console.log('sing~')
        }
        // delete 对象.属性名
        delete obj.gender
        console.log(obj)

    </script>
</body>

</html>
回显效果图:

12-对象的遍历

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let obj = {
            uname: 'zhangfei',
            age: 21,
            gender: 'nan'
        }
        for (let k in obj) {
            console.log(k)
            console.log(obj[k])
        }

    </script>
</body>

</html>
回显效果图:

13-数组对象

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let arrObj =
            [
                {
                    uname: 'zs',
                    age: 21
                },
                {
                    uname: 'jiangjia',
                    age: 33
                },
                {
                    uname: 'lisi',
                    age: 12
                }
            ]
        console.log(arrObj)
        // arrObj[1]['uname']
        for (let i = 0; i < arrObj.length; i++) {
            for (let k in arrObj[i]) {
                console.log(arrObj[i][j])
            }
        }
    </script>
</body>

</html>
回显效果图:

14-Math内置对象

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        console.log(Math.E)
        console.log(Math.PI)
        // Math.ceil向上取整

        console.log(Math.ceil(3.1415))
        // Math.floor向下取整
        console.log(Math.floor(3.1415))
        // Math.abs   绝对值
        console.log(Math.abs(-3.12))
        // pow (幂指数),下图为3.12的10次方
        console.log(Math.pow(3.12, 10))
        // 开平方根
        console.log(Math.sqrt(9))

        // 随机数  ,默认为[0~1)
        // console.log(Math.floor(Math.random() * 11) + 2),左闭右开!!!,下图为[2,11)
        let random = Math.floor(Math.random() * (10 - 2 + 1)) + 2
        console.log(random)








    </script>
</body>

</html>
回显效果图:

15-日期内置对象

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let date = new Date()
        // alert(date)
        let year = date.getFullYear()
        let month = date.getMonth() +1 //:规定0开始
        let day = date.getDate()

        let hh = date.getHours()
        let mm = date.getMinutes()
        let ss = date.getSeconds()


        let gg = date.getDay()
        alert(gg)

        document.write(`${year}年-${month}月-${day}${hh}:${mm}:${ss}`)




        let a = 3.234364
        alert(a.toFixed(4))//保留小数后4位,四舍无入


    </script>
</body>

</html>
回显效果图:

16.JS-dom元素-button

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>提交</button>
    <script>
        const btn = document.querySelector('button')
        // console.dir(btn)
        console.log(typeof (btn))

    </script>
</body>

</html>
回显效果图:

17-获取元素的方法

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>盒子</div>
    <ul>
        <li>1</li>
        <li class="two">2</li>
        <li>3</li>
        <li id="four">4</li>
    </ul>
    <script>
        // 1、通过css选择器获取             ('字符串')    :狂(嘎嘎)推荐
        const li2 = document.querySelector('.two')
        console.log(li2)
        const li = document.querySelector('li')//只显示找到的第一个
        console.log(li)
        // document.querySelectorAll将所有匹配的元素全部获取到,并存放到伪数组:长得像数组,但没有整天三改的方法(NodeList)
        const lis = document.querySelectorAll('li')
        console.log(lis)
        for (let i = 0; i < lis.length; i++) {
            console.log(lis[i])
        }

        const li3 = document.querySelector('ul li:nth-child(3)')
        console.log(li3)


        // 其他
        console.log(document.getElementsByTagName('div'))//标签名获取
        console.log(document.getElementById('four'))//Id名
        console.log(document.getElementsByClassName('two'))//类名
回显效果图:

18-修改元素内容

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="one">我是一个即将被更改的盒子</div>
    <div class="two">我是一个即将被更改的盒子</div>
    <script>
        // 1、获取元素,(String)
        const box1 = document.querySelector('.one')
        const box2 = document.querySelector('.two')
        console.log(box1)
        console.log(box2)
        // 2、操作
        box1.innerText = `<h1>jiangjia</h1>`//不识别标签
        box2.innerHTML = `<h1>chensongjie</h1>`//识别标签

    </script>



</body>

</html>
回显效果图:

19-随机点名案例

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>jiangjia</div>
    <script>

        let arr = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操']
        // 1、获取元素
        const box = document.querySelector('div')
        // 2、获取随机数   n-0    m---arr.length-1 ,随机同式:M.ran()*(M-N+1)+N
        let random = Math.floor(Math.random() * arr.length)
        // 3、改内容
        box.innerHTML = `${arr[random]}`

    </script>
</body>

</html>
回显效果图:

20-修改元素属性

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <img src="../images/1.webp" alt="刘德华" title="刘德华">
    <input type="text" placeholder="wedjed" readonly>
    <button disabled>同意该协议</button>
    <script>
        // 1、获取元素
        const img = document.querySelector('img')
        const ipt = document.querySelector('input')
        const btn = document.querySelector('button')
        // 改元素属性   对象.属性=值
        img.src = "../images/2.webp"
        img.title = "我是个大帅哥"

        ipt.type = "password"
        ipt.placeholder = "请输入用户名"
        ipt.readOnly = false//禁用只读
        btn.disabled = true//禁用

    </script>
</body>

</html>
回显效果图:

21-修改元素样式属性

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 300px;
            height: 300px;
            background-color: rgb(207, 39, 67);
            font-size: 50px;
        }
    </style>
</head>

<body>
    <div class="box1">1111</div>
    <div class="box2 "></div>
    <script>
        // 1、获取元素
        const box2 = document.querySelector('.box2')
        const div = document.querySelector('.box1')
        // 2、通过style修改样式,注意字体的S得大写才认!!!
        div.style.width ='500px'
        div.style.fontSize = '16px'
        div.style.backgroundColor = 'pink'
        // 3、通过添加类名 calssName会将原来的类名删除掉,不建议使用

        // box2.className = 'box1'

        // classlist.add('类名')追加
        //box2.classList.add('box1')
        // box2.classList.remove('box1')    移除
        box2.classList.toggle('box1')        //切换:有则删除,没有则添加





    </script>
</body>

</html>
回显效果图:

22-定时器

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // setTimeout\setInterval   定时器
        // setTimeout  :某段代码或者函数在多久后执行
        // setTimeout(code||function,time(ms))
        // 返回值是一个整数,代表定时器编码
        // let timer = setTimeout('console.log("我是一秒之后执行的代码")', 4000)
        // console.log(timer)
        // let timer2 = setTimeout('console.log("我是4秒之后执行的代码")', 1000)
        // console.log(timer2)
        //    传的是函数名 ,不是函数调用/不带()
        // let timer3 = setTimeout(
        // fn, 3000),
        // function fn() {
        //     console.log('6666666')
        // }

        // setTimeout(函数或一段代码,延迟时间,实参……)
        // let timer4 = setTimeout(function (a, b) {
        //     console.log(a + b)
        // }, 2000, 1, 4)

        let obj = {
            uname: 'gouxin',
            a: 3,
            b: 4,
            sum: function () {
                console.log(this)
                console.log(this.a)

            }
        }
        obj.sum()
        // setTimeout(obj.sum, 1000)
        // 定时器的第一个参数如果是对象方法,this不再指向对象,指向全局环境
        //解决方法1:将调用添加至一个新函数:setTimeout(function () { obj.sum() }, 1000)
        

        let a = setTimeout(obj.sum.bind(obj), 1000)//解决方法2:bind作用将this只指向obj中
        clearTimeout(a)



        // setInterval  间隔一段时间,将代码或者函数执行一次,\表明为括号里面的'',
        let timer = setInterval(' console.log(\'6666666\')', 1000)
        clearInterval(timer)
        let timer2 = setInterval(function (a, b) {
            console.log(a + b)
        }, 1000, 2, 3)
        clearInterval(timer2)
    </script>
</body>

</html>
回显效果图:

JS京东——用户注册协议练习

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <textarea name="" id="" cols="30" rows="10">
        用户注册协议
        欢迎注册成为京东用户!在您注册过程中,您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议,请您务必仔细阅读、充分理解协议中的条款内容后再点击同意(尤其是以粗体或下划线标识的条款,因为这些条款可能会明确您应履行的义务或对您的权利有所限制)。
        【请您注意】如果您不同意以下协议全部或任何条款约定,请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息,阅读并点击同意上述协议且完成全部注册流程后,即表示您已充分阅读、理解并接受协议的全部内容,并表明您同意我们可以依据协议内容来处理您的个人信息,并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方(详情查看
    </textarea>
    <br>
    <button class="btn">我已经阅读用户协议(5)</button>
    <script>
     1.//获取元素
      const btn =document.querySelector('.btn')
    //2.倒计时
     let t=5
     //3.打开定时器
     let time = setInterval(function()
    {
         t--
         btn.innerHTML='我已经阅读用户协议(${t})'
         if (t===0)
         {
             clearInterval(time)  //关掉定时器
             btn.disabled =false //启用
             btn.innerHTML ='同意'//button按钮只能用innerHTML来修改内容,innerText似乎不可以

         }
     },1000)

    </script>

</body>

</html>
网页效果图:

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2025-04-14,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
在 HTML 中,每个标签都指向你——深入浅出之HTML元素
盛透侧视攻城狮
2025/06/15
1700
在 HTML 中,每个标签都指向你——深入浅出之HTML元素
JavaSprict函数
盛透侧视攻城狮
2024/10/21
870
23个项目管理经典案例_交互动画
注意: speed = (end - box.offsetLeft)/20; 代表用(终点位置-当前位置)/动画系数 动画系数可以控制动画的快慢
全栈程序员站长
2022/11/03
1.9K0
详解对象增删改查
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script type="text/javascript"> class Person{} let p=new Person(); //增加
贵哥的编程之路
2020/10/28
6610
详解对象增删改查
【前端寻宝之路】JavaScript初学之旅
ImAileen
2024/03/25
1050
【前端寻宝之路】JavaScript初学之旅
webApis07-元字符、正则表达式、change事件、检测包含类
元字符 边界符 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>薪资想过万,代码敲三遍</title> </head> <body>
yuanshuai
2022/08/17
4300
【如果你要学JS<18>】——数据类型及其内存分配
值类型 :简单数据类型/基本数据类型,在存储时变量中存储的是值本身,因此叫做值类型 string , number,boolean,undefined , null
像素人
2024/01/01
2320
【如果你要学JS<18>】——数据类型及其内存分配
JavaScript进阶内容——DOM详解
JavaScript使我们有能力创建动态页面,而事件就是被JavaScript所侦测到的行为。
秋落雨微凉
2022/10/25
1.6K0
JavaScript进阶内容——DOM详解
Vue 初体验
点击标题超链接可跳转到对应的html界面 01_Vue3的引入-CDN <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docu
Zkeq
2022/05/18
3530
Vue 初体验
【Web APIs】DOM 文档对象模型 ④ ( querySelector 函数 | querySelectorAll 函数 | NodeList 对象 )
在之前的博客中 , 都是通过 ID、 标签名、类名 获取 HTML 网页中的 DOM 元素 , 分别使用
韩曙亮
2024/06/24
4200
【Web APIs】DOM 文档对象模型 ④ ( querySelector 函数 | querySelectorAll 函数 | NodeList 对象 )
【Vue3】035-Composition API:watch和watchEffect的使用和差异性
訾博ZiBo
2025/01/06
1620
【Vue3】035-Composition API:watch和watchEffect的使用和差异性
JavaScript 基本知识
内嵌式:把代码书写在一个script标签对内(这种不需要任何行为会自动执行JS代码)
全栈程序员站长
2022/11/01
2.4K0
JavaScript 基本知识
webApis06-navigator、history、本地存储、线程、数组方法、正则表达式
navigator对象 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>薪资想过万,代码敲三遍</title> </head> <b
yuanshuai
2022/08/17
3570
两年经验前端带你重学前端框架必会的ajax+node.js+webpack+git等技术 第一章
Qiuner
2025/05/29
580
两年经验前端带你重学前端框架必会的ajax+node.js+webpack+git等技术 第一章
JavaScript进阶内容——jQuery
我们在前面的文章中已经掌握了JavaScript的全部内容,现在让我们了解一下JavaScript库
秋落雨微凉
2022/10/25
5.7K0
JavaScript进阶内容——jQuery
大一下学期JavaScript(JS)课后作业整理
这学期学的JavaScript, 把老师留过的课后作业都整理一下发上来, 初学者可以根据案例要求自己制作. 不敢保证我这里发布的代码就是最优解, 不足的地方, 可以指出. (没有排过顺序, 难度等级低)
NothAmor
2022/06/08
5330
canvas详解
核心:按下的与移动完毕的链接到一起就行了。并且要记住,抬起就null,为什么,像是冲洗开一条路径把。
贵哥的编程之路
2020/10/28
3040
canvas详解
webApis05-swiper插件、window对象、定时器、location
节点 查找父节点 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>薪资想过万,代码敲三遍</title> </head> <bod
yuanshuai
2022/08/17
4380
24·灵魂前端工程师养成-JS实践(会动的代码:画太极)
-多年互联网运维工作经验,曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维,曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台(功能如下): 1)整合了各个公有云API,自主创建云主机。 2)ELK自动化收集日志功能。 3)Saltstack自动化运维统一配置管理工具。 4)Git、Jenkins自动化代码上线及自动化测试平台。 5)堡垒机,连接Linux、Windows平台及日志审计。 6)SQL执行及审批流程。 7)慢查询日志分析web界面。
DriverZeng
2022/09/26
1.5K0
24·灵魂前端工程师养成-JS实践(会动的代码:画太极)
BOM大详解
了解: 1.BOM架构全局对象的使用. 2.根据案例来讲解 3:大总结。 4;效果.
贵哥的编程之路
2020/11/06
5590
相关推荐
在 HTML 中,每个标签都指向你——深入浅出之HTML元素
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档