当前位置： 首页 > news >正文

JavaScript笔记 09

news 文章来源：https://blog.csdn.net/m0_47045804/article/details/137174147 2024/11/16 17:50:20

目录

01 DOM操作事件的体验

02 获取元素对象的五种方式

03 事件中this指向问题

04循环绑定事件

05 DOM节点对象的常用操作

    06 点亮盒子的案例

07 节点访问关系

08 设置和获取节点内容的属性

09 以上内容的小总结

 

01 DOM操作事件的体验

        js本身是受事件驱动的脚本语言

        什么是事件?

                一系列状态  比如: 点击事件 鼠标离开事件  页面加载事件

        驱动: 驱使程序动起来

        页面元素绑定事件的步骤:

                1.获取页面元素对象

                2.元素对象.on事件名称=匿名函数(js系统提供好了很多事件)

                3.在匿名函数里面定义执行的功能代码

02 获取元素对象的五种方式

        获取页面元素的五种方式:

        1.通过id获取元素对象

                var 变量=document.getElementById('元素id')

        2.通过class获取元素对象  返回的是一个伪数组对象

                var 变量=document.getElementByClassName('标签class属性')

                不能直接拿来当做节点对象操作

                要想使用其中的元素对象,必须通过伪数组[索引值]

                取出里面指定索引值的元素对象再践行操作

        3.通过标签名获取  返回值是伪数组

                var 变量=document.getElementsByTagName('标签名')

        4.通过选择器获取单个元素

                var 变量=document.querySelector('css选择器')

                只能选中单个元素

        5.通过选择器获取多个元素

                var 变量=document.querySelectorAll('选择器')

        伪数组:

                只有索引功能和length属性 但是没有数组的那些常用的函数(push pop shift...)

        循环遍历伪数组:

                for(var i=0;i<伪数组名.length;i++){

                        lis[i].style.backgroundColor='red'

                }

03 事件中this指向问题

        事件源:

        var box=document.getElementById('box');

        var box=document.querySelector('#box')

        console.log(box)

        事件名称 事件驱动函数

                事件源.on事件名称=事件驱动函数(匿名函数)

                box.οnclick=function(){

                        alert('你好')

                }

        在事件当中的this 指向的是当前绑定这个事件的事件源对象 

        也就是本次触发这个事件的事件源

        总结:  谁触发了这个事件 this就指向谁

                

04循环绑定事件

        如果页面多个元素 想要绑定同一个事件 并且事件代码功能也相同,

        那么就可以使用循环遍历的方式绑定.

        var btnArr=document.querySelectorAll('button');

        console.log(btnArr);

        for(var i=0;i<btnArr.length;i++){

                btnArr[i].οnclick=function(){

                        // 这个函数是页面加载时 循环给每一个按钮绑定的事件驱动函数

                        // 只有点击的时候才执行里面的代码

                        // 页面加载时只是绑定了函数

                        // 所以等到函数执行的时候也就是你点击的时候页面早就加载完毕了

                        // 页面加载完毕了 也就以为这这个循环早就结束了 也就是这个循环执行完了

                        // 那么这个 i 变量的值就已经是5了

                        // console.log(btnArr[i]);

                        // btnArr[i].style.backgroundColor='blue'

                        console.log(this);

                        this.style.backgroundColor='blue'

            }

        }

