JQuery常用函数与选择符详解

"这篇文档详细介绍了JQuery库中的一些常用函数和功能，包括文档加载完成后的执行函数、添加/删除CSS类以及各种选择符的使用，同时也提到了JQuery自定义选择符，对于理解和操作DOM元素非常有帮助。" 在Web开发中，JQuery是一个非常流行的JavaScript库，它简化了DOM操作、事件处理、动画效果和Ajax交互。以下是对文中提到的JQuery功能的详细解释： 1. **文档加载完成执行函数**: 使用`$(document).ready()`函数确保代码在DOM完全加载并准备就绪后执行。这样可以避免因DOM未完全构建而引发的错误。示例中的代码会在页面加载完成后弹出警告框显示“开始了”。 2. **添加/删除CSS类**: `addClass()`和`removeClass()`方法分别用于向元素添加或移除CSS类。例如，`$("#some-id").addClass("NewClassName")`会给ID为`some-id`的元素添加名为`NewClassName`的类，而`$("#some-id").removeClass("ClassNameToBeRemoved")`则会移除类`ClassNameToBeRemoved`。 3. **选择符**: - **CSS选择符**：JQuery支持标准的CSS选择符，如`$('p')`选取所有段落，`$("#some-id")`选取ID为`some-id`的元素，`$('.some-class')`选取所有具有`some-class`类的元素。 - **CSS扩展选择符**：例如`$("#some-id>li")`选取ID为`some-id`元素下的直接子`li`元素，`$("#some-id li:not(.horizontal)")`选取ID为`some-id`下没有`horizontal`类的`li`元素。 - **XPath选择符**：JQuery也支持XPath语法，如`$("a[@title]")`选取所有带有`title`属性的链接，`$("div[ol]")`选取包含`ol`元素的`div`。 - **特殊属性选择**：如`$('a[@href^="mailto:%22]')`选取href属性值以`mailto:`开头的链接，`$('a[@href$=".pdf"]')`选取href以`.pdf`结尾的链接，`$('a[@href*="mysite.com"]')`选取href中包含`mysite.com`的链接。 4. **JQuery自定义选择符（过滤器）**: - `:eq(index)`：选择指定索引位置的元素，例如`$('div.horizontal:eq(1)')`选取类为`horizontal`的`div`元素集合中的第二个元素（索引从0开始）。 - `:nth-child(index)`：选择父元素的第n个子元素，如`$('div:nth-child(1)')`选取每个父元素的第一个`div`子元素。 - `:odd`和`:even`：这两个选择符分别用于选取奇数索引和偶数索引的元素，常用于表格行的交替背景色，如文中所示的示例。 这些JQuery函数和选择符极大地提高了开发者的工作效率，使得DOM操作变得更加简洁和高效。熟练掌握这些功能将对JavaScript编程大有裨益。