jQuery 方法概述
jQuery 是一个快速、小巧、功能丰富的 JavaScript 库。它极大地简化了 HTML 文档的遍历和操作、事件处理、动画和 Ajax 交互。
1. DOM 操作
1.1 选择器
$()：选择元素。$('p'); // 选择所有
元素
$('.class'); // 选择所有 class 为 "class" 的元素
$('#id'); // 选择 id 为 "id" 的元素
1.2 属性操作
attr()：设置或获取属性值。
$('img').attr('src', 'image.jpg'); // 设置 元素的 src 属性
$('img').attr('src'); // 获取 元素的 src 属性
removeAttr()：移除属性。
$('img').removeAttr('src'); // 移除 元素的 src 属性
prop()：设置或获取属性值（用于布尔属性）。
$('input').prop('checked', true); // 设置 元素的 checked 属性
val()：设置或获取表单元素的值。
$('input').val('Hello'); // 设置 元素的值
$('input').val(); // 获取 元素的值
1.3 内容操作
html()：设置或获取元素的 HTML 内容。
$('div').html('
Hello
'); // 设置$('div').html(); // 获取
text()：设置或获取元素的文本内容。
$('div').text('Hello'); // 设置
$('div').text(); // 获取
append()：在元素末尾追加内容。
$('div').append('
Hello
'); // 在元素
prepend()：在元素开头插入内容。
$('div').prepend('
Hello
'); // 在元素
before()：在元素之前插入内容。
$('div').before('
Hello
'); // 在元素
after()：在元素之后插入内容。
$('div').after('
Hello
'); // 在元素
remove()：移除元素。
$('div').remove(); // 移除所有
empty()：清空元素内容。
$('div').empty(); // 清空所有
2. 事件处理
on()：绑定事件处理器。
$('button').on('click', function() {
alert('Button clicked');
});
off()：移除事件处理器。
$('button').off('click'); // 移除所有 click 事件处理器
one()：绑定一次性事件处理器。
$('button').one('click', function() {
alert('Button clicked once');
});
trigger()：触发事件。
$('button').trigger('click'); // 触发 click 事件
3. 动画效果
show()：显示元素。
$('div').show(); // 显示所有
hide()：隐藏元素。
$('div').hide(); // 隐藏所有
toggle()：切换元素的显示和隐藏状态。
$('div').toggle(); // 切换所有
fadeIn()：淡入元素。
$('div').fadeIn(); // 淡入所有
fadeOut()：淡出元素。
$('div').fadeOut(); // 淡出所有
slideToggle()：滑动切换元素的显示和隐藏状态。
$('div').slideToggle(); // 滑动切换所有
animate()：自定义动画。
$('div').animate({ opacity: '0.5', height: '100px' }, 1000); // 自定义动画
4. AJAX
$.ajax()：发送 AJAX 请求。
$.ajax({
url: 'example.php',
type: 'POST',
data: { key: 'value' },
success: function(response) {
console.log(response);
},
error: function(xhr, status, error) {
console.error(error);
}
});
$.get()：发送 GET 请求。
$.get('example.php', { key: 'value' }, function(response) {
console.log(response);
});
$.post()：发送 POST 请求。
$.post('example.php', { key: 'value' }, function(response) {
console.log(response);
});
$.getJSON()：发送 GET 请求并期望返回 JSON 数据。
$.getJSON('example.php', { key: 'value' }, function(data) {
console.log(data);
});
5. 其他常用方法
each()：遍历集合中的每个元素。
$('li').each(function(index, element) {
console.log(index, element);
});
map()：映射集合中的每个元素。
var items = $('li').map(function() {
return $(this).text();
}).get();
console.log(items);
addClass()：添加类。
$('div').addClass('active'); // 添加 "active" 类
removeClass()：移除类。
$('div').removeClass('active'); // 移除 "active" 类
toggleClass()：切换类。
$('div').toggleClass('active'); // 切换 "active" 类
css()：设置或获取样式属性。
$('div').css('color', 'red'); // 设置颜色为红色
$('div').css('color'); // 获取颜色
使用场景
DOM 操作：用于动态修改页面内容，如插入、删除、修改元素。事件处理：用于处理用户的交互操作，如点击、鼠标悬停、键盘事件。动画效果：用于创建动态效果，如淡入、淡出、滑动。AJAX：用于异步请求服务器数据，实现无刷新页面更新。其他常用方法：用于遍历、映射、类操作和样式操作。
底层原理
DOM 操作：jQuery 封装了浏览器的原生 DOM API，提供了一致的接口，使得跨浏览器操作更加简单。事件处理：jQuery 通过事件委托和事件冒泡机制，优化了事件处理的性能和兼容性。动画效果：jQuery 通过定时器和 CSS 过渡效果，实现了平滑的动画效果。AJAX：jQuery 封装了 XMLHttpRequest 对象，提供了简单易用的 AJAX 方法。其他常用方法：jQuery 提供了丰富的实用方法，简化了常见的开发任务。
通过这些方法和原理，jQuery 大大简化了前端开发的复杂性，提高了开发效率和代码的可维护性。