JQuery最全常用方法指南

在jQuery中，有许多方法可以用来操作HTML文档和处理事件。以下是一些最常用的方法：

1. $(selector) 或 jQuery(selector): 这是jQuery的基本用法，用来选择DOM元素。

$('#elementId'); // 选择ID为elementId的元素
$('.className'); // 选择所有class为className的元素
$('p'); // 选择所有的段落元素

2. .ready(function): 用于在文档加载完成后立即执行一段代码。

$(document).ready(function() {
    // 文档加载后执行的代码
});

3. .click(function): 为元素的点击事件绑定处理函数。

$('#button').click(function() {
    // 按钮点击后执行的代码
});

4. .on(event, function): 用于绑定事件处理函数，支持所有事件类型。

$('#button').on('click', function() {
    // 按钮点击后执行的代码
});

5. .off(event): 用于移除通过.on()方法绑定的事件处理函数。

$('#button').off('click');

6. .text(): 用于获取或设置元素的文本内容。

$('#elementId').text(); // 获取元素的文本内容
$('#elementId').text('new text'); // 设置元素的文本内容为'new text'

7. .html(): 用于获取或设置元素的HTML内容。

$('#elementId').html(); // 获取元素的HTML内容
$('#elementId').html('<p>new content</p>'); // 设置元素的HTML内容为一个段落

8. .val(): 用于获取或设置表单元素的值。

$('#inputId').val(); // 获取输入框的值
$('#inputId').val('new value'); // 设置输入框的值为'new value'

9. .attr(): 用于获取或设置元素属性。

$('#elementId').attr('class'); // 获取元素的class属性
$('#elementId').attr('class', 'newClass'); // 设置元素的class属性为'newClass'

10. .css(): 用于获取或设置元素的样式属性。

$('#elementId').css('color'); // 获取元素的文本颜色
$('#elementId').css('color', 'red'); // 设置元素的文本颜色为红色

11. .show() 和 .hide(): 控制元素的可见性。

$('#elementId').show(); // 显示元素
$('#elementId').hide(); // 隐藏元素

12. .addClass(), .removeClass(), 和 .toggleClass(): 用于操作元素的CSS类。

$('#elementId').addClass('newClass'); // 添加一个新的CSS类
$('#elementId').removeClass('existingClass'); // 移除一个现有的CSS类
$('#elementId').toggleClass('className'); // 切换一个CSS类

13. .append(), .prepend(), .after(), 和 .before(): 用于插入内容或元素。

$('#elementId').append('<p>new paragraph</p>'); // 在元素内部的末尾添加一个段落
$('#elementId').prepend('<p>new paragraph</p>'); // 在元素内部的开头添加一个段落
$('#elementId').after('<p>new paragraph</p>'); // 在元素之后