当前位置：首页 > jquery

jquery dom

2026-01-14 15:24:46jquery

jQuery DOM 操作指南

jQuery 提供了丰富的 DOM 操作方法，可以简化原生 JavaScript 的 DOM 操作。以下是常用的 jQuery DOM 操作方法：

选择元素 使用 jQuery 选择器可以轻松选取 DOM 元素：

$('p') // 选择所有 <p> 元素
$('#id') // 选择 id 为 "id" 的元素
$('.class') // 选择 class 为 "class" 的元素

修改内容 可以通过以下方法修改元素内容：

$('p').text('新文本') // 设置文本内容
$('p').html('<b>新HTML</b>') // 设置HTML内容
$('input').val('新值') // 设置表单元素的值

修改属性 可以使用 attr() 和 prop() 方法修改元素属性：

$('img').attr('src', 'new-image.jpg') // 修改属性
$('input').prop('disabled', true) // 修改属性状态

添加/删除类 可以动态添加或删除 CSS 类：

$('div').addClass('highlight') // 添加类
$('div').removeClass('highlight') // 删除类
$('div').toggleClass('highlight') // 切换类

创建元素 可以动态创建新元素并插入到 DOM 中：

var newDiv = $('<div>', {
  class: 'box',
  text: '新创建的div'
})
$('body').append(newDiv) // 插入到body末尾

插入元素 jQuery 提供了多种插入元素的方法：

$('p').after('<div>插入在p之后</div>') // 在元素后插入
$('p').before('<div>插入在p之前</div>') // 在元素前插入
$('div').append('<p>插入到div内部末尾</p>') // 在内部末尾插入
$('div').prepend('<p>插入到div内部开头</p>') // 在内部开头插入

删除元素 可以移除 DOM 中的元素：

$('div').remove() // 完全移除元素
$('div').empty() // 清空元素内容但保留元素

遍历 DOM jQuery 提供了遍历 DOM 树的方法：

$('li').parent() // 获取父元素
$('ul').children() // 获取所有子元素
$('li').first() // 获取第一个匹配元素
$('li').last() // 获取最后一个匹配元素
$('li').eq(2) // 获取索引为2的元素

事件处理 jQuery 简化了事件处理：

$('button').click(function() {
  alert('按钮被点击')
})
$('input').on('change', function() {
  console.log('输入值改变了')
})

CSS 操作 可以直接修改元素的 CSS 样式：

$('div').css('color', 'red') // 设置单个样式
$('div').css({
  'color': 'red',
  'background': 'yellow'
}) // 设置多个样式

动画效果 jQuery 内置了多种动画效果：

jquery dom

$('div').hide(1000) // 隐藏元素，动画持续1秒
$('div').show(1000) // 显示元素，动画持续1秒
$('div').fadeIn(1000) // 淡入
$('div').fadeOut(1000) // 淡出
$('div').slideUp(1000) // 向上滑动隐藏
$('div').slideDown(1000) // 向下滑动显示