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

JavaScript学习教程，从入门到精通， jQuery的高亮显示图像、留言板、元素内容操作知识点及案例代码（36）

news 来源：原创 2025/5/6 7:08:42

jQuery的高亮显示图像、留言板、元素内容操作知识点及案例代码

一、jQuery 高亮显示图像

1. 语法知识点

高亮显示图像通常涉及改变图像的样式，例如添加边框、阴影或更改透明度，以突出显示用户交互或特定状态。jQuery 提供了多种方法来操作 DOM 元素，从而实现高亮效果。

2. 常用方法

  • hover(): 绑定鼠标悬停和离开事件。
  • addClass() / removeClass(): 添加或移除 CSS 类以应用样式。
  • css(): 直接修改元素的 CSS 属性。
  • fadeIn() / fadeOut(): 淡入淡出效果。
  • animate(): 动画效果，如改变尺寸、透明度等。

3. 案例代码

以下示例展示了当用户将鼠标悬停在图像上时，图像会放大并添加一个边框，移出时恢复原状。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>jQuery 高亮显示图像示例</title><style>/* 初始样式 */#highlightImage {width: 200px;height: 150px;transition: transform 0.3s, border 0.3s;}/* 高亮样式 */.highlight {border: 5px solid #FFD700;transform: scale(1.1);}</style><!-- 引入 jQuery 库 --><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body><img id="highlightImage" src="https://via.placeholder.com/200x150" alt="示例图像"><script>
$(document).ready(function(){// 使用 hover 方法绑定鼠标悬停和离开事件$('#highlightImage').hover(function() {// 鼠标悬停时添加高亮类$(this).addClass('highlight');},function() {// 鼠标离开时移除高亮类$(this).removeClass('highlight');});// 或者使用 mouseenter 和 mouseleave 事件/*$('#highlightImage').on('mouseenter', function(){$(this).css({'border': '5px solid #FFD700','transform': 'scale(1.1)','transition': 'transform 0.3s, border 0.3s'});});$('#highlightImage').on('mouseleave', function(){$(this).css({'border': '','transform': '','transition': ''});});*/
});
</script></body>
</html>

说明：

  • HTML 部分: 包含一个 <img> 标签作为示例图像。
  • CSS 部分: 定义了初始样式和 .highlight 类，用于实现高亮效果。
  • jQuery 部分:
    • 使用 hover() 方法绑定鼠标悬停和离开事件。
    • 在悬停时添加 .highlight 类，触发 CSS 中的样式变化。
    • 在离开时移除 .highlight 类，恢复原状。
    • 注释部分展示了使用 mouseenter 和 mouseleave 事件直接修改 CSS 属性的方法。

二、留言板

1. 语法知识点

留言板通常涉及表单提交、动态添加内容以及与后端的交互。jQuery 可以简化 DOM 操作和事件处理，使得留言板的实现更加高效。

2. 常用方法

  • submit(): 绑定表单提交事件。
  • append(): 将内容添加到元素的末尾。
  • val(): 获取或设置输入框的值。
  • preventDefault(): 阻止默认事件，如表单提交。
  • ajax(): 进行异步请求，与后端交互。

3. 案例代码

以下示例展示了一个简单的留言板，用户可以输入姓名和留言内容，提交后留言会动态显示在页面上。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>简单留言板示例</title><style>/* 留言列表样式 */#messageList {list-style-type: none;padding: 0;}.message-item {border: 1px solid #ccc;padding: 10px;margin-bottom: 10px;}/* 表单样式 */#messageForm {margin-bottom: 20px;}</style><!-- 引入 jQuery 库 --><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body><h2>留言板</h2><form id="messageForm"><label for="name">姓名:</label><input type="text" id="name" name="name" required><br><br><label for="message">留言:</label><textarea id="message" name="message" rows="4" cols="50" required></textarea><br><br><button type="submit">提交</button>
</form><ul id="messageList"><!-- 留言项将动态添加到这里 -->
</ul><script>
$(document).ready(function(){// 绑定表单提交事件$('#messageForm').on('submit', function(event){event.preventDefault(); // 阻止默认表单提交// 获取输入值var name = $('#name').val().trim();var message = $('#message').val().trim();// 简单验证if(name === '' || message === ''){alert('请填写所有字段');return;}// 创建新的留言项var newMessage = $('<li class="message-item"></li>');newMessage.append('<strong>' + name + '</strong><br>');newMessage.append('<p>' + message + '</p>');// 将新的留言项添加到留言列表中$('#messageList').append(newMessage);// 清空输入框$('#messageForm')[0].reset();});
});
</script></body>
</html>

