如何使用jQuery实现的DOM操作

# 如何使用jQuery实现的DOM操作

## 目录
1. [jQuery与DOM简介](#jquery与dom简介)
2. [jQuery基础选择器](#jquery基础选择器)
3. [DOM遍历方法](#dom遍历方法)
4. [DOM内容操作](#dom内容操作)
5. [DOM属性操作](#dom属性操作)
6. [CSS样式操作](#css样式操作)
7. [DOM节点操作](#dom节点操作)
8. [事件处理](#事件处理)
9. [动画效果](#动画效果)
10. [AJAX与DOM更新](#ajax与dom更新)
11. [性能优化建议](#性能优化建议)
12. [总结](#总结)

---

## jQuery与DOM简介
（约500字）
- DOM（文档对象模型）是HTML/XML文档的编程接口
- jQuery是轻量级JavaScript库，简化DOM操作
- 对比原生JS与jQuery的DOM操作差异
- jQuery核心特性：链式调用、跨浏览器兼容
- 基本引入方式：`<script src="jquery.min.js"></script>`

```javascript
// 原生JS vs jQuery
document.getElementById('demo');  // 原生
$('#demo');  // jQuery

---

jQuery基础选择器

（约600字）

1. ID选择器

$('#header')

2. 类选择器

$('.active-item')

3. 元素选择器

$('div')

4. 复合选择器

$('ul.menu > li')

5. 属性选择器

$('input[type="text"]')

选择器性能对比与最佳实践

---

DOM遍历方法

（约700字）

向上遍历

$('li').parent();
$('li').parents('ul');

向下遍历

$('ul').children();
$('ul').find('li.active');

同级遍历

$('li').siblings();
$('li').next();
$('li').prevAll();

过滤方法

$('li').first();
$('div').filter('.important');
$('tr').eq(3);

---

DOM内容操作

（约500字）

获取/设置文本

$('#demo').text();
$('#demo').text('新内容');

获取/设置HTML

$('.container').html();
$('.container').html('<p>新HTML</p>');

表单值操作

$('input').val();
$('select').val('option1');

---

DOM属性操作

（约400字）

基本属性

$('img').attr('src');
$('a').attr('href', 'new.html');

移除属性

$('input').removeAttr('disabled');

data-*属性

$('#user').data('id');
$('#product').data('price', 99);

---

CSS样式操作

（约400字）

添加/移除类

$('div').addClass('highlight');
$('p').toggleClass('active');

直接样式操作

$('span').css('color');
$('h1').css({
  'font-size': '24px',
  'color': 'blue'
});

---

DOM节点操作

（约600字）

创建元素

$('<div>动态创建</div>');

插入元素

// 内部插入
$('#box').append($newElement);
$('#list').prepend('<li>First</li>');

// 外部插入
$('#header').after('<div>广告</div>');
$('.footer').before('<hr/>');

克隆元素

$('#template').clone().appendTo('#container');

删除元素

$('.old-item').remove();
$('.temp-item').detach();

替换元素

$('#old').replaceWith('<div id="new">...</div>');

---

事件处理

（约500字）

基础事件绑定

$('#btn').click(function(){
  alert('Clicked!');
});

事件委托

$('#list').on('click', 'li', function(){
  $(this).toggleClass('selected');
});

常用事件类型

• click, hover, submit
• keypress, scroll
• mouseenter/mouseleave

自定义事件

$('#element').trigger('customEvent');

---

动画效果

（约400字）

显示/隐藏

$('#box').fadeIn(500);
$('.menu').slideUp();

自定义动画

$('.block').animate({
  left: '+=50px',
  opacity: 0.5
}, 1000);

动画队列控制

$('#element').stop().animate(...);

---

AJAX与DOM更新

（约400字）

加载远程内容

$('#content').load('data.html #section');

AJAX请求

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

JSON数据处理

$.getJSON('users.json', function(data){
  $.each(data, function(i, user){
    $('<li>').text(user.name).appendTo('#list');
  });
});

---

性能优化建议

（约300字） 1. 缓存jQuery对象

   var $header = $('#header');

1. 使用ID选择器优先
2. 批量DOM操作 “`javascript // 不好 for(let i=0; i<100; i++){ $('#list').append('
3. ’+i+’
’); }

// 好的做法 let items = “; for(let i=0; i<100; i++){ items += '

’+i+’

’; } $(‘#list’).append(items);

4. 事件委托代替重复绑定
5. 合理使用链式调用

---

## 总结
（约200字）
- jQuery仍然是简化DOM操作的强大工具
- 提供了比原生JS更简洁的API
- 注意现代浏览器已支持许多原生DOM方法
- 根据项目需求选择合适的技术方案
- 未来趋势：jQuery与现代框架(Vue/React)结合使用

> **提示**：本文示例基于jQuery 3.x版本，部分方法在旧版本中可能有差异。

注：实际撰写时需要： 1. 补充每个代码示例的详细说明 2. 添加更多实用场景案例 3. 插入示意图/对比表格 4. 增加浏览器兼容性说明 5. 补充实际项目中的应用技巧 6. 扩展各章节的字数以达到5500字要求