您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > CSS

javascript querySelector选择器和addEventListener事件监听

时间:2023-02-21 14:56:46  来源:今日头条  作者:黑猫编程

querySelector()元素选择器

功能: querySelector() 方法返回文档中匹配指定 css 选择器的第一个元素;如果你需要返回所有的元素,请用 querySelectorAll() 方法替代;

 

语法: document.querySelector(CSS selectors);

参数值: String 必须。指定一个或多个匹配元素的 CSS 选择器。使用它们的 id, 类, 类型, 属性, 属性值等来选取元素。

对于多个选择器,使用逗号隔开,返回一个匹配的元素。

返回值: 匹配指定 CSS 选择器的第一个元素。 如果没有找到,返回 null。如果指定了非法选择器则抛出 SYNTAX_ERR 异常。

<div class="box">第1行</div>
<div class="box">第2行</div>
<div class="box">第3行</div>

<script>
    let box = document.querySelector(".box");
    box.style.color = "red";
    console.log(box);

    let boxes = document.querySelectorAll(".box");
    console.log(boxes);
    for(let i = 0; i < boxes.length; i++)
        console.log(boxes[i]);
</script>

 

querySelector和getElement(s)Byxxx区别

getElement(s)Byxxxx 获取的是动态集合,querySelector 获取的是静态集合。

动态就是选出的元素会随文档改变,静态不会随文档改变,取出来之后就和文档的改变无关了。

<ul id="wrap">
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
</ul>

<script>
    let wrap = document.getElementById("wrap");

    let li = document.getElementsByTagName("li");

    for(let i = 0; i < 10; i++){
        let newli = document.createElement("li");
        newli.innerhtml = "item" + i;
        wrap.AppendChild(newli);
    }

    console.log(li.length);
</script>

控制台输出13。

// let li = document.getElementsByTagName("li");
let li = document.querySelectorAll("li");

控制台输出3。

window.onload方法

window.onload() 方法用于在网页加载完毕后立刻执行的操作,即当 HTML 文档加载完毕后,立刻执行某个方法。

window.onload() 通常用于 <body> 元素,在页面完全载入后(包括图片、css文件等等)执行脚本代码。

因为 JAVAScript 中的函数方法需要在 HTML 文档渲染完成后才可以使用,如果没有渲染完成,此时的 DOM 树是不完整的,这样在调用一些 JavaScript 代码时就可能报出"undefined"错误。

<a href="https://noi.hioier.com/" target="_blank">https://noi.hioier.com/</a>

<script>
    window.onload = function(){
        let obj = document.querySelector("a[target]");
        console.log(obj);

        obj.style.color = "red";
    }
</script>

 

键盘事件

键盘事件就是按下、抬起按键所触发的事件,区分不同按键使用键码值,即ASCII值。

 

window.onload = function(){
	let input = document.getElementById("txt");
	input.onkeyup = function(e) {
		let keyCode = e.keyCode;
		if (keyCode >= 48 && keyCode <= 57) {
			alert("啦啦,你按下的是数字键!");
		} else {
			alert("哈哈,你没有按下数字键哦!")
		}
	}
}

addEventListener事件监听

常见的触发函数有:

鼠标

  • click:鼠标左键点击
  • dblclick:鼠标左键双击
  • contextmenu:鼠标右键点击
  • mousedown:鼠标按下,包括左键、滚轮、右键
  • event.button:0表示左键,1表示中键,2表示右键
  • mouseup:鼠标弹起,包括左键、滚轮、右键
  • event.button:0表示左键,1表示中键,2表示右键

键盘

  • keydown:某个键是否被按住,事件会连续触发
  • keyup:某个按键是否被释放
  • keypress:紧跟在keydown事件后触发,只有按下字符键时触发。适用于判定用户输入的字符。
  • event.altKey、event.ctrlKey、event.shiftKey分别表示是否同时按下了alt、ctrl、shift键。

表单

  • focus:聚焦某个元素
  • blur:取消聚焦某个元素
  • change:某个元素的内容发生了改变

窗口:需要作用到window元素上。

  • resize:当窗口大小发生变化
  • scroll:滚动指定的元素
  • load:当元素被加载完成
window.addEventListener("keydown", function(e){
	let keyCode = e.keyCode;
	if (keyCode >= 48 && keyCode <= 57) {
		alert("啦啦,你按下的是数字键!");
	} else {
		alert("哈哈,你没有按下数字键哦!")
	}
});


