jquery 对象

jQuery 对象简介

jQuery 对象是通过 jQuery 选择器或方法创建的封装了 DOM 元素的集合。它是一个类数组对象，包含一组 DOM 元素并提供 jQuery 特有的方法链式操作。

创建 jQuery 对象

通过 $() 或 jQuery() 函数将 DOM 元素、选择器字符串或 HTML 字符串转换为 jQuery 对象：

// 通过选择器创建
const $divs = $('div'); // 所有 <div> 元素的集合

// 通过 DOM 元素创建
const elem = document.getElementById('box');
const $box = $(elem); // 单个元素的 jQuery 对象

// 通过 HTML 字符串创建
const $newDiv = $('<div>动态创建的元素</div>');

jQuery 对象特性

1. 类数组结构
   jQuery 对象类似数组，可通过索引访问元素：

   $('li')[0]; // 获取第一个 <li> 的 DOM 元素

2. 链式调用
   大多数 jQuery 方法返回 jQuery 对象本身，支持链式操作：

   $('p').css('color', 'red').hide().delay(500).show();

3. 扩展方法
   可通过 $.fn 扩展 jQuery 对象的方法：

   $.fn.highlight = function() {
     this.css('background', 'yellow');
     return this; // 保持链式调用
   };

jQuery 对象与 DOM 对象的转换

1. jQuery 对象转 DOM 对象

   const $div = $('div');
   const domDiv = $div[0]; // 或 $div.get(0);

2. DOM 对象转 jQuery 对象

   const domDiv = document.querySelector('div');
   const $div = $(domDiv);

常用 jQuery 对象方法

• 操作类名

  $elem.addClass('active');
  $elem.removeClass('inactive');

• 属性操作

  $elem.attr('title', '新标题');
  const value = $elem.prop('checked');

• 事件绑定

  $elem.on('click', handler);
  $elem.off('click');

• 动画效果

  $elem.fadeIn(300).slideUp();

注意事项

1. 性能优化
   避免过度使用通用选择器（如 *），优先使用 ID 或类选择器。

2. 内存管理
   移除事件监听或数据引用防止内存泄漏：

   $elem.off().empty();

3. 版本兼容性
   jQuery 3.x 移除了部分旧 API（如 $.load()），需检查迁移指南。