jquery 集合
jQuery 集合简介
jQuery 集合是由 jQuery 选择器或方法返回的一组 DOM 元素的封装对象。它类似数组（具有索引和 length 属性），但提供了一系列 jQuery 特有的方法用于操作元素。
创建 jQuery 集合
通过选择器或 DOM 元素初始化集合：
// 通过选择器创建集合
var $elements = $('div.className');
// 通过 DOM 元素创建集合
var div = document.getElementById('myDiv');
var $collection = $(div);集合的链式操作
jQuery 方法通常返回集合本身，支持链式调用：
$('p').css('color', 'red').hide().delay(500).fadeIn();常用集合方法
遍历元素
// each() 遍历
$('li').each(function(index) {
console.log(index + ': ' + $(this).text());
});筛选元素
// filter() 按条件筛选
$('div').filter('.active').css('background', 'yellow');
// eq() 选择特定索引
$('li').eq(2).addClass('highlight');查找子元素
// find() 查找后代
$('#parent').find('.child').hide();集合操作
// add() 合并集合
$('div').add('p').css('margin', '10px');
// map() 生成新数组
var texts = $('li').map(function() {
return $(this).text();
}).get();集合与原生 DOM 转换
jQuery 集合转 DOM 数组
var domElements = $('div').get();
// 或通过索引获取单个元素
var firstDiv = $('div')[0];DOM 数组转 jQuery 集合
var divs = document.querySelectorAll('div');
var $jqueryCollection = $(divs);性能优化建议
- 缓存重复使用的集合：
var $items = $('.items'); - 缩小选择器范围：
$('#parent').find('.child')优于$('.child') - 避免过度链式操作，可能影响可读性。
通过灵活使用 jQuery 集合，可以高效地操作和批量处理 DOM 元素。
