JavaScript(进阶篇)

news2024/10/16 16:15:23

  🌏个人博客主页:心.c

前言:今天讲解的是JavaScript进阶,希望大家可以有所收获,话不多说,开干!

🔥🔥🔥文章专题:JavaScript

😽感谢大家的点赞👍收藏⭐️评论✍您的一键三连是我更新的动力 💓 

目录

DOM:

概念: 

DOM 树(由节点组成的层次结构)

获取dom节点:

为dom节点添加删除切换class类:

定时器:

事件: 

1. 鼠标事件

2. 键盘事件

3. 表单事件

键盘监听事件事例: 

事件流:

 事件流的三个阶段

capture参数: 

事件解绑:

冒泡的好处:

阻止表单默认提交行为:

页面尺寸事件:

日期对象:

时间戳:

BOM:

location对象:

history对象:

 localStorage对象:


DOM:

概念: 

DOM(文档对象模型)是一种编程接口,用于HTML和XML文档。它为文档提供了一种结构化的表示,并定义了如何通过脚本语言(如JavaScript)来访问和操作文档的内容,DOM 把文档视为树形结构(树结构),其中每个节点代表文档的一部分,例如元素、属性或文本。这些节点可以被创建、读取、更新或删除,从而实现对文档内容的动态控制

DOM 树(由节点组成的层次结构)

节点:

  • 元素节点:代表文档中的HTML或XML元素,如 <div><p> 等。
  • 属性节点:代表元素的属性,如 idclass 等。
  • 文本节点:代表元素中的文本内容。
  • 注释节点:代表文档中的注释 / /。
  • 文档节点:代表整个文档。
获取dom节点:

1.获取id名的dom节点:

<body>
  <div id="my_div"></div>
  <script>
    // 1. 获取具有特定ID的元素
    const divById = document.getElementById("my_div");
    const divById_ = document.querySelector('#div');
    console.log(divById); // 输出 <div id="my_div"></div>
    console.log(divById_); // 输出 <div id="my_div"></div>
    // 使用dom元素添加一些样式来突出显示这些元素
    divById.style.backgroundColor = "yellow";
  </script>
</body>

2.获取class类名的dom节点:

<body>
  <div class="div"></div>
  <script>
    // 2. 获取具有特定类名的元素
    const divsByClass = document.getElementsByClassName("div");
    const divsByClass_ = document.querySelector('.div');
    //获取所有类名为div的元素
    const divsByClass_ = document.querySelectorAll('.div');
    console.log(divsByClass); // 输出 HTMLCollection[<div class="div"></div>]
    console.log(divsByClass_); // 输出 HTMLCollection[<div class="div"></div>]
    // 使用dom元素添加一些样式来突出显示这些元素
    divsByClass[0].style.backgroundColor = "lightblue";
  </script>
</body>

3.获得data-*为名的节点:

data-*为自定义属性

<div data-id="1" data-spm="bzd"></div>
<div data-id="2"></div>
<script>
    const one = document.querySelector('div')
    console.log(one.dataset.id)  //1
    console.log(one.dataset.spm)  //bzd
</script>

 

data-* 属性的命名规则如下:

  1. 前缀必须是 data-:这是固定的,不能更改。
  2. 之后的部分必须由字母、数字、连字符(-)组成:不能包含空格或其他特殊字符。
  3. 不能以数字开头:这是因为HTML属性名称不能以数字开始。
<body>
  <div data-id="1"></div>
  <script>
    // 3. 获取具有特定属性值的元素
    const divByDataId = document.querySelector("[data-id='1']");
    console.log(divByDataId); // 输出 <div data-id="1"></div>
    // 获取所有具有data-id属性的元素
    const divsByDataId = document.querySelectorAll("[data-id='1']");
    console.log(divsByDataId); // 输出 NodeList[<div data-id="1"></div>]
    // 使用dom元素添加一些样式来突出显示这些元素
    divByDataId.style.backgroundColor = "pink";
  </script>
</body>
为dom节点添加删除切换class类:

 HTML样式: 

添加一个类名为box的div节点

  <div class="box">文化</div>

CSS样式: 

给box添加CSS样式,并且再添加一个类名为active的css样式 

   .box {   
     width: 200px;
     height: 200px;
     color: #333;
   }

   .active {
     color: red;
     background-color: pink;
   }

JavaScript样式: 

通过classList可以为div节点添加active类 ((classname)也可以给div添加类名,但是可能会有覆盖前面的类名,还是用classList进行添加更安全)

