2022年JQuery选择器与事件效果实战回顾

本资源是一份关于jQuery的学习文件，主要回顾了2022年5月15日的相关内容，通过两个HTML示例展示了如何在网页中应用jQuery的选择器和事件处理。首先，我们来看第一个案例： 案例一： 1. **HTML结构**：该案例引入了jQuery库，`<script src="Jquery选择器/jquery-3.6.js"></script>`，并设置了`<marquee>`元素来实现动态滚动效果，标题为"JQuery案例一"。 2. **jQuery入门**： - jQuery的入口函数： - `$(function(){}):` 这是jQuery的文档就绪事件，当DOM加载完成后立即执行的代码块。 - `$(document).ready(function(){}):` 类似于JavaScript的DOMContentLoaded事件，表示文档结构已准备好，可以执行后续的脚本操作。 - 示例中的`$("h1").click(function(){...})`展示了如何使用`.click()`方法绑定单击事件到H1元素上，当用户点击时触发一个警告框显示提示信息，并改变H1元素的样式。 3. **CSS样式的应用**：通过`.css()`方法，设置了H1元素的颜色、字体大小、背景颜色、高度以及不透明度，改变了其视觉呈现。 案例运行结果提供了三个截图，展示不同时间点H1元素样式的变化过程。 案例二： 这个案例没有在给出的部分中完全呈现，但可以推测它可能是另一个使用jQuery进行交互的HTML片段，可能涉及不同的选择器或事件处理。由于缺失具体内容，这部分的细节无法详细描述。 这份学习文件重点在于介绍jQuery的选择器和基本事件处理机制，如`.click()`方法，以及如何结合CSS样式对网页元素进行动态控制。通过实例操作，学习者可以更好地理解如何在实际项目中运用jQuery来简化JavaScript操作DOM的过程。理解并掌握这些基础概念和技巧对于进一步深入jQuery的学习至关重要。