jQuery

作者: hemiao3000 | 来源:发表于2023-03-28 08:27 被阅读0次

jQuery 效果
jquery常用cdn
jQuery第一天笔记
JavaScript之jQuery
jQuery需要课上讲解的方法
优博精选|2018互联网优秀博客推荐（持续更新）
jquery实战
jQuery操作及动画效果
jQuery操作及动画效果
jQuery

[!warning] jQuery 退出前端的舞台了吗？
是的。原因很简单，因为 jQuery 的三大功能全部都有更好的替代品：

jQuery 的 DOM 操作功能被 Vue / React / Angular 从其他角度完美碾压，因为这些新的框架根本就不需要你操作 DOM……

jQuery 的动画功能被 Velocity.js 和 CSS 3 完全取代了，新库功能更强性能更佳……

jQuery 的 ajax 功能被 Axios 等库完全替代，因为 API 几乎一样，功能也一样（Axios 功能更强），新库的体积更小。同时 jQuery 的 DOM 功能那一部分是我们不需要的，所以我们就更不需要 jQuery 了……

另外 jQuery 的 IE 兼容功能已经完全没有用了。

所以 jQuery 除了用来学习 API 设计和维护旧项目几乎没有任何优势了。

1. 简介

jQuery 作为 JavaScript 库诞生于 2006 年 1 月，由 Johon Resig 编写、发布。它虽然不是第一款 JavaScript 库，但是是当今最流行的 JavaScript 库。

jQuery 的核心功能包括：

取得文档中的元素
修改页面的外观
改变文档的内容
响应用户的交互操作
为页面添加动态效果
无需刷新页面从服务器获取信息
简化常见的 JavaScript 任务

jQuery 有 1.x、2.x 和 3.x 三大版本。它们的主要区别在于：

1.x 版本支持低版本浏览器（特别是 IE8）；
2.x 版本则不支持低版本浏览器，从而『瘦身』很多；
3.x 版本更加激进，它需要利用新浏览器的 Strict Mode 特性和浏览器的新功能。

2. 选择器

jQuery 最强大、最吸引人的特性之一就是它能够简化在 DOM 中选择元素的任务。

jQuery 中可以通过与 CSS 相同的『选择器语法』来选中 DOM 树中的某个或某些元素节点。甚至 jQuery 还提供了它所特有的选择器。

1. jQuery 对象

在使用 jQuery 选择器时，我们首先必须使用 $() 函数来包装我们的 CSS 规则。而 CSS 规则作为参数传递到 jQuery 对象内部后，再返回包含页面中对应元素的『jQuery 对象』。随后，我们就可以对这个获取到的 DOM 节点进行行为操作了。

通过使用 jQuery 对象可以实现和使用 DOM 对象同样的效果。但是 jQuery 对象和 DOM 对象是不同的。

jQuery 对象和 DOM 对象是不同的体系中的对象，两者的属性和方法『不能（不能、不能）』混用。

你获得的是 DOM 对象（例如，getElementById 方法的返回值），接下来，你要使用的是 DOM 对象的属性和方法。
你获得的是 jQuery 对象（例如，$ 方法的返回值），接下来，你要使用的是 jQuery 对象的属性和方法。

jQuery 对象是 DOM 对象的容器、集合。一个 jQuery 对象中包含着一个或多个 DOM 对象。如果有需要，你可以从中取出 DOM 对象。

dom_obj = jquery_obj[0];

反过来，如果你手头拥有的是一个 DOM 对象，你也可以直接构造出一个 jQuery 对象，从而去使用 jQuery 体系中的属性和方法来简化代码。

jqeury_obj = $(dom_obj);

2. 核心选择器

类型选择器
id 选择器
class 选择器
选择器复合使用：与和或

例如：$('#box').css('color', 'red');

元素的 id（应该）具有唯一性，但是元素的标签名和 class 不具备唯一性，所以在使用标签选择器和 class 选择器时，可能会匹配多个，此时可以使用 jQuery 自带的 length 属性和 size 方法来查看匹配的元素个数。

