API之入门第一课
|
129
|
前端
|

2141 字
|
19 分钟

补充： 声明变量const优先

在变量声明的过程中给我们通常用let来声明变量，但是有些变量后续并不需要被改变，这样我们为什么不用const来声明呢，实际上，在react框架中，也基本上用const来声明变量，而且const的语义化更好我们可以先用const来声明，如果后续需要改变，我们再改为let。

这里注意一个点哦，数组和对象这种比较复杂的数据类型用const定义后也可以对其进行增加或者删除，但是不可以把另一个新数组赋值给他。

这里需要解释一下栈堆的一些只是，复杂数据类的数据存储在堆里，像数组名指向栈里面的地址，而地址指向了堆里面的数组，你追加或者删除了东西，数组还是那个数组，地址没有改变，数组也相当于没有改变，所以用const不会报错，而赋值新数组则是一个新数组在堆区开辟了一块空间，然后这块空间对应的栈区的地址赋值给了数组，数组地址发生了改变，当然数组也就改变了，就会报错。

Web API 基本认知

作用和分类

作用：使用JS区操作html和浏览器

分类:DOM (文档对象模型)、BOM（浏览器对象模型）

什么是DOM

简单来说就是浏览器提供的一套操作网页内容的功能，用于开发网页特效和实现用户交互

DOM 树

将HTML文档以树状结构表现出来。

image-20250211113954397

DOM对象

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

  • 所有标签属性可以在这个对象上面找到
  • 修改这个对象的属性会直接映射到标签上

核心思想就是把网页当作对象来处理，

document是DOM里面最大的一个对象，所以它提供的属性和方法都是用来访问和操作网页内容的，网页的所有内容都在document里面

获取DOM对象

通过CSS选择器来获取DOM元素

1.获取匹配的第一个元素

语法：

 document.querySelector('css选择器')

我们直接从例子来看

   <style>
     .box{
       width: 100px;
       height: 100px;
       background-color: red;
     }
   </style>
 </head>
 ​
 <body>
   <div class = "box">123</div>
   <div class="box">abc</div>
   <script>
     const box = document.querySelector('div')
     console.log(box)    
   </script>
 </body>
image-20250211155507848

从例子中我们可以发现，获取只有匹配的第一个元素，注意返回值的对象。

当然我们也可以更改一下元素属性值

 <body>
   <div class = "box">123</div>
   <div class="box">abc</div>
   <script>
     const box = document.querySelector('div')
     box.style.backgroundColor = 'green'
     console.log(box)    
   </script>
 </body>
image-20250211161412296

2.获取所有元素

语法

 document.queryAll('选择器')

返回值是匹配的NodeList对象的集合

我们看例子

 <body>
   <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
   </ul>
   <script>
     const lis = document.querySelectorAll('li')
     console.log(lis)
   </script>
 </body>
image-20250211161103106

那么我能堆其中元素进行修改吗，是比可以直接实现的，但是可以通过遍历来实现，

注意通过这样获取的返回值是一个伪数组

这里得到的是一个有长度有索引号的数组但是没有pop() push()等数组方法，但是要获得里面的每一个对象还是要通过for来遍历。

     for(let i = 0;i < lis.length;i++){
       console.log(lis[i])
     }

操作元素内容和元素属性

修改对象内容

目标：能够修改元素的文本更换内容。

 <body>
   <div class="box">我是文字内容</div>
   <script>
     /*1.获取元素*/
     let box = document.querySelector('.box')
     /*2.修改文字内容 对象/innerText 属性*/
     console.log('box.innerText');/*获取文字内容*/
     box.innerText = '<strong>原神，启动！</strong>'
     console.log('box.innerText');
   </script>
 </body>
image-20250211170455275

注意这里是不识别标签的。那么有没有能解析标签的呢，有的有的兄弟，那就是用innerHTML来修改

 <body>
   <div class="box">我是文字内容</div>
   <script>
     /*1.获取元素*/
     let box = document.querySelector('.box')
     /*2.修改文字内容 对象/innerText 属性*/
     console.log('box.innerText');//获取文字内容
     box.innerHTML = '<strong>原神，启动！</strong>'
     console.log('box.innerText');
   </script>
 </body>
image-20250211190158334

修改元素属性

目标：操作元素的常用属性，样式属性，表单元素属性以及自定义属性

元素常用属性

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

语法：

 对象.属性 = 值

我们来找点栗子

 <body>
   <h1>明年今日</h1>
   <img src = "https://ttdr-img.oss-cn-shanghai.aliyuncs.com/i/20250211201345662.png" alt="">
   <script>
     /*1.获取图片元素*/
     const img = document.querySelector('img')
     /*2.修改属性*/
     img.src = "https://ttdr-img.oss-cn-shanghai.aliyuncs.com/i/20250211201408784.png"
     img.title = '明年今日'
   </script>
 </body>
元素样式属性

这里我们有三种途径来操作css，

1.通过style属性操作css

语法：

 对象.style.样式属性 = '值'

