jquery对象

jQuery 对象简介

jQuery 对象是通过 jQuery 选择器或方法创建的封装了 DOM 元素集合的对象。它提供了一系列便捷的方法来操作 DOM、处理事件、实现动画等。与原生 DOM 对象不同，jQuery 对象是类数组结构，可能包含零个、一个或多个 DOM 元素。

创建 jQuery 对象

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

// 通过 CSS 选择器创建  
const $div = $('div'); // 所有 div 元素的 jQuery 对象  

// 通过 DOM 元素创建  
const nativeDiv = document.querySelector('div');  
const $jQueryDiv = $(nativeDiv);  

// 通过 HTML 字符串创建  
const $newElement = $('<p>New paragraph</p>');  

jQuery 对象与 DOM 对象的区别

1. 类型不同

   • DOM 对象是原生 JavaScript 对象（如 HTMLElement）。
   • jQuery 对象是封装后的对象，提供额外方法（如 .css(), .hide()）。

2. 方法调用

   • DOM 对象使用原生方法（如 appendChild）。

     document.getElementById('myDiv').appendChild(newElement);  

   • jQuery 对象使用 jQuery 方法（如 .append()）。

     $('#myDiv').append('<span>Text</span>');  

3. 互相转换

   • DOM 转 jQuery：$(domElement)
   • jQuery 转 DOM：通过索引或 .get() 方法

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

jQuery 对象的链式调用

jQuery 方法通常返回 jQuery 对象本身，支持链式操作：

$('div')  
  .css('color', 'red')  
  .addClass('highlight')  
  .fadeOut(1000);  

常用 jQuery 对象方法

1. DOM 操作

   • .append() / .prepend()：插入内容。
   • .remove()：删除元素。

2. 事件处理

   • .on()：绑定事件。
   • .click()：快捷绑定点击事件。

3. 样式操作

   • .css()：获取或设置样式。
   • .addClass()：添加类名。

4. 遍历与筛选

   • .each()：遍历元素。
   • .find()：查找子元素。

注意事项

1. 空对象处理
   jQuery 对象可能为空（如选择器未匹配到元素），调用方法时不会报错。

2. 性能优化
   避免过度使用复杂选择器，缓存重复使用的 jQuery 对象：

   const $myElement = $('#myElement'); // 缓存  
   $myElement.hide();  

3. 现代替代方案
   随着原生 JavaScript 的发展（如 querySelector、fetch），部分场景可直接使用原生 API。