web12.12-14笔记

已于 2024-01-18 15:49:30 修改
阅读量353 收藏 9
点赞数 8
文章标签： 笔记 前端 javascript
于 2024-01-18 15:29:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liuxini2251/article/details/135662118
版权

函数

立即执行函数

组成：

l 定义一个函数

l 将整个函数包裹在一对括号中

l 将函数声明转换为表达式

l 在结尾加上一对括号

l 让函数立即被执行

多个立即执行函数之间用； 隔开

 <script>
        (function () { console.log("666") })();

        (function () { console.log("777") }());
 </script>

闭包

函数里面的变量外面不能访问

闭包可以使外界获取局部变量的值，可以让一个变量一直驻留在内存当中，缺点是内存无法释放

 <script>
        function outer() {
            let money = 5000
            function inner() {
                console.log(money)
            }
            return inner
        }


        let fn = outer()
        fn()
</script>

 json对象

json对象（无顺序）：把无数个繁杂的属性封装成一个整体的容器

json对象的定义：键值对的形式（key:value）

json对象的键必须带双引号

 <script>
        //let uname = "iKun"
        //let age = 23
        //let score = 100
        //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~`~~~")
            }
        } 
         console.log(stu)

读取对象属性

分量运算符 对象名. 属性名

console.log(stu.uname)
stu.rap()

下标法     对象名【索引的值】

console.log(stu["age"])
stu["rap"]()

添加 对象名. 新的属性名 = 属性值

新的代表添加，没有则为重新赋值

stu.gender = "M"
console.log(stu)

改

stu.uname = "zhangsan"
console.log(stu)

json的遍历     for in

结合下标法

for (let i in stu) {
     console.log(i)
     console.log(stu[i])
}

json进阶

    <script>
        let data = {
            "info": "学生的三门成绩",
            "score": [
                {
                    "kemu": "语文",
                    "score": 77
                },
                {
                    "kemu": "数学",
                    "score": 21
                },
                {
                    "kemu": "英语",
                    "score": 33
                }
            ]
        }
        console.log(data.score[1].kemu)
    </script>

定时器    setTimeout()  setInterval()

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毫秒之后函数执行时，作为参数传递给函数的形参

this

——谁调用指向谁

 let obj = {
     x: 2,
     y: 4,
     fn: function () {
         console.log(this.x)
         console.log(this)
     }
 }

// obj.fn()
 let tim = window.setTimeout(function () {
     obj.fn()
 }, 2000)
 console.log(tim)

（window可省略）

bind

——绑定this的指向

 let timer = setTimeout(obj.fn.bind(obj), 2000)
 console.log(timer)

clearTimeout(tim)     通过定时器编号，清除定时器（clear+ 定时器编号 ）

        let timer = setInterval(() => {
            console.log("6666")
            console.log("77777")

        }, 1000)


        clearInterval(timer)

随机数

    <script>
        console.log(Math.random())
        // 0-10之间的整数
        console.log(Math.round(Math.random() * 10))
        // 1-6之间的整数
        Math.round(Math.random() * 5) + 1


        // min, max
        function getRandom(min, max) {

            if (max > min) {
                return Math.round(Math.random() * (max - min) + min)

            } else {
                return "你疯了把"
            }

        }
        console.log(getRandom(10, 20))
    </script>

获取元素对象

<body>
    <div class="box">你是一个盒子</div>

    <ul>
        <li>11</li>
        <li>21</li>
        <li id="li3">31</li>
        <li>41</li>
        <li>51</li>
    </ul>

    <script>
        // 获取元素   通过css选择器获取元素对象
        const box = document.querySelector(".box")
        console.log(box)
        console.dir(box)


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


        const lis = document.querySelectorAll("ul li")
        console.log(lis)

        for (let i = 0; i < lis.length; i++) {
            lis[i].style.color = "pink"

        }


        console.log(document.getElementById("li3"))
        console.log(document.getElementsByClassName("box"))
        console.log(document.getElementsByTagName("li"))

    </script>

