jquery 对象
jQuery 对象简介
jQuery 对象是由 jQuery 函数（通常通过 $() 或 jQuery() 调用）返回的类数组对象，封装了一个或多个 DOM 元素，并提供了一系列便捷的操作方法。
创建 jQuery 对象
通过选择器或 DOM 元素创建 jQuery 对象：
// 通过选择器创建
const $divs = $('div');
// 通过 DOM 元素创建
const div = document.querySelector('div');
const $div = $(div);jQuery 对象特性
- 类数组结构：可以通过索引访问元素（如
$divs[0]），或使用.get()方法。 - 链式调用：多数方法返回 jQuery 对象，支持链式操作：
$('div').addClass('active').css('color', 'red');
常用方法
DOM 操作
// 添加类
$('div').addClass('highlight');
// 修改样式
$('div').css('font-size', '16px');
// 插入内容
$('div').html('<p>New content</p>');事件处理
$('button').click(function() {
alert('Button clicked!');
});遍历与过滤
// 遍历元素
$('li').each(function(index) {
console.log(index, $(this).text());
});
// 过滤元素
const $filtered = $('li').filter('.active');与 DOM 对象的转换
- jQuery 转 DOM：
const domElement = $('div')[0]; // 或 $('div').get(0) - DOM 转 jQuery：
const $jQueryObject = $(domElement);
注意事项
- jQuery 对象的方法无法直接用于 DOM 元素，需先转换为 jQuery 对象。
- 使用
length属性检查匹配的元素数量：if ($('div').length > 0) { // 存在匹配元素 }
通过 jQuery 对象，开发者可以高效地操作 DOM、处理事件及实现动画效果，简化了原生 JavaScript 的复杂性。
