JavaScript

已于 2024-04-13 12:36:05 修改
阅读量1.5k 收藏 9
点赞数 42
文章标签： javascript 前端
于 2024-04-13 12:29:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_80466038/article/details/137712450
版权

对象

对象的概念

  • 对象 (object)：JavaScript里的一种数据类型

    可以理解为是一种无序的数据集合，注意数组是有序的数据集合

  • 用来描述某个事物，例如描述一个人

    人有姓名、年龄、性别等信息、还有吃饭睡觉打代码等功能

    如果用多个变量保存则比较散，用对象比较统一。

  • 比如描述班主任信息：

    静态特征（姓名，年龄，身高，性别，爱好）→可以使用数字， 字符串，数组，布尔类型等表示

    动态行为（点名，唱，跳, rap)→ 使用函数表示

 

28ed6f008a4d9b4be877d0ab74d3f6dc.png

对象声明语法

let 对象名 = {};
let 对象名 = new Object();

例如：声明了一个person的对象 let person = {}; 实际开发中，我们多用花括号，即是对象字面量。

对象的组成

对象由属性和方法组成 属性：信息或叫特征（名词）。比如 手机尺寸、颜色、重量等... 方法：功能或叫行为（动词）。比如 手机打电话、发短信、玩游戏...

 

f5cfe79313f09591143480f7e5928a0e.png

属性

  • 数据描述性的信息称为属性，如人的姓名、身高、年龄、性别等，一般是名词性的。

    let obi = {
uname: 'pink老师',
age: 18,
gender: '女'
};

     

  • 属性都是成对出现的，包括属性名和值，它们之间使用英文:分隔。

  • 多个属性之间使用英文,分隔。

  • 属性就是依附在对象上的变量（外面是变量，对象内是属性）。

  • 属性名可以使用""或''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等。

对象操作

属性的操作

属性访问

声明对象，并添加了若干属性后，可以使用.获得对象中属性对应的值 语法：对象名.属性

 

c49e50937eebb1baaa77c29c0cf52976.png

属性修改

语法：对象名.属性 = 新值

 

5cc3c8ac682ab4f48c4192d765383ef1.png

属性增加

语法：对象名.新属性 = 新值

 

ac66507553a63650361cc7d9b7976ad2.png

属性删除

语法：delete 对象名.属性

 

182aa1c9577e7e4cc8aaaca2b14a2d80.png

扩：属性访问的另一种写法

对于多词属性或特殊字符属性，可以使用对象[‘属性’]的方式来访问，单引号和双引号都可以

let obj = {
    'my-name': '张三',
    "age-with-unit": '25岁'
};
console.log(obj['my-name']); // 输出：张三
console.log(obj["age-with-unit"]); // 输出：25岁

 

对象中的方法

调用方法

数据行为性的信息称为方法，其本质是函数

 

2ccdce8c3a8ea9ccbdb0904f71e00506.png

形参与实参

声明对象并添加方法后，可以调用对象中的函数，并传递形参与实参

let person = {
    name: "andy",
    sing: function(songName) {
        console.log(this.name + " is singing " + songName);
    },
    dance: function(danceStyle) {
        console.log(this.name + " is dancing " + danceStyle);
    }
};
// 调用方法并传递实参
person.sing('Sweet Dreams'); // 输出：andy is singing Sweet Dreams
person.dance('Jazz'); // 输出：andy is dancing Jazz

 

对象遍历

遍历对象

遍历对象通常使用for...in循环，因为它可以遍历对象的所有可枚举属性。 示例：

 

204bd445deecc27bd900d9ec0f165e0d.png

数组对象

所谓对象数组，指每一个数组元素都是对象的数组， 即若一个类有若干个对象，把这一系列的对象用一个数组来存放。 对象数组的元素是对象，不仅具有数据成员，而且还有函数成员

 

1c0f6ec83683e1e56e3816824da838ad.png

内置对象

内置对象介绍

JavaScript内部提供的对象，包含各种属性和方法给开发者调用

Math对象的使用

介绍：Math对象是JavaScript提供的一个“数学”对象

作用：提供了一系列做数学运算的方法

Math对象包含的方法有：

  • random：生成0-1之间的随机数（包含0不包括1)

  • ceil：向上取整

  • floor：向下取整

  • max：找最大值

  • min：找最小值

  • pow：幂运算

  • abs：绝对值