</body>

元素对象内容

<body>
    <div class="box"></div>
    <script>
        // 1、获取元素对象
        let box = document.querySelector(".box")
        // console.log(box)
        // 2、更改
        box.innerText = `<h1>你是一个盒子</h1>`
        box.innerHTML = `<h1>你是一个盒子</h1>`
    </script>
</body>

更改元素对象的属性

<body>
    <img src="../images/1.jpg" alt="" title="">
    <input type="password" name="" id="">

    <button disabled>点击</button>

    <script>
        // 对象.属性=值
        // 1、获取元素
        let img = document.querySelector("img")
        let ipt = document.querySelector("input")

        let btn = document.querySelector("button")
        // console.log(img)

        // 2、更改src属性
        img.src = "../images/2.jpg"
        img.title = "你是一个好人"

        ipt.type = "text"

        btn.disabled = false

    </script>
</body>

元素属性

普通属性

——不在style标签里面的

元素对象.属性名= 属性值

let img = document.querySelector("img")
img.src = "../images/2.jpg"
 // 
console.log(img.getAttribute("src"))
img.setAttribute("title", "你是一个大漂亮")

style样式属性

元素对象.style.属性名 = "属性值"
<!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>
        .box {
            display: none;
            width: 300px;
            height: 300px;
            background-color: pink;
        }

        .new {
            display: block;
            width: 1200px;
            height: 300px;
            background-color: greenyellow;
        }
    </style>
</head>

<body>
    <div class="box">nckcdcjd</div>

    <script>
        let box = document.querySelector(".box")
        box.style.width = "500px"
        box.style.height = "600px"
        box.style.backgroundColor = "red"
        box.style.display = "block"
    </script>

</body>

</html>
className     会覆盖掉原来的类名
<!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>
        .box {
            display: none;
            width: 300px;
            height: 300px;
            background-color: pink;
        }

        .new {
            display: block;
            width: 1200px;
            height: 300px;
            background-color: greenyellow;
        }
    </style>
</head>

<body>
    <div class="box">nckcdcjd</div>

    <script>
        let box = document.querySelector(".box")
        box.className = "box new"
    </script>

</body>

</html>
classList     获取style样式属性的属性值
box.classList.add("new")
box.classList.remove("box")
box.classList.toggle("box")  //切换

box.classList.toggle("box")——有box类名就删除box类名，无就追加

offset属性

——只读属性，只能查看，不能赋值

offsetTop 返回元素相对带有定位父亲元素上方的偏移

offsetLeft 返回元素相对带有定位父亲元素左边的偏移

offsetWidth 返回自身包括padding，边框，内容区的宽度，返回数不带单位

offsetHeight 返回自身包括padding，边框，内容区的高度，返回数不带单位