我们通过 jQuery 的各种选择符和方法取得的结果集合会被包装在 jQuery 对象中。通过 jQeury 对象实际地操作这些元素会非常简单。

3. 属性选择器

选择器	说明
[attr]	具有属性 attr 的元素
[attr='val']	属性 attr 的值为 val 的元素
[attr!='val']	属性 attr 的值不为 val 的元素
[attr^='val']	属性 attr 的值以 val 开头的元素
[attr$='val']	属性 attr 的值以 val 结尾的元素
[attr*='val']	属性 attr 的值含有 val 的元素

4. 亲属关系选择器

选择器	说明
<选择器1> <选择器2>	在满足 <选择器1> 的元素的子孙元素中查找满足 <选择器2> 的元素
<选择器1> > <选择器2>	在满足 <选择器1> 的元素的子元素中查找满足 <选择器2> 的元素
<选择器1> + <选择器2>	匹配一个元素的紧邻弟弟元素，哥哥必须满足 <选择器1> ，弟弟必须满足 <选择器2>
<选择器1> ~ <选择器2>	匹配一个元素的所有弟弟元素，哥哥必须满足 <选择器1> ，弟弟必须满足 <选择器2>

5. 表单选择器

相较于 CSS 选择器，表单选择器是 jQuery『多』出来选择器。

表单选择器	说明
:input	选中所有的 input、textarea、select 元素
:text	选中所有的单行文本框
:password	选中所有的密码框
:radio	选中所有的单选按钮
:checkbox	选中所有的复选框
:submit	选中所有的提交按钮
:reset	选中所有的重置按钮
:button	选中所有的按钮

3. 过滤器

有些伪类、伪元素结合选择器使用起到了过滤结果集的作用，所以也称它们为『过滤器』，过滤器也叫筛选器。

jQuery 提供了若干伪选择器以便于在页面上选取表单元素。

1. 索引过滤器

索引过滤器	说明
:first	过滤出原结果集中的第一个元素
:last	过滤出原结果集中的最后一个元素
:not(<选择器>)	过滤出原结果集中不符合 <选择器> 的元素
:even	过滤出原结果集中索引为偶数的元素，索引从 0 开始
:odd	过滤出原结果集中索引为奇数的元素，索引从 0 开始
:eq(index)	过滤出原结果集中索引为指定索引的元素，索引从 0 开始
:gt(index)	过滤出原结果集中索引大于指定索引的元素，索引从 0 开始
:lt(index)	过滤出原结果集中索引小于指定索引的元素，索引从 0 开始

2. 内容过滤器

内容过滤器	说明
:contains(<text>)	过滤出原结果集中含有指定文本的元素
:has(<选择器>)	过滤出原结果集中含有符合 <选择器> 的子元素的元素
:empty	过滤出原结果集中不包含任何子元素或任何文本的元素

3. 身份过滤器

身份过滤器	说明
:parent	过滤出原结果集中『具有父亲身份<small>（即含有子元素或文本）</small>』的元素
:first-child	过滤出原结果集中『具有长子身份』的元素
:last-child	过滤出原结果集中『具有幼子身份』的元素
:only-child	过滤出原结果集中『具有独生子身份』的元素
:nth-child(odd \| even \| N)	过滤出原结果集中『具有特定儿子身份的元素』的元素。若传入数字，参数从 1 开始

4. 表单控件状态过滤器

表单控件状态过滤器	说明
:enabled	过滤出原结果集中处于『可用状态』的表单控件
:disabled	过滤出原结果集中处于『不可用状态』的表单控件
:checked	过滤出原结果集中处于『选中状态』的表单控件
:selected	过滤出原结果集中『被选中』的 `<option>` 元素

5. 可见性过滤器

可见性过滤器	说明
:hidden	过滤出原结果集中所有不可见元素。包括: `visibility: hidden`、 `display: none`、`<input type="hidden">`
:visible	过滤出原结果集中所有可见元素

4. 操作 DOM

1. 元素属性操作

attr 方法『同时兼具』对元素属性的『取值、设值』功能。

attr 方法当前操作是取值操作，还是设值操作？取决于方法的 参数细节 。
如果是『取值』操作，则该操作针对结果集中的『第一个』元素。
如果是『设值』操作，则该操作针对结果集中的『每一个』元素。

