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

JavaScript学习教程，从入门到精通，jQuery 单击页面显示自定义动画、元素删除操作、随机抽奖、随机选图并放大语法知识点（37）

news 来源：原创 2025/5/7 7:18:01

jQuery 单击页面显示自定义动画、元素删除操作、随机抽奖、随机选图并放大语法知识点

1. jQuery 基础语法

1.1 引入 jQuery

在使用 jQuery 之前，需要先引入 jQuery 库。可以通过 CDN 引入，也可以下载到本地使用。

<!-- 通过 CDN 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

1.2 基本语法结构

jQuery 的基本语法结构为：

$(selector).action();
  • $ 符号：定义 jQuery。
  • selector：选择器，用于选取 HTML 元素。
  • action()：对选取的元素执行的操作。

1.3 文档就绪函数

确保在 DOM 完全加载后再执行 jQuery 代码。

$(document).ready(function(){// jQuery 代码
});

或使用简写：

$(function(){// jQuery 代码
});

2. 单击事件处理

2.1 .click() 方法

用于为元素绑定单击事件。

$("button").click(function(){alert("按钮被点击了！");
});

2.2 .on() 方法

更灵活的事件绑定方式，支持多个事件。

$("button").on("click", function(){alert("按钮被点击了！");
});

2.3 示例

<!DOCTYPE html>
<html>
<head><title>jQuery 单击事件示例</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script>$(document).ready(function(){$("button").click(function(){$("p").text("按钮被点击了！");});});</script>
</head>
<body><button>点击我</button><p>等待点击...</p>
</body>
</html>

3. 动态显示/隐藏元素

3.1 .show() 和 .hide() 方法

用于显示和隐藏选定的元素。

$("button").click(function(){$("p").toggle(); // 切换显示/隐藏
});

3.2 .toggle() 方法

切换元素的显示和隐藏状态。

3.3 示例

<!DOCTYPE html>
<html>
<head><title>显示/隐藏元素示例</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script>$(document).ready(function(){$("#toggleBtn").click(function(){$("#toggleText").toggle();});});</script>
</head>
<body><button id="toggleBtn">切换显示/隐藏</button><p id="toggleText">这是一个可切换显示的段落。</p>
</body>
</html>

4. 自定义动画

4.1 .animate() 方法

用于创建自定义动画效果。

$("button").click(function(){$("div").animate({left: '250px',opacity: '0.5',height: '150px',width: '150px'}, 1000); // 持续时间为1秒
});

4.2 示例

<!DOCTYPE html>
<html>
<head><title>自定义动画示例</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><style>#animateDiv {width: 100px;height: 100px;background-color: lightblue;position: relative;}</style><script>$(document).ready(function(){$("#animateBtn").click(function(){$("#animateDiv").animate({left: '250px',opacity: '0.5',height: '150px',width: '150px'}, 1000);});});</script>
</head>
<body><button id="animateBtn">开始动画</button><div id="animateDiv"></div>
</body>
</html>

5. 元素删除操作

5.1 .remove() 方法

用于移除选定的元素及其子元素。

$("button").click(function(){$("p").remove();
});

5.2 .empty() 方法

用于移除选定元素的子元素，但保留元素本身。

$("button").click(function(){$("div").empty();
});

5.3 示例

<!DOCTYPE html>
<html>
<head><title>元素删除操作示例</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script>$(document).ready(function(){$("#removeBtn").click(function(){$("#removeParagraph").remove();});$("#emptyBtn").click(function(){$("#emptyDiv").empty();});});</script>
</head>
<body><button id="removeBtn">删除段落</button><p id="removeParagraph">这是一个将被删除的段落。</p><br><button id="emptyBtn">清空 div</button><div id="emptyDiv"><p>这是一个将被清空的 div。</p></div>
</body>
</html>

6. 随机抽奖

6.1 实现思路

  1. 获取所有参与抽奖的元素。
  2. 使用 Math.random() 生成随机数。
  3. 根据随机数选择中奖元素。
  4. 显示中奖结果。

6.2 示例

