从零开始学习 JS APL(一):完整指南和实例解析

本章内容主要是按一下来:

操作DOM BOM
比如 控制网页元
素交互等各种网页
交互效果

以下是我总结笔记(仅供参考)

webAPL

获取DOM对象

变量声明有三个 var let 和 const
我们应该用那个呢?
首先var 先排除,老派写法,问题很多,可以淘汰掉…
let or const ?
建议: const 优先,尽量使用const,原因是:
Ø const 语义化更好
Ø 很多变量我们声明的时候就知道他不会被更改了,那为什么不用 const呢?
Ø 实际开发中也是,比如react框架,基本const
l 如果你还在纠结,那么我建议:
l 有了变量先给const,如果发现它后面是要被修改的,再改为let

// 获取单个 DOM 对象
const element = document.querySelector('#myElement');// 获取多个 DOM 对象
const elements = document.querySelectorAll('.myElements');
const elements = document.querySelectorAll('.myElements');

 !!注意一点是返回的是伪数组

这里给大家普及以下const 和let的区别

在最新的 ES6 语法中,constlet 是两种定义变量的方式,与之前的 var 相对应。

  • const 定义的变量是一个常量,一旦被赋值后就不能再次被修改,而且必须进行初始化赋值操作。例如:

    const a = 10;
    // a = 20; // Error: 列出 "TypeError: Assignment to constant variable." 
    
  • let 定义的变量是一个块级作用域的变量,允许被修改,如同 C、C++ 或 Java 的变量声明方式。例如:

    let b = 10;
    b = 20; // OK: 变量可以被修改
    {let b = 30; // OK: 定义了一个新的块级变量
    }
    
  • constlet 都是块级作用域的,在 for 循环或 if 语句中都可以定义并使用。在同一个作用域中,不允许重复定义同名变量。

操作元素内容

 根据CSS选择器来获取DOM元素 (重点)

选择匹配的第一个元素
语法:
参数:
包含一个或多个有效的CSS选择器 字符串
返回值:
CSS选择器匹配的第一个元素,一个 HTMLElement对象。
如果没有匹配到,则返回null
举例说明:

根据 CSS 选择器来获取 DOM 元素是常用的前端开发技巧之一,这可以让我们通过 CSS 中的选择器来获取元素,并进行操作。

以下是一些常见的 CSS 选择器:
  • 根据 id 获取元素:
    const element = document.querySelector('#myId');
    
  • 根据 class 获取元素:
    const element = document.querySelector('.myClass');
    
  • 根据标签名获取元素:
    const element = document.querySelector('div');
    
  • 根据属性值获取元素:
    const element = document.querySelector('[data-my-attribute="myValue"]');
    
  • 获取多个元素(返回一个 Nodelist 对象):
    const elements = document.querySelectorAll('.myClass');
    
上述示例中,document.querySelector()document.querySelectorAll() 返回的是一个 DOM 元素或节点列表,我们可以通过这些元素或节点列表进行操作,如修改样式、绑定事件等。
 练习题:
请控制台依次输出 3个 li 的 DOM对象

 
大家也可以去参考文档点击看文档

使用最新的 ES6 语法,可以通过以下方式操作元素内容:

  1. 获取元素内容:
const element = document.querySelector('#my-element');
const content = element.innerHTML; // 获取元素内部的 HTML 内容
const text = element.textContent; // 获取元素内部的文本内容

  1. 设置元素内容:
const element = document.querySelector('#my-element');
element.innerHTML = '<p>New HTML content</p>'; // 设置元素内部的 HTML 内容
element.textContent = 'New text content'; // 设置元素内部的文本内容

  1. 添加元素内容:
const element = document.querySelector('#my-element');
element.insertAdjacentHTML('beforeend', '<p>New HTML content</p>'); // 在元素的最后插入 HTML 内容
element.append('New text content'); // 在元素的最后插入文本内容

以上就是最新的 ES6 语法中操作元素内容的一些常用方法。需要注意的是,对于一些特殊的内容操作,比如通过 JavaScript 动态创建元素、绑定事件等,可能还需要使用一些传统的 DOM 操作方式。

操作元素属性

使用最新的 ES6 语法,可以通过以下方式操作元素属性:

  1. 获取元素属性:

const element = document.querySelector('#my-element');
const attrValue = element.getAttribute('data-my-attribute');
  1. 设置元素属性:

const element = document.querySelector('#my-element');
element.setAttribute('data-my-attribute', 'new-value');
  1. 移除元素属性:

const element = document.querySelector('#my-element');
element.removeAttribute('data-my-attribute');
  1. 操作元素样式:

const element = document.querySelector('#my-element');
element.style.backgroundColor = 'red';

