JavaScript进阶(事件+获取元素+操作元素)

目录

事件基础

事件组成

执行事件的步骤

获取元素

根据ID获取元素

根据标签名获取元素

获取ol中的小li

类选择器(html5新增的I9以上支持) 

获取body和html

操作元素

innerText和innerHtml

表单标签

样式属性操作

操作元素总结


事件基础

事件组成

事件有三部分组成,1.事件源2,事件类型3.事件处理程序

1.事件源指事件被触发的对象(获取对象的方式)

2.事件类型包括鼠标点击(onclick),鼠标经过,键盘按下等等

3.事件处理程序 通过一个函数赋值的方式完成。

执行事件的步骤

JavaScript组成

API alert就是一个浏览器的api

Web API是浏览器提供的一套操作浏览器功能(BOM)和页面元素(DOM)的API。

 

DOM:是一个接口,处理HTML,或者XML(作用)网页内容的动态变化。

DOM树

DOM把以上内容都看做实对象。对象有属性和方法

这里推荐一个网站 https://developer.mozilla.org/zh-CN/

js特点,往前看,看前面有没有标签

获取元素

根据ID获取元素

根据标签名获取元素

返回的是伪数组(collection[i])的形式。参数要为数组[i],即数组元素

获取ol中的小li

第一个ol是ol[0]。父元素是ol

比如ol[0]变为ol是不对的。父元素就是上一级元素

类选择器(html5新增的I9以上支持) 

只能拿第一个。比如拿到的是首页,而不是产品。.是类,#是id.

document.querySelectorAll能拿全部

获取body和html

操作元素

innerText和innerHtml

当我们点击了按钮,div里面的文字会发生变化

元素也可以不用添加事件。通过innerText进行内容修改。

 

 innerHtml

innertext和innerHTML都是可读写的 可以获取元素里面的内容

innertext不识别html标签,即结果显示没有span,去除空格和换行。

innerHTML识别html标签,不去除空格和换行。标准,所以他使用的比较多。

常用元素的属性操作 

操作元素,修改这个元素的属性。例如,在进行界面跳转的时候,可以在function里面,对已经写好了的img.src属性进行操作。

eg1.在邮箱经常可以看到这种情况。 

表单标签

type,disabled(这个表单是否被使用)


<body>
<button>按钮</button>
<input type="text" value="输入内容" >
<script>var btn =document.querySelector('button');var input=document.querySelector('input');btn.onclick=function (){input.value='备点记录';this.disabled=true;}</script>
</body>

this指向的是当前调用者,即btn;

eg2.

点击按钮将密码框切换为文本框,首先是div,div里面有文本框,label控制图片按钮。

<style>.box{width:400px;border: 1px solid greenyellow;margin:100px auto;}.box input{width:370px;height: 30px;border: 0;outline: none;}.box img{position: absolute;top:1px;right:2px;width:24px;}</style>

样式属性操作

行内样式,驼峰命名法。Js行内样式比css权重高,当有js行内样式操作属性时,css的对应操作属性会被覆盖掉。

类名样式操作

声明好class,修改div的className,通过在function函数当中对类名进行修改this.className='类名'。=<div class='类名'>.我们可以通过修改元素的className更改元素的样式,适用于样式较多或功能较为复杂,className会覆盖原本的类名。如果想要保留原来的类名,可以通过多类名选择器,即this.className='原本名字 空格 新的名字'来保留原来的类名。

操作元素总结

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

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

相关文章

JY901S 9轴姿态角度传感器模块

JY901S 9轴姿态角度传感器模块 JY901S 简介模块特性引脚说明IIC通讯IIC读写寄存器代码示例 JY901S 简介 模块集成高精度的陀螺仪、加速度计、地磁场传感器&#xff0c;采用高性能的微处理器和先进的动力学解算与卡尔曼动态滤波算法&#xff0c;能够快速求解出模块当前的实时运…