<script>
    //通过classlist 添加
    const box = document.querySelector('.box')
    //类型不加点
    box.classList.add('active')
    //删除类
    box.classList.remove('active');
    //切换类,有就加上,没有就删掉
    box.classList.toggle('active');
  </script>
定时器:

延迟函数:

setTimeout为定时器延迟函数,可以达到某个时间后执行里面的函数

function greet() {
  console.log("Hello, world!");
}

// 5000 毫秒(5 秒)后执行 greet 函数
setTimeout(greet, 5000);

取消定时器函数clearTimeout() 

// 设置定时器延迟函数
const timeoutId = setTimeout(sayHi, 3000);

// 取消定时器
clearTimeout(timeoutId);

事件监听:

下面给大家推荐几个常用的事件,如果有其他需要可以再进行查询

事件: 
1. 鼠标事件

    鼠标经过事件:

    mouseover和mouseout会有冒泡效果

    mouseenter和mouseleave没有冒泡效果(推荐) 

  • click: 当用户点击元素时触发。
  • dblclick: 当用户双击元素时触发。
  • mousedown: 当用户按下鼠标按钮时触发。
  • mouseup: 当用户释放鼠标按钮时触发。
  • mousemove: 当用户移动鼠标时触发。
  • mouseover: 当鼠标指针移动到元素上方时触发。
  • mouseout: 当鼠标指针移出元素时触发.
  • mouseenter: 当鼠标指针进入元素时触发(不冒泡)。
  • mouseleave: 当鼠标指针离开元素时触发(不冒泡)。
2. 键盘事件
  • keydown: 当用户按下键盘上的键时触发。
  • keyup: 当用户释放键盘上的键时触发。
  • keypress: 当用户按下键盘上的字符键时触发(不推荐使用,已被弃用)。

JavaScript 事件监听器可以用于处理各种用户交互和系统事件。以下是一些常见的事件类型及其用途:

3. 表单事件
  • submit: 当表单被提交时触发。
  • change: 当表单控件的值发生变化时触发。
  • input: 当用户输入数据时触发。
  • focus: 当元素获得焦点时触发。
  • blur: 当元素失去焦点时触发。
  • select: 当用户选中文本(例如在 <input><textarea> 中)时触发。
键盘监听事件事例: 
  <input type="text" name="" id="">

当向input输入框中输入字体按下和弹起键盘时会触发该事件 

 const input = document.querySelector('[type=text]')
 //键盘事件
 input.addEventListener('keydown', function () {
     console.log('按下')
 })
 input.addEventListener('keyup', function () {
     console.log('弹起')
 })
事件流:

事件流(Event Flow)是指浏览器在处理事件时的过程。

事件流主要有三种阶段:捕获阶段、目标阶段和冒泡阶段。

 事件流的三个阶段

1.捕获阶段

  • 发生时间:事件从 document 对象开始传播,逐层向下,直到目标元素(事件的实际目标)。
  • 过程:从最外层的 document 级别开始,逐步向下传递到目标元素的父元素、祖先元素,直到目标元素的事件处理程序开始接收事件。
  • 用途:这个阶段很少被使用,但可以用来拦截事件或进行预处理。

2.目标阶段

  • 发生时间:事件到达目标元素时。
  • 过程:事件在目标元素上触发,并在目标元素上执行相应的事件处理程序。
  • 用途:这个阶段用于处理事件的实际目标元素上的处理程序。

3.冒泡阶段

  • 发生时间:事件从目标元素开始向上冒泡,经过每一个父元素,最终到达 document 对象。
  • 过程:事件在目标元素上处理完后,事件会从目标元素逐级向上传递到 document 对象。每个父元素的事件处理程序都有机会处理这个事件。
  • 用途:这个阶段非常有用,尤其是在事件代理和处理多个相似事件时。
capture参数: 

addEventListener方法中,true作为第三个参数用于指定事件处理程序的事件流阶段。这个参数称为 capture(捕获)或 useCapture

capture参数:

  • true:表示事件处理程序将会在事件的 捕获阶段 执行。
  • false(默认值):表示事件处理程序将在事件的 冒泡阶段 执行。

默认capture为false 

点击下面事件会先弹出父级,再弹出子级,如果讲capture参数删除,那么就先冒出子级,再,弹出父级

  <div class="father">
    <div class="son"></div>
  </div>
    const father = document.querySelector('.father')
    const son = document.querySelector('.son')
    father.addEventListener('click', function () {
      alert('我是爸爸')
    }, true)
    son.addEventListener('click', function (e) {
      alert('我是儿子')
    }, true)