举例：

   <style>
     div{
       width: 100px;
       height: 100px;
       background-color: red;
     }
   </style>
 </head>
 ​
 <body>
   <div></div>
   <script>
     const div = document.querySelector('div')
     div.style.width = '200px'
     div.style.backgroundColor= 'green'
   </script>
 </body>

注意：如果输入background-color中间的小短线会识别为破折号，这里需要小驼峰命名法来实现修改背景颜色

2.通过类名修改样式

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

语法：

 元素.className = 'active'
 /*active是一个类名*/

注意：

  1. 由于class是关键字所以要用className来代替
  2. className是通过新值换旧值，如果需要添加一个新的类，需要保留之前的类名

栗子：

   <style>
     div{
       width: 100px;
       height: 100px;
       background-color: red;
     }
     .box{
       width: 300px;
       height: 300px;
       border: 1px solid red;
       margin: 100px auto;
       padding: 10px;
       background-color: aquamarine;
     }
   </style>
 </head>
 ​
 <body>
   <div></div>
   <script>
     /*1.获取元素*/
     const div = document.querySelector('div')
     /*2.添加类名*/
     div.className = 'box'
   </script>
 </body>
3.通过classList修改样式

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

语法

 /*追加一个类*/
 元素.classList.add('类名')
 /*删除一个类*/
 元素.classList.remove('类名')
 /*切换一个类，有就删掉，没有就加上*/
 元素.classList.toggle('类名')

我们来看例子

   <style>
     .box{
       width: 300px;
       height: 300px;
       color: red;
     }
     .active{
       color: blue;
       background-color: yellow;
     }
   </style>
 </head>
 ​
 <body>
   <div class="box">我是文字</div>
   <script>
     /*通过classList添加*/
     const box = document.querySelector('.box')
     box.classList.add('active')
   </script>
 </body>
image-20250211224528000

注意：add()里面类名不加点而且是字符串

操作表单元素的属性

表单有很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框，具体操作方法差不多我们直接上栗子

 <body>
   <input type="text" value="ttdr">
   <script>
     /*1.获取元素*/
     const uname = document.querySelector('input')
     /*2.获取值  获取表单里面的值用的是 表单.value*/
     console.log(uname.value)
     uname.value = 'ttdr2' /*去手动设置一个值*/
     console.log(uname.type)
     uname.type = 'password'/*变成密码框*/
   </script>
 </body>

获得值用的是value。

表单属性添加就有效果，移除就没效果，一律使用布尔值表示，如果true代表添加了该属性false表示移除了该属性。比如：disabled、checked、selected

我们来看栗子

 <body>
   <input type="checkbox" checked>
   <script>
     const ipt = document.querySelector('input')
     ipt.checked = true  /*给复选框打对勾*/
   </script>
 </body>

H5自定义属性

在H5中推出的专门的data-自定义属性，这些属性一律是以data开头，在DOM对象上一律以dataset对象获取方式获取

上栗子了

 <body>
   <div data-id="1" data-game="???">1</div>
   <div data-id="2">2</div>
   <div data-id=3>3</div>
   <div data-id="4">4</div>
   <div data-id="5">5</div>
   <script>
     const one = document.querySelector('div')
     console.log(one.dataset)
     console.log(one.dataset.id)
   </script>
 </body>
 ​
image-20250211231045734

定时器-间歇函数

介绍

目标：了解使用场景

网页中通常需要一个功能，间隔一段时间会自动执行一段代码，不需要我们手动去出发，例如网页中的倒计时，要实现这种需求需要定时器函数，具体由两种，这里仅讲解定时器函数

定时器函数的基本使用

开启定时器

语法：

 setInterval(函数，间隔时间)

作用每间隔多少时间调用一下这个函数，间隔的时间单位是毫秒

举例：

 <body>
   <script>
     setInterval(function(){ console.log('一秒来一次');},1000)
     function fn(){
       console.log('一秒来一次');
     }
     setInterval(fn,1000) /*这里函数名不需要小括号*/
   </script>
 </body>

这里定时器实际上是由返回值的，返回值是一个id数字，每个定时器的id数字是独一无二的，为了防止多个定时器之间的干扰，我们这里需要让返回的数字个性化一些，这样方便我们辨别

 let n = setInterval(fn,1000)

这里没有用const，定时器需要开和关，所以值可能会变

关闭定时器

我们定时器不能一直开着，我们有些时候我们需要关闭定时器。

语法：

 clearInterval（变量名）

看看例子：

 <body>
   <script>
     setInterval(function(){ console.log('一秒来一次');},1000)
     function fn(){
       console.log('一秒来一次');
     }
     let n = setInterval(fn,1000)
     clearInterval(n)
   </script>
 </body>

当然我们并不会定时器刚开始就关闭，通常会加一些条件。

案例

## 抽奖案例

抽奖案例，我们从数组中抽取一等奖二等奖，三等奖，并显示到对应的标签里面去,同时要求抽奖结果不重复