基于Python的新能源汽车销量分析与预测系统

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长 QQ 名片 :) 1. 项目简介 基于Python的新能源汽车销量分析与预测系统是一个使用Python编程语言和Flask框架开发的系统。它可以帮助用户分析和预测新能源汽车的销量情况。该系统使用了关系数据库进行数据存储&#xff0c;并…

MATLAB信号处理与应用 读书笔记 一

完成了基本操作&#xff0c;今天组数也正常&#xff0c;需要对应解决fsctrl文件中的信号处理相关 重点关注4傅里叶变换&#xff0c;6FIR滤波器&#xff0c;10信号处理中的应用字符的链接[aa,bb]&#xff1b; N18;N216; n0:N-1;k10:N1-1;k20:N2-1; w2*pi*(0:2047)/2048; Xw(1-…

【并发设计模式】聊聊 基于Copy-on-Write模式下的CopyOnWriteArrayList

在并发编程领域&#xff0c;其实除了使用上一篇中的属性不可变。还有一种方式那就是针对读多写少的场景下。我们可以读不加锁&#xff0c;只针对于写操作进行加锁。本质上就是读写复制。读的直接读取&#xff0c;写的使用写一份数据的拷贝数据&#xff0c;然后进行写入。在将新…

CSS5 | CSS滑动门左扇与右扇图片重叠问题解决

本文中所使用的滑动门背景图片是自己用微软相册手工切的&#xff0c;没用ps&#xff0c;所以凑乎看吧 首先放出一张目标效果也是最终完成图 下面说问题 CSS推拉门原理 按原理来说&#xff0c;就是两个行内块前后站一行&#xff0c;然后前面的a标签和span标签分别是推拉门素材…

TCP 三次握手:四次挥手

TCP 三次握手/四次挥手 TCP 在传输之前会进行三次沟通&#xff0c;一般称为“三次握手”&#xff0c;传完数据断开的时候要进行四次沟通&#xff0c;一般称为“四次挥手”。 数据包说明 源端口号&#xff08; 16 位&#xff09;&#xff1a;它&#xff08;连同源主机 IP 地址…

验证码服务使用指南

验证码服务使用指南 1 部署验证码服务 1.1 基础环境 Java 1.8 Maven3.3.9 1.2 安装Redis 参考“Redis安装指南” 1.3 部署验证码服务 1.3.1 下载源码 使用git从远程下载验证码服务代码(开源)。 1.3.2 使用idea打开项目 使用idea打开上一步下载的sailing目录&#xf…

优维产品最佳实践第20期:控制台全链路监控

之前我们会觉得cmdb自动发现没有上报很难排查&#xff0c;弄不清楚数据的上报链路&#xff1b;监控指标的数据断点很难定位&#xff0c;flink对现场来说是一个黑盒子&#xff1b;apm数据更新不及时到底是上报异常还是入库失败呢&#xff1f; 现在控制台集成了对数据链路的监控…

超声系统前端理论与模拟仿真-续

作者&#xff1a;蒋志强 本人同意他人对我的文章引用&#xff0c;但请在引用时注明出处&#xff0c;谢谢&#xff0e;作者&#xff1a;蒋志强 前言 近期整理了一下彩超前端及波束合成相关的内容&#xff0c;很早以前已经有过一次&#xff0c;这次把其它的内容总结一下&#xf…

【数据结构】什么是二叉树?

&#x1f984;个人主页:修修修也 &#x1f38f;所属专栏:数据结构 ⚙️操作环境:Visual Studio 2022 目录 &#x1f4cc;二叉树的定义 &#x1f4cc;二叉树的特点 &#x1f4cc;特殊二叉树 &#x1f4cc;二叉树的性质 &#x1f4cc;二叉树的存储结构 &#x1f4cc;二叉树…

【Vue3+TypeScript】快速上手_代码

目录 001_写一个APP组件 002_一个简单的效果 003_setup概述 004_setup的返回值 005_setup与Options API的关系 006_setup语法糖 007_ref创建_基本类型的响应式数据 008_reactive创建_对象类型的响应式数据 009_ref创建_对象类型的响应式数据 010_ref对比reactive 01…

