使用jQuery动态操作HTML和CSS

一、HTML动态操作

1. DOM元素操作

创建新元素：使用$()构造函数创建HTML字符串对应的jQuery对象
插入元素：提供多种插入方法如append()、prepend()、before()、after()等
移除元素：使用remove()、detach()、empty()等方法
替换元素：通过replaceWith()和replaceAll()实现元素替换

2. 内容操作

文本内容：text()方法获取或设置元素的文本内容
HTML内容：html()方法操作元素的HTML结构
表单值：val()方法专门处理表单元素的值

3. 属性操作

标准属性：attr()方法操作元素的任意属性
移除属性：removeAttr()删除指定属性
特殊属性：prop()方法更适合处理布尔属性如checked、selected等

jQuery动态操作HTML

动态修改HTML内容可以通过多种方法实现。html()方法用于获取或设置元素的HTML内容，text()方法用于处理纯文本内容。append()和prepend()可在元素内部添加内容，after()和before()则在元素外部插入内容。

复制代码

// 设置HTML内容
$('#element').html('<strong>新内容</strong>');

// 获取HTML内容
var content = $('#element').html();

// 追加内容
$('#container').append('<div>追加的元素</div>');

// 在元素前插入
$('#target').before('<span>插入在前</span>');

二、CSS动态操作

1. 样式直接操作

单个样式：css()方法获取或设置单个CSS属性
多个样式：通过对象字面量一次性设置多个CSS属性
单位处理：自动处理数值型属性的单位添加

2. 类名操作

添加类：addClass()添加一个或多个CSS类
移除类：removeClass()删除指定的CSS类
切换类：toggleClass()根据状态切换类的存在
检查类：hasClass()判断元素是否包含特定类

3. 尺寸和位置

元素尺寸：width()、height()及其包含内外边距的变体
文档位置：offset()获取相对于文档的位置
相对位置：position()获取相对于父定位元素的位置
滚动位置：scrollTop()和scrollLeft()操作滚动条位置

jQuery动态操作CSS

通过css()方法可以直接修改元素的样式属性。该方法既可以获取单个属性值，也可以设置单个或多个属性。类名操作可通过addClass()、removeClass()和toggleClass()实现。

复制代码

// 设置单个CSS属性
$('#box').css('color', 'red');

// 设置多个CSS属性
$('#box').css({
  'background-color': 'blue',
  'padding': '20px'
});

// 获取CSS属性值
var fontSize = $('#text').css('font-size');

// 添加类
$('#element').addClass('active');

// 切换类
$('#button').click(function() {
  $(this).toggleClass('highlight');
});

动态属性操作

使用attr()方法可以读取或修改DOM元素的属性，removeAttr()用于删除属性。prop()方法专门用于处理布尔属性如checked、disabled等。

复制代码

// 设置属性
$('img').attr('src', 'new-image.jpg');

// 获取属性
var altText = $('img').attr('alt');

// 移除属性
$('input').removeAttr('disabled');

// 处理布尔属性
$('#checkbox').prop('checked', true);

事件处理

jQuery提供了简洁的事件绑定方法。on()是推荐的事件绑定方式，支持多种事件类型和委托事件处理。off()用于解绑事件处理器。

复制代码

// 绑定点击事件
$('#btn').on('click', function() {
  alert('按钮被点击');
});

// 委托事件处理
$('#list').on('click', 'li', function() {
  $(this).css('background', 'yellow');
});

// 一次性事件
$('#submit').one('click', submitForm);

// 解绑事件
$('#btn').off('click');

动画效果

jQuery内置了多种动画效果方法。show()和hide()控制显示隐藏，fadeIn()和fadeOut()实现淡入淡出效果，slideUp()和slideDown()创建滑动动画。animate()方法允许自定义CSS属性动画。

复制代码

// 基本显示隐藏
$('#panel').hide(400).show(600);

// 淡入淡出
$('#message').fadeOut(300).fadeIn(500);

// 滑动效果
$('#menu').slideUp().slideDown();

// 自定义动画
$('#object').animate({
  left: '+=50px',
  opacity: 0.5
}, 1000);

AJAX请求

