jquery 集合
jQuery 集合的基本概念
jQuery 集合是由 DOM 元素组成的类数组对象，通过选择器或方法（如 $('div') 或 $('.class')）创建。集合支持链式操作，允许对多个元素同时执行方法。
创建 jQuery 集合
通过选择器或 DOM 元素初始化集合：
// 通过选择器创建集合
var $divs = $('div'); // 所有 <div> 元素
var $items = $('.item'); // 所有 class="item" 的元素
// 通过 DOM 元素创建集合
var div = document.getElementById('myDiv');
var $myDiv = $(div); // 单个元素的集合操作集合中的元素
遍历元素
使用 .each() 方法迭代集合：
$('li').each(function(index) {
console.log(index + ': ' + $(this).text());
});筛选元素
通过 .filter() 或 .find() 缩小集合范围：
$('div').filter('.active'); // 筛选出 class="active" 的 div
$('ul').find('li'); // 查找 ul 下的所有 li修改元素属性
批量操作集合中的元素属性：
$('a').attr('target', '_blank'); // 所有链接在新窗口打开
$('input').prop('disabled', true); // 禁用所有输入框集合的链式操作
jQuery 方法通常返回集合本身，支持链式调用：
$('p')
.css('color', 'red')
.addClass('highlight')
.fadeOut(1000);集合与 DOM 元素的转换
jQuery 集合转 DOM 元素
通过索引或 .get() 方法获取原生 DOM 元素：
var firstDiv = $('div')[0]; // 第一个 div 元素
var secondDiv = $('div').get(1); // 第二个 div 元素DOM 元素转 jQuery 集合
直接包裹 $() 即可：
var div = document.querySelector('div');
var $div = $(div); // 转换为 jQuery 集合常用集合方法
.add()：合并集合。.not()：排除匹配元素。.slice()：截取子集合。.eq()：获取指定索引的元素集合。
示例：
$('div').add('p').css('border', '1px solid red'); // 为 div 和 p 添加边框
$('li').not('.disabled').hide(); // 隐藏非 disabled 的 li性能优化建议
- 缓存重复使用的集合：
var $elements = $('.selector');。 - 尽量使用 ID 或更具体的选择器减少集合大小。
- 链式操作替代多次查询。
通过合理使用 jQuery 集合，可以高效操作 DOM 并简化代码逻辑。