(2023|CVPR,Corgi,偏移扩散,参数高斯分布,弥合差距)用于文本到图像生成的偏移扩散

Shifted Diffusion for Text-to-image Generation 公众&#xff1a;EDPJ&#xff08;添加 VX&#xff1a;CV_EDPJ 或直接进 Q 交流群&#xff1a;922230617 获取资料&#xff09; 目录 0. 摘要 1. 简介 2. 方法 2.1 偏移扩散 3. 实验 3.1 无监督文本到图像生成 3.2 无…

三相电机转差率为负值的情形

1.电机开始发电的特征 注意&#xff0c;电机因为有输入频率对原始旋转磁场的影响&#xff0c;在正常工作时&#xff0c;应该处于稳态&#xff0c;因为旋转磁场决定了这个系统的运转方向和运转的大致频率区间。它会处于力矩平衡态。但是&#xff0c;如果&#xff0c;此时电机处…

网络安全保障领域

计算机与信息系统安全---最主要领域 云计算安全 IaaS、PasS、SaaS(裸机&#xff0c;装好软件的电脑&#xff0c;装好应用的电脑) 存在风险&#xff1a;开源工具、优先访问权、管理权限、数据处、数据隔离、数据恢复、调查支持、长期发展风险 云计算安全关键技术&#xff1a;可信…

Vue-Pinina基本教程

前言 官网地址&#xff1a;Pinia | The intuitive store for Vue.js (vuejs.org) 看以下内容&#xff0c;需要有vuex的基础&#xff0c;下面很多概念会直接省略&#xff0c;比如state、actions、getters用处含义等 1、什么是Pinina Pinia 是 Vue 的存储库&#xff0c;它允许您跨…

〖Python网络爬虫实战㊹〗- JavaScript Hook 的用法

订阅&#xff1a;新手可以订阅我的其他专栏。免费阶段订阅量1000 python项目实战 Python编程基础教程系列&#xff08;零基础小白搬砖逆袭) 说明&#xff1a;本专栏持续更新中&#xff0c;订阅本专栏前必读关于专栏〖Python网络爬虫实战〗转为付费专栏的订阅说明作者&#xff1…

buuctf-Misc 题目解答分解97-99

97.[BSidesSF2019]zippy 下载完就是一个流量包 追踪tcp nc -l -p 4445 > flag.zip unzip -P supercomplexpassword flag.zip Archive: flag.zip 压缩包密码 supercomplexpassword 保存为 flag.zip 解压得到flag 98.[GUET-CTF2019]虚假的压缩包 先从虚假的压缩包入手 &am…

MySQL的事务-隔离级别

上篇&#xff0c;整理了MySQL事务的原子性&#xff0c;这篇继续整理MySQL事务的一致性、隔离性和持久性。 2. 一致性指的是事务开始前和结束后&#xff0c;数据库的完整性约束没有被破坏&#xff0c;这保证了数据的完整性和一致性。一致性必须确保数据库从一个一致的状态转换到…

C++ 比 C语言的新增的特性 1

1. C是C的增强 1.1 C是静态类型的语言&#xff0c;具有严格的数据类型检查 1.1.1 c 因为const修饰的变量不允许修改&#xff0c;但是只给了警告&#xff0c;不严谨 const int a10;a20; //报错int *p&a;*p20;//a的值&#xff1f; test1.c:6:9: warning: initialization dis…

详解Java反射机制reflect(一学就会,通俗易懂)

1.定义 #2. 获取Class对象的三种方式 sout(c1)结果为class com.itheima.d2_reflect.TestClass 获取到了Class对象就相当于获取到了该类 2.获取类的构造器 3.获取全部构造器对象 2.根据参数类型获取构造器对象 类型后必须加.class 3.构造器对象调用构造器方法 4.暴力访问 4.获…