jquery使用方法案例

### jQuery 使用方法案例详解 #### 一、选择器与元素选取 在 jQuery 中，选择器是获取页面元素的关键。选择器语法与 CSS 相似，但又具备更多强大的功能。 ##### 1. 基本选择器 - **通用选择器**：`$(" * ")` 可以匹配文档中的所有元素。 - **标签选择器**：如 `$(" th, td ")` 或 `$(" a ")`，分别用于匹配 `<th>` 和 `<td>` 元素以及 `<a>` 元素。 - **ID 选择器**：`$(" div#onlydiv ")` 或 `$("# ID ")` 可以选择具有特定 ID 的元素。 - **子元素选择器**：`$("# orderedlist > li ")` 选取 `id="orderedlist"` 的元素的所有直接子元素 `<li>`。 - **最后的子元素**：`$("# orderedlist li:last ")` 选取 `id="orderedlist"` 下的最后一个 `<li>`。 - **第一个子元素**：`$("# orderedlist li:first ")` 选取 `id="orderedlist"` 下的第一个 `<li>`。 - **第 N 个子元素**：`$("# orderedlist li:nth-child( N ) ")` 选取 `id="orderedlist"` 下的第 N 个 `<li>`。 - **唯一子元素选择器**：`$(" button:only-child ")` 匹配那些为父元素唯一子元素的 `<button>` 元素。 - **空元素选择器**：`$(". stuff:empty ")` 匹配没有子元素的 `.stuff` 类。 - **启用状态选择器**：`$(". buttons:enabled ")` 匹配启用状态的 `.buttons` 类元素。 - **禁用状态选择器**：`$(". buttons:disabled ")` 匹配禁用状态的 `.buttons` 类元素。 - **已选中状态选择器**：`$(" input:checked ")` 匹配被选中的 `<input>` 元素。 - **排除选择器**：`$(" button:not(. not ) ")` 选取所有 `<button>` 元素，但不包括 class 为 `.not` 的元素。 - **类选择器**：`$(" button.not ")` 或 `$(". CLSS ")` 匹配具有特定类的元素。 ##### 2. 属性选择器 - **存在属性选择器**：`$(" button[@class] ")` 选取具有 `class` 属性的 `<button>` 元素。 - **属性值选择器**：`$(" button[@class=not ")` 选取 `class` 属性值为 `not` 的 `<button>` 元素。 - **属性值以指定字符串开头**：`$(" button[@class^=not ")` 选取 `class` 属性值以 `not` 开头的 `<button>` 元素。 - **属性值以指定字符串结尾**：`$(" button[@class$=not ")` 选取 `class` 属性值以 `not` 结尾的 `<button>` 元素。 - **属性值包含指定字符串**：`$(" button[@class*=not ")` 选取 `class` 属性值中包含 `not` 的 `<button>` 元素。 ##### 3. XPath 选择器示例 - **XPath 结合 jQuery**：如 `$(" ol[@id^='orderedlist'] ").find(" li:contains('First') ")` 选取 `id` 以 `orderedlist` 开始的 `<ol>` 元素中的包含文本 "First" 的 `<li>` 元素。可以对这些元素执行操作，如改变颜色等。 #### 二、创建和添加 HTML 元素 ##### 1. 创建新的 HTML 元素 - **通过 jQuery 创建 HTML**：`$('< p >hello< /p >')` 创建一个新的 `<p>` 元素。 - **添加到现有元素**：如 `$(" input ", this).appendTo(" h2 ")` 将页面中的 `<input>` 元素添加到 `<h2>` 元素之后。 ##### 2. 直接操作 DOM 元素 - **直接操作 DOM**：`$(document.forms[0].elements)` 可以选取表单中的所有元素，并将它们添加到指定元素后。 #### 三、回调函数 - **使用回调函数**：`$(callback)` 可以在文档加载完成后执行回调函数中的代码。 #### 四、其他注意事项 - **ID 选择器**：如 `$("# ID ")`，用于获取具有特定 ID 的元素。 - **类选择器**：如 `$(". CLSS ")`，用于获取具有特定类名的元素。 ### 总结 本文详细介绍了 jQuery 中的选择器用法及其应用场景，从基本选择器到高级属性选择器，再到 XPath 的结合使用，帮助读者全面掌握 jQuery 的选择器功能。此外，还介绍了如何使用 jQuery 创建和操作 HTML 元素，以及如何利用回调函数进行页面加载完成后的处理。通过这些知识点的学习，可以更高效地利用 jQuery 来操作网页元素，实现动态效果。