阻止冒泡:

    //阻止冒泡
    e.stopPropagation()
事件解绑:
    const button = document.querySelector('button')
    button.onclick = function () {
      alert('点击了')
    }
    // 解绑方式一
    button.onclick = null
    //解绑方式二  (匿名函数无法被解绑)
    function fu() {
      alert('点击了')
    }
    button.addEventListener('click', fu)
    button.removeEventListener('click', fu)
冒泡的好处:

当我们点击子元素时,会冒泡到父级元素上,从而触发父元素的事件

点击第几个li,li通过冒泡上升到父级,然后父级监听到被点击的子元素字体变红 

  <ul>
    <li>我是第一个孩子</li>
    <li>我是第二个孩子</li>
    <li>我是第三个孩子</li>
    <li>我是第四个孩子</li>
    <li>我是第五个孩子</li>
  </ul>
  <script>
    const ul = document.querySelector('ul')
    ul.addEventListener('click', function (e) {
      e.target.style.color = 'red'
    })
阻止表单默认提交行为:

默认行为通常是向服务器发送表单数据并重新加载页面。通过阻止默认行为,可以防止这种情况发生,从而使表单在提交时不会刷新页面。 

    const form = document.querySelector('form')
    form.addEventListener('submit', function (e) {
      //阻止默认行为
      e.preventDefault()
    })
  
页面尺寸事件:

scrollLeftscrollTop:

const element = document.querySelector('.scrollable');
console.log(element.scrollLeft); // 获取当前水平滚动位置
element.scrollLeft = 100; // 设置水平滚动位置为100像素
element.scrollTop = 100; // 设置垂直滚动位置为100像素

offsetLeftoffsetTop:

用于获取元素相对于其最近的已定位祖先元素的偏移量(左上角)

const element = document.querySelector('.box');
console.log(element.offsetLeft); // 获取元素的左边距
console.log(element.offsetTop); // 获取元素的上边距

clientWidthclientHeight:

用于获取元素的视口尺寸,不包括滚动条、边框或外边距。它们表示元素的可视区域的宽度和高度

const element = document.querySelector('.box');
console.log(element.clientWidth); // 获取元素的可视宽度
console.log(element.clientHeight); // 获取元素的可视高度

offsetWidthoffsetHeight:

用于获取元素的实际宽度和高度,包括元素的边框和内边距,但不包括外边距。

const element = document.querySelector('.box');
console.log(element.offsetWidth); // 获取元素的总宽度
console.log(element.offsetHeight); // 获取元素的总高度

日期对象:

获得当前日期方法:

    const date = new Date()
    console.log(date)
    console.log(date.getFullYear())
    console.log(date.getMonth() + 1)
    console.log(date.getDate())
    console.log(date.getDay())

 

时间戳:

时间戳通常指的是从1970年1月1日00:00:00 UTC(协调世界时)开始所经过的毫秒数。这种时间戳被称为Unix时间戳或Epoch时间戳。JavaScript的Date对象提供了生成和操作时间戳的方法

    //第一种获得时间戳方法(只能获得当前时间戳)
    let time = Date.now()
    console.log(time)
    //第二种可以获得指定时间的时间戳
    console.log(+new Date())
    //第三种可以获得指定时间的时间戳
    const date = new Date()
    console.log(date.getTime())

BOM:

BOM(Browser Object Model,浏览器对象模型)是一组与浏览器窗口交互的对象集合。BOM 主要包括了window,location,history,navigator等对象,它们提供了与浏览器窗口、历史记录、用户代理信息等交互的能力。

 定时器函数:

setInterval()为定时器函数,每隔一段时间执行一次里面的函数 

function sayHello() {
  console.log("Hello, world!");
}

// 每隔 2000 毫秒(2 秒)执行一次 sayHello 函数
setInterval(sayHello, 2000);

取消定时器 clearInterval()函数

// 设置定时器,每隔 1000 毫秒(1 秒)执行一次
const intervalId = setInterval(sayHi, 1000);

// 取消定时器(例如:5 秒后停止)
setTimeout(() => {
  clearInterval(intervalId);
}, 5000);
location对象:

location.href实现页面跳转

  <a href="https://www.jd.com/error2.aspx">支付成功<span>5</span>跳转</a>
 let i = 5
    let timer = setInterval(function () {
      document.querySelector('span').innerHTML = i
      i--
      if (i === 0) {
        clearInterval(timer)
        //5秒之后实现跳转
        location.href = 'https://www.jd.com/error2.aspx'
      }

    }, 1000)

