jQuery入门指南：基本使用与选择器

"这是关于jQuery的介绍，包括其基本使用、加载代码的方式、jQuery选择器以及如何对选择集进行过滤。" jQuery是一个广泛使用的JavaScript函数库，它极大地简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。通过在HTML文档中引入jQuery库的JS文件，如`<script src="js/jquery-1.12.2.js"></script>`，开发者即可开始使用jQuery提供的丰富功能。 使用jQuery加载代码时，通常会用到`$(document).ready()`函数，确保在DOM（文档对象模型）完全加载后执行相关的JavaScript代码。相比`window.onload`，`$(document).ready()`更早触发，因为它只等待HTML结构加载完成，而不包括图片和其他外部资源。简化的写法`$(function(){...})`更常见，使代码更简洁。 jQuery的选择器扩展了CSS选择器，添加了`$`符号和括号。例如： - `$('#myId')` 选择ID为`myId`的元素。 - `$('.myClass')` 选择具有类`myClass`的所有元素。 - `$('li')` 选择所有`<li>`元素。 - `$('#ul1 li span')` 选择ID为`ul1`的元素内的所有`<li>`元素下的`<span>`。 - `$('input[name="first"]')` 选择name属性为`first`的`<input>`元素。 jQuery还提供了多种过滤选择集的方法，以便更精确地操作元素集合： - `$('div').has('p')` 选择包含`<p>`元素的`<div>`。 - `$('div').not('.myClass')` 选择不具有类`myClass`的`<div>`。 - `$('div').eq(5)` 选择第六个（因为索引是从0开始的，所以是第6个）`<div>`元素。 在示例代码中，可以看到如何使用这些选择器和过滤方法来改变HTML元素的内容。例如，选择包含`<p>`的`<div>`并将其内容更改为"哈哈,选中的"，选择非`.pbox`类的`<p>`元素并修改其内容，以及选取第三个`<li>`元素并更新其文本。 jQuery简化了前端开发的工作，通过其强大的选择器和方法，使得DOM操作更加简便高效。对于初学者和经验丰富的开发者来说，jQuery都是一个不可或缺的工具，尤其在需要快速实现复杂交互效果和动画的时候。