js的交互事件

简介: js的交互事件

HTML,CSS,JavaScript

HTML定义网页的内容

CSS描述网页的布局

JavaScript控制网页的行为

JavaScript是脚本语言

JavaScript 是可插入 HTML 页面的编程代码。JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。

基础代码实现

JavaScript:直接写入HTML输出流

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>JavaScript</title> 
</head>
<body>
<script>
    document.write("<h2>这是标题</h2>");
    document.write("<p>这是段落。</p>");
</script>
</body>
</html>
 
JavaScript:改变HTML内容
x=document.getElementById("demo");  //查找内容
x.innerHTML="Hello JavaScript";    //改变内容

示例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>JavaScript</title> 
</head>
<body>
 
<h2>这里是标题</h2>
<p id="demo">这里是段落。</p>
<script>
document.getElementById("demo").innerHTML="段落已被修改。";
</script>
 
</body>
</html>

js对事件的反应

!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>JavaScript</title> 
</head>
<body>
<button type="button" onclick="alert('登陆成功')">登录</button>
</body>
</html>
 

示例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>JavaScript</title> 
</head>
<body>
<p id="demo">登录失败</p>
<button type="button" onclick="Function()">重试</button>
<script src="js.js"></script>
  
</body>
</html>
目录
相关文章
|
8月前
|
Web App开发 JavaScript 前端开发
javascript onkeydown事件
javascript onkeydown事件
|
2月前
|
JavaScript 前端开发 Java
【Java进阶】详解JavaScript事件
总的来说,JavaScript事件是JavaScript交互设计的核心,理解和掌握JavaScript事件对于编写高效、响应式的网页应用至关重要。
62 15
|
8月前
|
JavaScript
js两种移除事件的方法
js两种移除事件的方法
81 3
|
5月前
|
JavaScript 前端开发 测试技术
盘点原生JavaScript中直接触发事件的方式
本文全面探讨了原生JavaScript中触发事件的多种方式,包括`dispatchEvent`、`Event`构造函数、`CustomEvent`构造器、直接调用事件处理器以及过时的`createEvent`和`initEvent`方法。通过技术案例分析,如模拟点击事件、派发自定义数据加载事件和实现提示框系统,帮助开发者掌握这些方法在实际开发中的应用,提升灵活性与兼容性。
115 3
|
6月前
|
数据采集 人工智能 自然语言处理
Midscene.js:AI 驱动的 UI 自动化测试框架,支持自然语言交互,生成可视化报告
Midscene.js 是一款基于 AI 技术的 UI 自动化测试框架,通过自然语言交互简化测试流程,支持动作执行、数据查询和页面断言,提供可视化报告,适用于多种应用场景。
1777 1
Midscene.js:AI 驱动的 UI 自动化测试框架,支持自然语言交互,生成可视化报告
|
7月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
223 5
|
7月前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
153 4
|
8月前
|
存储 JavaScript 前端开发
【JavaScript】网页交互的灵魂舞者
本文介绍了 JavaScript 的三种引入方式(行内、内部、外部)和基础语法,包括变量、数据类型、运算符、数组、函数和对象等内容。同时,文章还详细讲解了 jQuery 的基本语法和常用方法,如 `text()`、`html()`、`val()`、`attr()` 和 `css()` 等,以及如何插入和删除元素。通过示例代码和图解,帮助读者更好地理解和应用这些知识。
97 1
【JavaScript】网页交互的灵魂舞者
|
7月前
|
设计模式 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用JavaScript,打造智能交互体验!
【10月更文挑战第30天】前端开发领域充满了无限可能与创意,JavaScript作为核心语言,凭借强大的功能和灵活性,成为打造智能交互体验的重要工具。本文介绍前端大牛如何利用JavaScript实现平滑滚动、复杂动画、实时数据更新和智能表单验证等效果,展示了JavaScript的多样性和强大能力。
174 4
|
8月前
|
存储 JavaScript 前端开发
js事件队列
【10月更文挑战第15天】
122 6