jQuery学习笔记

作者：寒青

链接：https://segmentfault.com/a/1190000014818364

jQuery大部分功能需要根据文档的DOM模型来工作，首先需要正确地解析到整个文档的DOM模型结构。使用jQuery需要在整个文档被浏览器完全加载后才开始进行。

是在jQuery中使用的变量名，可以使用 避免冲突，它的返回值就是jQuery对象。

jQuery对象与DOM对象之间的转换

使用 得到的是一个jQuery对象。它封装了很多 DOM 对象的操作，但是它和 DOM 对象之间是不同的。只有当 是一个DOM对象时才能使用 ；相应地，如果是jQuery对象应该使用 。

从 DOM 对象转到 jQuery 对象：

从 jQuery 对象转到 DOM 对象：

比较正规地从 jQuery 对象到 DOM 的转换，是使用 jQuery 对象的 方法：

jQuery选择器1、常规选择器

选择所有节点

ID选择器，注意其中的一些特殊字符，如

类选择器

标签选择器

获取焦点元素

选择第一个/最后一个元素

截取第一个/最后一个符合条件的元素

直接兄弟元素

兄弟元素

索引选择，索引从1开始

2、属性选择器

属性中包括某单词

属性完全等于指定值

属性不等于指定值

包括有指定属性的元素

3、控件选择器

选择所有被选中的元素

被选择的元素

选择被禁用/未禁用的元素

隐藏元素，不仅是 ，还有

可见控件， 和 同样被认为是可见

具体控件，图像控件是

4、其他选择器

多个AND条件

多个OR条件

否定选择

包含有指定内容的元素

列表索引选择（不支持负数）

符合条件的再次过滤

选择 标题元素

仅有一个子元素的元素

空元素，即无内容也无元素

非空元素

节点漫游1、调用链处理

向已有的节点序列中添加新的对象

在调用链中，随时加入原始序列

指定索引选取节点，支持负数

序列选择

节点回溯

2、子节点

所有的子节点，可加入过滤条件，

3、兄弟节点

选择兄弟节点

4、父节点

父节点选择

元素控制1、和 的区别

是XML结构中的属性节点

是DOM对象，对象属性

2、类与属性控制

添加一个类，判断是否有指定类，删除类

类的开关式转换

获取或设置一个属性值

用法同 ，只是对象变成了

删除属性

设置或获取元素的表单值，通常用于表单元素

设置或获取元素的节点

3、样式控制

获取或设置指定的CSS样式

获取或设置元素的宽和高

元素的其他尺寸值

获取或设置滚动条的位置

获取元素的坐标。 是相对于 ， 是相对于父级元素

4、结构控制

1、文本节点

设置和获取节点的文本值。设置时 会转义标签，获取时 会移除所有标签。

2、子节点

参数可以有多种形式：

3、兄弟节点

4、父节点

5、复制/删除/替换节点

复制节点，可选参数表示是否处理已绑定的事件与数据

处理当前节点的事件与数据

处理当前节点及所有子节点的事件与数据

暂时移除节点，之后可以再次恢复指定位置

永久移除节点

清除一个节点的所有内部内容

移除节点的父节点

工具函数

遍历所有成员

序列切片，支持一个或两个参数，支持负数

通用工具

遍历列表， 可以用于对象

合并对象，第一个参数表示是否进行递归深入

合并列表

过滤列表，第三个参数表示是否为取反

存在判断

类型判断

空函数

当前时间戳，值为

把字符串解析为对象

去头去尾

判断参数的类型

遍历后去重。

上下文绑定

为函数绑定上下文

当一个函数被传递之后，它就失去了原先的上下文。

把数据存到节点中

jQuery提供了一种机制，可以把节点作为数据存储的容器。

往节点中获取/设置数据

删除数据

在内部实现上，jQuery会在指定节点添加一个内部标识，以此为 ，把数据存在内部闭包的一个结构中。

事实上，jQuery的事件绑定机制也使用了这套数据接口。

事件处理1、事件绑定

在 jQuery1.7之后，推荐统一使用 来进行事件绑定。

绑定事件 的基本使用方式是：

移除事件

绑定单次事件

对于 ，它默认的上下文是触发事件的节点：

使用 可以随意控制上下文：

参数还支持通过：

以 分割的子名字

以空格分割的多个事件

多个事件：

的另一种调用形式：

的使用方式与 完全类似：

2. 事件触发

事件的触发有两种方式，一是使用预定的“事件函数”（ ， ），二是使用 或 。

与 不同之处在于前面是触发事件，而后者是执行绑定函数。

和 也用于触发自定义事件。

和 触发事件时，可以带上参数：

3、事件类型

行为事件：

单击

双击

失去焦点时

值变化时

获取焦点时

jQuery扩展的获取焦点

jQuery扩展的失去焦点

调整大小

滚动

被选择

表单被提交

键盘事件：

按下键

放开键

鼠标事件：

点下鼠标

松开鼠标

光标移入

光标移出

光标在其上移动