<!DOCTYPE html>
<html>
<head><title>随机抽奖示例</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><style>.participant {padding: 10px;margin: 5px;background-color: lightgreen;display: inline-block;cursor: pointer;}</style><script>$(document).ready(function(){$("#drawBtn").click(function(){var participants = $(".participant");var total = participants.length;if(total === 0){alert("没有参与者！");return;}var randomIndex = Math.floor(Math.random() * total);var winner = participants.eq(randomIndex);alert("中奖者是：" + winner.text());});});</script>
</head>
<body><h2>参与者列表</h2><div class="participant">参与者1</div><div class="participant">参与者2</div><div class="participant">参与者3</div><div class="participant">参与者4</div><div class="participant">参与者5</div><br><button id="drawBtn">开始抽奖</button>
</body>
</html>

7. 随机选图并放大

7.1 实现思路

  1. 准备一个图片库。
  2. 使用 Math.random() 随机选择一张图片。
  3. 将选中的图片显示在一个模态框中，并放大显示。

7.2 示例

<!DOCTYPE html>
<html>
<head><title>随机选图并放大示例</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><style>.thumbnail {width: 100px;height: 100px;margin: 5px;cursor: pointer;}#modal {display: none;position: fixed;z-index: 1;padding-top: 100px;left: 0;top: 0;width: 100%;height: 100%;overflow: auto;background-color: rgba(0,0,0,0.9);}#modalImage {margin: auto;display: block;max-width: 80%;max-height: 80%;}#closeBtn {position: absolute;top: 50px;right: 35px;color: #fff;font-size: 40px;font-weight: bold;cursor: pointer;}</style><script>$(document).ready(function(){var images = ["https://via.placeholder.com/100?text=Image1","https://via.placeholder.com/100?text=Image2","https://via.placeholder.com/100?text=Image3","https://via.placeholder.com/100?text=Image4","https://via.placeholder.com/100?text=Image5"];$(".thumbnail").click(function(){var index = $(this).index();var selectedImage = images[index];$("#modalImage").attr("src", selectedImage);$("#modal").fadeIn(200);});$("#closeBtn").click(function(){$("#modal").fadeOut(200);});// 点击模态框背景关闭$("#modal").click(function(event){if($(event.target).is("#modal")){$(this).fadeOut(200);}});});</script>
</head>
<body><h2>图片库</h2><img src="https://via.placeholder.com/100?text=Image1" class="thumbnail" alt="Image1"><img src="https://via.placeholder.com/100?text=Image2" class="thumbnail" alt="Image2"><img src="https://via.placeholder.com/100?text=Image3" class="thumbnail" alt="Image3"><img src="https://via.placeholder.com/100?text=Image4" class="thumbnail" alt="Image4"><img src="https://via.placeholder.com/100?text=Image5" class="thumbnail" alt="Image5"><div id="modal"><span id="closeBtn">&times;</span><img id="modalImage" src="" alt="Selected Image"></div>
</body>
</html>

8. 综合案例代码

以下是一个综合应用上述功能的完整示例：

<!DOCTYPE html>
<html>
<head><title>综合应用示例</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><style>.participant {padding: 10px;margin: 5px;background-color: lightgreen;display: inline-block;cursor: pointer;}#modal {display: none;position: fixed;z-index: 1;padding-top: 100px;left: 0;top: 0;width: 100%;height: 100%;overflow: auto;background-color: rgba(0,0,0,0.9);}#modalImage {margin: auto;display: block;max-width: 80%;max-height: 80%;}#closeBtn {position: absolute;top: 50px;right: 35px;color: #fff;font-size: 40px;font-weight: bold;cursor: pointer;}#animateDiv {width: 100px;height: 100px;background-color: lightblue;position: relative;margin: 20px;}</style><script>$(document).ready(function(){// 单击事件显示不同词语$("#showTextBtn").click(function(){var texts = ["你好", "欢迎", "再见", "谢谢", "加油"];var randomIndex = Math.floor(Math.random() * texts.length);$("#displayText").text(texts[randomIndex]);});// 自定义动画$("#animateBtn").click(function(){$("#animateDiv").animate({left: '250px',opacity: '0.5',height: '150px',width: '150px'}, 1000);});// 删除元素操作$("#removeBtn").click(function(){$("#removeParagraph").remove();});// 随机抽奖$("#drawBtn").click(function(){var participants = $(".participant");var total = participants.length;if(total === 0){alert("没有参与者！");return;}var randomIndex = Math.floor(Math.random() * total);var winner = participants.eq(randomIndex);alert("中奖者是：" + winner.text());});// 随机选图并放大var images = ["https://via.placeholder.com/100?text=Image1","https://via.placeholder.com/100?text=Image2","https://via.placeholder.com/100?text=Image3","https://via.placeholder.com/100?text=Image4","https://via.placeholder.com/100?text=Image5"];$(".thumbnail").click(function(){var index = $(this).index();var selectedImage = images[index];$("#modalImage").attr("src", selectedImage);$("#modal").fadeIn(200);});$("#closeBtn").click(function(){$("#modal").fadeOut(200);});// 点击模态框背景关闭$("#modal").click(function(event){if($(event.target).is("#modal")){$(this).fadeOut(200);}});});</script>
</head>
<body><h2>综合应用示例</h2><button id="showTextBtn">显示不同词语</button><p id="displayText">等待显示...</p><button id="animateBtn">开始动画</button><div id="animateDiv"></div><button id="removeBtn">删除段落</button><p id="removeParagraph">这是一个将被删除的段落。</p><h3>参与者列表</h3><div class="participant">参与者1</div><div class="participant">参与者2</div><div class="participant">参与者3</div><div class="participant">参与者4</div><div class="participant">参与者5</div><h3>图片库</h3><img src="https://via.placeholder.com/100?text=Image1" class="thumbnail" alt="Image1"><img src="https://via.placeholder.com/100?text=Image2" class="thumbnail" alt="Image2"><img src="https://via.placeholder.com/100?text=Image3" class="thumbnail" alt="Image3"><img src="https://via.placeholder.com/100?text=Image4" class="thumbnail" alt="Image4"><img src="https://via.placeholder.com/100?text=Image5" class="thumbnail" alt="Image5"><div id="modal"><span id="closeBtn">&times;</span><img id="modalImage" src="" alt="Selected Image"></div>
</body>
</html>

