jquery 对象

jQuery 对象的基本概念

jQuery 对象是通过 jQuery 选择器或方法创建的，封装了 DOM 元素或元素集合的 JavaScript 对象。它提供了一系列便捷的方法来操作 DOM、处理事件、执行动画等。jQuery 对象与原生 DOM 对象不同，但可以通过索引或方法互相转换。

创建 jQuery 对象

使用 $() 或 jQuery() 函数可以创建 jQuery 对象。参数可以是选择器、DOM 元素、HTML 字符串或函数。

// 通过选择器创建
var $div = $('div');

// 通过 DOM 元素创建
var div = document.getElementById('myDiv');
var $div = $(div);

// 通过 HTML 字符串创建
var $newDiv = $('<div>New Div</div>');

jQuery 对象与 DOM 对象的转换

jQuery 对象是类数组对象，可以通过索引或 .get() 方法获取原生 DOM 对象。反之，可以将 DOM 对象传入 $() 转换为 jQuery 对象。

// jQuery 对象转 DOM 对象
var $div = $('div');
var div = $div[0]; // 或 $div.get(0);

// DOM 对象转 jQuery 对象
var div = document.getElementById('myDiv');
var $div = $(div);

jQuery 对象的链式调用

jQuery 对象的方法通常返回自身，支持链式调用。

$('div')
  .css('color', 'red')
  .addClass('highlight')
  .on('click', function() {
    alert('Clicked!');
  });

常用 jQuery 对象方法

• DOM 操作：.html(), .text(), .append(), .remove()
• 样式操作：.css(), .addClass(), .removeClass()
• 事件处理：.on(), .off(), .click()
• 动画效果：.show(), .hide(), .fadeIn(), .animate()
• 遍历与筛选：.each(), .find(), .filter()

示例代码

// 选择所有段落并修改内容
$('p').text('Hello, jQuery!');

// 遍历元素并添加类
$('li').each(function(index) {
  $(this).addClass('item-' + index);
});

// 动态添加元素
$('body').append('<button>Click Me</button>');

注意事项

• jQuery 对象的方法通常作用于集合中的所有元素。
• 避免过度使用链式调用，以免代码难以维护。
• 现代 JavaScript 框架（如 React、Vue）可能减少对 jQuery 的依赖，但在传统项目中仍广泛使用。