【笔记】jQuery 学习笔记

发表于 2019-11-22 更新于 2025-12-26 阅读次数：

前言

jQuery学习笔记

引入依赖

1	<script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>

调用jQuery

通常将jQuery对象的变量名用$作为前缀用于区分
$是jQuery的语法糖，在引入jQuery.js后，$和jquery都会作为window对象的属性

1	console.log(window.jQuery === window.$); // true

预加载函数

监听文档完全解析完成

1
2
3

$(document).ready(function () {
  ...
});

1
2
3

$("document").ready(function () {
  ...
});

1
2
3

$().ready(function () {
  ...
});

1
2
3

$(function () {
  ...
});

监听整个HTML页面加载完成

包含外部链接和图片资源

1
2
3

$(window).on("load", function () {
    ...
});

解决`$`冲突

修改jQuery变量名

1	var jqueryBackup = jquery.noConflict(true);

DOM对象与jQuery对象的转换

通过JS获取的DOM对象与通过jQuery获取的DOM对象之间的转换

DOM对象转换为jQuery对象

1 2	const dom = document.getElementById(); const $obj = $(dom);

jQuery对象转换为DOM对象

获取全部DOM对象

1	const dom = $obj.get();

获取指定下标的DOM对象

1	const dom = $obj[0];

1	const dom = $obj.get(0);

创建元素

1 2	var $div = $(`<div></div>`); $div.appendTo("body");

选择器

通过CSS选择器获取元素

通过CSS选择器语法，将HTML元素作为jQuery对象

1	var $obj = $("CSS选择器");

指定选择的范围

1	var $obj = $("CSS选择器", document.body);

通过jQuery额外的选择器获取元素

选择指定索引的元素

1	$("选择器:eq(1)");

选择第一个元素

1	$("选择器:first");

选择最后一个元素

1	$("选择器:last");

选择所有奇数个元素

1	$("选择器:odd");

选择所有偶数个元素

1	$("选择器:even");

选中所有可见的元素

:visible

选中所有隐藏的元素

:hidden

选中所有的标题元素

:header

匹配所有图像

1	$(":image")

匹配所有输入框

1	$(":input")

匹配所有单行文本框

1	$(":text")

匹配所有密码框

1	$(":password")

匹配所有单选按钮

1	$(":radio")

匹配所有复选框

1	$(":checkbox")

匹配所有提交按钮

1	$(":submit")

匹配所有重置按钮

1	$(":reset")

匹配所有按钮

1	$(":button")

匹配所有文件域

1	$(":file")

过滤器

jQuery的过滤器支持链式调用

选择指定索引的元素

1	$("选择器").eq(1);

选择第一个元素

1	$("选择器").first();

选择最后一个元素

1	$("选择器").last();

选择所有奇数个元素

1	$("选择器").odd();

选择所有偶数个元素

1	$("选择器").even();

删除匹配的元素

1	$("选择器").not(".div-1");

1	$("选择器").not(".div-1,.div-2");

保留匹配的元素

1	$("选择器").filter(".div-1");

1	$("选择器").filter(".div-1,.div-2");

操作文本

获取元素内的纯文本

操作所有匹配的元素

1	var $result = $("选择器").text();

修改元素内的纯文本

操作所有匹配的元素

1	$("选择器").text("");

获取元素内的HTML

操作第一个匹配的元素

1	var $result = $("选择器").html();

修改元素内的HTML

操作所有匹配的元素

1	$("选择器").html("<div></div>");

操作HTML元素的value属性

获取value属性值

操作第一个匹配的元素

1	var $result = $("选择器").val();

修改value属性值

操作所有匹配的元素

1	$("选择器").val("");

操作HTML元素的CSS样式

操作单个CSS样式

获取样式值

操作第一个匹配的元素

1	var $result = $("选择器").css("CSS属性名");

修改样式值

操作所有匹配的元素

1	var $result = $("选择器").css("CSS属性名", "CSS属性值");

操作多个CSS样式

获取样式值

操作第一个匹配的元素

1
2
3

var $result = $("选择器").css(["CSS属性名1", "CSS属性名2"]})

console.log($result); // {CSS属性名1: "CSS属性值1", CSS属性名2: "CSS属性值2"}

修改样式值

操作所有匹配的元素

1	var $result = $("选择器").css({CSS属性名1: "CSS属性值1", CSS属性名2: "CSS属性值2"});

操作CSS尺寸相关的样式