综合案例：

1.JS-生成N-M的随机数的函数

function getRandom(N, M) {
            let random = Math.floor(Math.random() * (M - N + 1)) + N
            return random
        }

 

a64d3c816883b88108adf4fa1ab9e3ec.png

2.JS-随机点名

<script>
        //随机点名
        let arr = ['wan', 'xiao', 'yu', 'heng']
        //生成随机数
        let random = Math.floor(Math.random() * arr.length)
        // 点名
        console.log(arr[random])
        // 删除，以防重复点名
        arr.splice(random, 1)
        // 查看一下数组还剩下哪些名字
        console.log(arr)
    </script>

 

a20e6840e908ba5b9d93ce17fc8763ed.png

3.JS-随机生成不同颜色

<script>
        //自定义一个随机颜色函数
        function getRandom(N, M) {
            let random = Math.floor(Math.random() * (M - N + 1)) + N
            return random
        }
        function getRandomcolor(flag = true) {
            if (flag) {
                let str = '#'
                let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
                for (let i = 0; i < 6; i++) {
                    str += arr[Math.floor(Math.random() * arr.length)]
                }
                return str
            } else {
                let red = getRandom(0, 255)
                let green = getRandom(0, 255)
                let bule = getRandom(0, 255)
                return `rgb(${red},${green},${bule})`
            }
        }
        console.log(getRandomcolor(true))
        console.log(getRandomcolor(false))
    </script>

 

f1c9ff5ec3691695b5792b11b598f6cb.png

4.JS-猜数字游戏

<script>
        function getRandom(N, M) {
            let random = Math.floor(Math.random() * (M - N + 1)) + N
            return random
        }
        let random = getRandom(1, 10)
        let flag = true
        for (let i = 0; i < 3; i++) {
            let num = +prompt('请输入您猜的数字^_^:')
            if (random === num) {
                alert('猜对啦~')
                flag = false
                break
            }
            else if (num >= random) {
                alert('猜的太大啦')
            }
            else if (num <= random) {
                alert('猜的太小啦')
            }
        }
        if (flag) {
            alert('猜的次数用完啦，想重新来的话刷新页面吧~')
        }
    </script>

获取元素

01-web API 基本认知

