前端学习-JavaScript学习-js基础-API01

news/发布时间2024/5/20 19:02:50

学习视频:黑马程序员视频链接

DOM简介

DOM树：将HTML文档标签以树状形式表现出来
DOM对象：每个标签都是DOM对象
DOM核心思想：将网页内容当作对象处理
DOM中最大的对象：document，其次是<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></div><script>const div = document.querySelector('div');// 用于打印对象console.dir(div);</script>
</body>
</html>

获取DOM元素

querySelector选择匹配的第一个元素
querySelectorAll选择匹配的所有元素，以数组形式获取（伪数组，仅有长度和索引号，没有方法）

<!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>111</div><div class="box">222</div><p id="navi">333</p><ul><li>li1111</li><li>li1112</li><li>li1113</li></ul><script>const box = document.querySelector('div');const box1 = document.querySelector('.box');const navi = document.querySelector('#navi');const li = document.querySelector('ul li:first-child');const lis = document.querySelectorAll('ul li');console.log(box, box1, navi, li, lis[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><style>.wrapper {width: 840px;height: 420px;background: url(../02-素材/images/bg01.jpg) no-repeat center / cover;/* text-align: center; */padding: 100px 250px;box-sizing: border-box;}</style>
</head>
<body><div class="wrapper"><h3>抽奖</h3><h1 id="one">一等奖：</h1><h2 id="two">二等奖：</h2><h3 id="three">三等奖：</h3></div><script>const one = document.querySelector('#one');const two = document.querySelector('#two');const three = document.querySelector('#three');const personArr = ['周杰伦', '刘德华', '周星驰', 'Pink老师', '张学友'];function randomNum(){return Math.floor(Math.random()*(personArr.length));}let randomNum1 = randomNum();one.innerHTML = `一等奖：${personArr[randomNum1]}`;personArr.splice(randomNum1, 1);let randomNum2 = randomNum(); two.innerHTML = `二等奖：${personArr[randomNum2]}`;personArr.splice(randomNum2, 1);let randomNum3 = randomNum(); three.innerHTML = `三等奖：${personArr[randomNum3]}`;personArr.splice(randomNum3, 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>
</head>
<body><img src="../02-素材/images/course01.png" alt=""><script>const img = document.querySelector('img');img.src = '../02-素材/images/course02.png';img.title = 'doggggs';</script>
</body>
</html>

修改样式属性style

使用style生成的是行内样式表，优先级高于内部样式表；只有important能覆盖掉它；

<!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 {width: 200px;height: 300px;background-color: green;/* box-sizing: border-box; */}</style></head>
<body><div class="box"></div><script>const box = document.querySelector('.box');box.style.width = '300px';box.style.backgroundColor = 'greenyellow';box.style.border = '30px solid green';box.style.boxSizing = 'border-box';</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>body {background: url(./images/desktop/desktop_1.jpg) no-repeat top center / cover;}</style></head>
<body><script>const randomNum = Math.floor(Math.random() * 10) + 1;// 由于body唯一，可以不使用querySelector获取// const bgcImg = document.querySelector('body');// bgcImg.style.backgroundImage = `url(./images/desktop/desktop_${randomNum}.jpg)`;document.body.style.backgroundImage = `url(./images/desktop/desktop_${randomNum}.jpg)`;</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>div {width: 200px;height: 200px;background-color: green;}.nav {color: red;}.box {width: 300px;height: 300px;background-color: greenyellow;box-sizing: border-box;margin: 20px 20px;}</style></head>
<body><div class="nav">1233</div><script>const div = document.querySelector('div');// 修改元素较多时，使用style较繁琐；可使用className借助类名修改// 会覆盖旧的类名div.className = 'box';</script>
</body>
</html>

修改样式属性classList

为解决className覆盖旧类名，可使用classList追加和剔除类名

<!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 {width: 200px;height: 200px;color: red;/* background-color: green; */}.active {background-color: greenyellow;}</style></head>
<body><div class="box">wenzi</div><script>const div = document.querySelector('.box');// 追加类div.classList.add('active');// 删除类div.classList.remove('box');// 切换类 有就删除，没有就追加div.classList.toggle('active');div.classList.toggle('box');</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>* {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 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-color: #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/sliders/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></div><script>const sliderData = [{ url: './images/sliders/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },{ url: './images/sliders/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },{ url: './images/sliders/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },{ url: './images/sliders/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },{ url: './images/sliders/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },{ url: './images/sliders/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },{ url: './images/sliders/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },{ url: './images/sliders/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },];function randomNum(m, n) {return Math.floor(Math.random()*(n - m + 1) + m);}const num = randomNum(0, 7);const img = document.querySelector('.slider-wrapper img');img.src = sliderData[num].url;const p = document.querySelector('.slider-footer p');p.innerHTML = sliderData[num].title;const sliderFooter = document.querySelector('.slider-footer');sliderFooter.style.backgroundColor = sliderData[num].color;const dot = document.querySelector(`.slider-indicator li:nth-child(${num + 1})`);dot.classList.toggle('active');</script>
</body>
</html>

修改表单

innerHTML无法获取表单元素
checked disabled 只接受布尔值参数

<!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><!-- checked disabled 只接受布尔值参数 --><input type="text" value="please" name="" id=""><!-- 复选框 默认勾选 --><input type="checkbox" name="" id="" checked><!-- 按钮 禁用 --><button disabled>btn</button><script>const input = document.querySelectorAll('input');console.log(input.value);input[0].type = 'password';input[1].checked = false;const btn = document.querySelector('button');btn.disabled = false;</script>
</body>
</html>

自定义属性

自定义属性以data-开头

<!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 data-num="1" data-scm="qqqqq">1</div><div data-num="2">2</div><div data-num="3">3</div><div data-num="4">4</div><div data-num="5">5</div><script>const num = document.querySelector('div');console.log(num.dataset.num);console.log(num.dataset.scm);</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><script>let timer1 = setInterval(function (){console.log('ttthhiisss');}, 2000);function fn() {console.log('thhhhaaattt');}let timer2 = setInterval(fn, 2000);// 关闭定时器clearInterval(timer1);</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><textarea name="" id="" cols="30" rows="10">用户注册协议欢迎注册成为京东用户！在您注册过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体或下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）。【请您注意】如果您不同意以下协议全部或任何条款约定，请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息，阅读并点击同意上述协议且完成全部注册流程后，即表示您已充分阅读、理解并接受协议的全部内容，并表明您同意我们可以依据协议内容来处理您的个人信息，并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方（详情查看</textarea><br><button class="btn" disabled>我已经阅读用户协议(5)</button><script>const btn = document.querySelector('.btn');let i = 5;let num = setInterval(function () {// btn.disabled = true;i--;btn.innerHTML = `我已经阅读用户协议(${i})`;if(i === -1) {clearInterval(num);btn.disabled = false;btn.innerHTML = `同意`;}}, 1000);</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>* {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 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-color: #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/sliders/slider01.jpg" alt=""></div><div class="slider-footer"><p>对人类来说会不会太超前了？</p><ul class="slider-indicator"><li class="active"></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></div></div><script>const sliderData = [{ url: './images/sliders/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },{ url: './images/sliders/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },{ url: './images/sliders/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },{ url: './images/sliders/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },{ url: './images/sliders/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },{ url: './images/sliders/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },{ url: './images/sliders/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },{ url: './images/sliders/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },];function randomNum(m, n) {return Math.floor(Math.random()*(n - m + 1) + m);}// const num = randomNum(0, 7);const img = document.querySelector('.slider-wrapper img');// img.src = sliderData[num].url;const p = document.querySelector('.slider-footer p');// p.innerHTML = sliderData[num].title;const sliderFooter = document.querySelector('.slider-footer');// sliderFooter.style.backgroundColor = sliderData[num].color;// const dot = document.querySelector(`.slider-indicator li:nth-child(${num + 1})`);// dot.classList.toggle('active');let i = 0;setInterval(function() {i++;if(i === 8) {i = 0;}img.src = sliderData[i].url;p.innerHTML = sliderData[i].title;sliderFooter.style.backgroundColor = sliderData[i].color;document.querySelector('.slider-indicator .active').classList.remove('active');document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active');}, 1000)</script>
</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.ulsteruni.cn/article/73867356.html

如若内容造成侵权/违法违规/事实不符，请联系编程大学网进行投诉反馈email:xxxxxxxx@qq.com，一经查实，立即删除！

图形渲染操作系统分析

图形渲染操作系统分析迄今为止，博主在博客中阐述的内容包含渲染技术、性能优化、图形API、Shader、GPU、游戏引擎架构、图形驱动等等技术范畴的内容，这些内容都仅仅局限于单个应用程序之中，常常让人有”只缘身在此山中“的感叹。现在是时候更进一步了——进入操作系统（Ope…

任务5#include <iostream>#include <string>class TextCoder { private:std::string text;void encoder() {for (char &c : text) {if (isalpha(c)) { char base = isupper(c) ? A : a; c = base + ((c - base + 7) % 26); }}}void decoder() {for (char &…

实验4 现代C++标准库与类模板

实验任务5:TextCoder.hpp文件源码：1 #ifndef TEXTCODER_HPP2 #define TEXTCODER_HPP3 4 #include <string>5 6 class TextCoder {7 private:8 std::string text;9 10 void encoder(); 11 void decoder(); 12 13 public: 14 TextCoder(std::string inp…

[Codeforces] CF1591C Minimize Distance

CF1591C Minimize Distance 题目一条线上有 \(n\) （\(1 \le n \le 2 \cdot 10^5\)）个仓库，第 \(i\) 个仓库的位置是 \(x_i\) （\(1 \le i \le n\)）。你有 \(n\) 箱货物，要分别运到这 \(n\) 个仓库里。你的初始位置在点 \(0\) ，一次可以携带 \(k\) （\(1 \le k \le n\)）…

python内置方法

【整型的内置方法】【浮点型】【数字类型判断】【字符串】【列表类型】

6How To Use Messages With Flask - Flask Fridays #6 10:43

消息闪现消息闪现{% for message in get_flashed_messages() %} <div class="alert alert-success alert-dismissible fade show" role="alert"> {{ message }} <button type="button" class="btn-close" data…