jQuery基础教程：选择器与事件操作

"jQuery 的知识" 本文档主要涵盖了jQuery的基础知识，包括如何引入jQuery库、页面加载完成后执行的函数，以及jQuery的选择器。jQuery是一个流行的JavaScript库，它通过简化DOM操作、事件处理、动画效果和Ajax交互，使得JavaScript编程更加简便。 ### 01 引入jQuery 引入jQuery的方式通常是通过在HTML文件中添加`<script>`标签，并指定jQuery库的URL。示例如下： ```html <script type="text/javascript" src="path/to/jquery-3.5.1.js"></script> ``` jQuery提供压缩版和非压缩版，压缩版用于生产环境以减少文件大小，提高页面加载速度；非压缩版则便于开发时阅读和调试。 页面加载完成后立即执行的函数有两种形式： 1. 使用`$()`或`$(function(){})`，这与JavaScript的`window.onload`相似，确保DOM完全加载后执行。 2. 使用`$(document).ready(function(){})`，它也是在DOM准备就绪后运行，与第一种方式等效。 ### 02 jQuery选择器 jQuery选择器允许我们高效地选取DOM元素。以下是一些常见的选择器示例： - `$("#div0")`：选取ID为"div0"的元素。 - `$("span")`：选取所有`<span>`元素。 - `$(".class-name")`：选取具有特定类名的元素。 在提供的代码示例中，`$("#div0").html()`获取ID为"div0"的元素的HTML内容，`$("#div0").hide()`则隐藏该元素。`$("span").click(function(){...})`为所有`<span>`元素添加点击事件，点击时将背景颜色变为红色。 ### 其他jQuery操作 - `css("property", "value")`：设置或获取CSS属性。如`$("span").css("background-color", "red")`将所有`<span>`的背景色设为红色。 - `hover()`：创建鼠标悬停事件。如`#div0:hover`定义了鼠标悬停时的样式。 - `on()`：绑定事件处理程序。例如，可以使用`$("#div0").on("click", function(){...})`来替代`click`事件。 jQuery提供了丰富的API，可以进行DOM操作（如`append`、`prepend`）、事件处理（`on`、`off`）、动画（`fadeIn`、`slideUp`）和Ajax请求（`$.ajax`、`$.get`、`$.post`）。虽然这个文档没有涉及Ajax，但jQuery使得异步数据交互也变得简单易用。 学习jQuery能显著提升前端开发效率，尤其对于处理复杂的DOM操作和交互。通过理解和实践这些基础知识，开发者可以快速掌握jQuery并应用到实际项目中。