jquery 节点
jQuery 节点操作
jQuery 提供了丰富的 DOM 节点操作方法,可以轻松实现节点的增删改查。
查找节点
使用选择器查找节点是最常见的操作。jQuery 支持 CSS 选择器语法,可以快速定位到需要的元素。
// 通过 ID 查找
$('#elementId')
// 通过类名查找
$('.className')
// 通过标签名查找
$('div')
// 组合选择器
$('ul li.active')
创建节点
通过直接传递 HTML 字符串给 jQuery 函数可以创建新节点。
// 创建新元素
var newDiv = $('<div></div>');
// 创建带内容和属性的元素
var newLink = $('<a href="#" class="btn">Click me</a>');
插入节点
jQuery 提供了多种插入节点的方法,可以将新创建的节点插入到文档中。
// 在元素内部末尾插入
$('#container').append(newDiv);
// 在元素内部开头插入
$('#container').prepend(newDiv);
// 在元素外部后面插入
$('#target').after(newDiv);
// 在元素外部前面插入
$('#target').before(newDiv);
删除节点
从 DOM 中移除节点有多种方式。
// 移除元素及其所有子元素
$('#elementToRemove').remove();
// 只移除元素内容,保留元素本身
$('#elementToEmpty').empty();
// 从父元素中分离元素,保留数据和事件
$('#elementToDetach').detach();
替换节点
可以完全替换现有节点。
// 替换匹配的元素
$('#oldElement').replaceWith(newDiv);
// 用匹配的元素替换目标元素
newDiv.replaceAll('#oldElement');
克隆节点
复制节点及其所有数据和事件处理程序。
// 浅克隆(不复制数据和事件)
var clonedElement = $('#elementToClone').clone();
// 深克隆(复制数据和事件)
var clonedElementWithData = $('#elementToClone').clone(true);
节点遍历
jQuery 提供了多种方法来遍历 DOM 树。
// 获取父元素
$('#child').parent();
// 获取所有祖先元素
$('#child').parents();
// 获取直接子元素
$('#parent').children();
// 获取兄弟元素
$('#element').siblings();
// 获取下一个兄弟元素
$('#element').next();
// 获取上一个兄弟元素
$('#element').prev();
节点属性操作
可以读取和修改节点的属性和样式。
// 获取/设置属性
$('#element').attr('title');
$('#element').attr('title', 'new title');
// 获取/设置 CSS
$('#element').css('color');
$('#element').css('color', 'red');
// 添加/移除类
$('#element').addClass('highlight');
$('#element').removeClass('highlight');
节点内容操作
可以操作节点的文本和 HTML 内容。
// 获取/设置 HTML 内容
$('#element').html();
$('#element').html('<strong>New content</strong>');
// 获取/设置文本内容
$('#element').text();
$('#element').text('New text content');
// 获取/设置表单元素值
$('input').val();
$('input').val('new value');
jQuery 的节点操作方法极大简化了 DOM 操作,使开发者能够更高效地处理页面元素。







