jquery增删改查

jQuery 增删改查操作

jQuery 提供了简洁的 API 用于 DOM 元素的增删改查操作，以下是常见方法总结：

查询元素

通过选择器获取元素：

$('div')          // 选择所有 div 元素
$('#id')          // 通过 ID 选择
$('.class')       // 通过类名选择
$('input[name]')  // 选择带 name 属性的 input

筛选结果：

$('li').first()    // 获取第一个 li
$('li').eq(2)      // 获取索引为 2 的 li
$('div').find('p') // 在 div 中查找 p 元素

修改元素

修改内容：

$('#el').html('<b>新内容</b>')  // 设置 HTML
$('#el').text('纯文本')         // 设置文本
$('input').val('新值')          // 设置表单值

修改属性：

$('img').attr('src', 'new.jpg')  // 修改属性
$('div').css('color', 'red')     // 修改样式
$('div').addClass('active')      // 添加类

添加元素

插入新元素：

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

删除元素

移除元素：

$('div').remove()      // 删除元素及其事件
$('div').empty()       // 清空元素内容
$('div').detach()      // 删除元素但保留事件

链式操作示例

jQuery 支持链式调用：

$('ul')
  .find('li')
  .eq(1)
  .html('修改第二项')
  .end()
  .append('<li>新增项</li>');

注意事项

• 操作前需确保 DOM 已加载完成，推荐使用 $(document).ready()
• 批量操作时注意选择器性能，避免复杂选择器
• 修改内容时注意 XSS 防护，避免直接插入未处理的用户输入