JavaScript 基础 DOM (三)

日期对象

实例化

获得当前时间

const date = new Date()

获得指定时间
const date1 = new Date(' 指定时间')

方法

// 1. 实例化
  const date = new Date();
  // 2. 调用时间对象方法
  // 通过方法分别获取年、月、日,时、分、秒
  const year = date.getFullYear(); // 四位年份

时间戳

获取时间戳:
  1. 使用 getTime() 方法
  2. 简写 +new Date()
  3. 使用 Date.now()

 

节点操作

查找节点

父节点查找:子元素.parentNode

子节点查找: 父元素.cihldren

兄弟关系查找:
  • 下一个兄弟节点   nextElementSibling 属性
  • 上一个兄弟节点    previousElementSibling 属性

插入节点

1.创建节点   document.createElement('标签名')
2.追加节点 
插入到父元素的最后一个子元素:
  父元素.appendChild('插入元素')
插入到父元素中某个子元素的前面
克隆节点     
元素.cloneNode(true)

删除节点

父元素.removeChlid(子元素)

  • 如不存在父子关系则删除不成功
  •  删除节点和隐藏节点(display:none) 有区别的: 隐藏节点还是存在的,但是删除,则从html中删除节点

M端事件

触屏事件 touch

JS插件

https://www.swiper.com.cn/

重绘和回流

回流(重排)
当 Render Tree 中部分或者全部元素的尺寸、结构、布局等发生改变时,浏览器就会重新渲染部分或全部文档的 过程称为 回流。
重绘
由于节点(元素)的样式的改变并不影响它在文档流中的位置和文档布局时(比如:color、background-color、 outline等), 称为重绘。
  重绘不一定引起回流,而回流一定会引起重绘。

Window对象

BOM(浏览器对象模型)

定时器-延时函数

JavaScript 内置的一个用来让代码延迟执行的函数,叫 setTimeout

语法:

setTimeout 仅仅只执行一次
清除延时函数
延时器需要等待,所以后面的代码先执行
每一次调用延时器都会产生一个新的延时器

JS执行机制

同步任务
同步任务都在主线程上执行,形成一个 执行栈。
异步任务
JS 的异步是通过回调函数实现的。
由于主线程不断的重复获得任务、执行任务、再获取任务、再执行,所以这种机制被称为 事件循环

location对象

location 的数据类型是对象,它拆分并保存了 URL 地址的各个组成部分

常用属性和方法:

  • href 属性获取完整的 URL 地址,对其赋值时用于地址的跳转
  • search 属性获取地址中携带的参数,符号 ?后面部分
  • hash 属性获取地址中的啥希值,符号 # 后面部分
  • reload 方法用来刷新当前页面,传入参数 true 时表示强制刷新
navigator的数据类型是对象,该对象下记录了浏览器自身的相关信息

常用属性和方法:

通过 userAgent 检测浏览器的版本及平台

histroy对象

history 的数据类型是对象,主要管理历史记录, 该对象与浏览器地址栏的操作相对应,如前进、后退、历史记 录等

本地存储 

本地存储介绍

1、数据存储在 用户浏览器
2、设置、读取方便、甚至页面刷新不丢失数据
3、容量较大,sessionStorage和localStorage约 5M 左右

本地存储分类

作用: 可以将数据永久存储在本地(用户的电脑), 除非手动删除,否则关闭页面也会存在
语法:
存储数据: localStorage.setItem(key, value)
获取数据: localStorage.getItem(key)
删除数据: localStorage.removeItem(key)

存储复杂数据类型

本地只能存储字符串,无法存储复杂数据类型

因为本地存储里面取出来的是字符串,不是对象,无法直接使用
语法:JSON.stringify(复杂数据类型)
把取出来的字符串转换为对象
语法:JSON.parse(JSON字符串)

数组map 方法

map 可以遍历数组处理数据,并且返回新的数组

语法:

<body>
  <script>
  const arr = ['red', 'blue', 'pink']
  // 1. 数组 map方法 处理数据并且 返回一个数组
   const newArr = arr.map(function (ele, index) {
    // console.log(ele)  // 数组元素
    // console.log(index) // 索引号
    return ele + '颜色'
    })
console.log(newArr)
</script>
</body>

