JavaWeb1 Json+BOM+DOM+事件监听

JS对象-Json

//Json 字符串转JS对象
var jsObject  = Json.parse(userStr);
//JS对象转JSON字符串
var jsonStr = JSON.stringify(jsObject);

JS对象-BOM

BOM是浏览器对象模型,允许JS与浏览器对话
它包括5个对象:window、document、navigator、screen、history
常用方法:

alert():弹出一个警告框,用于提示用户。

window.alert("hello");

confirm():弹出一个确认框,用于确认或取消某个操作。
prompt():弹出一个输入框,用于用户输入一些内容。
setTimeout():在指定的毫秒数后执行一次指定的函数或一段代码。
setInterval():每隔指定的毫秒数重复执行一次指定的函数或一段代码。

location

window.location.属性(其中window可以省略)

location.href//获得地址

DOM对象

文档对象模型
将标记语言的各个 组成部分封装为对应的对象:
在这里插入图片描述

getElementById():根据id属性获取一个元素节点。
getElementsByClassName():根据class属性获取一组元素节点。
getElementsByTagName():根据标签名获取一组元素节点。
querySelector():根据CSS选择器获取一个元素节点。
querySelectorAll():根据CSS选择器获取一组元素节点。

<!-- HTML代码 -->
<ul id="list"><li class="item">第一项</li><li class="item">第二项</li><li class="item">第三项</li>
</ul>
// 根据id获取元素
var list = document.getElementById('list');
console.log(list);// 根据class获取元素
var items = document.getElementsByClassName('item');
console.log(items);// 根据标签名获取元素
var lis = document.getElementsByTagName('li');
console.log(lis);// 根据CSS选择器获取元素
var firstItem = document.querySelector('.item');
console.log(firstItem);var allItems = document.querySelectorAll('.item');
console.log(allItems);

JS事件监听

1.通过HTML标签中的事件属性绑定

<button id="myButton" onclick="on()">点击我</button>
function on(){alert("点了");
}

2.通过DOM属性绑定

<button id="myButton">点击我</button>

(1) -> 语法 事件源.on事件类型 = 事件处理函数
-> 特点 同一个事件源的同一个事件类型只能绑定一个事件处理函数
(2) -> 语法 事件源.addEventListener(‘事件类型’, 事件处理函数)
-> 特点 可以个同一个事件源的同一个事件类型绑定多个事件处理函数,会按照顺序依次触发

// 获取按钮元素
var button = document.getElementById('myButton');
//语法(1)button.onclick=function(){console.log("点了");}
// 语法(2)为按钮绑定点击事件
button.addEventListener('click', function() {alert('按钮被点击了!');
});
常见事件

JS事件绑定 各种事件讲解见:https://blog.csdn.net/huangwfu/article/details/128554495
常见的事件类型

  1. 鼠标事件
    click 鼠标左键点击
    dblclick 鼠标左键双击
    contextmenu 鼠标右键单击
    mousedown 鼠标按下
    mouseup 鼠标抬起
    mousemove 鼠标移动
    mouseover 鼠标移入
    mouseout 鼠标移出
    mouseenter 鼠标移入事件
    mouseleave 鼠标离开
  2. 键盘事件
    keydown 键盘按下事件
    keyup 键盘抬起
    keypress 键盘键入事件
    。。。

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

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

相关文章

力扣hot100:138. 随机链表的复制(技巧,数据结构)

LeetCode&#xff1a;138. 随机链表的复制 这是一个经典的数据结构题&#xff0c;当做数据结构来学习。 1、哈希映射 需要注意的是&#xff0c;指针也能够当做unordered_map的键值&#xff0c;指针实际上是一个地址值&#xff0c;在unordered_map中&#xff0c;使用指针的实…

VXLAN技术

VXLAN技术 一、VXLAN简介 1、定义 VXLAN&#xff08;Virtual eXtensible Local Area Network&#xff09;&#xff1a;采用MAC in UDP&#xff08;User Datagram Protocol&#xff09;封装方式&#xff0c;是NVO3&#xff08;Network Virtualization over Layer 3&#xff09…

使用 Logback.xml 配置文件输出日志信息

官方链接&#xff1a;Chapter 3: Configurationhttps://logback.qos.ch/manual/configuration.html 配置使用 logback 的方式有很多种&#xff0c;而使用配置文件是较为简单的一种方式&#xff0c;下述就是简单描述一个 logback 配置文件基本的配置项&#xff1a; 由于 logba…

Vuforia AR篇(七)— 二维码识别

目录 前言一、什么是Barcode &#xff1f;二、使用步骤三、点击二维码显示信息四、效果 前言 在数字化时代&#xff0c;条形码和二维码已成为连接现实世界与数字信息的重要桥梁。Vuforia作为领先的AR开发平台&#xff0c;提供了Barcode Scanner功能&#xff0c;使得在Unity中实…

ros常用环境变量

RMW层DDS实现 rti dds export RMW_IMPLEMENTATIONrmw_connextdds //rti dds 或者 RMW_IMPLEMENTATIONrmw_connextdds ros2 run ... export NDDS_QOS_PROFILES/qos.xml //配置qos文件fastdds export RMW_IMPLEMENTATIONrmw_fastrtps_cpp 或者 RMW_IMPLEMENTATIONrmw_fas…

提供全面的网络监控和管理功能,帮助客户实时了解网络状态和优化网络性能