1.1什么是DOM

  • DOM (Document Object Model——文档对象模型）是用来呈现以及与任意 HTML或 XML文档交互的API

  • 白话文：DOM是浏览器提供的一套专门用来操作网页内容的功能

  • DOM作用：开发网页内容特效和实现用户交互

1.2 DOM树

  • DOM树：将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树

  • 描述网页内容关系的名词

  • 作用：文档树直观的体现了标签与标签之间的关系

1.3 DOM对象

  • DOM对象：浏览器根据html标签生成的JS对象

  1. 所有的标签属性都可以在这个对象上面找到

  2. 修改这个对象的属性会自动映射到标签身上

  • DOM的核心思想：把网页内容当做对象来处理

  • document 对象：DOM 里提供的一个对象

所以它提供的属性和方法都是用来访间和操作网页内容的

例：

document.write()

网页所有内容都在document里面

02-获取DOM元素

2.1 根据CSS选择器来获取DOM元素

1.选择匹配的第一个元素

语法：

document.querySelector('css选择器'）

包含一个或多个有效的CSS选择器 (字符串) 返回值:CSS选择器匹配的第一个元素，一个 HTMLElement对象。如果没有匹配到，则返回null

2.选择匹配的多个元素

语法：

document.querySelectorAll('css选择器'）

参数：包含一个或多个有效的CSS选择器

字符串返回值：CSS选择器匹配的NodeList 对象集合

例如：

document.querySelectorAll('ul li')

注意：

document.querySelectorAl1('css选择器')

  • 得到的是一个伪数组：有长度有索引号的数组

  • 但是没有 pop() push() 等数组方法

  • 想要得到里面的每一个对象，则需要遍历(for)的方式获得

  • 哪怕只有一个元素，通过querySelectAll()获取过来的也是一个伪数组，里面只有一个元素而已

例如

<body>
    <!-- 根据cs选择器获取元素 -->
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <script>
        //获取匹配的第一个元素
        const box = document.querySelector('div')
        const boxs = document.querySelectorAll('div')
        console.log(box)
        console.log(boxs)
    </script>
</body>

 

03-操作元素内容

3.1 元素innerText 属性

  • 将文本内容添加/更新到任意标签位置

  • 显示纯文本，不解析标签

3.2 元素. innerHTML 属性

  • 将文本内容添加/更新到任意标签位置

  • 会解析标签，建议使用模板字符

综合案例：JS-年会抽奖

<!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>
  <style>
    .wrapper {
      width: 840px;
      height: 420px;
      background: url(./images/bg01.jpg) no-repeat center / cover;
      padding: 100px 250px;
      box-sizing: border-box;
    }
  </style>
</head>
​
<body>
  <div class="wrapper">
    <strong>年会抽奖</strong>
    <h1>一等奖：<span id="one">???</span></h1>
    <h3>二等奖：<span id="two">???</span></h3>
    <h5>三等奖：<span id="three">???</span></h5>
  </div>
  <script>
    const arr = ['wan', 'xiao', 'yu', 'a', 'heng']//声明数组
    const random = Math.floor(Math.random() * arr.length)//生成随机数
    const one = document.querySelector('#one')//获取元素
    one.innerHTML = arr[random]//更改元素
    arr.splice(random, 1)//删除元素
  </script>
</body>
​
</html>

 

04-操作元素属性

4.1 操作元素常用属性

  • 还可以通过 JS 设置/修改标签元素属性，比如通过 src更换 图片

  • 最常见的属性比如：href、title、src 等

  • 语法：

    对象.属性= 值

举例：

<body>
    <img src="../../images-02/01.png" alt="">
    <script>
        function getRandom(N, M) {
            let random = Math.floor(Math.random() * (M - N + 1)) + N
            return random
        }
        const random = getRandom(1, 4)//生成随机数
        const img = document.querySelector(img)//获取元素
        img.src = `../../images-02/0${random}.png`//操作常用属性
    </script>
</body>

 

4.2 操作元素样式属性

1.通过style 属性操作CSS

  • 语法：

对象.style.样式属性=值

举例：

<div class="box"></div>
    <script>
        const box = document.querySelector('.box')
        box.style.width = '50px'
        box.style.backgroundColor = 'red'
    </script>
</body>

  • 注意：

  1. 修改样式通过style属性引出

  2. 如果属性有-连接符，需要转换为小驼峰命名法

  3. 赋值的时候，需要的时候不要忘记加CSS单位

2.操作类名(className)操作CSS

如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。

  • 语法：

元素.className = 'active'

  • 注意：

  1. 由于class是关键字，所以使用className去代替

  2. className是使用新值换旧值，如果需要添加一个类，需要保留之前的类名

3.通过 classList 操作类控制CSS

为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名

  • 语法

//追加一个类
​
元素.classList.add('类名'）
​
// 删除一个类
​
元素.classList.remove('类名’）
​
//切换一个类
​
元素.classlist.toggle('类名'）

4.3 操作表单元素 属性

  • 表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框

  • 正常的有属性有取值的 跟其他的标签属性没有任何区别

获取：DOM对象.属性名

设置：DOM对象.属性名 = 新值

  • 表单属性中添加就有效果，移除就没有效果，一律使用布尔值表示

如果为true 代表添加了该属性

如果是false 代表移除了该属性

比如：disabled、checked、selected

综合案例：轮播图

<!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>
  <style>
    * {
      box-sizing: border-box;
    }
​
    .slider {
      width: 560px;
      height: 400px;
      overflow: hidden;
    }
​
    .slider-wrapper {
      width: 100%;
      height: 320px;
    }
​
    .slider-wrapper img {
      width: 100%;
      height: 100%;
      display: block;
    }
​
    .slider-footer {
      height: 80px;
      background-color: rgb(100, 67, 68);
      padding: 12px 12px 0 12px;
      position: relative;
    }
​
    .slider-footer .toggle {
      position: absolute;
      right: 0;
      top: 12px;
      display: flex;
    }
​
    .slider-footer .toggle button {
      margin-right: 12px;
      width: 28px;
      height: 28px;
      appearance: none;
      border: none;
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
      border-radius: 4px;
      cursor: pointer;
    }
​
    .slider-footer .toggle button:hover {
      background: rgba(255, 255, 255, 0.2);
    }
​
    .slider-footer p {
      margin: 0;
      color: #fff;
      font-size: 18px;
      margin-bottom: 10px;
    }
​
    .slider-indicator {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      align-items: center;
    }
​
    .slider-indicator li {
      width: 8px;
      height: 8px;
      margin: 4px;
      border-radius: 50%;
      background: #fff;
      opacity: 0.4;
      cursor: pointer;
    }
​
    .slider-indicator li.active {
      width: 12px;
      height: 12px;
      opacity: 1;
    }
  </style>
</head>
​
<body>
  <div class="slider">
    <div class="slider-wrapper">
      <img src="./images/slider01.jpg" alt="" />
    </div>
    <div class="slider-footer">
      <p>对人类来说会不会太超前了？</p>
      <ul class="slider-indicator">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <div class="toggle">
        <button class="prev">&lt;</button>
        <button class="next">&gt;</button>
      </div>
    </div>
  </div>
  <script>
    // 1. 初始数据
    const sliderData = [
      { url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
      { url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
      { url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
      { url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
      { url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
      { url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
      { url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
      { url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
    ]
    const random = parseInt(Math.random() * sliderData.length)//生成随机数
    const img = document.querySelector('.slider-wrapper img')
    img.src = sliderData[random].url//修改图片
    const p = document.querySelector('.slider-footer p')
    p.innerHTML = sliderData[random].title//修改标题
    const footer = document.querySelector('.slider-footer')
    footer.style.backgroundColor = sliderData[random].color//修改背景颜色
    const li = document.querySelector(`.slider-indicator li:nth-child(${random + 1})`)
    li.classList.add('active')//修改小圆点
​
  </script>
</body>
​
</html>

9d47e8cfc48f41e3842a80799d22f0ce.png

 

神行阿衡
关注
  • 42
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript百炼成仙 第一章 掌握JavaScript基础01 初入宗门
java小白翻身
10-06 17万+
乐阳村，处于脚本大陆东部的边缘地带，民风淳朴，村名日出而作，日落而息。这一日清晨，所有村民来到村庄的门口，正在为一个十五六岁的少年送别。只见那少年虽然身体瘦弱，可是目中绽放出异彩，身躯虽不壮实，倒也挺拔。 “叶小凡，你是我们全村人的骄傲，百年来唯一一个具备修行JavaScript甲等资质的孩子！马上会有千鹤派的大人来接你，今后你一定要认真修行，给我们全村的人争光！” 他叫叶小凡，几天前通过了修行资质的检验，符合修行JavaScript的资质。 “千鹤派！”叶小凡眼前一亮，语气中伴随着激动，两眼放光。千鹤派，
JavaScript基础大总结
Augenstern_QXL的博客
07-31 13万+
✍初始JavaScirpt JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言 （Script 是脚本的意思） 脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行 现在也可以基于 Node.js 技术进行服务器端编程 ????浏览器执行JS简介 浏览器分成两部分：渲染引擎和 JS 引擎 渲染引擎：用来解析HTML与CSS，俗称内核，比如 chrome 浏览器的 blink ，老版本的 webkit JS 引擎：也称为 JS 解释器。 用来读
学习JavaScript这一篇就够了
热门推荐
轻松的小希
11-25 75万+
目录第一章 JavaScript简介1.1、JavaScript的起源1.2、JavaScript的组成1.3、JavaScript的特点1.4、JavaScript的使用1.4.1、标签引用1.4.2、文件引用1.5、JavaScript的输出1.5.1、页面输出1.5.2、控制台输出1.5.3、弹出窗口输出1.6、JavaScript的注释1.6.1、单行注释1.6.2、多行注释第二章 JavaScript基础语法2.1、标识符2.2、字面量和变量2.2.1、字面量2.2.2、变量2.3、数据类型2.3
JavaScript详解
weixin_48373085的博客
01-25 2万+
HTML对象，定时器，表单验证，正则表达式
JavaScript简介
wsdhy_的博客
04-02 4444
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言 脚本语言：最开始从 Script 单词翻译过来的。 java、c、c## c++ 都是非脚本语言 脚本和非脚本语言的区别：在于执行方式。 脚本语言：直接浏览器解析执行。 非脚本的：有一个先编译的过程。会生成中间的可执行代码文件。 动态语言：解释执行JavaScript代码的时候才去确定数据的类型。 弱类型语言： 1：变量的类型由实际的数值来确定。任何的变量可以保存任意的数据的类型。 2：不同数据...
javascript百炼成仙 第一章 掌握JavaScript基础 1.2直接量
java小白翻身
10-06 7万+
叶小凡的住处被安排在青山院西北角的一个房间里，虽不宽敞，倒也干净。叶小凡两眼露出振奋的眼神，随便吃了点乡亲们准备的干粮后，就立刻开始打坐修行。编程之修，重在积累，而非资质。资质虽然一样重要，可是后天的努力一样必不可少。这些道理，叶小凡还未上山之前，就已经熟知！因此，即便是资质平凡，只要肯下苦功，一样可以修得正果！叶小凡虽然甲等资质，可依然不骄不躁，开始从“JavaScript基础修炼要诀”第一页开始看起。 修炼要诀第一章，直接量。 编程世界，所谓直接量，就是明面上可以见到的数据值。常见的直接量有数字，小数，
JavaWeb—JavaScript
weixin_61843013的博客
06-25 7741
JavaScript的使用
javascript
02-10
javascript官方文档，web前端师的权威文档，web前端的
JavaScript JavaScript JavaScript
06-26
JavaScript JavaScript JavaScript
JavaScript实例大全
12-19
这个压缩包“JavaScript实例大全”显然是一份集合了多种JavaScript相关资源的宝典，包括“JavaScript网页设计300例”、“javascript源码大全”以及“jquery 1.7 中文 api 修正版”。 首先，“JavaScript网页设计300...
JAVASCRIPT HashTable
10-31
JAVASCRIPT HashTable
JavaScript语言精粹
09-27
JavaScript 曾是“世界上最被误解的语言”，因为它担负太多的特性，包括糟糕的交互和失败的设计，但随着Ajax 的到来，JavaScript“从最受误解的编程语言演变为最流行的语言”，这除了幸运之外，也证明了它其实是一门...
【vueUse库Component模块各函数简介及使用方法--上篇】
xiejunlan的博客
07-02 1289
vueUseComponent函数理解 `computedInject` 的概念模拟 `computedInject`使用场景总结构想`createReusableTemplate`的用途可能的实现方式方法一：使用高阶组件（HOC）方法二：使用插槽（Slots）和默认插槽内容结论构想`createTemplatePromise`的用途可能的实现方式使用Vue 3的异步组件构想中的`createTemplatePromise`结论使用Vue的`ref`属性在模板中引用元素或组件示例：引用模板中的DOM元素。
Vue前端打包
weixin_63680330的博客
07-04 192
介绍:Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。启动：双击nginx.exe 文件启动，服务器默认占用80端口。官网:https://nginx.org/打包好的dist目录赋值到html下。html静态资源文件目录。conf 配置文件目录。logs日志文件目录。temp临时文件目录。
Vue 3集成krpano 全景图展示
最新发布
Mr丶GUO
07-06 235
Vue 3集成krpano 全景图展示，需要借助官方工具进行制作注意事项：vue@cli3没有static，需要放在public目录下。
前端播放RTSP视频流，使用FLV请求RTSP视频流播放（Vue项目，在Vue中使用插件flv.js请求RTSP视频流播放）
weixin_65793170的博客
07-01 1019
在浏览器中请求 RTSP 视频流并进行播放时，直接使用原生的浏览器 API 是行不通的，因为它们不支持 RTSP 协议。为了解决这个问题，开发者通常会选择使用像 flv.js 这样的库，它专为在浏览器中播放 FLV 和其他流媒体格式设计。然而，flv.js 本身并不直接支持 RTSP，这意味着我们需要一个额外的步骤来桥接 RTSP 和 flv.js。
JS混淆基本类型和原理
朴拙科技的博客
07-06 391
混淆技术为JS代码提供了一定程度的保护，但同时也给代码的维护和逆向工程带来了挑战。了解和掌握这些混淆技术的原理和解析方法，可以帮助开发者更好地保护或理解JS代码。然而，需要注意的是，混淆并不是万无一失的安全措施，它更多的是增加了攻击者理解代码的难度。在进行逆向工程时，应始终遵守法律法规，尊重知识产权，不要用于非法目的。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值