数组join方法 

作用:join() 方法用于把数组中的所有元素转换一个字符串

语法:

<body>
  <script>
    const arr = ['red', 'blue', 'pink']

    // 1. 数组 map方法 处理数据并且 返回一个数组
    const newArr = arr.map(function (ele, index) {
      // console.log(ele)  // 数组元素
      // console.log(index) // 索引号
      return ele + '颜色'
    })
    console.log(newArr)

    // 2. 数组join方法  把数组转换为字符串
    // 小括号为空则逗号分割
    console.log(newArr.join())  // red颜色,blue颜色,pink颜色
    // 小括号是空字符串,则元素之间没有分隔符
    console.log(newArr.join(''))  //red颜色blue颜色pink颜色
    console.log(newArr.join('|'))  //red颜色|blue颜色|pink颜色
  </script>
</body>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

docker的基本相关知识和操作

镜像相关操作命令&#xff1a; 访问DockerHub搜索镜像&#xff0c;https://hub.docker.com/ 查看本地镜像&#xff1a;docker images 搜索镜像 docker search redis &#xff08;搜索redis&#xff09; 拉取镜像&#xff1a;docker pull redis &#xff08;默认版本&#x…

【Python】列表和字典

知识目录 一、写在前面✨二、列表应用三、字典应用四、总结撒花&#x1f60a; 一、写在前面✨ 大家好&#xff01;我是初心&#xff0c;希望我们一路走来能坚守初心&#xff01; 今天跟大家分享的文章是 Python函数式编程第二弹&#xff0c;再次以两个简单的例子带大家更好的…

OpenStreetMap实战

介绍 OpenStreetMap&#xff08;OSM&#xff09;是一个由志愿者创建并维护的免费和开源的地图数据库。其目的是为全球任何人提供可自由使用、编辑和分发的地图数据。OpenStreetMap数据库中的地理要素包括道路、建筑、河流、森林、山脉、公共设施等。由于OpenStreetMap是开放的…

单点登录二:登录过程使用摘要算法和加盐的意义以及demo练习

上一篇《springboot项目使用redis、springSecurity、jwt实现单点登录》写了关于单点登录的架子&#xff0c;但是没有实现密码验证的细节。这里使用盐和摘要算法来实现一个密码验证的完整过程demo。 1、依赖没变&#xff0c;还是上一篇内容那些 <dependencies><depen…

接口测试简介以及接口测试用例设计思路

接口测试简介 1.什么是接口 接口就是内部模块对模块&#xff0c;外部系统对其他服务提供的一种可调用或者连接的能力的标准&#xff0c;就好比usb接口&#xff0c;他是系统向外接提供的一种用于物理数据传输的一个接口&#xff0c;当然仅仅是一个接口是不能进行传输的&#x…

多层感知机学习XOR实例

多层感知机学习XOR实例 多层感知机介绍使用多层感知机学习XOR实例传统统计数学方法&#xff08;传统机器学习&#xff09;使用多层感知机学习XOR 总结 多层感知机介绍 多层感知机&#xff08;Multilayer Perceptron&#xff0c;MLP&#xff09;&#xff0c;又称为深度前馈网络…

JAVA并发编程之锁应用

Java并发包是Java中提供的一个用于支持多线程编程的工具包。Java并发包提供了多种机制来控制线程的执行&#xff0c;保证线程的安全性和可靠性。下面我们将介绍Java并发包的使用方法&#xff0c;并给出示例。 synchronized public class SynchronizedDemo { ​private int v;…

自学网络安全,一般人我劝你还是算了吧

学前感言: 我为什么会这样说&#xff0c;要一般人自学网络安全就算了&#xff0c;因为我不是一般人 1.这是一条坚持的道路,三分钟的热情可以放弃往下看了. 2.多练多想,不要离开了教程什么都不会了.最好看完教程自己独立完成技术方面的开发 .3.有时多 google,baidu,我们往往都…

termux-x11教程

小粉丝已经求稿两个星期了&#xff0c;不写是不行了。 termux-x11 是Termux的一个图形化项目&#xff0c;官方是这么介绍的。 A Termux add-on app providing Android frontend for Xwayland.安装工具 我们需要在Termux和安卓系统上安装工具以成功的运行程序。 x11-repo&am…