函数名	备注
`width`	元素宽
`innerWidth`	元素宽+内边距
`outerWidth`	元素宽+内边距+边框宽
`height`	元素高
`innerHeight`	元素高+内边距
`outerHeight`	元素高+内边距+边框宽

获取属性值

操作第一个匹配的元素

1	var $result = $("选择器").width();

修改属性值

操作所有匹配的元素

1	$("选择器").width(1);

1	$("选择器").width("1px");

操作HTML元素的Class属性

添加类名

操作所有匹配的元素

1	$("选择器").addClass("类名");

1	$("选择器").addClass("类名1 类名2");

删除类名

操作所有匹配的元素

删除所有类名

1	$("选择器").removeClass();

删除指定类名

1	$("选择器").removeClass("类名");

切换类名

有就删除，没有就添加
操作所有匹配的元素

切换所有类名

1	$("选择器").toggleClass();

切换指定类名

1	$("选择器").toggleClass("类名");

判断类名是否存在

hasClass()只能传递一个类名来判断是否存在，不要尝试使用空格隔开传递多个类名，会被当成一个类名进行匹配

1	var $result = $("选择器").hasClass("类名");

操作HTML属性

获取属性值

无论是HTML原生属性，还是HTML自定义属性（属性名前缀为data-的属性），都可以获取到属性值
操作第一个匹配的元素

1	var $result = $("选择器").attr("属性名");

修改属性值

操作所有匹配的元素

修改单个属性值

1	$("选择器").attr("属性名", "属性值");

修改多个属性值

1	$("选择器").attr({属性名1: "属性值1", 属性名2: "属性值2"});

删除属性

操作所有匹配的元素
HTML中的属性会被删除

1	$("选择器").removeAttr("属性名");

操作DOM属性

操作原生JS的DOM对象，而不是直接操作HTML元素

获取HTML原生属性值

只能获取到HTML原生属性
操作第一个匹配的元素

1	var $result = $("选择器").prop("属性名");

修改HTML原生属性值

操作所有匹配的元素

修改单个属性值

1	$("选择器").prop("属性名", "属性值");

修改多个属性值

1	$("选择器").prop({属性名1: "属性值1", 属性名2: "属性值2"});

删除HTML原生属性

虽然DOM中的属性被删除了，但是HTML中的属性不会被删除
操作所有匹配的元素

1	$("选择器").removeProp("属性名");

获取HTML自定义属性值

操作第一个匹配的元素

获取全部HTML自定义属性

1	<div data-username="" data-password=""></div>

1
2
3

var $result = $("选择器").data();

console.log($result); // {username: "", password: ""}

获取指定HTML自定义属性

1	var $result = $("选择器").data("属性名");

修改HTML自定义属性值

操作所有匹配的元素

1	var $result = $("选择器").data("属性名", "属性值");

删除HTML自定义属性

虽然DOM中的属性被删除了，但是HTML中的属性不会被删除
操作所有匹配的元素

1	$("选择器").removeData("属性名");

DOM操作

将其他元素插入到当前元素

操作所有匹配的元素

其他元素的类型

文本字符串

1	$("选择器").append("文本内容");

HTML标签

1	$("选择器").append("<div></div>");

jQuery对象

1	$("选择器").append($("选择器"));

JS的DOM对象

1	$("选择器").append(document.createElement("div"));

插入的位置

插入到前面

var $other = $("选择器");
var $current = $("选择器");

$current.before($other);

插入到后面

var $other = $("选择器");
var $current = $("选择器");

$current.after($other);

插入到所有子元素开头

var $other = $("选择器");
var $current = $("选择器");

$current.prepend($other);

插入到所有子元素末尾

var $other = $("选择器");
var $current = $("选择器");

$current.append($other);

将当前元素插入到其他元素

操作所有匹配的元素

当前元素的类型

选择器

1	$("选择器").appendTo("选择器");

jQuery对象

1	$("选择器").appendTo($("选择器"));

JS的DOM对象

1	$("选择器").appendTo(document.createElement("div"));

插入的位置

插入到所有子元素开头

var $other = $("选择器");
var $current = $("选择器");

$current.prependTo($other);

插入到所有子元素末尾

var $other = $("选择器");
var $current = $("选择器");

$current.appendTo($other);

删除元素

操作所有匹配的元素

删除所有后代元素

1	$("选择器").empty();

删除自己及所有后代元素

1	$("选择器").remove();

选中旧元素替换为新元素

操作所有匹配的元素

