jQuery | AJAX 完整参考

介绍

jQuery 是一个非常流行的 JavaScript 库，它将 HTML 文档的遍历和操作、事件处理、动画效果、AJAX以及数据传输和文件操作等操作简化成易于使用的方法。本文旨在为初学者提供一个完整的 jQuery 和 AJAX 参考手册，帮助其快速入门和实现网站前端的各种需求。

jQuery 选择器

jQuery 选择器用于选取 HTML 元素，语法类似 CSS 选择器，常用的选择器包括：

• 基本选择器

  | 选择器 | 描述 | | --- | --- | | * | 选取所有元素 | | #id | 选取拥有指定 id 属性的元素 | | .class | 选取拥有指定 class 属性的元素 | | element | 选取指定元素名称的元素，如 div、p 等 | | selector1, selectorN | 选择器组合 |

• 层次选择器

  | 选择器 | 描述 | | --- | --- | | ancestor descendant | 选取 ancestor 元素内的所有 descendant 子孙元素 | | parent > child | 选取 parent 元素下的所有直接子元素 child | | prev + next | 选取同级元素 prev 的下一个元素 next | | prev ~ siblings | 选取同级元素 prev 之后的所有元素 siblings |

• 过滤器选择器

  | 选择器 | 描述 | | --- | --- | | :first | 选取第一个匹配元素 | | :last | 选取最后一个匹配元素 | | :even | 选取所有偶数位置的元素 | | :odd | 选取所有奇数位置的元素 | | :eq( n ) | 选取索引位置为 n 的元素 | | :not( selector ) | 选取不匹配 selector 的所有元素 | | :contains( text ) | 选取包含指定文本的元素 | | :has( selector ) | 选取拥有符合 selector 的子元素的元素 |

• 属性选择器

  | 选择器 | 描述 | | --- | --- | | [attribute] | 选取带有指定 attribute 属性的元素 | | [attribute=value] | 选取 attribute 属性等于 value 的元素 | | [attribute!=value] | 选取 attribute 属性不等于 value 的元素 | | [attribute$=value] | 选取 attribute 属性以 value 结尾的元素 | | [attribute^=value] | 选取 attribute 属性以 value 开头的元素 | | [attribute*=value] | 选取 attribute 属性包含 value 的元素 |

jQuery DOM 操作

jQuery 提供了一系列用于操作 HTML DOM 的方法，例如修改元素内容、添加/移除元素等，常用方法包括：

• 元素操作

  | 方法 | 描述 | | --- | --- | | text() | 设置或返回选中元素的文本内容 | | html() | 设置或返回选中元素的 HTML 文本内容 | | val() | 获取或设置选中表单元素的值 | | attr() | 获取或设置选中元素的属性值 | | removeAttr() | 删除选中元素的指定属性 | | addClass() | 为选中元素添加指定 class | | removeClass() | 从选中元素中删除指定 class | | toggleClass() | 切换选中元素的 class，有则去除，没有则添加 |

• 元素插入

  | 方法 | 描述 | | --- | --- | | append() | 将指定元素插入到选中元素末尾 | | appendTo() | 将选中元素插入到指定元素末尾 | | prepend() | 将指定元素插入到选中元素开头 | | prependTo() | 将选中元素插入到指定元素开头 | | clone() | 复制选中元素 |

• 元素移除

  | 方法 | 描述 | | --- | --- | | remove() | 从 DOM 中删除选中元素 | | empty() | 删除选中元素的所有子元素 |

jQuery 事件

事件是指用户或浏览器执行的某些动作，例如点击、鼠标移动、键盘按下等。jQuery 提供了一套完整的事件处理方法，包括：

• 事件绑定

  | 方法 | 描述 | | --- | --- | | click() | 绑定元素的点击事件 | | dblclick() | 绑定元素的双击事件 | | mousedown() | 绑定元素的鼠标按下事件 | | mouseup() | 绑定元素的鼠标松开事件 | | mouseenter() | 绑定元素的鼠标进入事件 | | mouseleave() | 绑定元素的鼠标移出事件 | | mousemove() | 绑定元素的鼠标移动事件 | | keydown() | 绑定元素的键盘按下事件 | | keyup() | 绑定元素的键盘松开事件 | | submit() | 绑定表单的提交事件 | | resize() | 绑定窗口大小改变事件 | | scroll() | 绑定元素的滚动事件 |

• 事件解绑

  | 方法 | 描述 | | --- | --- | | off() | 解绑绑定的事件 |

• 事件触发

  | 方法 | 描述 | | --- | --- | | trigger() | 触发当前元素上绑定的指定事件 |

jQuery AJAX

AJAX 是一种在 Web 应用程序中传输数据的技术，它可以在不刷新页面的情况下进行数据交互。jQuery 提供了一套完整的 AJAX 方法，包括：

• AJAX 基本操作

  | 方法 | 描述 | | --- | --- | | $.ajax({}) | 发起 AJAX 请求 | | success(data,status,xhr){} | 请求成功后的回调函数 | | error(xhr,status,error){} | 请求失败后的回调函数 | | dataType | 返回数据类型 |

• AJAX 快捷方法

  | 方法 | 描述 | | --- | --- | | $.get(url,data,success(data,status,xhr),dataType) | 发起 GET 请求 | | $.post(url,data,success(data,status,xhr),dataType) | 发起 POST 请求 | | $.getJSON(url,data,success(data,status,xhr)) | 发起 JSON 请求 |

示例代码

选取元素并修改其文本内容

$('p').text('这是一段新的文本内容');

表单提交

<form id="myForm">
  <input type="text" name="name" />
  <input type="submit" value="提交" />
</form>

$('#myForm').submit(function(event) {
  event.preventDefault();
  var name = $('input[name="name"]').val();
  $.post('/api', { name: name }, function(data) {
    alert(data.message);
  });
});

加载 JSON 数据

$.getJSON('/api', function(data) {
  console.log('The response data:', data);
});

结语

本文仅是 jQuery 和 AJAX 的基本参考，还有许多高级用法和深层次的知识等着大家去探索。希望本文能对前端开发者有所帮助。