jQuery 入门教程学习摘要笔记_教程摘要-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43451006/article/details/99284629

本文全面介绍了jQuery的基础知识，包括语法、事件、效果、DOM操作及遍历方法，适合初学者快速掌握jQuery的核心功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以下为个人认为有必要记录的笔记不喜勿喷

jQuery简介
- 替代 jQuery 库
- - 使用Baidu 的 CDN
jQuery的缺点
jQuery语法
- 基础语法
- 文档就绪事件
jQuery选择器
jQuery事件
jQuery效果
Callback 函数
Chaining
jQuery - DOM 操作
jQuery遍历
写在后面

jQuery简介

字面意思其实就是JavaScript和查询（Query），即用于辅助开发JavaScript的库。

是免费、开源的，使用MIT许可协议。
jQuery 库可以通过一行简单的标记被添加到网页中。
jQuery 2版本以上是不支持 IE6，7，8 浏览器的。

替代 jQuery 库

如果希望将 jQuery 库存放在您的计算机上，那么根据 Google 和 Microsoft 对 jQuery 友好性，可以从 Google 或 Microsoft 加载 CDN jQuery 核心文件。

使用Baidu 的 CDN

推荐目前最稳定的，不会出现延时打不开情况。

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

如果网站包含许多页面，并且 jQuery 函数易于维护，那么请把jQuery 函数放到独立的 .js 文件中，通过src属性来引用文件。

jQuery的缺点

不能向后兼容。每一个新版本不能兼容早期的版本。
插件兼容性不是太好，与上一点类似。
在同一页面上使用多个插件时，很容易碰到冲突现象，尤其是这些插件依赖相同事件或selector时最为明显。
在大型框架中，jQuery核心代码库对动画和特效的支持相对较差。但是实际上这不是一个问题。目前在这方面有一个单独的jQuery UI项目和众多插件来弥补此点。

jQuery语法

通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法

$(selector).action()

美元符号定义 jQuery
选择符（selector）“查询"和"查找” HTML 元素
jQuery 的 action() 执行对元素的操作

文档就绪事件

所有 jQuery 函数位于一个 document ready 函数中。

 $(document).ready(function(){
 // 开始写 jQuery 代码...
 });

简洁写法（与以上写法效果相同）:

 $(function(){
 // 开始写 jQuery 代码...
 });

为了防止文档在完全加载（就绪）之前运行 jQuery 代码。

jQuery选择器

基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素，已经存在的 CSS 选择器，一些自定义的选择器。

对 HTML 元素组或单个元素进行操作。
jQuery 中所有选择器都以美元符号开头：$()。

jQuery 元素选择器

基于元素名选取元素 - $(“p”)

#id 选择器

通过 HTML 元素的 id 属性选取指定的元素 - $("#test")

类选择器

通过指定的 class 查找元素 - $(".test")

CSS 选择器

用于改变 HTML 元素的 CSS 属性 - $(“p”).css(“background-color”,“red”);

jQuery事件

常见的jQuery事件

常用的 jQuery 事件方法

(document).ready()

允许在文档完全加载完后执行函数。

click()

当按钮点击事件被触发时会调用一个函数。

该函数在用户点击 HTML 元素时执行。

dblclick()

当双击元素时触发blclick 事件。

mouseenter()

当鼠标指针穿过元素时触发 mouseenter 事件。

mouseleave()

当鼠标指针离开元素时会触发 mouseleave 事件。

mousedown()

当鼠标指针移动到元素上方，并按下鼠标按键会触发 mousedown 事件。

mouseup()

当在元素上松开鼠标按钮时会触发 mouseup 事件。

hover()

用于模拟光标悬停事件。

即函数(mouseenter)+函数(mouseleave)。

focus()

当元素获得焦点时会触发 focus 事件。

当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。

blur()

当元素失去焦点时会触发 blur 事件。

比较keypress、keydown与keyup

keydown：在键盘上按下某键时发生，一直按着则会不断触发（opera浏览器除外），它返回的是键盘代码;
keypress：在键盘上按下一个按键，并产生一个字符时发生, 返回ASCII码。注意: shift、alt、ctrl等键按下并不会产生字符，所以监听无效，换句话说，只有按下能在屏幕上输出字符的按键时keypress事件才会触发。若一直按着某按键则会不断触发。
keyup：用户松开某一个按键时触发，与keydown相对，返回键盘代码.

jQuery效果

