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

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 键盘键入事件
    。。。

相关文章:

JavaWeb1 Json+BOM+DOM+事件监听

JS对象-Json //Json 字符串转JS对象 var jsObject Json.parse(userStr); //JS对象转JSON字符串 var jsonStr JSON.stringify(jsObject);JS对象-BOM BOM是浏览器对象模型&#xff0c;允许JS与浏览器对话 它包括5个对象&#xff1a;window、document、navigator、screen、hi…...

DSP6657 GPIO中断学习(只支持GPIO0-15)

1 简介 使用创龙板卡的KEY2按键通过中断的方式控制LED3的亮灭 2 中断学习 在C665x设备上&#xff0c;CPU中断是通过C66x CorePac中断控制器进行配置的。该中断控制器允许最多128个系统事件被编程到任意12个CPU可屏蔽中断输入&#xff08;CPUINT4至CPUINT15&#xff09;、CPU…...

vue数字翻盘,翻转效果

数字翻转的效果 实现数字翻转的效果上面为出来的样子 下面为代码&#xff0c;使用的时候直接引入&#xff0c;还有就是把图片的路径自己换成自己或者先用颜色替代&#xff0c;传入num和numlength即可 <template><div v-for"(item, index) in processedNums&quo…...

【简单讲解TalkingData的数据统计】

&#x1f3a5;博主&#xff1a;程序员不想YY啊 &#x1f4ab;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f917;点赞&#x1f388;收藏⭐再看&#x1f4ab;养成习惯 ✨希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出…...

JMeter的基本使用

JMeter的基本使用三步骤&#xff1a;1.添加线程、2.添加请求、3.添加查询结果的内容 如果需要添加token请求头来验证&#xff0c;则需要再加上一步骤&#xff1a;添加请求头 1.线程 添加线程的方式 主要修改者三个属性值 Number of Threads&#xff1a;并发线程数 Ramp-up…...

Oracle和Random Oracle

Oracle和Random Oracle 在计算机理论里面经常可以看到oracle&#xff0c;这个oracle可以是一个程序 一片代码 一个算法 一个机器 也可以是一个函数 甚至是一个关系。但我们只能知道这个oracle能做什么&#xff0c;不清楚他是怎么做的。所以经常讲其称为黑箱。推广一点&#xf…...

word 无法自动检测拼写

word 有时候不能分辨是哪种语言,比如把英语错认为法语 。 例如&#xff1a;Interlaayer spacace,发现误认为是法语。 1、选中Interlaayer spacace 2、点击语言下拉按钮 选择设置校对语言 发现校对语言为法语 3、手动修改校对语言为英语&#xff0c;并点击确认。 4、发现现…...

docker和docker-compose的安装

docker的安装 1.安装 curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun2.设置开机自启动 systemctl start docker #启动docker systemctl enable docker3.配置阿里云镜像 不配置镜像的话&#xff0c;进行 docker pull 等操作会比较慢。进入阿里云&…...

python的一种集成开发工具:PyCharm开发工具

一. 简介 本文简单了解两种 python语言所使用的 集成开发环境&#xff1a; PyCharm、vscode。 python语言学习中&#xff0c;可以任意选中这两个集成开发环境的一种就可以。本文先来简单学习 PyCharm开发工具安装与使用。 二. python的一种集成开发工具&#xff1a;PyChar…...

【匹配线段问题】

问题&#xff1a; 如下图所示。图中有两行正整数&#xff0c;每行中有若干个正整数。如果第一行的某个数r与第二行的某个数相同&#xff0c;这样就可以在这两个正整数之间划一条线&#xff0c;并称之为r-匹配线段。下图中存在3-匹配线段和2-匹配线段。 请编写完整程序&#xf…...

vue中$bus.$emit和$bus.$on的用法温故

