React项目知识积累(二)

1.document.querySelectorAll()

document.querySelectorAll() 是 JavaScript 中的一个内置方法,用于选择多个元素并返回一个 NodeList 对象。

const nodeList = document.querySelectorAll(selector);
  • selector:一个字符串,用于指定要选择的元素。可以使用与 CSS 选择器相同的语法。
<ul><li>Apple</li><li>Banana</li><li>Cherry</li>
</ul>const listItems = document.querySelectorAll('li');
console.log(listItems.length); // 输出:3
console.log(listItems[1].textContent); // 输出:Banana

在上述例子中,document.querySelectorAll('li') 选择了所有 <li> 元素,并将它们存储在一个 NodeList 对象中。可以使用 length 属性获取所选元素的数量,并使用索引获取每个元素的属性和内容。

需要注意的是,querySelectorAll 返回的是一个静态的 NodeList 对象,这意味着如果匹配的元素发生变化,NodeList 不会自动更新。如果需要动态更新匹配的元素列表,请使用 document.getElementsByTagName 或者其他动态查询节点的方法。

2.window.innerHeight

window.innerHeight 是 JavaScript 中的一个内置属性,用于获取浏览器窗口的视口高度。

<div style="height:3000px;"></div>const height = window.innerHeight;
console.log('Window inner height is:', height, 'pixels');const element = document.getElementById("screenshot-element");
element.style.height = `${window.innerHeight - 150}px`;

页面中的 <div> 元素设置了一个高度为 3000px。通过 window.innerHeight 可以获取当前浏览器窗口的视口高度,并将其输出到控制台中。

window.innerHeight 返回的值是一个整数,表示可视窗口的高度(不包括浏览器的地址栏、工具栏和滚动条等内容)。如果需要获取整个浏览器窗口的高度,请使用 window.outerHeight 属性。

3.indexOf( )

indexOf() 是 JavaScript 中字符串和数组对象的一个方法,用于查找特定元素第一次出现的位置。

在字符串对象中,indexOf() 方法返回给定字符串在调用方法的字符串中第一次出现的位置。如果未找到该子字符串,则返回 -1

str.indexOf(searchValue, fromIndex)
  • searchValue:要查找的字符串。
  • fromIndex (可选):从此位置开始查找字符串。默认值为 0。
const str = 'Hello, world!';
console.log(str.indexOf('world')); // 输出:7
console.log(str.indexOf('John')); // 输出:-1
console.log(str.indexOf('o', 5)); // 输出:8

在数组对象中,indexOf() 方法返回给定元素在调用方法的数组中第一次出现的位置。如果未找到该元素,则返回 -1

const arr = [1, 2, 3, 4, 5];
console.log(arr.indexOf(3)); // 输出:2
console.log(arr.indexOf(6)); // 输出:-1
console.log(arr.indexOf(4, 2)); // 输出:3

4.size( )

size 属性:对于 Map 和 Set 等集合类型,可以使用 size 属性来获取元素的数量。

import {size} from "lodash";const set = new Set([1, 2, 3, 4, 5]);
console.log(set.size); // 输出:5const map = new Map([['key1', 'value1'], ['key2', 'value2']]);
console.log(map.size); // 输出:2const arr = [1, 2, 3, 4, 5];
console.log(arr.length); // 输出:5const str = 'Hello, world!';
console.log(str.length); // 输出:13

如果 value是一个数组或字符串,则可以使用 length 属性来获取其长度。如果 value是一个集合类型,则可以使用 size 属性来获取其大小。

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

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

相关文章

Day24:Leetcode:235. 二叉搜索树的最近公共祖先 + 701.二叉搜索树中的插入操作 + 450.删除二叉搜索树中的节点