hide()

隐藏HTML元素 - $(selector).hide(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

show()

显示HTML元素 - $(selector).show(speed,callback);

toggle()

切换 hide() 和 show() 方法 - $(selector).toggle(speed,callback);

可选的 callback 参数，具有以下三点说明：
- $(selector)选中的元素的个数为n个，则callback函数会执行n次。
- callback函数名后加括号，会立刻执行函数体，而不是等到显示/隐藏完成后才执行。
- callback既可以是函数名，也可以是匿名函数。

淡入淡出

fadeIn()

用于淡入已隐藏的元素 - $(selector).fadeIn(speed,callback);

fadeOut()

用于淡出可见元素 - $(selector).fadeOut(speed,callback);

fadeToggle()

可以在 fadeIn() 与 fadeOut() 方法之间进行切换 - $(selector).fadeToggle(speed,callback);

如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

fadeTo()

允许渐变为给定的不透明度（值介于 0 与 1 之间）- $(selector).fadeTo(speed,opacity,callback);

必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。

滑动

使元素上下滑动。

slideDown()

用于向下滑动元素 - $(selector).slideDown(speed,callback);

slideUp()

用于向上滑动元素 - $(selector).slideUp(speed,callback);

slideToggle()

可以在 slideDown() 与 slideUp() 方法之间进行切换 - $(selector).slideToggle(speed,callback);

动画

animate()

用于创建自定义动画 - $(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。
默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute。
当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名。
色彩动画并不包含在核心 jQuery 库中。
在值的前面加上 += 或 -=使用相对值。

停止动画

stop()

用于停止动画或效果，在它们完成之前 - $(selector).stop(stopAll,goToEnd);

适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
默认地，stop() 会清除在被选元素上指定的当前动画。

queue()

显示被选元素上要执行的函数队列 - $(selector).queue(queueName);

队列是一个或多个等待运行的函数。
个元素可以有若干队列。大部分通常只有一个，“fx” 队列，即默认的 jQuery 队列。

dequeue()

从队列中移除下一个函数，然后执行函数 - $(selector).dequeue(queueName);

应该确保 dequeue() 方法在通过 queue() 添加一个函数之后被调用，以便允许要继续的进程。

clearQueue()

从尚未运行的队列中移除所有项目 - $(selector).clearQueue(queueName);

请注意当函数开始运行时，它会一直运行直到完成。

delay()

对队列中的下一项的执行设置延迟 - $(selector).delay(speed,queueName);

finish()

停止当前运行的动画，移除所有排队的动画，并为被选元素完成所有动画。

$(selector).finish(queueName);

Callback 函数

在当前动画 100% 完成之后执行。

可以以参数的形式添加 Callback 函数。

Chaining

允许在一条语句中运行多个 jQuery 方法（在相同的元素上）。

可以按照希望的格式来写，包含换行和缩进。
jQuery 会抛掉多余的空格，并当成一行长代码来执行上面的代码行。

jQuery - DOM 操作

捕获

获取内容

拥有回调函数。

回调函数有两个参数：
- 被选元素列表中当前元素的下标
- 原始（旧的）值。
- 然后以函数新值返回希望使用的字符串。

text()

设置或返回所选元素的文本内容。

html()

设置或返回所选元素的内容（包括 HTML 标记）。

val()

设置或返回表单字段的值。

获得属性

attr()

用于获取属性值 - $(selector).attr(attribute);
- 返回第一个匹配元素的值。
也用于设置/改变属性值 - $(selector).attr(attribute,value);
- 为匹配元素设置一个或多个属性/值对。
允许同时设置多个属性 - $(selector).attr({attribute:value, attribute:value,…});
使用函数设置属性和值 - $(selector).attr(attribute,function(index,currentvalue));
- 规定要返回属性值到集合的函数。
- index - 接受集合中元素的 index 位置。
- currentvalue - 接受被选元素的当前属性值。

元素替换

selector.replaceWith( content );

concent 是想要替换原始元素的东西。

删除元素

empty()

从被选元素中删除子元素 - selector.empty( );

remove(expr)

删除被选元素（及其子元素） - selector.remove( [ expr ]);

也可接受一个参数，允许对被删元素进行过滤。

复制元素

clone( )

克隆匹配的 DOM 元素并选择克隆项。

clone( bool )

克隆匹配的 DOM 元素以及所有的事件处理程序，并选择克隆项。

添加元素

append()

在被选元素的结尾插入文本/HTML。

通过参数接收无限数量的新元素，用逗号分隔。
在选择元素内部嵌入。

prepend()

在被选元素的开头插入文本/HTML。

通过参数接收无限数量的新元素，用逗号分隔。
在选择元素内部嵌入。

after()

在被选元素之后插入内容。

通过参数接收无限数量的新元素，用逗号分隔。
在元素外面追加。

before()

在被选元素之前插入内容。

通过参数接收无限数量的新元素，用逗号分隔。
在元素外面追加。

CSS类

addClass()

向被选元素添加一个或多个类名 - $(selector).addClass(classname,function(index,oldclass));

不会移除已存在的 class 属性，仅仅添加一个或多个类名到 class 属性。
如需添加多个类，请使用空格分隔类名。

removeClass()

从被选元素移除一个或多个类 - $(selector).removeClass(classname,function(index,currentclass));

toggleClass()

对添加和移除被选元素的一个或多个类进行切换 - $(selector).toggleClass(classname,function(index,currentclass),switch);

检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。
通过使用 “switch” 参数，能够规定只删除或只添加类。
- 可选。布尔值，规定是否仅仅添加（true）或移除（false）类。

css()

设置或返回被选元素的一个或多个样式属性。

返回指定的 CSS 属性的值 - css(“propertyname”);
设置指定的 CSS 属性 - css(“propertyname”,“value”);
设置多个 CSS 属性 - css({“propertyname”:“value”,“propertyname”:“value”,…});

尺寸

jQuery的尺寸

width()

设置或返回被选元素的宽度。

当该方法用于返回宽度时，则返回第一个匹配元素的宽度。
当该方法用于设置宽度时，则设置所有匹配元素的宽度。
该方法不包含 padding、border 或 margin。

innerWidth()

返回第一个匹配元素的内部宽度。

该方法包含 padding，但不包含 border 和 margin。

outerWidth()

返回第一个匹配元素的外部宽度。

该方法包含 padding 和 border。
如需包含 margin，请使用 outerHeight(true)。

height()

设置或返回被选元素的高度。

当该方法用于返回高度时，则返回第一个匹配元素的高度。
当该方法用于设置高度时，则设置所有匹配元素的高度。
该方法不包含 padding、border 或 margin。

innerHeight()

返回第一个匹配元素的内部高度。

该方法包含 padding，但不包含 border 和 margin。

outerHeight()

返回第一个匹配元素的外部高度。

该方法包含 padding 和 border。
如需包含 margin，请使用 outerHeight(true)。

jQuery遍历

意为"移动"，用于根据其相对于其他元素的关系来"查找"（或选取）HTML 元素。

以某项选择开始，并沿着这个选择移动，直到抵达期望的元素为止。
遍历方法中最大的种类是树遍历（tree-traversal）。

通过索引找到元素

每个列表都有自己的索引，并且通过使用如下所示的例子中的 eq(index) 方法直接定位。

每个子元素的索引都是从 0 开始。

过滤元素

过滤器(选择器)方法filter()可以用来从匹配的元素集合中过滤掉与指定的选择器不匹配的所有元素。选择器可以使用任何选择器的语法来编写。

定位后代元素

find (选择器)方法可以用于定位某一特定类型元素的所有后代元素。选择器可以通过使用任何选择器的语法来编写。

（此处省略了许多DOM的遍历方法和过滤方法）

遍历祖先

祖先是父、祖父、曾祖父，依此类推。

parent()

返回被选元素的直接父元素 - $(selector).parent(filter);

只沿着 DOM 树向上遍历单一层级。

parents()

返回被选元素的所有祖先元素 - $(selector).parents(filter);

从父元素向上遍历 DOM 元素的祖先，直至文档根元素的所有路径（<html>）。
如果 filter 参数为空，该方法将从直接父元素直至 <body> 和 <html> 的所有路径中选取元素集合中的所有祖先。

closest()

返回被选元素的第一个祖先元素。

closest()和parents()不同点：
- closest()
  - 从当前元素开始。
  - 沿 DOM 树向上遍历，并返回匹配所传递的表达式的第一个单一祖先。
  - 返回包含零个或一个元素的 jQuery 对象。
- parents()
- 从父元素开始。
- 沿 DOM 树向上遍历，并返回匹配所传递的表达式的所有祖先。
- 返回包含零个、一个或多个元素的 jQuery 对象。