当前位置：首页 > jquery

jquery 查询

2026-04-07 22:36:56jquery

jQuery 查询基础

jQuery 提供了一套强大的选择器系统，用于快速查找和操作 DOM 元素。核心方法是 $() 或 jQuery()，支持 CSS 选择器语法。

常用选择器示例：

// 通过 ID 选择
$('#elementId')

// 通过类名选择
$('.className')

// 通过标签名选择
$('div')

// 复合选择器
$('div.className')

// 属性选择器
$('[name="username"]')

链式操作

jQuery 支持链式调用，可以在单个语句中执行多个操作：

$('div').addClass('highlight').css('color', 'red').fadeOut(500);

筛选方法

提供多种方法对已选元素进行进一步筛选：

// 查找子元素
$('ul').find('li')

// 过滤元素
$('li').filter('.active')

// 获取第一个/最后一个元素
$('li').first()
$('li').last()

// 获取父元素
$('li').parent()

// 获取兄弟元素
$('li').siblings()

事件处理

jQuery 简化了事件绑定：

// 点击事件
$('button').click(function() {
    alert('Button clicked');
});

// 等价写法
$('button').on('click', function() {
    alert('Button clicked');
});

AJAX 请求

jQuery 提供简洁的 AJAX 方法：

$.ajax({
    url: 'api/data',
    method: 'GET',
    success: function(data) {
        console.log(data);
    },
    error: function(error) {
        console.error(error);
    }
});

// 简化方法
$.get('api/data', function(data) {
    console.log(data);
});

动画效果

内置多种动画效果：

// 显示/隐藏
$('#box').hide(1000);
$('#box').show(1000);

// 渐变
$('#box').fadeIn();
$('#box').fadeOut();

// 滑动
$('#box').slideUp();
$('#box').slideDown();

DOM 操作

提供丰富的 DOM 操作方法：

// 获取/设置内容
$('#element').text();  // 获取文本
$('#element').text('New text');  // 设置文本

// 获取/设置 HTML
$('#element').html();
$('#element').html('<strong>New HTML</strong>');

// 获取/设置属性
$('#element').attr('id');
$('#element').attr('id', 'newId');

// 添加/移除类
$('#element').addClass('newClass');
$('#element').removeClass('oldClass');

实用工具方法

jQuery 还提供一些实用函数：

jquery 查询

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

// 检查类型
$.isArray([]);  // true
$.isFunction(function() {});  // true

// 扩展对象
var obj = {a: 1};
$.extend(obj, {b: 2});  // obj 现在为 {a: 1, b: 2}

标签: jquery