jquery中常用的函数和属性详细解析


在jQuery中,有许多常用的函数和属性,它们极大地简化了DOM操作、事件处理、动画效果等。由于篇幅限制,我将简要介绍一些最常用的函数和属性。

### 常用函数

1. **`$(selector)`** - 这是一个核心函数,用于选择HTML元素。它返回一个包含所选择元素的jQuery对象。

2. **`.ready()`** - 确保DOM完全加载和解析完成后才运行jQuery代码。现在通常使用`$(document).ready(function(){...});`或简写为`$(function(){...});`。

3. **`.each()`** - 遍历一个jQuery对象集合中的每个元素,并执行一个函数。

4. **`.on(events, selector, handler)`** - 为选定元素的一个或多个事件绑定事件处理程序。是`.bind()`, `.delegate()`, 和 `.live()` 方法的统一。

5. **`.ajax()`** - 执行异步HTTP(Ajax)请求。它支持多种类型的HTTP请求,如GET和POST。

6. **`.append()`** - 向每个匹配的元素内部追加内容。

7. **`.hide()` / `.show()`** - 隐藏或显示匹配的元素。

8. **`.fadeIn()` / `.fadeOut()`** - 通过淡入或淡出效果来显示或隐藏匹配的元素。

9. **`.css(propertyName, value)`** - 获取或设置匹配元素的样式属性值。

10. **`.removeClass()` / `.addClass()` / `.toggleClass()`** - 移除、添加或切换元素的类。

### 常用属性

实际上,jQuery中的“属性”通常指的是通过函数来操作的数据,如元素的类、样式、数据等,而不是像原生JavaScript中直接操作DOM元素的属性。不过,这里可以提到几个与“属性”相关的常用函数:

- **`.attr(attributeName, value)`** - 获取或设置匹配元素的属性值。

- **`.prop(propertyName, value)`** - 获取或设置匹配元素的属性值(针对布尔属性或自定义数据属性时更适用)。

- **`.data(key, value)`** - 在匹配的元素上存储数据,或在匹配的元素集合中的第一个元素上获取数据。

### 示例


// 使用$选择器
$('div').hide(); // 隐藏所有<div>元素

// 使用.ready()
$(document).ready(function(){
    $('p').addClass('newClass'); // 当DOM加载完成后,为所有<p>元素添加类
});

// 使用.ajax()
$.ajax({
    url: "test.html",
    context: document.body
}).done(function() {
    $(this).addClass("done");
});

// 使用.attr()
$('img').attr('src', 'image.jpg'); // 设置所有<img>元素的src属性

// 使用.data()
$('div').data('role', 'page'); // 为所有<div>元素存储数据
console.log($('div').data('role')); // 获取并打印第一个<div>元素的role数据

这些只是jQuery中众多函数和属性的一小部分。jQuery的文档是学习和掌握这些工具的最佳资源。