jquery 查询
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 还提供一些实用函数：
// 遍历数组
$.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}
