jQuery

精选 jQuery 常用指令与核心速查备忘单，涵盖高频用法、配置参数与实用技巧。 这份 jQuery 速查表适合初学者与有经验的开发者快速查阅。

Star 项目
关注 X (Twitter)
赞赏饮咖啡

#🚀 入门指引

#引入 jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

官方 CDN

<script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  crossorigin="anonymous"
></script>

#jQuery 语法

$(selector).methodOrFunction();

示例

$('#menu').on('click', function () {
  $(this).hide();
});

$('body').css('background', 'red');

#jQuery 文档就绪

$(document).ready(function () {
  // DOM 加载完成后运行
  alert('DOM fully loaded!');
});

$(function () {
  // DOM 加载完成后运行
  alert('DOM fully loaded!');
});

#jQuery 选择器

#💡 实用示例

$('button').click(() => {
  $(':button').css('color', 'red');
});

组合选择器

$('selector1, selector2 ...selectorn');

#基础选择器

#基础过滤器 (Basic Filters)

#属性选择器 (Attribute)

#子元素过滤器 (Child Filters)

#表单选择器 (Forms)

#jQuery 属性操作

#💡 实用示例

$('h2').css({
  color: 'blue',
  backgroundColor: 'gray',
  fontSize: '24px'
});

jQuery addClass 添加类

$('.button').addClass('active');

jQuery removeClass 移除类

$('.button').on('mouseleave', (evt) => {
  let e = evt.currentTarget;
  $(e).removeClass('active');
});

jQuery .toggleClass 切换类

$('.choice').toggleClass('highlighted');

#属性方法 (Attributes)

数据方法 (Data)

#CSS 样式操作 (CSS)

#尺寸方法 (Dimensions)

#位置方法 (Offset)

#jQuery DOM 操作

#💡 实用示例

/*<span>Span.</span>*/
$('span').after('<p>Paragraph.</p>');
/*<span>Span.</span><p>Paragraph.</p>*/

/*<span>Span.</span>*/
$('<span>Span.</span>').replaceAll('p');
/*<p>Span.</p>*/

/*<span>This is span.</span>*/
$('span').wrap('<p></p>');
/*<p><span>This is span.</span></p>*/

#复制方法 (Copying)

#DOM 插入（环绕）

#DOM 插入（内部）

#DOM 插入（外部）

#DOM 移除 (DOM Removal)

#DOM 替换 (DOM Replacement)

#jQuery 遍历

#过滤方法 (Filtering)

#其他遍历方法 (Miscellaneous Traversing)

#树形遍历 (Tree Traversal)

#jQuery 事件处理 (jQuery Events)

#💡 实用示例

// 鼠标事件 'click'
$('#menu-button').on('click', () => {
  $('#menu').show();
});

// 键盘事件 'keyup'
$('#textbox').on('keyup', () => {
  $('#menu').show();
});

// 滚动事件 'scroll'
$('#menu-button').on('scroll', () => {
  $('#menu').show();
});

事件对象 (Event object)

$('#menu').on('click', (event) => {
  $(event.currentTarget).hide();
});

方法链 (Method chaining)

$('#menu-btn')
  .on('mouseenter', () => {
    $('#menu').show();
  })
  .on('mouseleave', () => {
    $('#menu').hide();
  });

阻止事件传播 (Prevents the event)

$('p').click(function (event) {
  event.stopPropagation();
  // 执行其他操作
});

#浏览器事件 (Browser Events)

#事件对象属性和方法 (Event Object)

#文档加载事件 (Document Loading)

#事件处理器绑定 (Event Handler Attachment)

#表单事件 (Form Events)

#键盘事件 (Keyboard Events)

#鼠标事件 (Mouse Events)

#jQuery 动画效果

#💡 实用示例

$('#menu-button').on('click', () => {
  // $('#menu').fadeIn(400, 'swing')
  $('#menu').fadeIn();
});

淡出效果 (fadeOut effect)

$('#menu-button').on('click', () => {
  // $('#menu').fadeOut(400, 'swing')
  $('#menu').fadeOut();
});

#基础效果 (Basics)

#滑动效果 (Sliding)

#自定义动画 (Custom)

#淡入淡出效果 (Fading)

#jQuery Ajax 请求

#💡 实用示例

$.ajax({
  url: this.action,
  type: this.method,
  data: $(this).serialize()
})
  .done(function (server_data) {
    console.log('成功: ' + server_data);
  })
  .fail(function (jqXHR, status, err) {
    console.log('失败: ' + err);
  });

#全局 Ajax 事件处理器 (Global Ajax Event Handlers)

#辅助函数 (Helper Functions)

#底层接口 (Low-Level Interface)

#快捷方法 (Shorthand Methods)

#其他功能

#jQuery 对象 (jQuery Object)

#延迟对象

#实用工具 (Utilities)

#DOM 元素方法

#内部方法 (Internals)

#回调对象 (Callbacks Object)