前端开发中的JavaScript进阶应用：从文本高亮到Ajax请求
立即解锁
发布时间: 2025-08-19 00:12:31 阅读量: 1 订阅数: 3 
JavaScript核心编程与实践
# 前端开发中的 JavaScript 进阶应用：从文本高亮到 Ajax 请求
## 1. 文本高亮与移除高亮
在前端开发中，我们经常需要对页面上的特定文本进行高亮显示，以突出显示某些关键信息。下面是实现文本高亮和移除高亮的具体步骤和代码示例。
### 1.1 高亮包含特定文本的段落
我们可以使用 JavaScript 来实现对包含特定文本的段落进行高亮显示。以下是实现该功能的代码：
```javascript
function highlightParas(containing) {
containing = new RegExp(`\\b${containing}\\b`, 'i');
let paras = document.getElementsByTagName('p');
console.log(paras);
for(let p of paras) {
if(!containing.test(p.textContent)) continue;
p.classList.add('highlight');
}
}
highlightParas('unique');
```
上述代码的具体步骤如下：
1. **创建正则表达式**：使用 `RegExp` 构造函数创建一个不区分大小写的正则表达式，用于匹配包含特定文本的段落。
2. **获取所有段落元素**：使用 `document.getElementsByTagName('p')` 获取页面上的所有段落元素。
3. **遍历段落元素**：使用 `for...of` 循环遍历所有段落元素，检查每个段落的文本内容是否包含特定文本。
4. **添加高亮类**：如果段落的文本内容包含特定文本，则使用 `classList.add('highlight')` 为该段落添加 `highlight` 类。
### 1.2 移除高亮
如果需要移除高亮效果，可以使用以下代码：
```javascript
function removeParaHighlights() {
let paras = document.querySelectorAll('p.highlight');
for(let p of paras) {
p.classList.remove('highlight');
}
}
```
上述代码的具体步骤如下：
1. **获取所有高亮段落元素**：使用 `document.querySelectorAll('p.highlight')` 获取页面上所有具有 `highlight` 类的段落元素。
2. **遍历高亮段落元素**：使用 `for...of` 循环遍历所有高亮段落元素。
3. **移除高亮类**：使用 `classList.remove('highlight')` 为每个高亮段落元素移除 `highlight` 类。
### 1.3 数据属性的使用
HTML5 引入了数据属性，允许我们向 HTML 元素添加任意数据。这些数据不会被浏览器渲染，但可以通过 JavaScript 轻松读取和修改。以下是使用数据属性的示例：
```html
<button data-action="highlight" data-containing="unique">
Highlight paragraphs containing "unique"
</button>
<button data-action="removeHighlights">
Remove highlights
</button>
```
我们可以使用 `document.querySelectorAll` 来查找所有具有特定数据属性的元素：
```javascript
let highlightActions = document.querySelectorAll('[data-action="highlight"]');
```
上述代码的具体步骤如下：
1. **添加数据属性**：在 HTML 元素中添加 `data-action` 和 `data-containing` 等数据属性。
2. **查找具有特定数据属性的元素**：使用 `document.querySelectorAll` 查找所有具有 `data-action="highlight"` 的元素。
我们还可以使用 JavaScript 修改或添加数据属性：
```javascript
highlightActions[0].dataset.containing = "giraffe";
highlightActions[0].dataset.caseSensitive = "true";
```
上述代码的具体步骤如下：
1. **修改数据属性**：使用 `dataset` 属性修改元素的数据属性值。
2. **添加数据属性**：使用 `dataset` 属性添加新的数据属性。
### 1.4 事件处理
在前端开发中，事件处理是非常重要的一部分。我们可以使用 `addEventListener` 方法为元素添加事件监听器。以下是使用 `click` 事件实现文本高亮和移除高亮的代码示例：
```javascript
let highlightActions = document.querySelectorAll('[data-action="highlight"]');
for(let a of highlightActions) {
a.addEventListener('click', evt => {
evt.preventDefault();
highlightParas(a.dataset.containing);
});
}
let removeHighlightActions = document.querySelectorAll('[data-action="removeHighlights"]');
for(let a of removeHighlightActions) {
a.addEventListener('click', evt => {
evt.preventDefault();
removeParaHighlights();
});
}
```
上述代码的具体步骤如下：
1. **查找具有特定数据属性的元素**：使用 `document.querySelectorAll` 查找所有具有 `data-action="highlight"` 和 `data-action="removeHighlights"` 的元素。
2. **添加事件监听器**：使用 `addEventListener` 为每个元素添加 `click` 事件监听器。
3. **阻止默认行为**：在事件处理函数中，使用 `evt.preventDefault()` 阻止事件的默认行为。
4. **执行相应操作**：根据元素的数据属性值，调用 `highlightParas` 或 `removeParaHighlights` 函数。
### 1.5 事件捕获和冒泡
由于 HTML 是分层结构的，事件可以在多个地方被处理。事件捕获和冒泡是两种不同的事件传播方式。
#### 1.5.1 事件捕获
事件捕获是从最外层的祖先元素开始，逐步向下传递到目标元素。例如，如果我们点击一个按钮，事件将从 `<body>` 元素开始，依次经过按钮的父元素，最终到达按钮本身。
#### 1.5.2 事件冒泡
事件冒泡是从目标元素开始，逐步向上传递到最外层的祖先元素。例如，如果我们点击一个按钮，事件将从按钮本身开始，依次经过按钮的父元素，最终到达 `<body>` 元素。
#### 1.5.3 事件处理函数的控制
任何事件处理函数都可以选择执行以下三种操作之一，以影响其他事件处理函数的调用：
- **`preventDefault()`**：取消事件的默认行为，但事件仍然会继续传播。
- **`stopPropagation()`**：阻止事件继续传播，即事件不会再传递给其他元素。
- **`stopImmediatePropagation()`**：立即停止事件的传播，即事件不会再传递给其他元素，并且当前元素上的其他事件处理函数也不会再被调用。
以下是一个演示事件捕获和冒泡的示例代码：
```html
<!doctype html>
<html>
<head>
<title>Event Propogation</title>
<meta charset="utf-8">
</head>
<body>
<div>
<button>Click Me!</button>
</div>
<script>
function logEvent(handlerName, type, cancel, stop, stopImmediate) {
return function(evt) {
if(cancel) evt.preventDefau
```
400次
会员资源下载次数
300万+
优质博客文章
1000万+
优质下载资源
1000万+
优质文库回答
0
0
复制全文
相关推荐
最低0.47元/天 解锁专栏
赠100次下载
百万级
高质量VIP文章无限畅学
千万级
优质资源任意下载
千万级
优质文库回答免费看
立即解锁
专栏目录
最新推荐
【仿真模型数字化转换】：从模拟到数字的精准与效率提升
# 摘要
本文全面介绍了仿真模型数字化转换的关键概念、理论基础、技术框架及其在实践中的应用流程。通过对数字化转换过程中的基本理论、关键技术、工具和平台的深入探讨，文章进一步阐述了在工程和科学研究领域中仿真模型的应用案例。此外，文中还提出了数字化转换过程中的性能优化策略，包括性能评估方法和优化策略与方法，并讨论了数字化转换面临的挑战、未来发展趋势和对行业的长远意义。本文旨在为专业人士提供一份关于仿真模型数
【C#数据绑定高级教程】：深入ListView数据源绑定，解锁数据处理新技能
# 摘要
随着应用程序开发的复杂性增加，数据绑定技术在C#开发中扮演了关键角色，尤其在UI组件如ListView控件中。本文从基础到高级技巧，全面介绍了C#数据绑定的概念、原理及应用。首先概述了C#中数据绑定的基本概念和ListView控件的基础结构，然后深入探讨了数据源绑定的实战技巧，包括绑定简单和复杂数据源、数据源更新同步等。此外，文章还涉及了高级技巧，如数据模板自定义渲染、选中项
手机Modem协议在网络环境下的表现：分析与优化之道
# 摘要
Modem协议在网络通信中扮演着至关重要的角色，它不仅定义了数据传输的基础结构，还涉及到信号调制、通信流程及错误检测与纠正机制。本文首先介
物联网技术：共享电动车连接与控制的未来趋势
# 摘要
本文综述了物联网技术在共享电动车领域的应用，探讨了核心的物联网连接技术、控制技术、安全机制、网络架构设计以及实践案例。文章首先介绍了物联网技术及其在共享电动车中的应用概况，接着深入分析了物联网通信协议的选择、安全机制、网络架构设计。第三章围绕共享电动车的控制技术，讨论了智能控制系统原理、远程控制技术以及自动调度与充电管理
【心电信号情绪识别用户界面设计的重要性】：用户体验决定识别系统的成败
# 摘要
情绪识别技术作为人机交互领域的一个重要分支，近年来得到了快速发展。本文首先概述了情绪识别技术及其用户界面的重要性，然后深入探讨了心电信号在情绪识别中的理论基础，包括信号特征的提取和情绪状态的生理基础。文章继而介绍了不同情绪识别算法及其性能评估，分析了用户界面设计对用户体验和系统交互效率的影响。此外，本文还提
地震波正演中的数值方法：权威推荐的算法及选择技巧
# 摘要
本文全面探讨了地震波正演的数值方法理论基础、常用算法详解、以及在实践应用中面临的挑战和优化策略。首先介绍了地震波正演的基础知识和数值方法的核心概念，随后详细分析了有限差分法、有限元法和有限体积法等常用数值算法的原理和应用，包括各自在地震波正演中的优势和局限性。进一步地，文中探讨了选择和优化数值算法的标准和策略，提出基于不同地质条件和计算资源约束下的算法选择考量。最后，文章指出了实践中的挑
虚拟助理引领智能服务：酒店行业的未来篇章
# 摘要
随着人工智能技术的发展，智能服务在酒店行业迅速崛起，其中虚拟助理技术在改善客户体验、优化运营效率等方面起到了关键作用。本文系统地阐述了虚拟助理的定义、功能、工作原理及其对酒店行业的影响。通过分析实践案例，探讨了虚拟助理在酒店行业的应用，包括智能客服、客房服务智能化和后勤管理自动化等方面。同时，
零信任架构的IoT应用：端到端安全认证技术详解
# 摘要
随着物联网（IoT）设备的广泛应用，其安全问题逐渐成为研究的焦点。本文旨在探讨零信任架构下的IoT安全认证问题，首先概述零信任架构的基本概念及其对Io
【多源数据整合王】：DayDreamInGIS_Geometry在不同GIS格式中的转换技巧，轻松转换
# 摘要
本论文详细介绍了DayDreamInGIS_Geometry这一GIS数据处理工具，阐述了其核心功能以及与GIS数据格式转换相关的理论基础。通过分析不同的GIS数据格式，并提供详尽的转换技巧和实践应用案例，本文旨在指导用户高效地进行数据格式转换，并解决转换过程中遇到的问题。文中还探讨了转换过程中的高级技巧、
FPGA高精度波形生成：DDS技术的顶尖实践指南
# 摘要
本文深入探讨了现场可编程门阵列（FPGA）与直接数字合成（DDS）技术的集成与应用。首先，本文介绍了DDS的技术基础和理论框架，包括其核心组件及优化策略。随后，详细阐述了FPGA中DDS的设计实践，包括硬件架构、参数编程与控制以及性能测试与验证。文章进一步分析了实现高精度波形生成的技术挑战，并讨论了高频率分辨率与高动态范围波形的生成方法。
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
