jquery 函数

jQuery 函数基础

jQuery 是一个快速、简洁的 JavaScript 库，封装了许多常用功能，简化了 DOM 操作、事件处理、动画和 Ajax 交互。jQuery 函数通常以 $() 或 jQuery() 形式调用，核心功能包括选择元素、操作 DOM、事件绑定等。

常用 jQuery 函数

选择器函数

通过 CSS 选择器获取元素：

$("#id") // 通过 ID 选择
$(".class") // 通过类名选择
$("div") // 通过标签名选择
$("div.class") // 组合选择

DOM 操作函数

$("div").html() // 获取或设置 HTML 内容
$("div").text() // 获取或设置文本内容
$("div").attr("id") // 获取或设置属性
$("div").addClass("new-class") // 添加类名
$("div").removeClass("old-class") // 移除类名

事件处理函数

$("button").click(function() {}) // 点击事件
$("input").change(function() {}) // 值改变事件
$("form").submit(function() {}) // 表单提交事件
$("div").on("click", function() {}) // 通用事件绑定

Ajax 函数

$.ajax({
  url: "example.com",
  method: "GET",
  success: function(data) {}
}) // 通用 Ajax 请求

$.get("example.com", function(data) {}) // GET 请求
$.post("example.com", {data: "value"}, function(data) {}) // POST 请求

实用工具函数

遍历函数

$("div").each(function(index, element) {}) // 遍历元素
$.each(array, function(index, value) {}) // 遍历数组或对象

动画函数

$("div").fadeIn() // 淡入
$("div").fadeOut() // 淡出
$("div").slideUp() // 向上滑动隐藏
$("div").slideDown() // 向下滑动显示
$("div").animate({opacity: 0.5}, 1000) // 自定义动画

链式调用

jQuery 支持链式调用，多个操作可以连续执行：

$("div")
  .addClass("highlight")
  .css("color", "red")
  .fadeOut(1000);

注意事项

• jQuery 函数通常返回 jQuery 对象，可以继续调用其他方法。
• 使用 $(document).ready(function() {}) 确保 DOM 加载完成后执行代码。
• 现代浏览器已原生支持许多 jQuery 功能，但在兼容性和简洁性上 jQuery 仍有优势。