8.1 代码说明

  1. 显示不同词语：
    • 点击“显示不同词语”按钮时，从预定义数组中随机选择一条文本显示在段落中。
  2. 自定义动画：
    • 点击“开始动画”按钮时，对蓝色方块执行动画，使其向左移动、改变不透明度并增大尺寸。
  3. 删除元素操作：
    • 点击“删除段落”按钮时，删除指定的段落元素。
  4. 随机抽奖：
    • 点击“参与者”列表中的任意元素时，从参与者中随机选择一个中奖者并弹出提示。
  5. 随机选图并放大：
    • 点击任意缩略图时，从预定义数组中随机选择一张图片并显示在模态框中。

8.2 注意事项

  • 跨域问题：使用占位符图片（https://via.placeholder.com/）作为示例图片库。如果使用本地图片路径，请确保路径正确。
  • 模态框背景点击关闭：通过判断点击的目标是否是模态框本身来关闭模态框。
  • 参与者列表：参与者列表中的元素可以通过添加或删除 .participant 类的元素来动态调整。

相关文章：

  • 理清缓存穿透、缓存击穿、缓存雪崩、缓存不一致的本质与解决方案
  • iro.js 非常方便好用的 Web 颜色选择器
  • 【Redis篇】linux 7.6安装单机Redis7.0(参数优化详解)
  • 【容器化】Docker容器技术入门基础教程
  • 端口隔离基本配置
  • 如何保障服务器租用中的数据安全？
  • ‌2.4GHz无线通信天线布局与优化方法
  • 基于C++的IOT网关和平台7：github项目ctGateway设备协议开发指南
  • AutoDL+SSH在vscode中远程使用GPU训练深度学习模型
  • 论文AI率降低 教程（包过）
  • 分布式、高并发-Day03
  • 人工智能与智能合约：如何用AI优化区块链技术中的合约执行？
  • Paramiko 性能优化详解
  • 生成了一个AI算法
  • 华为设备端口隔离
  • 【Azure Redis】Redis导入备份文件(RDB)失败的原因
  • NVIDIA Halos：智能汽车革命中的全栈式安全系统
  • Selenium模拟人类，操作网页的行为（全）
  • 强啊！Oracle Database 23aiOracle Database 23ai：使用列别名进行分组排序！
  • Oracle04-基本使用
  • 央行：今日起下调再贷款利率0.25个百分点
  • 公积金利率降至历史低位，百万房贷30年省5万
  • 吴清：加强监管的同时传递监管温度，尽力帮助受影响企业应对美加征关税的冲击
  • 降准又降息！央行发布3类10项措施
  • 人民日报评论：莫让“胖东来们”陷入“棒杀”“捧杀”泥潭
  • 1101名优秀运动员拟保送，全红婵、黄雨婷、盛李豪在列