LeetCode&#xff1a;235. 二叉搜索树的最近公共祖先 解决方案&#xff1a; 1.思路 对于当前节点x&#xff0c;如果x比p和q的值都大&#xff0c;说明&#xff0c;p和q在x的右子树里面&#xff0c;那么去x的右子树里面去寻找&#xff1b;对于当前节点x&#xff0c;如果x比p和…

Docker 开启 SSL 验证

最近看 OJ 项目的远程开发阶段&#xff0c;然后踩坑踩了 2 天&#x1f602; Docker 版本&#xff1a;在 CentOS 安装 sudo yum install docker-ce-20.10.9 docker-ce-cli-20.10.9 containerd.io Client: Docker Engine - CommunityVersion: 20.10.9API version: …

ESP-IDF使用Button组件实现按键检测的功能

ESP32使用Button组件实现按键检测的功能 ESP-IDF 组件管理LED 组件简介测试button组件写在最后 ESP-IDF 组件管理 IDF 组件管理器工具用于下载 ESP-IDF CMake 项目的依赖项&#xff0c;该下载在 CMake 运行期间自动完成。IDF 组件管理器可以从自动从组件注册表 或 Git 仓库获取…

vue.js基础组件4--下

1.动态组件 1.定义动态组件 利用动态组件可以动态切换页面中显示的组件。使用<component>标签可以定义动态组件&#xff0c;语法格式如下。 <component is"要渲染的组件"></component>上述语法格式中&#xff0c;<component>标签必须配合i…

Java IO与NIO来Copy文件的四种方法实现以及性能对比

使用Java的IO与NIO来Copy文件的四种方法实现以及性能对比 FileCopyRunner接口&#xff0c;定义了Copy文件的接口&#xff0c;等下在测试类中使用匿名内部类来实现。 package nio.channel;import java.io.File;public interface FileCopyRunner {void copyFile(File source , …

广告投放—常见术语

01 按...计费 英文中文场景CPT按时间计费品牌采买CPM每千人展现成本CPM总消费/曝光量*1000CPC按点击收费竞价CPD按下载收费 CPS 按销售收费佣金&#xff0c;如&#xff1a;销售额1000&#xff0c;CPS3%&#xff0c;广告费30CPA按行为收费&#xff08;行为&#xff1a;下载、注…

【C语言】明析部分C语言内存函数

目录 1.memcpy 2.memmove 3.memset 4.memcmp 以下都是内存函数&#xff0c;作用单位均是字节 1.memcpy memcpy是C/C语言中的一个内存拷贝函数&#xff0c;其原型为&#xff1a; void* memcpy(void* dest, const void* src, size_t n);目标空间&#xff08;字节&#xff09…

C语言习题~day17

1.下面代码关于数组名描述不正确的是&#xff08; &#xff09; int main() {int arr[10] {0};return 0; } A.数组名arr和&arr是一样的 B.sizeof(arr)&#xff0c;arr表示整个数组 C.&arr&#xff0c;arr表示整个数组 D.除了sizeof(arr)和&arr中的数组名&…

三生随记——面试之夜

深夜&#xff0c;林浩独自一人站在一座孤零零的大楼前。这座大楼隐藏在城市的边缘&#xff0c;四周弥漫着浓重的雾气&#xff0c;仿佛吞噬着一切光明。他紧紧握住手中的简历&#xff0c;那是他唯一的希望&#xff0c;也是唯一能与外界联系的东西。 他在网上看到一份诱人的工作广…

【Linux系统化学习】应用层——HTTPS协议

目录 什么是加密、解密 为什么要加密 臭名昭著的”运营商劫持“ 常见的加密方式 对称加密 非对称加密 数据摘要&&数据指纹 两个用途 HTTPS的工作过程探究 方案1——只是用对称加密 方案2——只使用非对称加密 方案3——双方都是用非对称加密 方案4——对称…

#05【面试问题整理】嵌入式软件工程师