jQuery简化了AJAX请求的处理。$.ajax()是底层接口，$.get()和$.post()是简化方法。$.load()专门用于加载HTML内容。

复制代码

// GET请求
$.get('api/data', function(response) {
  $('#result').html(response);
});

// POST请求
$.post('api/save', {name: 'John'}, function(data) {
  console.log(data);
});

// 完整AJAX
$.ajax({
  url: 'api/users',
  type: 'PUT',
  data: JSON.stringify({id: 1}),
  contentType: 'application/json',
  success: function(result) {
    updateUI(result);
  }
});

DOM遍历方法

jQuery提供强大的DOM遍历功能。find()搜索后代元素，parent()和parents()查找祖先元素，children()获取直接子元素，siblings()查找兄弟元素。

复制代码

// 查找后代元素
$('#nav').find('li').addClass('item');

// 获取父元素
$('.child').parent().css('border', '1px solid');

// 筛选元素
$('div').filter('.important').hide();

// 遍历元素
$('li').each(function(index) {
  $(this).text('项目 ' + (index + 1));
});

三、动态操作的特点

1. 链式调用

jQuery支持方法链，可以在单个语句中执行多个操作
提高代码简洁性和可读性

2. 隐式迭代

对jQuery集合的操作会自动应用于所有匹配元素
无需显式编写循环结构

3. 跨浏览器兼容

封装了浏览器差异，提供统一的API
简化了跨浏览器开发的复杂性

4. 事件集成

CSS变化可与事件处理紧密结合
实现交互式样式变化效果

四、应用场景

动态内容加载：AJAX响应后更新页面内容
交互式界面：根据用户操作实时改变元素样式
动画效果：结合jQuery UI或自定义动画实现平滑过渡
响应式行为：根据条件动态调整布局和样式
主题切换：通过类名操作实现多种视觉主题

五、最佳实践

性能优化：缓存jQuery选择器结果，减少DOM查询
可维护性：将样式变化封装在CSS类中，通过类名操作而非直接样式修改
渐进增强：确保在JavaScript禁用时基础功能仍可用
代码组织：将DOM操作逻辑与业务逻辑分离

六、高级HTML操作技巧

1. 克隆与复制

深度克隆 ：clone(true)方法支持深度复制，包含元素数据及事件处理器
选择性克隆：可通过参数控制是否复制数据和事件
应用场景：动态创建重复结构、实现拖拽克隆效果

2. 包装与解包

元素包装 ：wrap()、wrapAll()、wrapInner()提供灵活的包装策略
父元素操作 ：parent()、parents()、closest()用于遍历和选择祖先元素
解包操作 ：unwrap()移除元素的直接父元素，保留内容

3. 过滤与查找

过滤方法 ：filter()、not()、has()基于条件筛选元素集合
查找后代 ：find()在当前元素集合中搜索匹配的后代元素
兄弟元素 ：siblings()、next()、prev()等处理同级关系

七、CSS动画与过渡

1. 内置动画方法

基础动画 ：show()、hide()、toggle()控制显示状态
滑动效果 ：slideDown()、slideUp()、slideToggle()实现垂直滑动
淡入淡出 ：fadeIn()、fadeOut()、fadeToggle()、fadeTo()控制透明度

2. 自定义动画

animate()方法：支持自定义CSS属性的动画变化
队列控制 ：动画自动加入队列，支持delay()、stop()、finish()控制
缓动函数：支持多种缓动效果，包括线性、摆动、弹跳等

3. 回调与承诺

动画回调：所有动画方法支持完成回调函数
承诺对象 ：promise()方法返回Promise，便于异步处理动画序列

八、性能优化策略

1. DOM操作优化

批量更新：使用文档片段或隐藏元素进行批量DOM操作
重绘减少：避免在循环中进行样式读取，减少布局抖动
选择器性能：ID选择器最快，避免过度复杂的选择器

2. 内存管理

事件解绑 ：使用off()及时移除不再需要的事件监听器
数据清理 ：removeData()清理元素关联的自定义数据
元素移除 ：empty()与remove()的区别与适用场景

3. 缓存策略

选择器缓存：将重复使用的选择器结果存储在变量中
样式缓存：避免频繁读取样式属性，尤其是强制同步布局的属性