以上就是最新的 ES6 语法中操作元素属性的一些常用方法。需要注意的是,对于一些新属性或者不常用的属性,可能还是需要使用传统的 DOM 操作方式。

定时器-间歇函数

目标:能够使用定时器函数重复执行代码
定时器函数可以开启和关闭定时器
1. 开启定时器


Ø 作用:每隔一段时间调用这个函数
Ø 间隔时间单位是毫秒

注意:
1. 函数名字不需要加括号
2. 定时器返回的是一个id数字
 定时器函数可以开启和关闭定时器
2. 关闭定时器

最后给大家一个练习题:

需求:按钮60秒之后才可以使用
分析:
①:开始先把按钮禁用(disabled 属性)
②:一定要获取元素
③:函数内处理逻辑
秒数开始减减
按钮里面的文字跟着一起变化
如果秒数等于0 停止定时器 里面文字变为 同意 最后 按钮可以点击(稍后我会发布这道题的代码!)
 

综合案例
 需求:每隔一秒钟切换一个图片
分析:
①:准备一个数组对象,里面包含详细信息(素材包含)
②:获取元素
③:设置定时器函数
设置一个变量++
找到变量对应的对象
更改图片、文字信息
激活小圆点:移除上一个高亮的类名,当前变量对应的小圆点添加类
④:处理图片自动复原从头播放(放到变量++后面,紧挨)
如果图片播放到最后一张, 就是大于等于数组的长度
则把变量重置为0(如有需要这道题代码请联系我!)

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

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

相关文章

JOSEF约瑟 同步检查继电器DT-13/200 100V柜内安装,板前接线

系列型号 DT-13/200同步检查继电器; DT-13/160同步检查继电器; DT-13/130同步检查继电器; DT-13/120同步检查继电器; DT-13/90同步检查继电器; DT-13/254同步检查继电器; 同步检查继电器DT-13/200 100V柜内板前接线 一、用途 DT-13型同步检查继电器用于两端供电线路的…

linux系统下农场种菜小游戏!

linux系统下农场种菜小游戏&#xff01; 今天给大家分享一个linux系统下一个简单的小游戏 源码如下&#xff0c;在linux系统下创建一个.sh的脚本文件&#xff0c;复制粘贴进去即可&#xff01; #!/bin/bash# 初始化变量 vegetables("生菜" "西兰花" &qu…

SpringBoot启动流程

SpringBoot启动流程 文章目录 SpringBoot启动流程SpringBoot启动流程 SpringBoot启动流程 视频链接&#xff1a; https://www.bilibili.com/video/BV15b4y1a7yG/?p174&spm_id_frompageDriver&vd_sourcef6debc5a79e3f424f9dde2f13891b158 看李老师讲的吧&#xff0c;特…

服务器数据恢复—服务器断电导致XenServer数据文件丢失的数据恢复案例

服务器数据恢复环境&#xff1a; 某品牌720服务器搭配该品牌某型号RAID卡&#xff0c;使用4块STAT硬盘组建了一组RAID10阵列。服务器上部署XenServer虚拟化平台&#xff0c;系统盘 数据盘两个虚拟机磁盘。虚拟机上安装的是Windows Server操作系统&#xff0c;作为Web服务器使用…

虾皮助手:提升Shopee卖家运营效率的必备辅助工具

随着电商市场的快速发展&#xff0c;越来越多的卖家选择在Shopee平台上开设在线商店。然而&#xff0c;随之而来的是更多的竞争和挑战。为了在这个竞争激烈的市场中脱颖而出&#xff0c;卖家们需要寻找一种工具来帮助他们更高效地管理和运营他们的店铺。虾皮助手&#xff08;Sh…

CSS特效026:扇骨打开关闭的动画

CSS常用示例100专栏目录 本专栏记录的是经常使用的CSS示例与技巧&#xff0c;主要包含CSS布局&#xff0c;CSS特效&#xff0c;CSS花边信息三部分内容。其中CSS布局主要是列出一些常用的CSS布局信息点&#xff0c;CSS特效主要是一些动画示例&#xff0c;CSS花边是描述了一些CSS…

vue创建项目,使用可视化界面安装插件

安装项目&#xff1a; vue create vue-app 选择默认配置就行&#xff0c;也可以按需选择自定义配置 vue ui通过可视化管理项目 通过可视化安装全家桶插件

连接池打满,导致页面夯住

连接池打满&#xff0c;导致页面夯住 1、背景生产环境中访问系统&#xff0c;页面延迟卡顿 2、排产思路 1&#xff09;、查看日志是排查问题的第一要素&#xff08;个人认为&#xff09;&#xff1b;查看日志发现使用com.alibaba.druid.pool设置最大连接数为100&#xff0c;已…