说明：

  • HTML 部分: 包含一个表单用于输入姓名和留言内容，以及一个 <ul> 列表用于显示留言。
  • CSS 部分: 定义了留言列表和留言项的样式。
  • jQuery 部分:
    • 使用 on('submit', ...) 绑定表单提交事件。
    • 在提交时，调用 event.preventDefault() 阻止默认的表单提交行为。
    • 获取用户输入的姓名和留言内容，并进行简单验证。
    • 创建一个新的 <li> 元素，包含姓名和留言内容，并添加到留言列表中。
    • 清空表单输入框以准备下一次输入。

三、元素内容操作

1. 语法知识点

元素内容操作涉及获取和设置元素的文本或 HTML 内容。jQuery 提供了多种方法来实现这一功能。

2. 常用方法

  • text(): 获取或设置元素的纯文本内容。
  • html(): 获取或设置元素的 HTML 内容。
  • append(): 在元素末尾添加内容。
  • prepend(): 在元素开头添加内容。
  • empty(): 清空元素的内容。
  • remove(): 移除元素。

3. 案例代码

以下示例展示了如何获取和设置元素的文本和 HTML 内容。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>元素内容操作示例</title><style>#contentDiv {border: 1px solid #000;padding: 10px;margin-bottom: 20px;}</style><!-- 引入 jQuery 库 --><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body><div id="contentDiv"><p>这是初始的文本内容。</p>
</div><button id="getText">获取文本</button>
<button id="setText">设置文本</button>
<button id="getHTML">获取 HTML</button>
<button id="setHTML">设置 HTML</button>
<button id="appendContent">追加内容</button>
<button id="prependContent">前置内容</button>
<button id="emptyContent">清空内容</button>
<button id="removeDiv">移除元素</button><script>
$(document).ready(function(){// 获取文本内容$('#getText').click(function(){var text = $('#contentDiv').text();alert('文本内容: ' + text);});// 设置文本内容$('#setText').click(function(){$('#contentDiv').text('这是新的文本内容。');});// 获取 HTML 内容$('#getHTML').click(function(){var html = $('#contentDiv').html();alert('HTML 内容: ' + html);});// 设置 HTML 内容$('#setHTML').click(function(){$('#contentDiv').html('<p>这是新的 <strong>HTML</strong> 内容。</p>');});// 追加内容$('#appendContent').click(function(){$('#contentDiv').append('<p>追加的文本。</p>');});// 前置内容$('#prependContent').click(function(){$('#contentDiv').prepend('<p>前置的文本。</p>');});// 清空内容$('#emptyContent').click(function(){$('#contentDiv').empty();});// 移除元素$('#removeDiv').click(function(){$('#contentDiv').remove();});
});
</script></body>
</html>

说明：

  • HTML 部分: 包含一个 <div> 元素用于展示内容，以及多个按钮用于触发不同的内容操作。
  • CSS 部分: 为 <div> 元素添加边框和内边距。
  • jQuery 部分:
    • 获取文本: 使用 text() 方法获取 <div> 的文本内容并显示在警告框中。
    • 设置文本: 使用 text() 方法设置 <div> 的文本内容。
    • 获取 HTML: 使用 html() 方法获取 <div> 的 HTML 内容并显示在警告框中。
    • 设置 HTML: 使用 html() 方法设置 <div> 的 HTML 内容。
    • 追加内容: 使用 append() 方法在 <div> 末尾追加新的段落。
    • 前置内容: 使用 prepend() 方法在 <div> 开头前置新的段落。
    • 清空内容: 使用 empty() 方法清空 <div> 的内容。
    • 移除元素: 使用 remove() 方法移除 <div> 元素。

四、元素追加操作

1. 语法知识点

元素追加操作涉及在 DOM 中动态添加新的元素或内容。jQuery 提供了多种方法来实现这一功能。

2. 常用方法

  • append(): 在元素末尾添加内容。
  • prepend(): 在元素开头添加内容。
  • after(): 在元素之后添加内容。
  • before(): 在元素之前添加内容。
  • appendTo(): 将内容添加到指定元素的末尾。
  • prependTo(): 将内容添加到指定元素的开头。
  • insertAfter(): 将内容插入到指定元素之后。
  • insertBefore(): 将内容插入到指定元素之前。

