jQuery 方法概述
jQuery 是一个快速、小巧、功能丰富的 JavaScript 库。它极大地简化了 HTML 文档的遍历和操作、事件处理、动画和 Ajax 交互。
1. DOM 操作
1.1 选择器
- $()：选择元素。
$('p'); // 选择所有 <p> 元素 $('.class'); // 选择所有 class 为 "class" 的元素 $('#id'); // 选择 id 为 "id" 的元素
1.2 属性操作
-
attr()：设置或获取属性值。
$('img').attr('src', 'image.jpg'); // 设置 <img> 元素的 src 属性 $('img').attr('src'); // 获取 <img> 元素的 src 属性 -
removeAttr()：移除属性。
$('img').removeAttr('src'); // 移除 <img> 元素的 src 属性 -
prop()：设置或获取属性值（用于布尔属性）。
$('input').prop('checked', true); // 设置 <input> 元素的 checked 属性 -
val()：设置或获取表单元素的值。
$('input').val('Hello'); // 设置 <input> 元素的值 $('input').val(); // 获取 <input> 元素的值
1.3 内容操作
-
html()：设置或获取元素的 HTML 内容。
$('div').html('<p>Hello</p>'); // 设置 <div> 元素的 HTML 内容 $('div').html(); // 获取 <div> 元素的 HTML 内容 -
text()：设置或获取元素的文本内容。
$('div').text('Hello'); // 设置 <div> 元素的文本内容 $('div').text(); // 获取 <div> 元素的文本内容 -
append()：在元素末尾追加内容。
$('div').append('<p>Hello</p>'); // 在 <div> 元素末尾追加 <p> 元素 -
prepend()：在元素开头插入内容。
$('div').prepend('<p>Hello</p>'); // 在 <div> 元素开头插入 <p> 元素 -
before()：在元素之前插入内容。
$('div').before('<p>Hello</p>'); // 在 <div> 元素之前插入 <p> 元素 -
after()：在元素之后插入内容。
$('div').after('<p>Hello</p>'); // 在 <div> 元素之后插入 <p> 元素 -
remove()：移除元素。
$('div').remove(); // 移除所有 <div> 元素 -
empty()：清空元素内容。
$('div').empty(); // 清空所有 <div> 元素的内容
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(); // 显示所有 <div> 元素 -
hide()：隐藏元素。
$('div').hide(); // 隐藏所有 <div> 元素 -
toggle()：切换元素的显示和隐藏状态。
$('div').toggle(); // 切换所有 <div> 元素的显示和隐藏状态 -
fadeIn()：淡入元素。
$('div').fadeIn(); // 淡入所有 <div> 元素 -
fadeOut()：淡出元素。
$('div').fadeOut(); // 淡出所有 <div> 元素 -
slideToggle()：滑动切换元素的显示和隐藏状态。
$('div').slideToggle(); // 滑动切换所有 <div> 元素的显示和隐藏状态 -
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 大大简化了前端开发的复杂性，提高了开发效率和代码的可维护性。