location.reload实现页面更新

    const reload = document.querySelector('button')
    reload.addEventListener('click', function () {
      location.reload()
    })
history对象:

history.forward页面的前进和后退功能

  <button>退</button>
  <button>进</button>
const back = document.querySelector('button:first-child')
    const forword = back.nextElementSibling
    back.addEventListener('click', function () {
      history.back()
    })
    forword.addEventListener('click', function () {
      history.forward()
    })
 localStorage对象:

通过localStorage对象可以将信息存到本地,即使当页面关闭时也存在,除非主动删除

    //添加键值对
    localStorage.setItem('test', 'dom')

得到本地信息内容:

// 获取键值对
const value = localStorage.getItem('test');
console.log(value); // 输出 "dom"

到这里就讲解完了,感谢大家的观看!!!

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

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

相关文章

Numba坐标索引(CPU + 多线程)

文章目录 一、测试样本 —— 创建样本mask&#xff0c;具有 N 个唯一像素值&#xff0c;每个值有 M 个坐标。二、加速方法&#xff08;1&#xff09;多线程加速 —— 每次提取一个像素值&#xff0c;然后遍历图像&#xff0c;匹配并判断其与初始化坐标的关系。&#xff08;2&am…

传输层 I(传输层提供的服务、UDP协议)【★★★★】

&#xff08;★★&#xff09;代表非常重要的知识点&#xff0c;&#xff08;★&#xff09;代表重要的知识点。 运输层是整个网络体系结构中的关键层次之一。一定要弄清以下一些重要概念&#xff1a; (1) 运输层为相互通信的应用进程提供逻辑通信。 (2) 端口和套接字的意义。 …

OpenCV 之 模版匹配多个对象、图片旋转 综合应用

引言 在图像处理和计算机视觉中&#xff0c;模板匹配是一种常用的技术&#xff0c;用于在一幅较大的图像中查找与给定模板图像相似的部分。然而&#xff0c;在实际应用中&#xff0c;目标物体可能会出现在不同的角度&#xff0c;这就需要我们在匹配之前对模板进行旋转处理。本…

[AHK]动态创建带ListBox的窗口,答选择题的界面

根据传入的窗口标题、提示信息(题干)、列表(选项)生成一个带ListBox的窗口(向导界面)。 AHK v1代码 if(A_ScriptFullPath=A_LineFile)MsgBox % ListBox("窗口标题", "这是一个生成listbox的Demo", "a|b|c|d|",3) return ;-------------…

清华智普ChatGlm批量API多线程写文章软件【glm-4-flash的key免费无限写 】

清华智普GLM-4-Flash经全面测评&#xff0c;在语义理解、数学逻辑、逻辑推理、代码执行以及广泛知识覆盖等方面&#xff0c;其表现显著超越了Llama-3-8B模型。 清华智普GLM-4-Flash模型还具备多种核心功能&#xff0c;包括但不限于流畅的多轮对话能力、内置的网页浏览功能、直…

线上购物商城小程序,uniapp,PHP语言开发在线购物商城小程序

前言&#xff1a; 商城小程序能够帮助商家降低成本、提高效率&#xff0c;为用户提供更加便捷和个性化的购物体验&#xff0c;是移动互联网时代的一种高效商业工具。 一、商城小程序功能有哪些&#xff1f; 基础功能需求 用户注册与登录 - 用户可以通过手机号、微信等方式进…

【第25章】Spring Cloud之Sentinel控制台详解

文章目录 前言一、实时监控二、簇点链路三、流控规则四、熔断规则五、热点规则六、系统规则七、授权规则八、集群流控九、机器列表总结 前言 前面我们详细介绍了Sentinel控制台的安装过程&#xff0c;这里我们来了解各个菜单的功能作用。 一、实时监控 同一个服务下的所有机器…

【网络安全】分析JS文件实现账户接管

未经许可,不得转载。 文章目录 正文正文 网站使用的是简单的OTP(一次性密码)验证机制,通过用户注册时提供的电子邮件发送邮箱验证码。在功能有限的情况下,我选择去分析网站加载的JavaScript文件。 我发现了一个名为 saveJobseekerPasswordInCache 的函数: 这个函数虽然…

等待实质审查的商标可以用吗!

申请注册商标受理书下来后&#xff0c;会有一个等待实质审查&#xff0c;这个审查出来就会出现要么通过初审&#xff0c;要么驳回&#xff0c;要么部分驳回&#xff0c;普推知产商标老杨发现时间大约是三个月左右&#xff0c;所以基本从申请3个月左右就知道结果了。 申请注册商…