光标移出/移入

页面事件：

准备就绪

离开当前页时，针对 对象

发生错误时

正在载入

4、事件对象

事件绑定节点/事件的触发节点（冒泡行为）

绑定事件的对象，通常就是

相关的节点，主要用于一些转换式的事件。比如鼠标移入，表示它从哪个节点来的

标明哪个按钮触发了事件，鼠标和键盘的键标识统一在这个属性中

禁止默认行为

不仅禁止冒泡。还终止绑定函数链的继续进行

禁止冒泡

事件触发时相对于 的鼠标位置

事件触发时的名字空间，比如

额外传入的数据

上一个绑定函数的返回值

事件触发时的时间，其值为

事件类型

如果一个绑定函数最后返回了 ，则默认是 和 行为。

AJAX1、请求与回调

jQuery的AJAX，核心的请求处理函数只有一个，就是 ，然后就是一个简单的上层函数。

的基本使用形式是：

是一个对象，里面包含了所有的配置项。

请求的地址。

请求的方法类型， ， 。默认是 。

要发送的数据

服务器返回的数据类型，支持 ， ， ， ， ，

请求成功时调用的处理函数

回调函数执行时的上下文

默认为 ，是否为请求单独添加一个随机参数以防止浏览器缓存

请求错误时的调用函数。

第二个参数是表示请求状态的字符串： ， ， ，

第三个参数是当HTTP错误发生时，具体的错误描述： ， 等

请求结束（无论成功或失败）时的一个回调函数。

第二个参数时表示请求状态的字符串： ， ， ， ， ， 。

一个参数名，默认是 ，一般用于指明回调函数名。设置成 可以让请求没有 参数。

参数值。默认是自动生成的一个随机值。

2、请求的状态

对于全局的所有AJAX请求而言，可以在任意节点上绑定到全局任意AJAX请求的每一个事件：

说明：

请求将要发出时

请求将要发出时（在 后）

请求成功

请求错误

请求完成

请求结束（在 后）

3、工具函数

解析表单参数项，返回字符串

解析表单参数项，返回一个列表对象。

泛化回调1、Deferred

对象是在jQuery1.5中引入的回调管理对象。其作用是把一堆函数按顺序放入一个调用链，然后根据状态来依次调用这些函数。AJAX的所有操作都是使用它来进行封装的。

总的来说：jQuery的 对象有三个状态： ， ， 。

只能先于其他两个状态先被激发。

和 互斥，只能激发一个。

可以被重复激发，而 和 只能激发一次。

然后，jQuery提供了一些函数用于添加回调，激发状态等。

添加一个或多个成功回调

添加一个或多个失败回调

添加一个函数，同时应用于成功和失败

添加一个函数用于准备回调

依次接受三个函数，分别用于成功，失败，准备状态

激发失败状态

激发成功状态

激发准备状态

如果一个 已经被激发，则新添加的对应的函数会被立即执行。

jQuery还提供了一个 的回调管理函数，可以用于方便地管理多个事件并发的情况。

做的事和使用 定义是一样的。

当我们需要完成，像“请求A和请求B都完成时，执行函数”之类的需求时，使用 就可以了。

在 中的 ，只要有一个是 ，则整体结果为 。

的回调函数的执行顺序与它们的添加顺序一致。

这里特别注意一点，就是 与 的返回值的区别。从功能上看，它们都可以添加回调函数，但是，方法的返回值是不同的。前组的返回值是原来的那个 对象，而 返回的是一个新的 对象。

返回新的 这种形式，可以用于方便地实现异步函数的链式调用。

等同于是调用了两次 , ，注册的两次回调函数依次被执行后，看到的输出是： ， 。

这是两次 的结果，第一个回调函数返回了一个新的 没任何作用。

如果换成 方法：

它跟两次 是不同的。 会在 那里的 被触发时再被触发，所以输出结果是： ， 。

更一般地来说 的行为，就是前面的注册函数的返回值，会作为后面注册函数的参数值：

Callbacks`对象的初始化支持一组控制参数：

初始化一个回调管理对象。 是空格分割的多个字符串，以定义此回调对象的行为：

回调链只能被激发一次

回调链被激发后，新添加的函数被立即执行

相同的回调函数只能被添加一次

当有回调函数返回 时终止调用链的执行

的控制方法：

添加一个或一串回调函数

激发回调

从调用链中移除指定的函数

清空调用链

关闭调用链的继续执行，新添加的函数也不会被执行

锁定调用链，但是如果打开了 的 ，新添加的函数仍然会执行

检查一个函数是否处于回调链之中

检查回调链是否被激发

检查回调链是否被锁定

●编号686，输入编号直达本文

●输入m获取文章目录

推荐↓↓↓

Web开发

更多推荐《18个技术类微信公众号》

涵盖：程序人生、算法与数据结构、黑客技术与网络安全、大数据技术、前端开发、Java、Python、Web开发、安卓开发、iOS开发、C/C++、.NET、Linux、数据库、运维等。