"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 是前端开发中非常重要的一步,它能帮助开发者快速掌握网页动态效果的实现。