【android开发-15】android中广播broadcast用法详解

1&#xff0c;broadcast类型 在Android中&#xff0c;Broadcast是一种用于在应用程序组件之间传递消息的机制。它允许一个组件&#xff08;发送者&#xff09;将消息发送给其他组件&#xff08;接收者&#xff09;&#xff0c;即使它们之间不存在直接的联系。 Android中的Bro…

挑战音频爬虫的技术迷宫:Watir和Ruby的奇妙合作

概述 音频爬虫是一种可以从网站上抓取音频文件的程序。音频爬虫的应用场景很多&#xff0c;比如语音识别、音乐推荐、声纹分析等。然而&#xff0c;音频爬虫也面临着很多技术挑战&#xff0c;比如音频文件的格式、编码、加密、隐藏、动态加载等。如何突破这些技术障碍&#xf…

整数和浮点数在内存中的存储​(大小端详解)

目录 一、整数在内存中的存储 二、大小端字节序和字节序判断 2.1为什么有大小端?​ 2.2请简述大端字节序和小端字节序的概念&#xff0c;设计一个小程序来判断当前机器的字节序。&#xff08;10分&#xff09;-百度笔试题 方法一&#xff08;char*强制类型转换&#xff09…

迅为RK3588开发板定制Ubuntu和Debian系统-系统定制(无法联网)

在上一个小节中讲解了 ubuntu 和 debian 文件系统的定制&#xff0c;但那是在可以运行脚本正常构 建系统的前提下&#xff0c;而本小节则是针对部分特殊用户无法联网的情况。 在 source 目录下存放了已经构建完成的压缩包&#xff0c;如下图所示 然后使用以下命令将该压缩包解…

Hive SQL的各种join总结

说明 Hive join语法有6中连接 inner join&#xff08;内连接&#xff09;、left join&#xff08;左连接&#xff09;、right join&#xff08;右连接&#xff09;、full outer join&#xff08;全外连接&#xff09;、left semi join&#xff08;左半开连接&#xff09;、cr…

prime靶机打靶记录

靶机下载地址 https://download.vulnhub.com/prime/Prime_Series_Level-1.rar nmap搜索目标 使用nmap -sn 192.168.41.0/24找到目标靶机192.168.41.136 扫描端口&#xff0c;因为是靶机&#xff0c;所以速率直接调了10000 扫出来两个端口22和80&#xff0c;进行详细的扫描 没…

matlab cell转三维矩阵

问题描述 我有一个cell类型的wlf变量&#xff0c;16行4列&#xff0c;每个单元格都是[1000,1]的矩阵&#xff0c;如下图所示 业务含义&#xff1a;代表16个医院的4个业务指标的1000次模拟值&#xff08;蒙特卡洛模拟&#xff09; 我想要处理成[16,4,1000]的三维矩阵&#xff0…

分享116个图片JS特效,总有一款适合您

分享116个图片JS特效&#xff0c;总有一款适合您 116个图片JS特效下载链接&#xff1a;https://pan.baidu.com/s/1WvUvmG1adR2EJG97MiGj3A?pwd6666 提取码&#xff1a;6666 Python采集代码下载链接&#xff1a;采集代码.zip - 蓝奏云 学习知识费力气&#xff0c;收集整…

基于vue+node.js智慧校园学生办证系统

基于vuenode.js智慧校园学生办证系统 摘要&#xff1a;随着计算机技术和网络技术的飞快发展&#xff0c;它加速了国内信息化建设的进程&#xff0c;信息技术对管理改革产生了深远的影响。为了适应新时代的发展趋势&#xff0c;各行各业都高度重视信息化建设。在教育领域&#…

header二

第二题就是在referer添加SQL语句进行注入和上一题步骤一样 第三题 再用上面那个方法就行不通了&#xff0c;多加了一层过滤 1and updatexml(1,"1",1),1) -- 1 1and updatexml(1,concat("1",(select database())),1),1) -- 1 1and updatexml(1,concat("…

律所信息化建设成为趋势,Alpha系统助力律所数字化升级

近些年来&#xff0c;越来越多的律所借助数字化技术进行信息化建设&#xff0c;围绕“智慧律所”建设做了大量的努力。为尽快完成这一目标&#xff0c;经过深入研判&#xff0c;多数律所决定引进“Alpha法律智能操作系统”。该系统以其强大功能为律所智慧化建设注入催化剂。 据…

Python小案例:打印三角形

打印不同形状以及方向的三角形 分析 需要利用循环打印规则 代码部分 userint(input("请输入打印行数&#xff1a;"))# 打印正向直角三角形 def Triangls_01(user_input):for i in range(1,user_input):print("*"*i)# 打印倒向直角三角形 def Triangls_0…