像 attr 方法这样，同时兼具取值和设值功能的常见方法还有： pro 方法、text 方法、html 方法、val 方法、css 方法。

关于它们的『取值』和『设值』、『第一个』和『每一个』问题后续不再重复讲解。

attr 方法常见形式:

取值：.attr( 属性名 )
设值：.attr( 属性名, 属性值 )
设值：.attr( {属性名:属性值, 属性名:属性值, ...} )

通过 removeAttr(属性名) 方法可以删除元素的指定属性，该操作针对结果集中的『每一个』元素。

[!attention] 注意
此处的『属性』指的是 HTML 属性（Attribute）。

2. HTML 属性和 DOM 属性、attr 方法和 prop 方法

Attribute 是指 HTML 中的属性；
Property 是指 DOM 中的属性。优先考虑使用。

由于页面上的元素，和内存中的元素对象（DOM 对象）是一一对应的。因此，大多数情况下，HTML 中的 attribute，DOM 中都有与之对应的 property 。

例如：

console.info( $('#li1').attr('id') );
console.info( $('#li1').prop('id') );

但是两者也有不一样的地方：

区别一：有可能没有

有些 DOM 中有的 property，HTML 中没有这样的 attribute

console.info( $('#li1').attr('nodeName') );
console.info( $('#li1').prop('nodeName') );

区别二：数据类型不一致

虽然有，但是有些 DOM 中的与之对应的 property 的值的类型却不一样

console.info( $('input').attr('disabled') );
console.info( $('input').prop('disabled') );

总的来说，在 JavaScript 中『优先考虑使用 Property』。

3. 元素内容操作

html 方法和 text 方法是对元素的 html 内容和文本内容进行读写操作。

取值：.html() 、 .text()
设值：.html(内容) 、 .text(内容)

.html 方法获取和设置的是 HTML 内容，例如：好好学习；.text 方法获取和设置的是纯文本内容，例如：好好学习 。

对于表单元素，jQuery 提供了 .val 方法获得表单元素的值进行读写。

取值：.val()
设值：.val(新值)

4. 元素样式操作

通过 .css 方法可以对样式的内容进行获取、设置操作。

取值：.css( 属性名 )
设值：.css( 属性名, 属性值 )

另外，对于元素的 class 属性的读写，jQuery 专门提供了方法：

.addClass(class属性值) 为元素的 class 属性追加（追加、追加）值。
.removeClass(class属性值) 为元素移除指定的 class。

.addClass 方法和 .removeClass 方法都是对选中的『每一个』元素生效。

5. 创建新的元素节点和插入新节点

通过 $(html) 即可创建一个元素节点（确切地说是一个 jQuery 对象），再通过上述方法可以为该（新）节点添加内容、属性、CSS 样式。

添加节点从『添加角度』和『添加位置』两个条件来看分为四种：

父子添加	说明
A.append(B)	在 A 元素的末尾添加 B 元素。添加后，A 是父元素，B 是其最后子元素
A.appendTo(B)	将 A 元素添加至 B 元素某位。添加后，B 是父元素，A 是其最后子元素
A.prepend(B)	在 A 元素的前部添加 B 元素。添加后，A 是父元素，B 是其第一子元素
A.prependTo(B)	将 A 元素添加至 B 元素前部。添加后，B 是父元素，A 是其第一子元素

兄弟添加	说明
A.after(B)	在 A 元素的后面添加 B 元素。添加后，A 是兄元素，B 是其弟元素
A.insertAfter(B)	将 A 元素添加到B元素的后面。添加后，B 是兄元素，A 是其弟元素
A.before(B)	在 A 元素的前面添加 B 元素。添加后，B 是兄元素，A 是其弟元素
A.insertBefore(B)	将 A 元素添加到 B 元素的前面。添加后，A 是兄元素，B 是其弟元素

.clone 方法是以复制的方式创建一个新的元素节点。默认情况下是不复制源元素的事件处理方法的。.clone(true) 表示也复制其事件处理方法。

6. 删除和替换元素节点