var $new = $("选择器");
var $old = $("选择器");

$old.replaceWith($new);

新元素的类型

文本字符串

1	$("选择器").replaceWith("文本内容");

HTML标签

1	$("选择器").replaceWith("<div></div>");

jQuery对象

1	$("选择器").replaceWith($("选择器"));

JS的DOM对象

1	$("选择器").replaceWith(document.createElement("div"));

选中新元素替换旧元素

操作所有匹配的元素

var $new = $("选择器");
var $old = $("选择器");

$new.replaceAll($old);

旧元素的类型

选择器

1	$("选择器").replaceAll("选择器");

jQuery对象

1	$("选择器").replaceAll($("选择器"));

JS的DOM对象

1	$("选择器").replaceAll(document.getElementById(""));

克隆

操作第一个匹配的元素

浅拷贝

1	var $result = $("选择器").clone();

1	var $result = $("选择器").clone(false);

深拷贝

1	var $result = $("选择器").clone(true);

事件

事件	备注
`click()`	鼠标左键单击
`dblclick()`	鼠标左键双击
`hover()`	鼠标悬浮
`mousedown()`	鼠标按下
`mouseup()`	鼠标抬起
`mouseenter()`	鼠标进入（不支持冒泡）
`mouseleave()`	鼠标离开（不支持冒泡）
`mouseover()`	鼠标进入（支持冒泡）
`mouseout()`	鼠标离开（支持冒泡）
`mousemove()`	鼠标移动
`keydown()`	键盘按下
`keyup()`	键盘抬起
`keypress()`	键盘输入
`load()`	页面资源加载完成
`upload()`	页面资源卸载完成
`ready()`	DOM准备就绪
`blur()`	元素失去焦点
`focus()`	元素获取焦点
`change()`	表单值改变
`submit()`	表单提交
`select()`	表单被选中
`resize()`	窗口尺寸变更
`scroll()`	滚动条滚动

添加事件

支持所有JS原生事件
操作所有匹配的元素

1
2
3

$("选择器").on("事件名", function ($event) {
  ...
});

1
2
3

$("选择器").事件名(function ($event) {
  ...
});

删除事件

操作所有匹配的元素

删除所有事件

1	$("选择器").off();

删除指定事件

1	$("选择器").off("事件名");

触发事件

操作所有匹配的元素

1	$("选择器").trigger("事件名");

为事件定义命名空间

添加事件

1
2
3

$("选择器").on("事件名.命名空间", function ($event) {
    ...
})

删除事件

1	$("选择器").off("事件名.命名空间");

事件回调函数的this

事件回调函数默认的this指向的是DOM，而不是jQuery对象
如果需要使用jQuery对象需要进行转换

$("选择器").on("事件名", function ($event) {
  console.log(this);
  console.log($(this));
});

事件回调函数的event

事件回调函数默认的event是jQuery对象
如果需要使用原生事件对象需要通过originalEvent属性获取

$("选择器").on("事件名", function ($event) {
  console.log($event);
  console.log($event.originalEvent);
});

阻止HTML元素的默认行为

1
2
3

$("选择器").on("事件名", function ($event) {
    $event.preventDefault();
});

阻止事件冒泡

为了浏览器的兼容性，jQuery的事件只会冒泡不会捕获

1
2
3

$("选择器").on("事件名", function ($event) {
    $event.stopPropagation();
});

事件委托

获取触发事件的节点

有可能是子元素触发的事件，由于事件冒泡使父节点也触发了事件，此时触发事件的节点为子节点

1
2
3

$("选择器").on("事件名", function ($event) {
    console.log($event.target);
})

定义可以事件委托的子节点范围

1
2
3

$("选择器").on("事件名", "子节点选择器", function ($event) {
    ...
})

动画

jQuery的动画实际上是通过JS的setInterval和setTimeout实现的，而不是CSS
jQuery的动画只支持将值为数字的CSS属性实现动画

自定义动画

{"CSS属性名1": 值, "CSS属性名2": 值}：执行动画之后的最终CSS样式
1000：达到最终CSS样式的延迟时间，单位毫秒
swing：动画效果

swing：缺省值，快、慢、快
linear：匀速

function () {}：动画执行结束之后的回调函数

1	$("选择器").animate({"CSS属性名1": 值, "CSS属性名2": 值});

1
2
3

$("选择器").animate({"CSS属性名1": 值, "CSS属性名2": 值}, 1000, "swing", function () {
    ...
});

