当前位置：首页 > jquery

jquery对象

2026-03-02 10:18:50jquery

jQuery 对象简介

jQuery 对象是通过 jQuery 选择器或方法创建的包含 DOM 元素的集合。它封装了 DOM 元素并提供了一系列便捷的方法来操作这些元素，例如修改样式、绑定事件或执行动画。

创建 jQuery 对象

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

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

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

// 通过 HTML 片段创建  
var $newElement = $('<p>New paragraph</p>');

jQuery 对象特性

类数组结构
jQuery 对象类似数组，可以通过索引访问其中的 DOM 元素：
```
var firstDiv = $('div')[0]; // 获取第一个 DOM 元素  
```
链式调用
多数 jQuery 方法返回 jQuery 对象本身，支持链式操作：
```
$('div').css('color', 'red').hide().fadeIn();  
```

扩展方法
可通过 $.fn 扩展 jQuery 对象的原型，添加自定义方法：

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

与 DOM 对象的区别

DOM 对象：原生 JavaScript 对象，如 document.getElementById() 返回的结果。
jQuery 对象：封装了 DOM 对象的集合，提供额外方法。

转换方法：

// DOM 转 jQuery  
var domElement = document.querySelector('p');  
var $jQueryObj = $(domElement);  

// jQuery 转 DOM  
var domElementAgain = $jQueryObj[0];

常用操作示例

遍历元素

$('li').each(function(index) {  
  console.log(index + ': ' + $(this).text());  
});

事件绑定

$('button').click(function() {  
  alert('Clicked!');  
});

样式修改

$('.box').css({  
  'width': '100px',  
  'height': '100px'  
});

AJAX 请求

jquery对象

$.get('https://api.example.com/data', function(response) {  
  console.log(response);  
});

注意事项

避免重复创建 jQuery 对象，可缓存对象以提高性能：
```
var $elements = $('.items'); // 缓存  
$elements.hide();  
```
使用 $(document).ready() 确保 DOM 加载完成后执行代码：
```
$(function() {  
  // DOM 就绪后执行  
});  
```

通过 jQuery 对象可以高效地完成 DOM 操作、事件处理和动态内容更新，是前端开发中的重要工具。