$bus. $emit、 $bus. $on 用于非父子组件之间通信 1、在main.js中注册 Vue.prototype.$bus new Vue();new Vue({render: h > h(App),router,store }).$mount(#app)2、在需要发送信息的组件中&#xff0c;发送事件 this.$bus.$emit("method",params)&#xff1b…...

【JavaScript脚本宇宙】优化你的React项目:探索表单库的世界

React表单库解析&#xff1a;特性&#xff0c;使用方法和使用场景 前言 在现代的web开发中&#xff0c;表单是Web应用程序的核心组成部分之一。为了助力开发者更快捷、高效地处理表单状态和验证等问题&#xff0c;本文将介绍六种不同的React表单库&#xff0c;包括它们的特性…...

kvm虚拟化

虚拟化是一种资源管理技术&#xff0c;是将计算机的各种资源&#xff0c;如服务器&#xff0c;网络&#xff0c;内存及存储等&#xff0c;以抽象&#xff0c;转换后呈现出来&#xff0c;打破物理设备结构见的不可切割的障碍&#xff0c;使用户可以比原来的架构更好的方式来应用…...

算法训练营第五十天 | LeetCode 198 打家劫舍、LeetCode 213 打家劫舍II、LeetCode 337 打家劫舍III

LeetCode 198 打家劫舍 代码如下&#xff1a; class Solution { public:int rob(vector<int>& nums) {vector<int> dp(nums.size() 1, 0);dp[1] nums[0];for (int i 2; i < nums.size(); i) {dp[i] max(dp[i - 1] ,dp[i - 2] nums[i - 1]);}return dp…...

linux学习:进程通信 管道

目录 例子1 父进程向子进程发送一条消息&#xff0c;子进程读取这条消息 例子2 mkfifo 函数创建一个命名管道 例子3 mkfifo 函数创建一个命名管道处理可能出现的错误 例子4 管道文件是否已存在 例子5 除了“文件已存在”进行处理 例子6 创建一个命名管道&…...

重大变化,2024软考!

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

DRIVEN|15分的CNN+LightGBM怎么做特征分类,适用于转录组

说在前面 今天分享一篇做深度学习模型的文章&#xff0c;这是一篇软硬结合的研究&#xff0c;排除转换实体产品&#xff0c;我们做生信基础研究的可以学习模仿这个算法&#xff0c;适用且不局限于临床资料&#xff0c;转录组数据&#xff0c;GWAS数据。 今天给大家分享的一篇文…...

react 怎样配置ant design Pro 路由?

Ant Design Pro 是基于 umi 和 dva 的框架&#xff0c;umi 已经预置了路由功能&#xff0c;只需要在 config/router.config.js 中添加路由信息即可。 例如&#xff0c;假设你需要为 HelloWorld 组件创建一个路由&#xff0c;你可以将以下代码添加到 config/router.config.js 中…...

DBSCAN 算法【python,机器学习,算法】

DBSCAN 即 Density of Based Spatial Clustering of Applications with Noise&#xff0c;带噪声的基于空间密度聚类算法。 算法步骤&#xff1a; 初始化&#xff1a; 首先&#xff0c;为每个数据点分配一个初始聚类标签&#xff0c;这里设为0&#xff0c;表示该点尚未被分配…...

MySQL之查询性能优化(六)

查询性能优化 查询优化器 9.等值传播 如果两个列的值通过等式关联&#xff0c;那么MySQL能够把其中一个列的WHERE条件传递到另一列上。例如&#xff0c;我们看下面的查询: mysql> SELECT film.film_id FROM film-> INNER JOIN film_actor USING(film_id)-> WHERE f…...

接口测试中缓存处理策略

在接口测试中&#xff0c;缓存处理策略是一个关键环节&#xff0c;直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性&#xff0c;避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明&#xff1a; 一、缓存处理的核…...

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

Lombok 的 @Data 注解失效,未生成 getter/setter 方法引发的HTTP 406 错误

HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误&#xff0c;它们的含义、原因和解决方法都有显著区别。以下是详细对比&#xff1a; 1. HTTP 406 (Not Acceptable) 含义&#xff1a; 客户端请求的内容类型与服务器支持的内容类型不匹…...

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间&#xff0c; 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点&#xff0c;不需要开启数据库闪回。…...

Docker 运行 Kafka 带 SASL 认证教程

Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明&#xff1a;server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...

条件运算符

C中的三目运算符&#xff08;也称条件运算符&#xff0c;英文&#xff1a;ternary operator&#xff09;是一种简洁的条件选择语句&#xff0c;语法如下&#xff1a; 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true&#xff0c;则整个表达式的结果为“表达式1”…...

VTK如何让部分单位不可见

最近遇到一个需求&#xff0c;需要让一个vtkDataSet中的部分单元不可见&#xff0c;查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行&#xff0c;是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示&#xff0c;主要是最后一个参数&#xff0c;透明度…...

JS手写代码篇----使用Promise封装AJAX请求

15、使用Promise封装AJAX请求 promise就有reject和resolve了&#xff0c;就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...

13.10 LangGraph多轮对话系统实战:Ollama私有部署+情感识别优化全解析

LangGraph多轮对话系统实战:Ollama私有部署+情感识别优化全解析 LanguageMentor 对话式训练系统架构与实现 关键词:多轮对话系统设计、场景化提示工程、情感识别优化、LangGraph 状态管理、Ollama 私有化部署 1. 对话训练系统技术架构 采用四层架构实现高扩展性的对话训练…...

CSS 工具对比:UnoCSS vs Tailwind CSS,谁是你的菜?

在现代前端开发中&#xff0c;Utility-First (功能优先) CSS 框架已经成为主流。其中&#xff0c;Tailwind CSS 无疑是市场的领导者和标杆。然而&#xff0c;一个名为 UnoCSS 的新星正以其惊人的性能和极致的灵活性迅速崛起。 这篇文章将深入探讨这两款工具的核心理念、技术差…...