jquery 查询

jQuery 查询方法

jQuery 提供了多种方法来查询和操作 DOM 元素。以下是常见的查询方法：

选择器查询
使用 CSS 选择器语法来查找元素：

$('div') // 选择所有 div 元素
$('#id') // 选择 ID 为 'id' 的元素
$('.class') // 选择所有 class 为 'class' 的元素

属性查询
通过属性选择元素：

$('[name="value"]') // 选择 name 属性为 'value' 的元素
$('input[type="text"]') // 选择 type 为 'text' 的 input 元素

层级查询
通过层级关系选择元素：

$('parent > child') // 选择 parent 的直接子元素 child
$('ancestor descendant') // 选择 ancestor 下的所有 descendant 元素

过滤查询
使用过滤方法缩小选择范围：

$('div:first') // 选择第一个 div 元素
$('div:last') // 选择最后一个 div 元素
$('div:even') // 选择偶数位置的 div 元素
$('div:odd') // 选择奇数位置的 div 元素

表单查询
专门用于表单元素的选择器：

$(':input') // 选择所有 input、textarea、select 和 button 元素
$(':text') // 选择所有 type="text" 的 input 元素
$(':checked') // 选择所有被选中的 checkbox 或 radio 元素

jQuery 查询链式操作

jQuery 支持链式调用，可以在查询后直接进行操作：

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

动态查询

jQuery 允许动态生成查询条件：

var className = 'active';
$('.' + className).hide();

性能优化建议

避免过度使用通用选择器，尽量使用 ID 或 class 选择器提高查询效率。缓存 jQuery 对象以减少重复查询：

var $elements = $('.items');
$elements.hide();
$elements.show();