05 DOM节点对象的常用操作

        操作元素的class

        获取:    元素对象.className

        设置: 元素对象.className='新类名1 新类名2...'

                通过className属性改变标签类名  会全部设置上新赋的值 

                如果想要原本的类名 需要在赋值的时候也增加上

        设置行内样式:

                元素.style.css 属性名='属性值'

        

        操作图片标签的src属性: 图片对象.src

        操作元素的title属性: 元素对象.title

        小总结:

                对象.属性   不写等号就是获取

                对象.属性=值  写等号就是设置/修改

    06 点亮盒子的案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;padding: 0;}nav{height: 40px;line-height: 40px;text-align: center;width: 500px;margin:50px auto;}nav>div{float: left;height: 40px;padding: 0 20px;background-color: hotpink;margin-right: 5px;cursor: pointer;color:#fff;}nav>div.current{background-color: orange;}</style>
</head>
<body><nav><div class="current">首页</div><div>商品页</div><div>购物车页</div><div >个人中心</div><div>联系我们</div></nav><script>// 排他思想// 干掉所有人 留下我自己var divArr=document.getElementsByTagName('div')// console.log(divArr);// 循环绑定鼠标移入事件   onmouseover  鼠标进入事件 只会触发一次for(var i=0;i<divArr.length;i++){// console.log(i);divArr[i].onmouseover=function(){// console.log(111);// this.style.backgroundColor='orange'// 排他思想 干掉所有人for(var i=0;i<divArr.length;i++){divArr[i].className=''}// 留下我自己this.className='current'}}</script>
</body>
</html>

07 节点访问关系

        利用节点与节点之间的关系 找到指定的元素

        获取父节点对象: parentNode

        获取第一个子节点:firstElementChild

        获取最后一个子节点:lastElementChild

        获取上一个兄弟节点:previousElementSibling

        获取下一个兄弟节点:nextElementSibling

        获取所有子节点:

                childNodes

                children(常用)

08 设置和获取节点内容的属性

        元素对象.innerHtml

        元素对象.innerText

                获取时:

                        innerHTML可以获取内部所有的内容包括标签

                        innerText只能后去内部素有的标签内的文本内容 获取不到标签

                设置时:

                        他们两个都能把内部的内容全部清空然后替换成我们赋值的内容

                        如果字符串中带有标签

                                那么innerHTML会把标签渲染出来呈现在页面中

                                innerText不会吧标签渲染出来 只会按照普通字符串的形式展示

09 以上内容的小总结

        元素获取的五种方式：

                1.id 2.className 3.tagName 4.querySelector("选择器") 5.querySelectorAll("选择器")

        this指向问题：

                构造函数中的this指向新创建的对象

                普通函数中的this指向函数的调用者

                元素事件驱动函数中的this指向当前触发事件的那个元素

        循环绑定事件：

                多个元素绑定同一个事件 通过this获取当前触发事件的那个元素对象

        DOM节点的常用操作：

                操作样式：

                        元素对象.style.css属性名=属性值

                        操作class:

                                元素对象.className=''

                操作标签的其他的属性：

                        元素对象.src    title   href

        点亮盒子：

                排他思想

        节点访问关系：

                父节点  parentNode

                第一个子节点：firstElementChild

                最后一个子节点：lastElementChild

                上一个兄弟：previousElementSibling

                下一个兄弟：nextElementSibling

                所有子节点：children   childNodes(包括文本节点)

        元素对象内容：

                innerHTML  

                innerText

相关文章：

JavaScript笔记 09

目录 01 DOM操作事件的体验 02 获取元素对象的五种方式 03 事件中this指向问题 04循环绑定事件 05 DOM节点对象的常用操作 06 点亮盒子的案例 07 节点访问关系 08 设置和获取节点内容的属性 09 以上内容的小总结 01 DOM操作事件的体验 js本身是受事件驱动的脚本语言 什…...

编程日记 2024/3/31 21:55:17

操作教程｜在MeterSphere中通过SSH登录服务器的两种方法

MeterSphere开源持续测试平台拥有非常强大的插件集成机制&#xff0c;用户可以通过插件实现平台能力的拓展&#xff0c;借助插件或脚本实现多种功能。在测试过程中&#xff0c;测试人员有时需要通过SSH协议登录至服务器&#xff0c;以获取某些配置文件和日志文件&#xff0c;或…...

编程日记 2024/3/31 21:54:16

Swashbuckle.AspNetCore介绍

使用 ASP.NET Core 构建的 API 的 Swagger 工具。直接从您的路由、控制器和模型生成精美的 API 文档&#xff0c;包括用于探索和测试操作的 UI。 除了 Swagger 2.0 和 OpenAPI 3.0 生成器外&#xff0c;Swashbuckle 还提供了由生成的 Swagger JSON 提供支持的令人敬畏的 swagg…...

编程日记 2024/3/31 21:51:14

【Spring】通过Spring收集自定义注解标识的方法

文章目录 前言1. 声明注解2. 使用 Spring 的工厂拓展3. 收集策略4. 完整的代码后记 前言 需求&#xff1a; 用key找到对应的方法实现。使用注解的形式增量开发。 MyComponent public class Sample1 {MyMethod(key "key1")public String test2() {return "She…...

编程日记 2024/3/31 21:45:07

基于深度学习的图书管理推荐系统（python版）

基于深度学习的图书管理推荐系统 1、效果图 1/1 [] - 0s 270ms/step [13 11 4 19 16 18 8 6 9 0] [0.1780757 0.17474999 0.17390694 0.17207369 0.17157653 0.168248440.1668652 0.16665359 0.16656876 0.16519257] keras_recommended_book_ids深度学习推荐列表 [9137…...

编程日记 2024/3/31 21:44:05

MATLAB 点云随机渲染赋色（51）

MATLAB 点云随机渲染赋色（51） 一、算法介绍二、算法实现1.代码2.效果总结一、算法介绍 为点云中的每个点随机赋予一种颜色，步骤和效果如图： 1、读取点云 （ply格式） 2、随机为每个点的RGB颜色字段赋值 3、保存结果 （ply格式） 二、算法实现 1.代码 代码如下（示例）：…...

编程日记 2024/3/31 21:41:00

通过一篇文章让你完全掌握VS和电脑常用快捷键的使用方法

VS常用快捷键 前言一、 VS常用快捷键常用VS运行调试程序快捷键常用VS编辑程序快捷键 二、常用windows系统操作快捷键 前言 VS&#xff08;Visual Studio&#xff09;是一款强大的开发工具&#xff0c;提供了许多常用快捷键&#xff0c;以提高开发效率。这些快捷键包括文件操作…...

编程日记 2024/3/31 21:39:59

ChatGPT指引：借助ChatGPT撰写学术论文的技巧

ChatGPT无限次数:点击直达 ChatGPT指引&#xff1a;借助ChatGPT撰写学术论文的技巧 在当今信息技术高度发达的时代&#xff0c;人工智能技术的不断发展为学术研究者提供了更多的便利和可能。其中&#xff0c;自然语言处理技术中的ChatGPT无疑是一种强大的工具&#xff0c;它能…...

编程日记 2024/3/31 21:34:54

魔改一个过游戏保护的CE

csdn审核不通过 网易云课堂有配套的免费视频 int0x3 - 主页 文章都传到github了 Notes/外挂/魔改CE at master MrXiao7/Notes GitHub 为什么要编译自己的CE 在游戏逆向的过程中&#xff0c;很多游戏有保护&#xff0c;我们运行原版CE的时候会被检测到 比如我们开着CE运…...

编程日记 2024/3/31 21:33:53

rust嵌入式开发之await

嵌入式经常有类似通过串口发送指令然后等待响应再做出进一步反应的需求。比如&#xff0c;通过串口以AT命令来操作蓝牙模块执行扫描、连接&#xff0c;需要根据实际情况进行操作&#xff0c;复杂的可能需要执行7、8条指令才能完成连接。 对于这样的需求&#xff0c;如果用异步…...

编程日记 2024/3/31 21:29:50

UE4_碰撞_碰撞蓝图节点——Line Trace For Objects（对象的线条检测）

一、Line Trace For Objects&#xff08;对象的线条检测&#xff09;&#xff1a;沿给定线条执行碰撞检测并返回遭遇的首个命中&#xff0c;这只会找到由Object types指定类型的对象。注意他与Line Trace By Channel(由通道检测线条&#xff09;的区别&#xff0c;一个通过Obje…...

编程日记 2024/3/31 21:27:47

抽象类和接口的简单认识

目录 一、抽象类 1.什么是抽象类 2.抽象类的注意事项 3.抽象类与普通类的对比 二、接口 1.接口的简单使用 2.接口的特性 3.接口的使用案例 4.接口和抽象类的异同 一、抽象类 所谓抽象类&#xff0c;就是更加抽象的类&#xff0c;也就是说&#xff0c;这个类不能具体描…...

编程日记 2024/3/31 21:26:46

python-pytorch获取FashionMNIST实际图片标签数据集

在查看pytorch官方文档的时候&#xff0c;在这里链接中https://pytorch.org/tutorials/beginner/basics/data_tutorial.html的Creating a Custom Dataset for your files章节&#xff0c;有提到要自定义数据集&#xff0c;需要用到实际的图片和标签。 在网上找了半天没找到&a…...

编程日记 2024/3/31 21:24:43

深入探秘Python生成器：揭开神秘的面纱

一、问题起源&#xff1a; 想象一下&#xff0c;您掌握了一种魔法&#xff0c;在代码世界里&#xff0c;您可以轻松呼唤出一个整数。然而&#xff0c;事情并不总是看起来那样简单。在Python的奇妙王国中&#xff0c;我遇到了一个有趣的谜题&#xff1a; def tst():try:print(…...

编程日记 2024/3/31 21:20:39

红队攻防渗透技术实战流程：红队目标信息收集之批量信息收集

红队资产信息收集 1. 自动化信息收集1.1 自动化信息收集工具1.2 自动域名转换IP工具1.3 自动企业信息查询工具1.4 APP敏感信息扫描工具1.5 自动化信息工具的使用1.5.1 资产灯塔系统(ARL)1.5.1.1 docker环境安装1.2.2.9.1 水泽-信息收集自动化工具1. 自动化信息收集 1.1 自动化…...

编程日记 2024/3/31 21:16:36

【vue3学习笔记（二）】（第141-143节）初识setup；ref函数_处理基本类型；ref函数_处理对象类型

尚硅谷Vue2.0Vue3.0全套教程丨vuejs从入门到精通 本篇内容对应课程第141-143节 课程 P141节 《初识setup》笔记 1、setup是所有组合式API“表演的舞台”&#xff0c;组件中所用到的所有数据、方法、监视数据、生命周期钩子等都需要配置在setup中。 2、setup的两种返回值&…...

编程日记 2024/3/31 21:14:34

若依框架学习使用

若依官网项目拉取下来介绍 | RuoYi 项目运行&#xff1a; 1.idea安装&#xff0c;可以运行前后端 编辑器idea、jdk环境安装、数据库mysql、navicat工具、redis(redis-server启动)安装 2.navicat数据库连接, 创建数据库ry-vue并导入数据脚本ry_2021xxxx.sql&#xff0c;qua…...

编程日记 2024/3/31 21:12:32

蓝桥杯_数学模板

1.试除法判定质数 #include <iostream> using namespace std;bool is_zs(int x) {if(x<2) return false;for(int i2;i<x/i;i)if(x%i0)return false;return true; }int main() {int n; cin>>n;while(n--){int x; cin>>x;if(is_zs(x)) cout<<&quo…...

编程日记 2024/3/31 21:11:31

稀碎从零算法笔记Day31-LeetCode:接雨水

半月一去&#xff0c;望舒一轮&#xff0c;明天开始攻坚哈德题了 前言&#xff1a;非常经典的一道笔试题&#xff0c;看了保证血赚&#xff08;今天银泰星笔试第四题就是这个&#xff09; 题型&#xff1a;dp、模拟、双指针…… 链接&#xff1a;42. 接雨水 - 力扣&#xff…...

编程日记 2024/3/31 21:08:28

微前端的使用和注意事项 - qiankun

一、为什么使用微前端 微前端架构旨在解决单体应用在一个相对长的时间跨度下&#xff0c;由于参与的人员、团队的增多、变迁&#xff0c;从一个普通应用演变成一个巨石应用(Frontend Monolith)后&#xff0c;随之而来的应用不可维护的问题。微前端的核心目标是将巨石应用拆解成…...

编程日记 2024/3/31 21:04:24

uniapp微信小程序消息订阅详解

一、微信公众平台申请订阅模板 注意&#xff1a;订阅信息 这个事件 是 当用户 点击的时候触发 或者 是 支付成功后触发&#xff0c; 用户勾选 “总是保持以上选择&#xff0c;不再询问” 之后或长期订阅&#xff0c;下次订阅调用 wx.requestSubscribeMessage 不会弹窗&#xf…...

编程日记 2024/3/31 21:02:22

git 查看文件夹结构树

在Git中&#xff0c;没有直接的命令可以像文件系统那样展示一个可视化的文件结构树。但是&#xff0c;你可以使用一些外部工具或命令来达到这个目的。 以下是一些方法&#xff0c;你可以使用它们来查看Git仓库的文件结构树&#xff1a; 使用tree命令&#xff08;如果你的系统已…...

编程日记 2024/3/31 21:01:21

设计模式一详解

一、观察者模式 当一个对象状态发生改变时&#xff0c;依赖它的对象全部会收到通知&#xff0c;并自动更新 场景&#xff1a;一个事件发生后&#xff0c;要执行一连串更新操作。传统的编程方式&#xff0c;就是在事件的代码之后直接加入处理逻辑。当更新的逻辑增多之后&#x…...

编程日记 2024/3/31 20:58:19

python 进程、线程、协程基本使用

1、进程、线程以及协程【1】进程概念【2】线程的概念线程的生命周期进程与线程的区别 【3】协程(Coroutines) 2、多线程实现【1】threading模块【2】互斥锁【3】线程池【4】线程应用 3、多进程实现4、协程实现【1】yield与协程【2】asyncio模块【3】3.8版本【4】aiohttp 1. 并发…...

编程日记 2024/3/31 20:56:17

SQLite3进行数据库各项常用操作

目录 前言1、SQLite介绍2、通过SQLite创建一个数据库文件3、往数据库文件中插入数据4、数据库文件信息查询5、修改数据库中的内容6、删除数据库中的内容 前言 本文是通过轻量化数据库管理工具SQLite进行的基础操作和一些功能实现。 1、SQLite介绍 SQLite是一个广泛使用的嵌入…...

编程日记 2024/3/31 20:55:16

Debian GNU/Linux 安装docker与docker compose

安装 Docker 更新包列表 sudo apt update 安装必要的软件包&#xff0c;以便让 APT 可以通过 HTTPS 使用存储库&#xff1a; sudo apt install apt-transport-https ca-certificates curl gnupg-agent software-properties-common 添加 Docker 的官方 GPG 密钥&#xff1a; cu…...

编程日记 2024/3/31 20:53:14

图片标注编辑平台搭建系列教程（2）——fabric.js简介

文章目录 综述数据管理图形渲染图形编辑事件监听预告 综述 fabric提供了二维图形编辑需要的所有基础能力&#xff0c;包括&#xff1a;数据管理、图形渲染、图形编辑和事件监听。其中&#xff0c;图形编辑可以通过事件监听和图形渲染来实现&#xff0c;所以可以弃用。数据管理…...

编程日记 2024/3/31 20:49:10

Debian linux版本下运行的openmediavault网盘 千兆网卡升级万兆

一、适用场景 1、使用vmware ESXi虚拟化平台运行多种不同应用服务器时&#xff0c;其中网盘服务器采用开源的openmediavault搭建&#xff1b; 2、将老专业服务器升级千兆网为万兆网&#xff1b; 3、需要转移的数据量大的企业或用户&#xff1b; 4、从服务器到服务器的数据转移…...

编程日记 2024/3/31 20:43:04

前端 CSS 经典：grid 栅格布局

前言&#xff1a;Grid 布局是将容器划分成"行"和"列"&#xff0c;产生单元格&#xff0c;然后将"项目"分配给划分好的单元格&#xff0c;因为有行和列&#xff0c;可以看作是二维布局。 一 术语 1. 容器 采用网格布局的区域&#xff0c;也就是…...

编程日记 2024/3/31 20:42:03

多输入多输出通道

文章目录 图像卷积填充和步幅填充步幅 多输入多输出通道1x1卷积层 图像卷积 卷积原理: 就是将之前的大的图片,定义一个核函数,然后经过移动并运算将图片变小了.也就是将图像压缩提取整合特征值. 这里利用的时乘法. 填充和步幅 填充 在应用多层卷积时&#xff0c;我们常常…...

编程日记 2024/3/31 20:41:02

网站建设优化外包/免费拓客软件

各位Excel天天学的小伙伴们大家好&#xff0c;欢迎收看Excel天天学出品的excel2019函数公式大全课程。今天我们依旧要学习的是Excel函数中的数学函数&#xff0c;今天我们要学习的函数是PRODUCT函数。今天我们这个例子是利用PRODUCT函数快速计算正方体的体积。下面我们一起来认…...

编程日记 2024/11/16 17:30:03

广州疫情 高位平台/安卓优化大师2021

当用浏览器浏览网页的时候&#xff0c;当我们点击一个连接的时候&#xff0c;浏览器就会转到新的页面去。整个过程如下&#xff1a; 1&#xff09;用户在当前页面点击->2&#xff09;浏览器获取新的URL->3)浏览器转到新的URL。现在&#xff0c;假设我们有一个pdf的阅读程…...

编程日记 2024/11/16 14:27:46

钢琴网站建设原则/许昌网络推广外包

本文档以实战的形式介绍系统如何禁用 IPV6, 使用的操纵系统是 RHEL7.3更改/etc/sysctl.conf配置文件[rootJaking vsftpd]# vim /etc/sysctl.conf# sysctl settings are defined through files in# /usr/lib/sysctl.d/, /run/sysctl.d/, and /etc/sysctl.d/.## Vendors settings…...

编程日记 2024/11/16 9:53:53

网站推广方案策划书/怎么可以让百度快速收录视频

熬夜删掉Linux中删除不掉的文件<?xml:namespace prefix o ns "urn:schemas-microsoft-com:office:office" />今天在做关于shell的作业时不知咋的生成了一个一–z开头的文件&#xff0c;怎么删都删不掉&#xff0c;如图&#xff1a;<?xml:namespace pref…...

编程日记 2024/11/16 4:36:16

网站开发 公司简介/疫情最新数据

while循环的语法格式如下&#xff1a; do while循环的语法格式如下&#xff1a; for循环的基本语法格式如下&#xff1a; 控制循环结构 Java提供了continue和break来控制循环结构。除此之外&#xff0c;return可以结束整个方法&#xff0c;当然也就结束了一次循环。 break用于完…...

编程日记 2024/11/16 2:29:31

网站如何设置二级域名/深圳外贸网络推广渠道

文章目录一、先说思路二、示例代码一、先说思路 1、使用cross-env修改系统常量&#xff0c;使程序知道接下来的操作要想那个服务器自动部署 2、使用ssh2操作服务器&#xff0c;将服务器上原有的项目改名&#xff0c;并放入记录文件夹 3、使用scp2将打包后的文件发送到对应的服…...

编程日记 2024/11/16 0:34:03