前言 本系列博客主要记录有关嵌入式方面的面试重点知识,本系列已经更新的篇目有如下: ​ 1.1进程线程的基本概念 1.2 并发,同步,异步,互斥,阻塞,非阻塞的理解 1.3 孤儿进程、僵尸进程、守护进程的概念 【本篇】5.1 Linux内核相关 6.0 单片机常见面试题 内容如有错误请在…

科技引领乡村振兴新潮流:运用现代信息技术手段,提升农业生产和乡村管理效率,打造智慧化、现代化的美丽乡村

一、引言 随着科技的不断进步&#xff0c;现代信息技术已经渗透到社会的各个领域&#xff0c;成为推动社会发展的重要力量。在乡村振兴战略的背景下&#xff0c;科技的力量同样不容忽视。本文旨在探讨如何运用现代信息技术手段&#xff0c;提升农业生产和乡村管理效率&#xf…

js如何遍历FormData的值

遍历FormData的值&#xff0c;一般有2种方法&#xff1a;forEach 和 for...of entries const data new FormData();data.append(aaa, 111); data.append(bbb, 222);// 方法1 data.forEach((value, key) > {console.log(key, value); }) 输出 aaa 111 和 bbb 222// 方法2 …

java自学阶段二:JavaWeb开发--day04(Maven学习)

day04学习笔记 一、学习目标 1.了解maven的基础概念&#xff1b; 2.学会maven的部署&#xff1b; 3.maven的作用&#xff1a;标准化&#xff1b;方便找依赖 maven就是一个开源项目&#xff0c;专门用来管理和构建Java项目的&#xff1b;我们自己写的项目结构可能会千奇百怪&am…

每日一题《leetcode--116.填充每个结点的下一个右侧结点》

https://leetcode.cn/problems/populating-next-right-pointers-in-each-node/ 题目要求给每个结点的next指针进行填充&#xff0c;使每个结点的next指针指向其下一个右侧结点。如果右侧没有结点&#xff0c;则将next指针设置为空。 struct Node* connect(struct Node* root) {…

快速搭建 WordPress 外贸电商网站指南

本指南全面解析了在 Hostinger 平台上部署 WordPress 外贸电商网站的详细步骤&#xff0c;涵盖托管方案选择、WordPress 一键安装、主题挑选与演示数据导入、主题个性化定制、SEO插件插件 AIOSEO 安装、通过 GTranslate 实现多语言自动翻译、地区访问控制插件&#xff0c;助力用…

人工智能(Educoder)-- 机器学习 -- 神经网络(初级)

第一关 注&#xff1a; 神经网络的起源和应用 起源&#xff1a;神经网络最早由心理学家和神经学家开创&#xff0c;目的是模拟生物神经系统对真实世界物体的交互反应。应用&#xff1a;现代神经网络用于分类&#xff08;如图像识别、文本分类&#xff09;和数值预测&#xff08…

567. 字符串的排列(c++)滑动窗口

给你两个字符串 s1 和 s2 &#xff0c;写一个函数来判断 s2 是否包含 s1 的排列。如果是&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 换句话说&#xff0c;s1 的排列之一是 s2 的 子串 。 示例 1&#xff1a; 输入&#xff1a;s1 "ab" s2 …

OSI参考模型中数据的封装和解封过程

OSI&#xff08;开放系统互联&#xff09;参考模型是一种网络协议分层架构模型&#xff0c;它将网络通信过程划分为七个层次。数据在每一层都要进行相应的封装处理&#xff0c;具体过程如下&#xff1a; 1. 应用层&#xff08;Application Layer&#xff09; 功能&#xff1a…

最小堆的数组实现

堆是一棵完全二叉树&#xff0c;之所以需要堆&#xff0c;是因为我们需要堆序性&#xff0c;堆的父节点都大于或小于其子节点&#xff0c;这样的有序性能让我们快速找到最大值或最小值&#xff0c;即根节点&#xff0c;时间复杂度是O&#xff08;1&#xff09; 由于完全二叉树…