<!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>
        .box {
            position: absolute;
            top: 200px;
            left: 100px;
            background-color: aqua;
            width: 300px;
            height: 300px;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <script>
        let box = document.querySelector(".box")
        console.log(box.offsetWidth)
        console.log(box.offsetHeight)
        console.log(box.offsetTop)
        console.log(box.offsetLeft)
    </script>
</body>

</html>

随机图片

<body>
    <img src="../images/1.jpg" alt="">
    <script>

        let img = document.querySelector('image')
        let srcs = ["../images/1.jpg", "../images/2.jpg"]
        function getRandom(min, max) {

            if (max > min) {
                return Math.round(Math.random() * (max - min) + min)

            } else {
                return "你疯了把"
            }

        }

        let src = getRandom(0, srcs.length - 1)
        console.log(src)

    </script>
</body>

节点的相关操作

<!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>
    <ul>

    </ul>

    <script>
        // 1、创建一个li标签
        let newLi = document.createElement("li")
        // 2、添加内容
        newLi.innerHTML = `<a href="#">我是新添加的li</a>`
        console.log(newLi)
        // 元素的追加   父元素
        let ul = document.querySelector("ul")
        ul.appendChild(newLi)

    </script>

</body>

</html>

查找节点

通过父亲获取子节点

<!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="father">
        父亲
        <div class="son">儿砸1</div>
        <div class="son">儿砸2</div>
        <div class="son">儿砸3</div>
        <div class="son">儿砸4</div>
    </div>
    <script>
        let f = document.querySelector(".father")
        console.log(f.children[2])
        console.log(f.childNodes)
    </script>

</body>

</html>

通过儿子找到父节点

<!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="father">
        父亲
        <div class="son">儿砸1</div>
        <div class="son">儿砸2</div>
        <div class="son">儿砸3</div>
        <div class="son">儿砸4</div>
    </div>
    <script>
        let s = document.querySelector(".son")
        console.log(s.parentNode)
    </script>

</body>

</html>

兄弟节点

<!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="father">
        父亲
        <div class="son">儿砸1</div>
        <div class="son">儿砸2</div>
        <div class="son2">儿砸3</div>
        <div class="son">儿砸4</div>


    </div>
    <script>
        let son2 = document.querySelector(".son2")
        console.log(son2.previousElementSibling)
        console.log(son2.nextElementSibling)
    </script>

</body>

</html>

inserBefore

<!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>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>

    </ul>

    <script>
        let ul = document.querySelector("ul")
        // 创建li
        let newLi = document.createElement("li")
        // 添加内容
        newLi.innerHTML = `新来的`
        // 3、追加
        ul.appendChild(newLi)

        // ul.insertBefore(目标节点,参照节点)
        ul.insertBefore(newLi, ul.children[0])

    </script>

</body>

</html>

克隆节点

<!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="father">
        xsxs
        <div class="son">erza</div>
    </div>

    <script>
        let newf = document.querySelector(".father")
        console.log(newf.cloneNode(true))
    </script>

</body>

</html>

删除节点

——基于父元素进行

<!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>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>

    </ul>

    <script>
        let ul = document.querySelector("ul")
        ul.removeChild(ul.children[1])
    </script>

</body>

</html>

事件监听

事件：事件源（触发事件的东西）、事件类型（键盘的按下，鼠标的点击）、事件对象

<!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>
        .pink {
            background-color: pink;
        }
    </style>
</head>

<body>
    <button>点击</button>
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <script>
        let txt = document.querySelector("textarea")

        txt.addEventListener("mouseenter", () => {
            txt.style.backgroundColor = "pink"
        })
        txt.addEventListener("mouseleave", () => {
            txt.style.backgroundColor = "red"
        })

    </script>

</body>

</html>

事件源.addEventListener("事件类型",处理函数,true|false)

let btn = document.querySelector("button")
btn.addEventListener("click", () => {
    alert("666")
})

lv0      事件源.on事件类型=处理函数

btn.onclick = function () {
    alert("666")
}

test

<!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>
        .pink {
            background-color: pink;
        }
    </style>
</head>

<body>
    <button>111</button>
    <button>222</button>
    <button>333</button>
    <button>444</button>
    <button>555</button>
    <script>
        // 获取元素
        let btns = document.querySelectorAll("button")
        console.log(btns)

        // 添加事件
        for (let i = 0; i < btns.length; i++) {
            btns[i].addEventListener("mouseenter", function () {
                for (let j = 0; j < btns.length; j++) {
                    btns[j].classList.remove("pink")
                }
                btns[i].classList.add("pink")

            })

        }
    </script>

</body>

</html>
盐焗星球
关注
  • 8
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
最新版axios入门教程——12.12-axios文件结构说明(Av756328321,P12).rar
11-07
这个“最新版axios入门教程——12.12-axios文件结构说明(Av756328321,P12).rar”压缩包包含了对 Axios 的基础教程和其内部文件结构的解析，旨在帮助初学者更好地理解和使用 Axios。 1. Axios 基础概念： Axios 是...
VCDS-ZHS-12.12.2-Installer
09-23
VCDS-ZHS-12.12.2-Installer 是一款专为大众汽车集团车型设计的诊断软件，它涵盖了大众、奥迪、斯柯达和西雅特等品牌。这款软件的核心功能是通过5053接口与车辆进行通信，进行故障码读取、清除、数据流监测以及执行...
VCDS-ZHS-12.12.2
09-28
VCDS-ZHS-12.12.2
12.6-12.12.doc
12-16
【标题】：“12.6-12.12.doc”文档处理与基础IT知识 在信息技术领域，文档处理是一项基本技能，对于个人用户和企业用户都至关重要。在这个标题为“12.6-12.12.doc”的文档中，我们触及到几个关键的IT知识点，包括...
官网VCDS-ZHS-12.12，大众5053VCDS12.12 繁体中文
10-23
大众5053VCDS15.71 高尔夫、迈腾、斯柯达，PQ,MQB平台，刷隐藏 需要硬件支持，繁体中文。
谷粒商城实战笔记-62-商品服务-API-品牌管理-OSS整合测试
epitomizelu的专栏
07-25 1063
通过上述步骤，你可以在Java项目中轻松地整合阿里云OSS服务，实现文件的上传、下载等功能。阿里云OSS提供了丰富的API和工具，可以根据你的业务需求进一步定制和扩展。希望这篇博客能帮助你在Java项目中顺利整合阿里云OSS服务。如果有任何疑问或需要进一步的帮助，请随时提问！
go-kratos 学习笔记(8) redis的使用
xgs736214763的博客
07-25 377
redis的在项目中的使用是很常见的，前面有了mysql的使用redis的也差不多；也是属于在data层的操作，所以需要新建一个 NewRedisCmd方法。在internal/data/data.go中新增NewRedisCmd 方法，注入到ProviderSet。在业务层使用 data/user.go 中的ListUser 方法做个缓存。然后启动项目 kratos run 看redis的缓存。执行 wire 生成依赖。
Golang学习笔记20240725，Go语言基础语法
Python私教
07-25 661
如果我们在遍历的时候，不想要key或者value，也可以用下划线替代，下划线叫做匿名变量。go语言里面的switch语句每个case天生就是独立的，不需要加break。指针可以直接对内存地址进行操作。使用*表示指针，使用&取地址。切片在go语言里面非常常用，因为其有动态扩展的特性。运行方式3：goland右键运行。使用加号可以对字符串进行拼接。
谷粒商城实战笔记-61-商品服务-API-品牌管理-云存储开通与使用
epitomizelu的专栏
07-25 1024
文章目录一，图片云存储二，阿里云OSS1，OSS2，基于OSS的文件上传架构3，Java中使用OSS 一，图片云存储 这张图展示了文件存储的几种常见模式： 普通上传 分布式情况下的普通上传 使用自建服务器 云存储服务的情况 普通上传：在这种情况下，浏览器直接将文件上传给商品服务，然后由商品服务保存文件。这种方式简单明了，但是存在单点故障风险，因为所有文件都在同一台服务器上存储。 分布式情况下的普通上传：这是一种改进后的版本，多个商品服务共享同一个文件存储空间。然而，这种方案仍然需要自己维护文件
Java类加载器实现机制详细笔记
modelsetget的博客
07-25 606
笔记涵盖了Java类加载器的工作原理、双亲委派模型、类加载器层次结构、自定义类加载器的应用场景与实现方法，以及字节码校验的详细步骤和魔数的重要性。
鸿蒙开发笔记07--自定义组件
m0_64346512的博客
07-25 284
3、
photoshop学习笔记——选区2 套索工具
最新发布
jamesP777的博客
07-25 405
3种套索工具的介绍、快捷键及特点，给出一个换天空背景的小例子
LCD 横屏切换为竖屏-I.MX6U嵌入式Linux C应用编程学习笔记基于正点原子阿尔法开发板
木木不迷茫(˵¯͒¯͒˵)的博客
07-25 463
将默认横屏显示的 LCD 屏切换为竖屏显示。LCD 屏在默认横屏模式下具有固定坐标体系，例如在 800x480 分辨率下，左上角坐标为(0, 0)，右下角为(799, 479)。显存地址的计算公式为 base + (y * width + x) * pix_bytes。在竖屏模式下，应用程序认为的起点为左下角(0, 0)，需要将坐标转换为实际的物理坐标。显存地址计算公式调整为 base + ((height - 1 - x) * width + y) * pix_bytes。
近期代码报错解决笔记
yatingliu的博客
07-25 372
近期解决图数据的报错笔记
《计算机网络》（学习笔记）
qiqi_liuliu的博客
07-24 2087
网络（Network）由若干结点(Node)和连接这些结点的链路(Link)组成多个网络还可以通过路由器互连起来，这样就构成了一个覆盖范围更大的网络，即互联网（互连网）。因此，互联网是"网络的网络（Network of Networks）"因特网（Internet）是世界上最大的互连网络（用TCP/IP）internet是通用名词，互连的网络都叫internet注：互连、自治、集合。在计算机内部或在相邻设备之间近距离传输时，可不经过调制就在信道上直接进行的传输方式称为基带传输。
PYTHON学习笔记（八、字符串及的使用）
tommorrowwill的博客
07-25 1026
通过使用正则表达式，我们可以灵活地指定需要匹配的模式，包括具体的字符、字符集合、数量、位置等。在大量的文本处理任务中，如文本搜索、文件批量处理、数据清洗等，正则表达式可以帮助我们高效地完成工作。在1位置处，在一个完整的字符串中使用了%s占位符，在完整的字符串外面，则是变量的值，最后将会输出“ hello world ( time ) ”。的工具，它可以用来在文本中查找、替换、提取或验证特定的模式。通过格式化字符串，可以方便地将变量的值和其他文本内容组合成一个完整的字符串。我们对字符串的学习就结束了！
文件共享功能无法使用提示错误代码0x80004005【笔记】
AnsonNie的博客
07-25 414
文件共享功能无法使用 错误代码0x80004005，搜索里输入“启用或关闭Windows功能”按回车键，在启用或关闭Windows功能里将SMB 1.0/CIFS文件共享支持勾选后
在 LCD 上显示 png 图片-I.MX6U嵌入式Linux C应用编程学习笔记基于正点原子阿尔法开发板
木木不迷茫(˵¯͒¯͒˵)的博客
07-25 1095
在LCD上显示PNG图片需要了解PNG的无损压缩、体积小、索引彩色模式、优化网络传输显示及透明效果等特点。libpng是一款免费、开源的C语言库，支持PNG图像的解码和编码，并依赖于zlib库。移植过程包括下载及编译zlib源码，再下载并编译libpng源码，确保在开发板上正确配置和安装。libpng使用指南介绍了如何创建和初始化png_struct和png_info对象，设置错误返回点，指定数据源，并通过high-level或low-level接口读取和解码PNG图像数据......
推荐系统三十六式学习笔记：工程篇.常见架构24|典型的信息流架构是什么样的
weixin_43597208的博客
07-24 626
今天我逐一梳理了实现一个通用信息流的关键模块，及其已有的轮子，从而能最大限度地降低开发成本。这些对于一个中小型的社交网路来说已经足够，当你面临更大的社交网络，会有更多复杂的情况出现，尤其是系统上的，请时刻观察系统的监控、日志的规模。
nmap -sV 10.101.12.12
06-25
`nmap -sV 10.101.12.12` 是使用Nmap（网络映射器）进行服务识别（Service Detection）的一个命令行选项。当你运行这个命令时，Nmap 会向目标 IP 地址 10.101.12.12 发送 TCP SYN 并询问端口的详细信息，包括服务...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值