Tags:javascript   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
querySelector()元素选择器功能: querySelector() 方法返回文档中匹配指定 CSS 选择器的第一个元素;如果你需要返回所有的元素,请用 querySelectorAll() 方法替代; 语法: documen...【详细内容】
2023-02-21  Tags: javascript  点击:(0)  评论:(0)  加入收藏
JavaScript 是一种多功能且功能强大的编程语言,可用于前端和后端 Web 开发。无论你是一个完全的初学者还是已经有一些编程经验,这里有一个路线图可以帮助你轻松有效地学习 Jav...【详细内容】
2023-02-21  Tags: javascript  点击:(5)  评论:(0)  加入收藏
随着技术的日新月异,为开发人员提供了令人难以置信的新工具和API。但据了解,在100 多个 API中,只有5%被开发人员积极使用。让我们来看看一些有用的Web API,它们可以帮助您将网站...【详细内容】
2023-02-20  Tags: javascript  点击:(6)  评论:(0)  加入收藏
作为 Web 开发人员,您知道您编写的每一行代码都会对应用程序的性能产生影响吗?谈到 JavaScript,最需要关注的领域之一就是内存管理。介绍作为 Web 开发人员,您知道您编写的每一...【详细内容】
2023-02-20  Tags: javascript  点击:(9)  评论:(0)  加入收藏
字符串是几乎所有编程语言中的基本类型之一。以下10 个重要的JS技巧可能是你不知道的。那么,我们现在就开始吧。1.如何多次复制一个字符串JS 字符串允许简单的重复,不同于纯手...【详细内容】
2023-02-09  Tags: javascript  点击:(30)  评论:(0)  加入收藏
JavaScript 提供了很多循环遍历方法,下面就来详细看看这些方法都是怎么用的以及使用时的注意事项:一、数组遍历方法1. forEach()forEach 方法用于调用数组的每个元素,并将元素...【详细内容】
2023-02-01  Tags: javascript  点击:(29)  评论:(0)  加入收藏
ECMAScript 是 JavaScript 要实现的一个语言标准,通常缩写为 ES。自从 ES6 之后 JavaScript 多出了很多新特性,当开始学习这些新特性时,不可避免的会看到这些术语:“ES6、ES7、E...【详细内容】
2023-01-31  Tags: javascript  点击:(41)  评论:(0)  加入收藏
网络上已经有非常多的二维码编码和解码工具和代码,很多都是服务器端的,也就是说需要一台服务器才能提供二维码的生成。本着对服务器性能的考虑,这种小事情都让服务器去做,感觉对...【详细内容】
2023-01-31  Tags: javascript  点击:(24)  评论:(0)  加入收藏
JavaScript 是一种常用的编程语言,是前端开发的重要工具。可以在 Web 应用程序中处理用户交互,使用 JavaScript 编写的代码可以在浏览器上执行,这是它最常见的用法,也是它最具知...【详细内容】
2023-01-28  Tags: javascript  点击:(33)  评论:(0)  加入收藏
如果有一件事我知道如何做好,那就是如何跟上变化。因为如果你不这样做,你就会落后。我亲身体会到,使用熟记在心的东西,而不是尝试“新的”东西,是多么舒服。但不适是让你成长的...【详细内容】
2023-01-26  Tags: javascript  点击:(19)  评论:(0)  加入收藏
▌简易百科推荐
querySelector()元素选择器功能: querySelector() 方法返回文档中匹配指定 CSS 选择器的第一个元素;如果你需要返回所有的元素,请用 querySelectorAll() 方法替代; 语法: documen...【详细内容】
2023-02-21  黑猫编程  今日头条  Tags:javascript   点击:(0)  评论:(0)  加入收藏
CSS现在已经有相关方法可以判断高度了,那就是CSS容器查询。不过这个特性太高级了,目前几乎还不能实战,我们这次介绍一种更加传统的方式。 在平时开发中,经常会碰到一些需要判断...【详细内容】
2023-02-20  XboxYan  51CTO  Tags:CSS   点击:(5)  评论:(0)  加入收藏
通常是借助 JS 动态去获取元素的高度(还有些麻烦的,需要渲染后才能知道高度)。其实CSS 也有一个巧用max-height适配动态高度的解决方案。 众所周知,高度在设置成auto​关键词时...【详细内容】
2023-02-06  XboxYan  51CTO  Tags:CSS   点击:(15)  评论:(0)  加入收藏
对于网页换肤,例如最常见的深色、浅色风格已经是很常见的一个需求了。一直以来也有很多的实现方案,这里我主要介绍一下基于 CSS variable的实现方式简单列举下一些其它实现...【详细内容】
2023-02-04  程序媛最幽默  今日头条  Tags:网页   点击:(22)  评论:(0)  加入收藏
效果: 所有代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"...【详细内容】
2022-12-11  一个爬坑的Coder  今日头条  Tags:CSS   点击:(41)  评论:(0)  加入收藏
在发生重大哀悼事件时候,需要紧急将网站变灰以示哀悼,在此虫虫给大家总结了几种方法,通过简单修改一下站点样式即可实现。 修改源码另外主要方便快捷的方法是使用CSS样式的gray...【详细内容】
2022-12-01  虫虫安全    Tags:css   点击:(14)  评论:(0)  加入收藏
运行效果效果图技术要点 图片和文字的对齐方式,vertical-align: bottom 底部对齐,vertical-align: middle 居中对齐 浮动 float: left,子元素一浮动,需要全部浮动,浮动后不占有位...【详细内容】
2022-11-14  程序员COW哥  今日头条  Tags:CSS   点击:(66)  评论:(0)  加入收藏
这篇文章将深入的挖掘我当时为什么会在项目中使用 CSS-in-JS (本文使用 Emotion 方案 ),而现在为什么正在放弃这样的方案。什么是 CSS-in-JSCSS-in-JS 允许你直接使用 JavaScri...【详细内容】
2022-10-27  程序猿最幽默  今日头条  Tags:CSS   点击:(77)  评论:(0)  加入收藏
自定义属性 自定义属性(也称为CSS变量)的使用量大增,2021年和2022年之间的增长也不例外。43%的页面,包括桌面和移动端,都在使用自定义属性,并且至少有一个var()函数。 正如去年...【详细内容】
2022-10-24  前端小智  今日头条  Tags: CSS   点击:(73)  评论:(0)  加入收藏
在处理网站项目时,您是否曾经对使用开发工具感到沮丧?必须在您正在处理的网页和检查器之间来回切换以查看CSS并进行调整通常可能是一个挑战。值得庆幸的是,有一个浏览器扩展程...【详细内容】
2022-10-20  浪知潮华翔  今日头条  Tags:CSS   点击:(41)  评论:(0)  加入收藏
站内最新
站内热门
站内头条