jquery对象
jQuery 对象简介
jQuery 对象是通过 jQuery 选择器或方法创建的封装了 DOM 元素的对象。它提供了一系列便捷的方法来操作 DOM、处理事件、执行动画等。与原生 DOM 对象不同，jQuery 对象是类数组结构，可以包含零个或多个 DOM 元素。
创建 jQuery 对象
通过 $() 或 jQuery() 函数将 DOM 元素、CSS 选择器或 HTML 字符串转换为 jQuery 对象：
// 通过 CSS 选择器创建
const $div = $('div.container');
// 通过 DOM 元素创建
const nativeDiv = document.getElementById('myDiv');
const $jQueryDiv = $(nativeDiv);
// 通过 HTML 字符串创建
const $newElement = $('<p>New paragraph</p>'); jQuery 对象与 DOM 对象的区别
- jQuery 对象：通过 jQuery 方法操作，支持链式调用，例如
$('div').hide().addClass('example')。 - DOM 对象：原生 JavaScript 对象，只能调用原生方法，例如
document.getElementById('myDiv').style.display = 'none'。
转换方法：
// jQuery 对象转 DOM 对象
const domElement = $jQueryDiv[0]; // 或 $jQueryDiv.get(0);
// DOM 对象转 jQuery 对象
const $element = $(domElement); 常用 jQuery 对象方法
-
DOM 操作：
$('div').html('<span>Content</span>'); // 设置 HTML $('div').text('Hello'); // 设置文本 $('div').append('<p>New</p>'); // 追加内容 -
事件处理：
$('button').click(() => alert('Clicked!')); $('form').submit((e) => e.preventDefault()); -
样式操作：
$('div').css('color', 'red'); // 设置样式 $('div').addClass('highlight'); // 添加类 -
遍历与筛选：
$('li').eq(0); // 获取第一个 li $('div').find('.child'); // 查找子元素
链式调用
jQuery 对象的方法通常返回自身（或新的 jQuery 对象），支持链式调用：
$('div')
.css('background', 'yellow')
.click(() => console.log('Div clicked'))
.fadeOut(1000); 注意事项
- 性能优化：避免过度使用通用选择器（如
*），优先使用 ID 或类选择器。 - 事件委托：对动态元素使用
.on()委托，例如$(parent).on('click', 'child', handler)。 - 兼容性：部分 jQuery 方法（如
$.browser）已废弃，需注意版本差异。
通过 jQuery 对象可以高效完成 DOM 操作，但现代开发中也可结合原生 JavaScript 或框架（如 React/Vue）根据需求选择。