我们这里主要锻炼的是上面所学，所以我们先给一个死的模板

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>抽奖案例</title>
   <style>
     .wrapper {
       width: 840px;
       height: 420px;
       background: url(http://www.ttdr.top/wp-content/uploads/2025/01/cropped-cropped-8ace47468cb8ea5d7e0717a2f641342b-1.jpg) no-repeat center / cover;
       padding: 100px 250px;
       box-sizing: border-box;
     }
     .wrapper h1, .wrapper h3, .wrapper h5 , strong{
       color: red;
     }
 ​
   </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>
 </body>
 ​
 </html>

案例实现

 ​
 <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 personArr = ['陈奕迅','毛不易','周传雄','薛之谦','赵英俊']
     /*1.先做一等奖
     1.1随机数 随机出数组的下表*/
     const random = Math.floor(Math.random() * personArr.length)
     console.log(personArr[random]);
     /*1.2获取元素*/
     const one = document.querySelector('#one')
     one.innerHTML = personArr[random]
     /*1.3删除数组中的随机数*/
     personArr.splice(random,1)
 ​
     /*2.二等奖*/
     const random2 = Math.floor(Math.random() * personArr.length)
     console.log(personArr[random2]);
     /*2.2获取元素*/
     const two = document.querySelector('#two')
     two.innerHTML = personArr[random2]
     /*2.3删除数组中的随机数*/
     personArr.splice(random2,1)
 ​
     /*2.二等奖*/
     const random3 = Math.floor(Math.random() * personArr.length)
     console.log(personArr[random3]);
     /*2.2获取元素*/
     const three = document.querySelector('#three')
     three.innerHTML = personArr[random3]
     /*2.3删除数组中的随机数*/
     personArr.splice(random3,1)
   </script>
 </body>

网页刷新换图

需求：刷新页面的时候页面中随机显示不同的图片

PS :这里博主通过部署了图床来实现图片存储并非在本地

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>网页刷新换图案例</title>
   <style>
 ​
   </style>
 </head>
 ​
 <body>
   <img src="" alt="">
   <script>
     function getRandom(N,M){
       return Math.floor(Math.random() * (M - N + 1)) + N
     }
     const arr = ['20250211202546919','20250211202609273','20250211202707901','20250211202524095','20250211202503154','20250211202408770']
     const random = getRandom(0,arr.length - 1)
     /*1.获取图片对象*/
     const img = document.querySelector('img')
     /*2.更换路径*/
     img.src = `https://ttdr-img.oss-cn-shanghai.aliyuncs.com/i/${arr[random]}.png`
   </script>
 </body>
 ​
 </html>

倒计时启用按钮

<body>
  <textarea name="" id="" cols="30" rows="10">
    欢迎您使用腾讯统一身份产品及服务！为使用腾讯统一身份产品（以下统称“本产品”）及服务（以下统称“本服务”），您应当阅读并遵守《腾讯统一身份用户服务协议》（以下简称“本协议”），以及 《腾讯服务协议》、 《腾讯隐私政策》、 《腾讯统一身份隐私保护指引》。 请您在注册成为腾讯统一身份用户前务必审慎阅读、充分理解各条款内容，特别是免除或者限制腾讯责任的条款、对用户权利进行限制的条款、约定争议解决方式和司法管辖的条款等，以及开通或使用某项服务的单独协议。限制、免责条款或者其他涉及您重大权益的条款可能以加粗、加下划线等形式提示您重点注意。您应重点阅读，如果您对协议有任何疑问，请联系我们进行咨询。除非您已阅读并接受本协议所有条款，否则您无权使用腾讯统一身份服务。您的注册、登录、发布信息等行为即视为您已阅读并同意本协议的约束。如果您因年龄、智力等因素而不具有完全民事行为能力，请在法定监护人（以下简称"监护人"）的陪同下阅读和判断是否同意本协议。如果您是中国大陆地区以外的用户，您订立或履行本协议以及使用本服务的行为还需要同时遵守您所属和/或所处国家或地区的法律。
  </textarea>
  <br>
  <button id="btn" disabled>我已阅读用户协议(5s)</button>
  <script>
    /*1.获得元素*/
    const btn = document.querySelector('#btn')
    /*2.倒计时*/
    let i = 5
    let n = setInterval(function () {
      i--
      btn.innerHTML = `我已阅读用户协议(${i}s)`
      if(i === 0){
        clearInterval(n)
        btn.disabled = false
      }
    },1000)
  </script>
</body>
APIJavaScriptJAVA全栈前端
暂无评论

发送评论 编辑评论 


				

			

						

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
							
													

					

				

			

			
			

				

					
				

			

				

											

							
							
						

																

							
							
						

																

							
							
						

										
					
									

			

			
			
		

	






上一篇
下一篇 

                    

                    
			        推荐文章
		            

		            

							
API之事件入门

							
							

							
JS之对象

							
							

							
JS之浅谈函数

							
							

							
JS基础之数组

							
							

							
JS基础——基础语法（1）

							
							

							
CSS之盒子模型（1）

							
							

							
CSS之其他常见元素

							
							

							
CSS常见属性之字体属性和文本属性

							
							

							
css的三大特性以及像素和颜色

							
							

							
CSS之伪元素选择器及选择器的优先级