3. 案例代码

以下示例展示了如何使用不同的方法在页面上动态添加新的元素。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>元素追加操作示例</title><style>/* 列表样式 */#list {list-style-type: none;padding: 0;}.list-item {border: 1px solid #000;padding: 10px;margin-bottom: 10px;}/* 按钮样式 */.action-button {margin-right: 10px;}</style><!-- 引入 jQuery 库 --><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body><h2>动态添加列表项</h2><button class="action-button" id="appendButton">追加项</button>
<button class="action-button" id="prependButton">前置项</button>
<button class="action-button" id="afterButton">之后添加</button>
<button class="action-button" id="beforeButton">之前添加</button><ul id="list"><li class="list-item">初始列表项</li>
</ul><script>
$(document).ready(function(){// 追加项$('#appendButton').click(function(){var newItem = $('<li class="list-item">追加的列表项</li>');$('#list').append(newItem);});// 前置项$('#prependButton').click(function(){var newItem = $('<li class="list-item">前置的列表项</li>');$('#list').prepend(newItem);});// 之后添加$('#afterButton').click(function(){var newItem = $('<li class="list-item">之后的列表项</li>');$('#list li:first').after(newItem);});// 之前添加$('#beforeButton').click(function(){var newItem = $('<li class="list-item">之前的列表项</li>');$('#list li:first').before(newItem);});
});
</script></body>
</html>

说明：

  • HTML 部分: 包含四个按钮用于触发不同的追加操作，以及一个 <ul> 列表用于展示列表项。
  • CSS 部分: 定义了列表和列表项的样式，以及按钮的样式。
  • jQuery 部分:
    • 追加项: 使用 append() 方法在列表末尾追加新的列表项。
    • 前置项: 使用 prepend() 方法在列表开头前置新的列表项。
    • 之后添加: 使用 after() 方法在第一个列表项之后添加新的列表项。
    • 之前添加: 使用 before() 方法在第一个列表项之前添加新的列表项。

总结

以上内容涵盖了 高亮显示图像、留言板、元素内容操作 以及 元素追加操作 的基本语法和实际应用案例。通过这些示例，您可以深入理解 jQuery 在处理 DOM 操作和用户交互方面的强大功能。

相关文章：

  • Gradio全解20——Streaming：流式传输的多媒体应用（4）——基于Groq的带自动语音检测功能的多模态Gradio应用
  • 【codeforces 2070c】二分答案详解
  • Google-chrome版本升级后sogou输入法不工作了
  • 动态链接库（DLL）
  • ERP系统源码，有演示，开发文档、数据库文档齐全，支持二次开发
  • C 语言 第五章 指针（7）
  • 1247: 彩色的棋子(chess)
  • 模拟芯片设计中数字信号处理一些常用概念（一）
  • 嵌入式Linux驱动学习
  • 2025年01月03日美蜥（杭州普瑞兼职）二面
  • MyDB - 手写数据库
  • LeetCode 热题 100 118. 杨辉三角
  • 使用 Ingress NGINX 和 NLB 优化 EKS 中多个 Kubernetes 服务的外部和内部访问
  • 【FPGA开发】Xilinx DSP48E2 slice 一个周期能做几次int8乘法或者加法？如何计算FPGA芯片的GOPS性能？
  • c++类【开端】
  • weaviate v1.30.2发布！全方位优化SegmentIndex，RBAC升级兼容，OpenAI集成更智能！
  • MyBatis-Plus 非 Spring 环境使用时 `GenericTypeResolver` 缺失问题总结
  • Auto.js 脚本：清理手机数据但保留账号
  • 林业数智化转型初步设计方案
  • 「Mac畅玩AIGC与多模态19」开发篇15 - 判断节点与工具节点联动示例
  • 山东滕州一车辆撞向公交站台撞倒多人，肇事者被控制，案件已移交刑警
  • 中年人多活动有助预防阿尔茨海默病
  • 五一上海楼市热闹开局：售楼处全员到岗，热门楼盘连续触发积分
  • 同路人才是真朋友——驻南苏丹使馆援助东赤道州人道主义物资交接仪式侧记
  • 巴基斯坦宣布禁止与印度的进口贸易
  • 刘翔的赛会纪录被改写，田径钻石赛在赛场内外交出精彩答卷