当前位置：首页 > jquery

jquery dom

2026-04-07 21:58:40jquery

jQuery DOM 操作

jQuery 提供了一系列简洁的方法来操作 DOM（文档对象模型），使得开发者可以更高效地处理 HTML 元素。

选择元素

使用 jQuery 选择器可以快速定位 DOM 元素：

// 通过 ID 选择
$('#elementId');

// 通过类名选择
$('.className');

// 通过标签名选择
$('div');

// 组合选择器
$('div.className');

修改元素内容

jQuery 提供了多种方法来修改元素的内容：

// 获取或设置元素的 HTML 内容
$('#elementId').html();
$('#elementId').html('<p>New content</p>');

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

修改元素属性

可以轻松获取或设置元素的属性：

// 获取或设置元素的属性
$('#elementId').attr('attributeName');
$('#elementId').attr('attributeName', 'value');

// 移除元素的属性
$('#elementId').removeAttr('attributeName');

添加和移除元素

jQuery 允许动态添加或移除 DOM 元素：

// 在元素内部末尾添加内容
$('#parentElement').append('<div>New child</div>');

// 在元素内部开头添加内容
$('#parentElement').prepend('<div>New child</div>');

// 在元素外部之后添加内容
$('#elementId').after('<div>New sibling</div>');

// 在元素外部之前添加内容
$('#elementId').before('<div>New sibling</div>');

// 移除元素
$('#elementId').remove();

事件处理

jQuery 简化了事件处理：

// 绑定点击事件
$('#elementId').click(function() {
    alert('Element clicked');
});

// 绑定鼠标悬停事件
$('#elementId').hover(
    function() {
        $(this).css('background-color', 'yellow');
    },
    function() {
        $(this).css('background-color', '');
    }
);

CSS 操作

可以方便地修改元素的 CSS 样式：

// 获取或设置 CSS 属性
$('#elementId').css('propertyName');
$('#elementId').css('propertyName', 'value');

// 添加或移除类
$('#elementId').addClass('className');
$('#elementId').removeClass('className');
$('#elementId').toggleClass('className');

遍历 DOM

jQuery 提供了多种方法来遍历 DOM 树：

// 获取父元素
$('#elementId').parent();

// 获取所有子元素
$('#parentElement').children();

// 获取下一个兄弟元素
$('#elementId').next();

// 获取上一个兄弟元素
$('#elementId').prev();

动画效果

jQuery 内置了多种动画效果：

jquery dom

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

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

// 淡入效果
$('#elementId').fadeIn();

// 淡出效果
$('#elementId').fadeOut();

// 滑动效果
$('#elementId').slideUp();
$('#elementId').slideDown();

通过这些方法，可以高效地操作 DOM 并实现丰富的交互效果。