使用canvas给图片添加水印

上接文章“图片处理” canvas元素其实就是一个画布&#xff0c;我们可以很方便地绘制一些文字、线条、图形等&#xff0c;它也可以将一个img标签里渲染的图片画在画布上。 我们在上传文件到后端的时候&#xff0c;使用input标签读取用户本地文件后得到的其实是一个Blob对象&a…

HNU-电路与电子学-小班3

第三次讨论 1 、直接用晶体管而不是逻辑门实现异或门&#xff0c;并解释这个电路是如何工作的。 &#xff08;6个 MOS 管构成&#xff09; 2 、通信双方约定采用 7 位海明码进行数据传输。请为发送方设计海明码校验位 生成电路&#xff0c;采用功能块和逻辑门为接收方设计海…

ISO_IEC_7816-3

介绍 ISO/IEC 7816 是一系列标准&#xff0c;规定了集成电路卡和此类卡的使用 互换。 这些卡是用于在外部世界和卡中的集成电路之间协商的信息交换的识别卡。 作为信息交换的结果&#xff0c;卡传递信息&#xff08;计算结果、存储的数据&#xff09;和/或修改其内容&#xff0…

路径规划算法:基于果蝇优化的路径规划算法- 附代码

路径规划算法&#xff1a;基于果蝇优化的路径规划算法- 附代码 文章目录 路径规划算法&#xff1a;基于果蝇优化的路径规划算法- 附代码1.算法原理1.1 环境设定1.2 约束条件1.3 适应度函数 2.算法结果3.MATLAB代码4.参考文献 摘要&#xff1a;本文主要介绍利用智能优化算法果蝇…

2023全国酒店数据

数据内容字段结构 hotel_id int(11) NOT NULL, name varchar(100) DEFAULT NULL, name_en varchar(100) DEFAULT NULL, short_name varchar(100) DEFAULT NULL, province varchar(20) DEFAULT NULL, city_id int(11) DEFAULT NULL, city varchar(20…

Android12之源码手动生成aidl对应java/cpp/ndk/rust服务(一百五十三)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 人生格言&#xff1a; 人生…

博客系统(ssm版本)

在前面的文章中给大家介绍过博客系统的servlet版本&#xff0c;但是servlet的技术非常的老旧&#xff0c;我们在企业中用的都是springboot相关的框架&#xff0c;本章内容就是讲述如何一步一步的利用ssm的技术来实现博客系统。 目录 前期配置 创建数据库 配置文件 公共文件…

【JavaSE】Java基础语法(五):数组详解

文章目录 &#x1f378;1.1 数组介绍&#x1f378;1.2 数组的动态初始化1.2.1 什么是动态初始化1.2.2 动态初始化格式&#x1f378;1.3 数组元素访问1.3.1 什么是索引1.3.2 访问数组元素格式1.3.3 示例代码 &#x1f378;1.4 内存分配1.4.1 内存概述1.4.2 java中的内存分配 &am…

【Java-10】深入浅出线程安全、死锁、状态、通讯、线程池

主要内容 线程安全线程死锁线程的状态线程间通讯线程池 1 线程安全 1.1 线程安全产生的原因 多个线程在对共享数据进行读改写的时候&#xff0c;可能导致的数据错乱就是线程的安全问题了 问题出现的原因 : 多个线程在对共享数据进行读改写的时候&#xff0c;可能导致的数据…

第五十天学习记录:C语言进阶:位段

位段 什么是位段 位段的声明和结构是类似的&#xff0c;有两个不同&#xff1a; 1、位段的成员可以是int,unsigned int或signed int。 2、位段的成员名后边有一个冒号和一个数字。 #define _CRT_SECURE_NO_WARNINGS 1#include <stdio.h>//位段-二进制位 struct A {int …

GoWeb -- gin框架的入门和使用(2)

前言 书接上回&#xff0c;在gin的框架使用中&#xff0c;还有着许多方法以及它们的作用&#xff0c;本篇博客将会接着上次的内容继续记录本人在学习gin框架时的思路和笔记。 如果还没有看过上篇博客的可以点此跳转。 map参数 请求url&#xff1a; http://localhost:8080/us…
最新文章