r3f.cn
GitHub Repo stars

jQuery

这份 jQuery 速查表对初学者和有经验的开发者来说都是一个很好的参考。

#入门指南

#引入 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 已完全加载！");
});

$(function () {
  // DOM 加载完成后运行。
  alert("DOM 已完全加载！");
});

#jQuery 选择器

#示例

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

#组合选择器

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

#基础选择器

#基本筛选器

#属性选择器

#子元素筛选器

#表单选择器

#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");

#属性操作

#数据

#CSS 操作

#尺寸

#偏移

#jQuery DOM 操作

#示例

/*<span>Span 元素。</span>*/
$("span").after("<p>段落。</p>");
/*<span>Span 元素。</span><p>段落。</p>*/

/*<span>Span 元素。</span>*/
$("<span>Span 元素。</span>").replaceAll("p");
/*<p>Span 元素。</p>*/

/*<span>这是一个 span 元素。</span>*/
$("span").wrap("<p></p>");
/*<p><span>这是一个 span 元素。</span></p>*/

#复制

#DOM 插入（环绕）

#DOM 插入（内部）

#DOM 插入（外部）

#DOM 移除

#DOM 替换

#jQuery 遍历

#筛选

#其他遍历方法

#树遍历

#jQuery 事件

#示例

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

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

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

#事件对象

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

#方法链

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

#阻止事件

$("p").click(function (event) {
  event.stopPropagation();
  // 执行某些操作
});

#浏览器事件

#事件对象

#文档加载

#事件处理程序附加

#表单事件

#键盘事件

#鼠标事件

#jQuery 效果

#示例

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

#fadeOut 效果

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

#基本效果

#滑动效果

#自定义效果

#淡入淡出效果

#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 事件处理程序

#辅助函数

#底层接口

#简写方法

#其他

#jQuery 对象

#Deferred 对象

#实用工具

#DOM 元素方法

#内部构件

#Callbacks 对象