JQuery基础教程：工厂函数与DOM就绪

"这是一份关于jQuery的学习笔记，包含多个示例，旨在帮助初学者理解jQuery的基本用法和功能。" jQuery是一个广泛使用的JavaScript库，它极大地简化了网页上的DOM操作、事件处理、动画制作和Ajax交互。以下是jQuery的核心知识点： 一、jQuery的主要功能： 1. **元素选取**：jQuery提供了一种简洁的方式来选取HTML页面中的元素，如通过ID、类名、标签名等。例如，`$('p')`选取所有段落，`$('#some-id')`选取ID为'some-id'的元素，`$('.some-class')`选取所有具有'some-class'类的元素。 2. **元素操作**：不仅可以获取元素，还可以修改元素的外观和内容，例如改变CSS样式、添加或删除类、替换文本等。 3. **事件处理**：jQuery使得响应用户交互变得简单，如`click()`, `mouseover()`, `mouseout()`等方法，可以轻松绑定和解绑事件。 4. **动画效果**：jQuery提供了丰富的动画效果，如`fadeIn()`, `slideUp()`, `animate()`等，可以创建平滑的过渡效果。 5. **Ajax**：使用`$.ajax()`, `$.get()`, `$.post()`等函数，可以在不刷新页面的情况下与服务器进行异步数据交换。 6. **简化JavaScript任务**：jQuery封装了许多复杂的JavaScript操作，使其变得更加易用和高效。 二、**工厂函数 `$()`**： 这是jQuery的核心函数，用于创建jQuery对象。当传入一个选择器时，它会返回一个包含匹配元素的jQuery对象。例如，`$('a[@title]')`选取所有具有title属性的链接。`$()`内部可以支持多种参数形式，如HTML字符串、DOM元素、数组等。 三、**`$(document).ready()`**： 此函数确保在其内的代码在DOM完全加载后执行，这样可以安全地操作DOM元素。这样做的好处是避免因DOM未加载完毕而导致的错误。 四、**XPath选择符**： 虽然jQuery主要使用CSS选择器，但也在某些情况下支持XPath语法。例如，`$('a[@title]')`选取所有带title属性的链接，`$('div[ol]')`选取包含`<ol>`标签的`<div>`元素。jQuery还支持属性选择符，如`^`, `$`, `*`来匹配属性值的开始、结束或任意位置。 示例代码： ```javascript $(document).ready(function() { $('a[@href^="mailto:"]').addClass('mailto'); }); ``` 这段代码会在DOM加载完成后，选取所有href属性以"mailto:"开头的`<a>`元素，并添加'mailto'类。 jQuery通过其强大的功能和简洁的API，极大地降低了JavaScript开发的复杂度，提高了开发效率，是Web开发中的重要工具。