jquery dom
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 内置了多种动画效果：
// 隐藏元素
$('#elementId').hide();
// 显示元素
$('#elementId').show();
// 淡入效果
$('#elementId').fadeIn();
// 淡出效果
$('#elementId').fadeOut();
// 滑动效果
$('#elementId').slideUp();
$('#elementId').slideDown();通过这些方法，可以高效地操作 DOM 并实现丰富的交互效果。
