当前位置：首页 > jquery

jquery 对象

2026-03-02 10:20:27jquery

jQuery 对象的基本概念

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

jquery 对象

创建 jQuery 对象

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

jquery 对象

// 通过选择器创建
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>');