jquery方法
jQuery 核心方法
jQuery 的核心方法包括 DOM 操作、事件处理、动画效果等。以下是一些常用方法：
$(selector)
通过选择器获取 DOM 元素，返回 jQuery 对象。
$('#id') // 通过 ID 选择
$('.class') // 通过类选择
$('div') // 通过标签选择 $(document).ready()
确保 DOM 加载完成后执行代码。
$(document).ready(function() {
// 代码逻辑
});
// 简写形式
$(function() { /* 代码逻辑 */ }); DOM 操作
html() / text()
获取或设置元素的 HTML 或文本内容。
$('#element').html('<p>New content</p>');
$('#element').text('New text'); val()
获取或设置表单元素的值。
$('input').val('New value'); attr() / removeAttr()
操作元素的属性。
$('img').attr('src', 'new-image.jpg');
$('img').removeAttr('alt'); 事件处理
on() / off()
绑定或解绑事件。
$('#button').on('click', function() {
alert('Clicked!');
});
$('#button').off('click'); click() / hover()
快捷事件方法。
$('#button').click(function() { /* 逻辑 */ });
$('#element').hover(
function() { /* 鼠标进入 */ },
function() { /* 鼠标离开 */ }
); 动画效果
hide() / show() / toggle()
隐藏或显示元素。
$('#box').hide(500); // 500ms 动画
$('#box').toggle(); fadeIn() / fadeOut()
淡入淡出效果。
$('#box').fadeIn(1000); // 1秒淡入
$('#box').fadeOut(1000); animate()
自定义动画。
$('#box').animate({
opacity: 0.5,
left: '+=50px'
}, 1000); AJAX 请求
$.ajax()
发起异步请求。
$.ajax({
url: 'api/data',
method: 'GET',
success: function(data) {
console.log(data);
},
error: function(err) {
console.error(err);
}
}); $.get() / $.post()
快捷 GET/POST 方法。
$.get('api/data', function(data) {
console.log(data);
});
$.post('api/submit', { name: 'John' }, function(response) {
console.log(response);
}); 遍历与筛选
each()
遍历 jQuery 对象。
$('li').each(function(index) {
console.log(index + ': ' + $(this).text());
}); find() / filter()
查找或筛选元素。
$('#container').find('.item'); // 查找子元素
$('div').filter('.active'); // 筛选符合条件的元素 链式调用
jQuery 支持链式调用，多个方法可连续执行。
$('#box')
.css('color', 'red')
.animate({ left: '100px' })
.fadeOut(); 以上方法覆盖了 jQuery 的常见用途，适用于 DOM 操作、事件处理、动画和 AJAX 交互。
