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 交互。