**1. DOM 选择与遍历**
**(1) 选择器**
- `$(selector)`：通过 CSS 选择器匹配元素。
- `$('element')`、`$('.class')`、`$('#id')`、`$('[attr=value]')`。
**示例**：
javascript
$('p') // 选择所有 <p> 元素
$('.highlight') // 选择所有 class="highlight" 的元素
$('#main') // 选择 id="main" 的元素
$('a[href^="https"]') // 选择所有 href 以 https 开头的链接
**(2) 遍历方法**
- `parent()`、`children()`、`siblings()`：父子兄弟元素。
- `find(selector)`：查找后代元素。
- `next()`、`prev()`：下一个/上一个同级元素。
**示例**：
javascript
$('li').parent() // 获取所有 li 的父元素
$('#container').find('p') // 获取 #container 内的所有 p 元素
$('h1').next() // 获取 h1 后的下一个元素
**2. DOM 操作**
**(1) 修改内容**
- `text()`：获取或设置文本内容。
- `html()`：获取或设置 HTML 内容。
- `val()`：获取或设置表单元素的值。
**示例**：
javascript
$('h1').text('新标题') // 设置 h1 的文本
$('p').html('<b>粗体</b>') // 设置 p 的 HTML
$('#input').val('默认值') // 设置输入框的值
**(2) 属性操作**
- `attr(name, value)`：获取或设置属性。
- `removeAttr(name)`：移除属性。
- `addClass()`、`removeClass()`、`toggleClass()`：操作 CSS 类。
**示例**：
javascript
$('img').attr('src', 'new-image.jpg') // 修改图片 src
$('a').removeAttr('target') // 移除 target 属性
$('div').addClass('active') // 添加 active 类
**(3) DOM 元素操作**
- `append()`、`prepend()`：在元素内部添加内容。
- `after()`、`before()`：在元素外部添加内容。
- `remove()`、`empty()`：移除或清空元素。
**示例**：
javascript
$('ul').append('<li>新项目</li>') // 在 ul 末尾添加 li
$('h2').after('<p>副标题</p>') // 在 h2 后添加 p
$('.delete-me').remove() // 移除所有 class="delete-me" 的元素
**3. 事件处理**
- `on(event, handler)`：绑定事件处理函数。
- `click()`、`submit()`、`hover()`：简写方法。
- `event.preventDefault()`：阻止默认行为。
- `event.stopPropagation()`：阻止事件冒泡。
**示例**：
javascript
$('button').click(function() { // 点击事件
alert('按钮被点击！');
});
$('form').submit(function(e) { // 表单提交事件
e.preventDefault(); // 阻止表单默认提交
console.log('表单提交被拦截');
});
$('a').on('mouseenter', function() { // 鼠标进入事件
$(this).addClass('hover');
});
**4. 动画与效果**
- `show()`、`hide()`、`toggle()`：显示/隐藏元素。
- `fadeIn()`、`fadeOut()`、`fadeToggle()`：淡入淡出。
- `slideDown()`、`slideUp()`、`slideToggle()`：滑动效果。
- `animate(properties, duration, easing, callback)`：自定义动画。
**示例**：
javascript
$('div').hide(500); // 500ms 内隐藏元素
$('p').fadeIn(1000); // 1s 内淡入显示
$('img').animate({ // 自定义动画
width: 'toggle',
height: '50%'
}, 800);
**5. AJAX 请求**
- `$.ajax(options)`：通用 AJAX 方法。
- `$.get(url, callback)`：GET 请求。
- `$.post(url, data, callback)`：POST 请求。
- `$.getJSON(url, callback)`：获取 JSON 数据。
**示例**：
javascript
$.get('https://api.example.com/data', function(data) {
console.log('成功获取数据:', data);
});
$.ajax({
url: '/submit',
method: 'POST',
data: { name: 'Alice', age: 30 },
success: function(response) {
console.log('提交成功:', response);
},
error: function(error) {
console.error('请求失败:', error);
}
});
**6. 工具方法**
- `$.each(collection, callback)`：遍历数组或对象。
- `$.trim(string)`：去除字符串两端空格。
- `$.parseJSON(jsonString)`：解析 JSON 字符串。
- `$.extend(target, source)`：合并对象。
**示例**：
javascript
$.each([1, 2, 3], function(index, value) {
console.log(`索引 ${index} 的值是 ${value}`);
});
var obj = $.extend({}, {a: 1}, {b: 2}); // 合并对象
console.log(obj); // 输出: {a: 1, b: 2}
**7. 文档就绪事件**
确保 DOM 完全加载后执行代码：
javascript
$(document).ready(function() {
// 代码在这里执行
});
// 简写形式
$(function() {
// 等价于上面的写法
});
**8. 链式调用**
jQuery 方法通常返回 jQuery 对象，支持链式调用：
javascript
$('p')
.addClass('highlight')
.css('font-size', '18px')
.fadeIn(500);
**9. 常见场景**
**(1) 表单验证**
javascript
$('form').submit(function(e) {
var input = $('#username').val();
if (input.trim() === '') {
e.preventDefault();
alert('用户名不能为空！');
}
});
**(2) 选项卡切换**
javascript
$('.tab-button').click(function() {
var tabId = $(this).attr('data-tab');
$('.tab-content').hide();
$(`#${tabId}`).show();
});
**(3) 动态加载内容**
javascript
$('#load-more').click(function() {
$.get('/more-data', function(data) {
$('#content').append(data);
});
});
**10. 注意事项**
1. **版本差异**：jQuery 3.x 移除了一些旧特性，确保版本兼容。
2. **性能优化**：缓存选择器结果，避免重复查询 DOM。
3. **替代方案**：现代项目可考虑使用原生 JavaScript（如 `document.querySelector`）或框架（React、Vue）。
掌握这些方法后，你可以高效地操作 DOM、处理事件和实现交互效果。