jQuery 对象特点

问题

jQuery 对象有哪些特点？它与原生 DOM 对象有什么区别？

解答

1. 类数组对象

jQuery 对象是一个类数组对象，包含匹配的 DOM 元素集合。

const $divs = $('div');

// 类数组结构
console.log($divs.length);  // 元素数量
console.log($divs[0]);      // 第一个原生 DOM 元素
console.log($divs.get(1));  // 第二个原生 DOM 元素

2. 链式调用

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

$('#box')
  .css('color', 'red')      // 设置样式
  .addClass('active')        // 添加类名
  .fadeIn(300)              // 淡入动画
  .on('click', handler);    // 绑定事件

3. 隐式迭代

对 jQuery 对象调用方法会自动遍历所有匹配元素。

// 所有 p 元素都会变红，无需手动循环
$('p').css('color', 'red');

// 等价于原生写法
document.querySelectorAll('p').forEach(p => {
  p.style.color = 'red';
});

4. jQuery 对象与 DOM 对象互转

// DOM -> jQuery
const div = document.getElementById('box');
const $div = $(div);

// jQuery -> DOM
const $box = $('#box');
const domElement = $box[0];        // 方式一：索引访问
const domElement2 = $box.get(0);   // 方式二：get 方法

// 注意：不能混用方法
$box.innerHTML;           // undefined，jQuery 对象没有此属性
$box.html();              // 正确，使用 jQuery 方法
domElement.innerHTML;     // 正确，原生 DOM 属性

5. 统一的 API

jQuery 对象提供统一的跨浏览器 API。

// 事件绑定（兼容各浏览器）
$('#btn').on('click', function() {
  // this 是原生 DOM 元素
  // $(this) 是 jQuery 对象
  $(this).toggleClass('active');
});

// AJAX 请求
$.ajax({
  url: '/api/data',
  success: function(data) {
    console.log(data);
  }
});

关键点

• 类数组对象：有 length 属性，可通过索引访问原生 DOM 元素
• 链式调用：方法返回 jQuery 对象自身，支持连续操作
• 隐式迭代：方法自动作用于所有匹配元素
• 与 DOM 互转：$(dom) 转为 jQuery，$obj[0] 或 $obj.get(0) 转为 DOM
• 命名约定：jQuery 变量通常以 $ 开头，如 $div、$list