智算时空 重塑视界│智汇云舟2024视频孪生产品发布会圆满举行,多个“全球首款”重磅亮相

​秋风送爽&#xff0c;丹桂飘香。9月6日&#xff0c;由北京智汇云舟科技有限公司主办&#xff08;简称&#xff1a;智汇云舟&#xff09;&#xff0c;北京北科软科技有限公司&#xff08;简称&#xff1a;北科软&#xff09;、北京恒升联合科技有限公司&#xff08;简称&#…

【北京迅为】《STM32MP157开发板使用手册》- 第十一章 编译U-Boot

iTOP-STM32MP157开发板采用ST推出的双核cortex-A7单核cortex-M4异构处理器&#xff0c;既可用Linux、又可以用于STM32单片机开发。开发板采用核心板底板结构&#xff0c;主频650M、1G内存、8G存储&#xff0c;核心板采用工业级板对板连接器&#xff0c;高可靠&#xff0c;牢固耐…

TPM管理培训为何难以落地?原因解析与解决之道

近年来&#xff0c;TPM管理被视为提升设备效率、减少故障率、降低生产成本的关键。然而&#xff0c;尽管TPM的理念被广泛接受&#xff0c;其在实践中的落地却常常面临各种挑战。本文&#xff0c;深圳天行健企业管理咨询公司将深入解析TPM管理培训难以落地的根本原因&#xff0c…

微信小程序登录与获取手机号 (Python)

文章目录 相关术语登录逻辑登录设计登录代码 相关术语 调用接口[wx.login()]获取登录凭证&#xff08;code&#xff09;。通过凭证进而换取用户登录态信息&#xff0c;包括用户在当前小程序的唯一标识&#xff08;openid&#xff09;、微信开放平台账号下的唯一标识&#xff0…

华为防火墙 nat64

如果设备接收到的IPv6报文的前缀是设备为NAT64定义的前缀&#xff0c;说明报文的目的地址是IPv4网络&#xff0c;报文将经过NAT64处理后被转发至IPv4网络。 如果设备接收到的IPv6报文的前缀不是设备为NAT64定义的前缀&#xff0c;说明报文的目的地址是IPv6网络&#xff0c;报文…

强烈推荐!分享5款ai论文生成软件

在当今学术研究和写作领域&#xff0c;AI论文生成工具的出现极大地提高了写作效率和质量。这些工具不仅能够帮助研究人员快速生成论文草稿&#xff0c;还能进行内容优化、查重和排版等操作。以下是五款值得推荐的AI论文生成软件&#xff0c;特别是千笔-AIPassPaper。 ### 千笔-…

Gin-封装自动路由

O.0 思路一、API二、控制层三、自动路由核心四、分组路由外加中间件使用 思路 由于Java转Go直接使用的goframe框架&#xff0c;然学习Gin时觉得一个接口一个路由太麻烦&#xff0c;于是有了...1、在请求结构体中采用标签的形式&#xff0c;直接给出路由和请求方式 2、在控制层…

yum源配置与静态配置地址

网络yum源 备份配置文件 下载新的CentOS-Base.repo文件到/etc/yum.repos.d/目录下 执行yum clean all清除原有 yum 缓存 执行yum makecache&#xff08;刷新缓存&#xff09; 本地yum 将/etc/yum/repos.d/下的文件a都移走&#xff0c;此处移到了该目录下的bak中 找到光盘路…

【重学 MySQL】二十二、limit 实现分页

【重学 MySQL】二十二、limit 实现分页 基本语法实现分页第一页第二页通用公式注意事项在 MySQL 中,LIMIT 子句非常强大,它允许你限制查询结果的数量,同时也经常被用来实现分页功能。分页是 Web 开发中常见的需求,它允许用户浏览大量数据时,一次只查看一小部分数据。 基本…

【重学 MySQL】二十一、order by 实现数据排序

【重学 MySQL】二十一、order by 实现数据排序 基本语法示例按薪水升序排序按薪水降序排序根据多个列排序 注意事项 在MySQL中&#xff0c;ORDER BY子句用于对结果集中的数据进行排序。你可以根据一个或多个列对结果进行升序&#xff08;ASC&#xff09;或降序&#xff08;DESC…

JavaEE:文件操作

文章目录 文件操作和IO文件系统操作File介绍属性构造方法方法 代码演示前四个listmkdirrenameTo 文件操作和IO 文件系统操作 创建文件,删除文件,创建目录,重命名… Java中有一个类,可以帮我们完成上述操作. 这个类叫做File类. File介绍 属性 这个表格描述了文件路径的分隔符…