当前位置：首页 > jquery

jquery api

2026-01-13 14:43:23jquery

以下是关于 jQuery API 的详细介绍和使用方法：

jQuery API 概述

jQuery 是一个快速、简洁的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。jQuery API 提供了丰富的功能方法，涵盖 DOM 操作、事件、效果、Ajax 等。

核心方法

$(selector) 或 jQuery(selector) 是 jQuery 的核心函数，用于选择 DOM 元素或创建 jQuery 对象。支持 CSS 选择器、DOM 元素或 HTML 字符串。

// 选择所有段落元素
$('p').css('color', 'red');

DOM 操作

html(), text(), val() 方法用于获取或设置元素内容。attr(), prop() 用于操作属性和属性。

// 获取或设置 HTML 内容
$('#div1').html('<p>New content</p>');

// 获取或设置属性
$('img').attr('src', 'new-image.jpg');

事件处理

on(), off(), click(), hover() 等方法用于绑定和解绑事件处理程序。

// 绑定点击事件
$('#button1').click(function() {
    alert('Button clicked');
});

// 使用 on 方法绑定多个事件
$('#button2').on({
    mouseenter: function() {
        $(this).css('background-color', 'lightgray');
    },
    mouseleave: function() {
        $(this).css('background-color', 'white');
    }
});

效果和动画

show(), hide(), toggle(), fadeIn(), fadeOut(), slideDown(), animate() 等方法用于创建视觉效果。

// 淡入效果
$('#box').fadeIn(1000);

// 自定义动画
$('#box').animate({
    left: '250px',
    opacity: '0.5'
}, 1000);

Ajax 功能

$.ajax(), $.get(), $.post(), load() 等方法用于异步 HTTP 请求。

// 使用 $.ajax
$.ajax({
    url: 'test.html',
    success: function(result) {
        $('#div1').html(result);
    }
});

// 使用 load 方法
$('#div1').load('test.html #container');

实用工具方法

$.each(), $.map(), $.trim(), $.isArray() 等工具方法提供额外功能。

// 遍历数组
$.each([1, 2, 3], function(index, value) {
    console.log(index + ': ' + value);
});

// 检查类型
if ($.isArray(myVar)) {
    console.log('This is an array');
}

链式调用

jQuery 方法通常返回 jQuery 对象，允许链式调用多个方法。

$('p').css('color', 'red')
      .slideUp(1000)
      .slideDown(1000);

插件扩展

jQuery 允许通过 $.fn 扩展自定义方法，创建可重用组件。

$.fn.highlight = function(color) {
    this.css('background-color', color || 'yellow');
    return this;
};

// 使用自定义插件
$('p').highlight('lightblue');

jQuery API 文档可在 jQuery 官方网站查阅完整参考。最新版本为 jQuery 3.x，保持对现代浏览器的支持并优化了性能。

jquery api