$("选择器").animate({"CSS属性名1": 值, "CSS属性名2": 值}, {
    duration: 1000,
    easing: "swing",
    complate: function () {
        ...
    }
});

直接使用封装的动画函数

封装的动画函数	备注
`hide()`	隐藏
`show()`	显示
`toggle()`	切换隐藏和显示
`fadeIn()`	淡入
`fadeOut()`	淡出
`fadeToggle()`	切换淡入和淡出
`fadeTo()`	渐变到

1	$("选择器").hide();

1	$("选择器").hide(1000);

1
2
3

$("选择器").hide(1000, function () {
    ...
});

渐变到

1	$("选择器").fadeTo(1000, "hide");

1
2
3

$("选择器").fadeTo(1000, "hide", function () {
    ...
});

CSS属性值

数值

1	$("选择器").animate({"width": 0});

字符串

1	$("选择器").animate({"width": "0px"});

1	$("选择器").animate({"width": "0%"});

关键字

show：展示
hide：隐藏
toggle：切换

1	$("选择器").animate({"width": "show"});

运算表达式

1	$("选择器").animate({"width": "-=0px"});

动画延迟值

数值

单位毫秒

1	$("选择器").animate({"width": 0}, 1000);

关键字

slow：慢速，600ms
normal：缺省值，正常，400ms
fast：快速，200ms

1	$("选择器").animate({"width": 0}, "slow");

动画队列

对同一jQuery对象定义动画，会根据定义先后顺序自动组成动画队列，动画组会依次执行多个动画，而不是并行执行

1
2
3

$("选择器").animate({"width": 0});
$("选择器").animate({"width": 1});
$("选择器").animate({"width": 2});

查看动画队列

1	$("选择器").queue();

停止动画执行

停止当前动画

只停止当前动画，而不是动画队列中的所有动画

1	$("选择器").stop();

停止所有动画

停止动画队列中的所有动画，并清空动画队列

1	$("选择器").stop(true);

清空动画队列

执行完当前正在执行的动画，然后停止动画队列中的所有动画，并清空动画队列

1	$("选择器").stop(true, true);

遍历对象

1
2
3

for ($item of $("选择器")) {
  ...
}

通过实例方法遍历当前对象，回调函数返回false时会立即终止遍历

1
2
3

$("选择器").each(function (index, $item) {
  return true;
});

通过类方法遍历任意对象或数组，回调函数返回false时会立即终止遍历

1
2
3

jQuery.each($("选择器"), function (index, $item) {
  return true;
})

完成

参考文献

哔哩哔哩——DT课堂原名颜群
 脚本之家
 哔哩哔哩——web前端小清风

前言

引入依赖

调用jQuery

预加载函数

监听文档完全解析完成

监听整个HTML页面加载完成

解决$冲突

DOM对象与jQuery对象的转换

DOM对象转换为jQuery对象

jQuery对象转换为DOM对象

获取全部DOM对象

获取指定下标的DOM对象

创建元素

选择器

通过CSS选择器获取元素

指定选择的范围

通过jQuery额外的选择器获取元素

选择指定索引的元素

选择第一个元素

选择最后一个元素

选择所有奇数个元素

选择所有偶数个元素

选中所有可见的元素

选中所有隐藏的元素

选中所有的标题元素

匹配所有图像

匹配所有输入框

匹配所有单行文本框

匹配所有密码框

匹配所有单选按钮

匹配所有复选框

匹配所有提交按钮

匹配所有重置按钮

匹配所有按钮

匹配所有文件域

过滤器

选择指定索引的元素

选择第一个元素

选择最后一个元素

选择所有奇数个元素

选择所有偶数个元素

删除匹配的元素

保留匹配的元素

操作文本

获取元素内的纯文本

修改元素内的纯文本

获取元素内的HTML

修改元素内的HTML

操作HTML元素的value属性

获取value属性值

修改value属性值

操作HTML元素的CSS样式

操作单个CSS样式

获取样式值

修改样式值

操作多个CSS样式

获取样式值

修改样式值

操作CSS尺寸相关的样式

获取属性值

修改属性值

操作HTML元素的Class属性

添加类名

删除类名

删除所有类名

删除指定类名

切换类名

切换所有类名

切换指定类名

判断类名是否存在

操作HTML属性

获取属性值

修改属性值

修改单个属性值

修改多个属性值

删除属性

操作DOM属性

获取HTML原生属性值

修改HTML原生属性值

修改单个属性值

解决`$`冲突