选择器

基本选择器

$("p") // all

elements $(".btn") // class selector $("#main") // ID selector $("ul > li") // direct children $("input[type='text']") // attribute selector

常用选择器

$('*')	所有元素
$('a, span')	多选择器
$(':first')	第一个匹配元素
$(':last')	最后一个匹配元素
$(':even') / $(':odd')	偶数/奇数索引元素
$(':visible') / $(':hidden')	可见性过滤器
$(':contains(text)')	包含文本的元素
$(':has(selector)')	包含选择器匹配的元素

DOM 操作

内容与结构

$("#el").html("Bold");   // set inner HTML
$("#el").text("Plain text");     // set text content
$("ul").append("New
");  // add at end
$("ul").prepend("First
"); // add at start

插入与删除

$("

Hello

").insertAfter("#el"); // insert after $("

").insertBefore("#el"); // insert before $("#el").remove(); // remove element from DOM $("#el").empty(); // remove all children

方法

.html()	获取/设置内部 HTML
.text()	获取/设置文本内容
.append() / .prepend()	在末尾/开头添加子元素
.after() / .before()	在后面/前面插入兄弟元素
.wrap()	用新父元素包裹元素
.clone()	深度复制元素
.replaceWith()	替换元素

事件

绑定事件

$(".btn").on("click", function () {
  $(this).toggleClass("active");
});
$(document).on("click", ".dynamic", handler); // delegation
$(".btn").off("click"); // remove handler

简写方法

.click(fn)	点击事件处理器
.hover(fnIn, fnOut)	鼠标进入/离开
.focus() / .blur()	获得/失去焦点
.change(fn)	值改变（input/select）
.submit(fn)	表单提交
.keydown() / .keyup()	键盘事件

文档就绪

$(document).ready(function () { /* DOM loaded */ });
$(function () { /* shorthand */ });

动效与动画

显示 / 隐藏 / 切换

$("#el").hide(400);          // hide with animation
$("#el").show(400);          // show with animation
$("#el").toggle();           // toggle visibility
$("#el").fadeIn(600);        // fade in
$("#el").slideDown(400);     // slide down

自定义动画

$("#el").animate({
  opacity: 0.5,
  left: "+=50px",
  height: "toggle"
}, 1000, function () { /* complete */ });

动效方法

.fadeIn() / .fadeOut()	透明度动画
.fadeToggle()	淡入淡出切换
.slideDown() / .slideUp()	高度动画
.animate(props, ms)	自定义 CSS 动画
.stop()	停止当前动画
.delay(ms)	延迟下一个排队的动效

AJAX

简写方法

$.get("/api/data", function (data) { console.log(data); });
$.post("/api/data", { name: "Alice" }, function (res) {});
$.getJSON("/api/items", function (json) {});
$("#el").load("/fragment.html"); // load HTML into element

完整 $.ajax

$.ajax({
  url: "/api/data",
  method: "POST",
  data: JSON.stringify({ key: "val" }),
  contentType: "application/json",
  success: (res) => console.log(res),
  error: (xhr) => console.error(xhr.status)
});

AJAX 选项

url	请求 URL
method	HTTP 方法（GET、POST 等）
data	发送的数据
dataType	期望的响应类型
contentType	请求内容类型
success / error	回调函数
headers	自定义请求头

遍历

树形导航

$("li").parent();           // direct parent
$("li").parents("ul");      // all matching ancestors
$("ul").children("li");     // direct children
$("ul").find(".active");    // all matching descendants
$("li").siblings();         // sibling elements

遍历方法

.parent() / .parents()	直接父元素 / 所有祖先
.children() / .find()	直接子元素 / 所有后代
.siblings()	所有兄弟元素
.next() / .prev()	下一个/上一个兄弟
.closest(sel)	最近的匹配祖先
.first() / .last()	匹配集中的第一个/最后一个
.eq(index)	指定索引处的元素
.filter(sel)	缩小到匹配的元素

属性与 CSS

属性

$("img").attr("src");              // get attribute
$("img").attr("src", "new.jpg");   // set attribute
$("img").removeAttr("title");      // remove attribute
$("input").prop("checked", true);  // set property

CSS 与类

$(".box").css("color", "red");     // set single style
$(".box").css({ color: "red", fontSize: "14px" }); // multi
$("p").addClass("highlight");
$("p").removeClass("highlight");
$("p").toggleClass("active");
$("p").hasClass("active");         // returns boolean

表单

值与序列化

$("input").val();              // get value
$("input").val("new value");   // set value
$("form").serialize();         // "name=Alice&age=30"
$("form").serializeArray();    // [{name, value}, ...]

表单选择器

$(":input")	所有表单元素
$(":checked")	已选中的复选框/单选框
$(":selected")	已选中的 option 元素
$(":disabled")	已禁用的元素
$(":text")	文本输入框

工具方法

数组与对象辅助

$.each([1, 2, 3], function (i, val) { /* iterate */ });
$.each(obj, function (key, val) { /* iterate object */ });
$.extend({}, defaults, options); // merge objects
$.inArray("b", ["a", "b", "c"]); // returns 1 (index)

工具方法列表

$.each(arr, fn)	遍历数组或对象
$.extend(target, ...)	合并对象（浅拷贝）
$.inArray(val, arr)	值的索引（不存在返回 -1）
$.isArray(obj)	判断是否为数组
$.trim(str)	去除首尾空白
$.parseJSON(str)	解析 JSON 字符串
$.map(arr, fn)	转换数组元素

常见模式

链式调用

$("ul")
  .find("li")
  .addClass("item")
  .first()
  .css("font-weight", "bold");

插件模式

$.fn.highlight = function (color) {
  return this.each(function () {
    $(this).css("background", color || "yellow");
  });
};
$("p").highlight("pink");

冲突解决

// Avoid $ conflicts with other libraries
jQuery.noConflict();
jQuery(document).ready(function ($) {
  $(".btn").click(handler); // $ safe inside
});

JQUERY 快速参考