.remove 方法将会从页面上删除结果集中的『每一个』元素。

.empty 方法删除的并非元素本身，而是清空元素的所有『子元素』（包括文本内容），但本元素仍存在。

通过 .replaceWith 方法可以将结果集中的『每一个』元素替换成参数指定的 HTML 或 DOM 元素。

7. 遍历结果集中的元素

jQuery 提供了 .each 方法简化了 for 循环遍历结果集。该方法要求传入一个函数，jQuery 会循环调用这个函数。

该函数每一轮循环中有 this 关键字可用，它代表着本轮循环所处理的 DOM 对象。另外，该函数还接受一个形参 index，此参数为遍历的当前元素的下标索引，从 0 开始。

5. 事件

1. jQuery 的 ready 事件的两种写法

$(document).ready() 事件处理程序可以用来响应网页的加载（load）事件。

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

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

表面上看起来，$(document).ready() 实现了和 window.onload 同样的效果，但是两者有些许小区别：

触发时机不同
- window.onload 触发时，表示浏览器接受/下载了所有文档（例如，包括图片）；
- 而 $(document).ready() 触发时，表示 DOM 完全就绪并可用，此时页面所关联的文件并不意味下载完毕。
调用次数不同
- 一个页面上只能执行一次 window.onload；
- 但可以执行多个 $(document).ready()

2. 绑定事件

jQuery 还提供了 .bind() 方法进行事件的绑定。.bind() 方法需要两个必要的参数，一个是事件名称，另一个是处理函数。

除此之外，jQuery 为 .bind() 方法提供了简化方式： xxx() 方法。对于 xxx 事件直接使用 .xxx() 绑定方法，例如: .click() 方法。这样的绑定方法要求传入一个函数，表示当指定元素上发生此事件时，就执行所传入的函数。

3. 模拟鼠标悬停事件

hover() 方法模拟了鼠标悬停事件，当进入元素区域时，执行一个参数 function，离开元素区域时执行另一个参数 function 。

4. 移除事件

在 jQuery 中，可以通过 unbind() 方法可以移除绑定的所有事件或指定某一个事件，它是 bind() 操作的反向操作。

如果没有参数，则删除所有绑定事件。如果提供事件类型作为参数，则只删除该类型的绑定事件。如果还有第二个参数 function，则只移除绑定指定的函数。

6. 动画与特效

jQuery 中的 show() 与 hide() 方法，不仅可以实现「无动画」版的显示与隐藏，还可以完成有动画效果的显示和隐藏，只需要在为方法传入表示动画持续时间（或 slow | normal | fase）的参数。

slideDown() 和 slideUp() 方法实现了元素滑动的效果。

fadeIn() 和 faseOut() 方法实现了淡入淡出效果

jQuery 效果
目录 jQuery 隐藏/显示jQuery 淡入淡出jQuery 滑动jQuery 动画jQuery Callba...
jquery常用cdn
jQuery： jQuery mobile： jQuery UI：
jQuery第一天笔记
JQuery简介 JQuery常用方法 JQuery中的插件 JQuery简介 JQuery 的发展历史http:...
JavaScript之jQuery
九、jQuery 目录：初识jQuery及公式、jQuery选择器、jQuery事件、jQuery操作DOM元素 ...
jQuery需要课上讲解的方法
jQuery jQuery 核心jQuery() jQuery对象访问each()index()get()leng...
优博精选|2018互联网优秀博客推荐（持续更新）
前端开发 jQuery之家:jQuery之家致力于搜集和整理各种jQuery插件，jQuery特效，jquery ...
jquery实战
jQuery属性操作 jQuery特殊效果 jQuery动画 jQuery循环 jQuery其他事件自定义事件
jQuery操作及动画效果
jQuery样式操作 click事件 jQuery索引值 jQuery做选项卡 jQuery属性操作 jQuery...
jQuery操作及动画效果
jQuery样式操作 click事件 jQuery索引值 jQuery做选项卡 jQuery属性操作 jQuery...
jQuery
jQuery框架一、jQuery基础添加jQuery到网页 jQuery基本语法二、jQuery 选择器示...