当前位置：首页 > jquery

jquery 节点

2026-03-02 11:28:13jquery

jQuery 节点操作

jQuery 提供了丰富的 DOM 节点操作方法，可以高效地查询、创建、修改和删除 HTML 元素。

选择节点

使用 jQuery 选择器可以快速定位 DOM 节点：

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

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

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

// 复合选择器
$('ul li.active')

创建节点

直接传入 HTML 字符串即可创建新节点：

// 创建新元素
var newDiv = $('<div>新创建的div</div>')

// 创建带属性的元素
var newImg = $('<img>', {
  src: 'image.jpg',
  alt: '示例图片',
  class: 'thumbnail'
})

插入节点

jQuery 提供了多种插入节点的方法：

// 在元素内部末尾插入
$('#container').append(newDiv)

// 在元素内部开头插入
$('#container').prepend(newDiv)

// 在元素外部之后插入
$('#target').after(newDiv)

// 在元素外部之前插入
$('#target').before(newDiv)

修改节点

可以方便地修改节点内容和属性：

// 修改文本内容
$('#element').text('新文本内容')

// 修改 HTML 内容
$('#element').html('<strong>加粗文本</strong>')

// 修改属性
$('#image').attr('src', 'new-image.jpg')

// 修改 CSS
$('#element').css('color', 'red')

删除节点

移除 DOM 节点的几种方式：

// 移除元素及其子元素
$('#element').remove()

// 只移除子元素
$('#container').empty()

// 分离元素（保留数据和事件）
$('#element').detach()

遍历节点

jQuery 提供了节点遍历方法：

// 查找子元素
$('#parent').children()

// 查找父元素
$('#child').parent()

// 查找同级元素
$('#item').siblings()

// 查找特定条件的元素
$('li').filter('.active')

节点属性操作

获取和设置节点属性的方法：

// 获取属性
var src = $('#image').attr('src')

// 设置属性
$('#image').attr({
  'src': 'new.jpg',
  'alt': '新图片'
})

// 删除属性
$('#image').removeAttr('alt')

事件处理

为节点绑定事件处理程序：

jquery 节点

// 点击事件
$('#button').click(function() {
  alert('按钮被点击')
})

// 动态绑定（适用于未来添加的元素）
$('#container').on('click', '.item', function() {
  console.log('项目被点击')
})