深入理解jQuery：核心函数与实战示例

"jQuery 学习资料 - 个人笔记代码" jQuery 是一个广泛使用的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画设计以及Ajax交互等任务。jQuery 的本质是将 JavaScript 代码封装成易于使用、功能丰富的函数集合。 在 jQuery 中，主要有两种使用方式：作为一般函数调用和作为对象使用。 1. 作为一般函数调用：`$(param)`。这通常用于页面加载完成后的操作。以下是一些主要用法： - 参数为函数：这会将 `$(document).ready()` 包裹的代码在 DOM 加载完毕后执行。 - 参数为选择器字符串：jQuery 使用 CSS 选择器来选取元素，如 `$('div')` 将选取所有的 `div` 元素，并返回一个 jQuery 对象。 - 参数为 DOM 对象：可以将已有的 DOM 元素转化为 jQuery 对象，如 `$(document.body)`。 - 参数为 HTML 标签字符串：jQuery 可以创建新的 HTML 元素并封装成 jQuery 对象，例如 `$('<p>Hello</p>')`。 2. 作为对象使用：`$.xxx()`。这是 jQuery 提供的一系列静态方法： - `$.each()`: 遍历数组或对象，提供一个回调函数，回调函数有两个参数，分别代表索引和元素值。 - `$.trim()`: 用于去除字符串两端的空白字符。 在提供的代码示例中，有三个需求的实现： - 需求1：点击按钮时显示按钮的文本并添加一个新的输入框。这里使用了 `$(function(){...})` 来确保在 DOM 加载完成后执行代码，然后 `$('#btn').click(function(){...})` 监听按钮点击事件，`$(this).html()` 获取按钮的文本内容，`$('<input type="text" name="msg3"/><br/>').appendTo('div')` 创建新的输入框并添加到 `div` 元素内。 - 需求2：遍历数组并输出所有元素值。利用 `$.each()` 遍历数组 `arr`，并打印出索引和对应的值。 - 需求3：移除字符串两端的空格。调用 `$.trim()` 函数处理字符串 `str`，去除其首尾的空格。 jQuery 的强大之处在于它的简便性和灵活性，使得开发者能更高效地编写 JavaScript 代码。它提供了许多内置的方法，如 `.hide()`, `.show()`, `.slideUp()`, `.slideDown()` 用于动画效果，`.append()`, `.prepend()` 用于动态添加内容，`.on()` 用于事件绑定，以及 AJAX 方法如 `.get()`, `.post()` 等。这些都极大地提高了开发效率，减少了代码量。学习 jQuery 是前端开发中非常重要的一步，它能帮助开发者快速掌握网页动态效果的实现。