jquery 集合

jQuery 集合简介

jQuery 集合是由 jQuery 选择器或方法返回的对象，包含一组 DOM 元素的引用。这些元素可以通过 jQuery 方法进行操作，例如修改样式、绑定事件或遍历 DOM。

创建 jQuery 集合

通过选择器或 DOM 元素创建集合：

// 通过选择器创建集合
var $elements = $('.class-name'); 

// 通过 DOM 元素创建集合
var div = document.getElementById('myDiv');
var $div = $(div);

操作集合元素

jQuery 集合支持链式调用，可对集合内所有元素统一操作：

$('.box').css('color', 'red').hide().delay(500).fadeIn();

遍历集合

使用 .each() 方法遍历集合中的每个元素：

$('li').each(function(index) {
    console.log(index + ': ' + $(this).text());
});

集合过滤与查找

通过 .filter()、.find() 等方法筛选或查找子集：

// 过滤出包含特定文本的元素
$('li').filter(function() {
    return $(this).text().includes('重要');
});

// 查找子元素
$('#parent').find('.child');

集合与数组转换

将 jQuery 集合转换为原生数组：

var arr = $('div').toArray();

常用集合方法

• .add()：添加元素到集合。
• .not()：排除匹配的元素。
• .slice()：截取集合的子集。
• .eq()：获取指定索引的元素。

性能优化建议

• 缓存重复使用的集合：var $items = $('.item');
• 尽量缩小选择器范围，例如 $('#parent .child') 优于 $('.child')。

通过灵活运用 jQuery 集合，可以高效地操作和动态更新页面元素。