联通IP Transit产品依托中国联通在全球范围内的AS4837/AS10099网络平台&#xff0c;采用BGP对接技术&#xff0c;为客户自有的IP地址段提供全球互联网络穿透服务。通过这一产品&#xff0c;客户可以享受到专属带宽带来的优质访问体验&#xff0c;快速、高效地将网络数据内容接入…

力扣1438.绝对差不超过限制的最长连续子数组

力扣1438.绝对差不超过限制的最长连续子数组 难点&#xff1a;保存数组缩小后的最大最小值 用两个单调队列分别处理最大值和最小值 class Solution {public:int longestSubarray(vector<int>& nums, int limit) {deque<int> quemax,quemin;int n nums.size…

Http和Socks的区别?

HTTP和SOCKS都是用于网络通信的协议&#xff0c;但它们在设计目标和应用场景上有显著的区别。 一、HTTP (HyperText Transfer Protocol) HTTP是用于分布式、协作和超媒体信息系统的应用层协议。主要特点包括&#xff1a; 用途&#xff1a;HTTP主要用于万维网&#xff0c;通过…

json和axion结合

目录 java中使用JSON对象 在pom.xml中导入依赖 使用 public static String toJSONString(Object object)把自定义对象变成JSON对象 json和axios综合案例 使用的过滤器 前端代码 响应和请求都是普通字符串 和 请求时普通字符串&#xff0c;响应是json字符串 响应的数据是…

MySQL换路径(文件夹)

#MySQL作为免费数据库很受欢迎&#xff0c;即使公司没有使用&#xff0c;自己也可以用。它是一个服务&#xff0c;在点击CtrlAltDelete选择任务管理器后&#xff0c;它在服务那个归类里。 经常整理计算机磁盘分类的小伙伴&#xff0c;如果你们安装了MySQL&#xff0c;并且想移…

[Vue3] 滚动条自动滚动到底部

需求 在一个区域会依次打印log&#xff0c;随着log的加长&#xff0c;出现滚动条&#xff0c;而滚动条应该始终保持在最下方。 点击回到顶部按钮&#xff0c;可以使滚动条回到最上方 方案 在滚动区域添加reflog为一个数组&#xff0c;对其添加watch在watch函数中&#xff0c…

actuator/env;.js 漏洞修复

该问题是指Spring Boot Actuator中的一个漏洞&#xff0c;它涉及到暴露了Spring Boot应用的环境信息。Spring Boot Actuator是一个用于监控和管理Spring Boot应用的组件&#xff0c;它提供了多个端点&#xff08;endpoints&#xff09;&#xff0c;如健康检查、度量收集、环境信…

插件:Plugins

一、安装网格插件

重大变化,2024软考!

根据官方发布的2024年度计算机技术与软件专业技术资格&#xff08;水平&#xff09;考试安排&#xff0c;2024年软考上、下半年开考科目有着巨大变化&#xff0c;我为大家整理了相关信息&#xff0c;大家可以看看&#xff01; &#x1f3af;2024年上半年&#xff1a;5月25日&am…

业务安全蓝军测评标准解读—业务安全体系化

目录 1.前言 2.业务蓝军测评标准 2.1 业务安全脆弱性评分(ISVS) 2.2 ISVS评分的参考意义<

高并发短视频系统设计:架构、存储与性能优化全解

1. 系统概况与需求分析 1.1 短视频系统简介 当前短视频行业的快速发展&#xff0c;加上用户对高清、流畅观看体验的需求不断提升&#xff0c;对系统的并发处理能力、视频处理速度、存储效率等多方面都提出了极高的要求。那么&#xff0c;我们首先需要了解一个完整的短视频系统…

msvcp140.dll是什么dll文件?msvcp140.dll文件的丢失要怎么去修复?

msvcp140.dll是什么dll文件&#xff1f;一般会问出这种问题的人&#xff0c;都是遇到了msvcp140.dll丢失的情况了&#xff0c;这时候你的一些程序是打不开的&#xff0c;你需要修复好msvcp140.dll文件才可以正常的打开程序&#xff0c;今天我们就来了解一下msvcp140.dll这文件&…

hcia datacom学习(11):vlan基础配置

1.vlan作用 &#xff08;1&#xff09;限制广播域&#xff1a;广播被限制在vlan内&#xff0c;不会在vlan间转发 &#xff08;2&#xff09;提高安全性&#xff1a;不同vlan的报文在传输时是相互隔离的 &#xff08;3&#xff09;灵活构建&#xff1a;交换机可以把不同终端分…

【实物+仿真设计】基于单片机的物流皮带传输监控系统设计

《基于单片机的物流皮带传输监控系统设计 实物仿真》 整体功能&#xff1a; 本设计采用以单片机为核心控制器&#xff0c;以及传感器检测部分作为输入部分&#xff0c;以报警、显示、洒水、排烟、电机停止模块作为输出部分&#xff0c;构成整个物流皮带传输监控系统。 本设计…

【Linux】信号(一)

信号我们将从信号产生&#xff0c;信号的保存&#xff0c;信号处理分别进行讲解~ 至少大思路是这样。开始之前还要进行一些基础知识的铺垫。 目录 从生活中提炼一些结论&#xff1a;信号概念的一些储备&#xff1a;信号产生&#xff1a;一、kill指令&#xff1a;二、键盘组合键…