**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、处理事件和实现交互效果。