元素；
44 |
45 | ## 5、可见性筛选器
46 |
47 | - `:hidden`：所有隐藏的元素；*（ jQuery ）*
48 |
49 | - `:visible`：所有在页面布局中占据空间的元素；*（ jQuery ）*
50 |
51 | > 1、不会选中的元素包括：*display: none; height/width: 0; 祖先元素被隐藏*；
52 |
53 | > 2、会选中的元素包括：*visibility: hidden; opacity: 0;* 因为他们都会在布局中占据空间；
54 |
55 | ## 6、子节点筛选器
56 |
57 | - `:nth-child(n)`：指定下标位置的子节点；
58 | - `:first-child`：当前选中元素的第一个子节点；
59 | - `:last-child`：当前选中元素的最后一个子节点；
60 | - `:only-child`：当元素是父元素中位移的子节点时；
61 |
62 | ## 7、属性选择器
63 |
64 | - `[attribute]`：拥有指定属性的元素（属性值不限）；
65 | - `[attribute = 'value']`：拥有指定属性，并且值为指定值的元素；
66 | - `[attribute != 'value']`：拥有指定属性，并且值不为指定值的元素；*（ jQuery ）*
67 | - `[attribute ^= 'value']`：属性值以特定值开头；
68 | - `[attribute $= 'value']`：属性值以特定值结尾；
69 | - `[attribute *= 'value']`：属性值含有特定值；
70 |
71 | ## 8、表单
72 |
73 | - `:input`：匹配所有 input, textarea, select 和 button 元素；*（ jQuery ）*
74 | - `:text`：匹配所有文本类型的input元素；*（ jQuery ）*
75 | - `:password`：匹配所有密码类型的input元素；*（ jQuery ）*
76 | - `:radio`：匹配所有单选按钮；*（ jQuery ）*
77 | - `:checkbox`：匹配所有复选框；*（ jQuery ）*
78 | - `:submit`：匹配所有提交按钮；*（ jQuery ）*
79 | - `:image`：匹配所有图片按钮；*（ jQuery ）*
80 | - `:reset`：匹配所有重置按钮；*（ jQuery ）*
81 | - `:button`：匹配所有按钮；*（ jQuery ）*
82 | - `:file`：匹配所有文件域；*（ jQuery ）*
83 | - `:selected`：匹配下拉列表中所有被选中的列表项；
84 |
85 |
86 | - `:enabled`：匹配所有可用的表单元素；
87 | - `:disabled`：匹配所有禁用的表单元素；
88 | - `:checked`：匹配所有被选中的按钮或复选框；
89 |
90 |
91 | > 提示：
92 | >
93 | > 1. jQuery选中一个或多个元素后，会返回一个jQuery对象（类似数组对象）。这个对象通常被称为 “匹配结果集” 或 “jQuery选取结果”。每一个元素都有一个索引编号，我们可通过索引取到结果集中的具体对象。由于jQuery的选取结果为一个集合，因此可能会含有多个元素。如果匹配结果集中含有多个元素，在使用一个方法获取信息时，那么jQuery只会从匹配结果集的第一个元素中获取此信息；在使用一个方法更新信息时，那么jQuery会更新匹配结果集中所有元素的信息，而不止第一个元素。jQuery对象会保存对元素的引用。把jQuery对象缓存在变量中，变量中就包含了对元素的引用。当变量包含一个jQuery对象时，通常都会在变量名的前面加一个`$`符号用来区分脚本中的其他变量，比如：`let $imgBox = $('#img-box');`。
94 | > 2. `this` 是 JavaScript 中的关键字；`$(this)` 是 jQuery 对象；
95 |
96 | # 第 02 回：文本
97 |
98 | 读取、修改元素的html结构或者元素的文本内容是常见的DOM操作，jQuery针对这样的处理提供了2个便捷的方法.html()与.text()
99 |
100 | ## 1、.html()
101 |
102 | 获取/设置集合中第一个匹配元素的HTML内容，常用的有如下两种使用方法：
103 |
104 | - `.html()`：获取集合中第一个匹配元素的HTML内容
105 | - `.html( htmlString )`：设置每一个匹配元素的HTML内容
106 |
107 | > 提示：`.html()` 方法如DOM中的 `innerHTML()` 方法，所以在设置与获取上需要注意的一个最重要的问题，这个操作是针对整个HTML内容（不仅仅只是文本内容）
108 |
109 | ## 2、.text()
110 |
111 | 获取匹配元素集合中每个元素的文本内容结合，包括他们的后代，或设置匹配元素集合中每个元素的文本内容为指定的文本内容。具体有2种用法：
112 |
113 | - `.text()`：获取匹配元素集合中每个元素的合并文本，包括他们的后代
114 | - `.text( textString )`：设置匹配元素的文本
115 |
116 | > 提示：.text()结果返回一个字符串，包含所有匹配元素的合并文本
117 |
118 | **> .html & .text similarities and differences**
119 |
120 | - .html与.text的方法操作是一样，只是在具体针对处理对象不同
121 | - .html处理的是元素内容，.text处理的是文本内容
122 | - .html只能使用在HTML文档中，.text 在XML 和 HTML 文档中都能使用
123 | - 如果处理的对象只有一个子文本节点，那么html处理的结果与text是一样的
124 | - 火狐不支持innerText属性，用了类似的textContent属性，.text()方法综合了2个属性的支持，所以可以兼容所有浏览器
125 |
126 | ## 3、.val()
127 |
128 | 该方法主要用于处理表单元素的值，比如input、select和textarea。其使用方法有一下3种形式：
129 |
130 | - `.val()`：获取匹配的元素集合中第一个元素的当前值
131 | - `.val( value )`：设置匹配的元素集合中每个元素的值
132 | - `.val( function )`：一个用来返回设置值的函数
133 |
134 | > 提示：
135 | >
136 | > 1. 通过 `.val()` 处理select元素，当没有选择项被选中时，它返回 `null`
137 | > 2. .val() 方法多用来设置表单字段的值
138 | > 3. 如果select元素由multiple（多选）属性，并且至少一个选择项被选中，`.val()` 方法返回一个数组，这个数组包含每个选中选择项的值。
139 |
140 | # 第 03 回：属性
141 |
142 | ## 1、元素属性
143 |
144 | - `.attr(key[, value])`：获取/设置属性
145 | - `.attr(attributes)`：给指定元素设置多个属性值，语法形式为：{属性名1:属性值1, 属性名2:属性值2, …...}
146 | - `.removeAttr(key)`：移除属性
147 |
148 | ## 2、状态属性
149 |
150 | 通过 `prop()` 方法切换状态（true和false之间切换）
151 |
152 | - `.prop(key[, value])`：获取/设置状态属性
153 | - `.removeProp(key)`：移除状态属性
154 | - `$checkbox.prop("indeterminate", true)`：获取/设置 “checkbox” 半选中状态
155 |
156 | ## 3、.data()
157 |
158 | HTML5 dataset 是新的HTML5标准，允许你在普通的元素标签里嵌入类似 *data-\** 的属性，来实现一些简单数据的存取。它的数量不受限制，并且也能由JavaScript动态修改，也支持CSS选择器进行样式设置。这使得data属性特别灵活，也非常强大。有了这样的属性我们能够更加有序直观的进行数据预设或存储。那么在不支持HTML5标准的浏览器中，我们如何实现数据存取? jQuery就提供了一个*.data()* 的方法来处理这个问题。
159 |
160 | 使用jQuery初学者一般不是很关心data方式，这个方法是jquery内部预用的，可以用来做性能优化。当然这个也是非常重要的一个API了，常常用于我们存放临时的一些数据，因为它是直接跟DOM元素对象绑定在一起的
161 |
162 | jQuery提供的存储接口
163 |
164 | ```javascript
165 | // 1、静态接口
166 | jQuery.data( element, key, value ) // 存数据
167 | jQuery.data( element, key ) // 取数据
168 |
169 | // 2、实例接口
170 | .data( key, value ) // 存数据
171 | .data( key ) // 取数据
172 | ```
173 |
174 | 2个方法在使用上存取都是通一个接口，传递元素，键值数据。在jQuery的官方文档中，建议用.data()方法来代替。
175 |
176 | 我们把DOM可以看作一个对象，那么我们往对象上是可以存在基本类型，引用类型的数据的，但是这里会引发一个问题，可能会存在**循环引用的内存泄漏风险**。
177 |
178 | 通过jQuery提供的数据接口，就很好的处理了这个问题了，我们不需要关心它底层是如何实现，只需要按照对应的data方法使用就行了。
179 |
180 | 同样的也提供2个对应的删除接口，使用上与data方法其实是一致的，只不过是一个是增加一个是删除罢了。
181 |
182 | ```javascript
183 | jQuery.removeData( element [, name ] )
184 |
185 | .removeData( [name ] )
186 | ```
187 |
188 | # 第 04 回：样式
189 |
190 | ## 1、.class Styles
191 |
192 | - `.hasClass()`
193 |
194 | 该方法用于判断元素是否包含某class。
195 |
196 | - `.addClass()`
197 |
198 | 该方法可以为元素添加类名，通过动态改变类名，可以让其修改元素呈现不同的效果.
199 |
200 | > 提示：如果添加多个类名，请使用空格隔开。`.addClass()` 方法不会替换一个样式类名。它只是简单的添加一个样式类名到元素上
201 |
202 | - `.removeClass()`
203 |
204 | 该方法的作用是从匹配的元素中删除全部或者指定的class，使用方法如下：
205 |
206 | `.removeClass()`：删除所有class
207 |
208 | `.removeClass([ className ])`：每个匹配元素移除的一个或多个用空格隔开的样式名
209 |
210 | - `.toggleClass()`
211 |
212 | 该方法主要用于类名的互斥切换，比如有时我们需要在删除对应类名和添加赌赢类名之间切换的时候，我们可直接使用该方法，更加方便。一次执行，相当于addClass，再次执行相当于removeClass。
213 |
214 | ## 2、.css Styles
215 |
216 | `.css()` 方法主要用于设置/获取DOM元素样式。
217 |
218 | **a、获取**
219 |
220 | - `.css( propertyName )`：获取匹配元素集合中的第一个元素的样式属性的计算值
221 | - `.css( propertyNamess )`：传递一组数组，返回一个对象结果
222 |
223 | **b、设置**
224 |
225 | - `.css(propertyName, value )`：设置CSS
226 | - `.css( properties )`：可以传一个对象（严格语法json），同时设置多个样式
227 |
228 | # 第 05 回：尺寸与位置
229 |
230 | - `.height()`：获取/设置匹配元素当前计算的高度值（px）
231 | - `.innerHeight()`：获取第一个匹配元素内部区域高度（包括padding、不包括border）。
232 | - `.outerHieght()`：获取第一个匹配元素外部高度（默认包括padding和border）。
233 | - `.width()`：获取/设置第一个匹配元素当前计算的宽度值（px）。
234 | - `.innerWidth()`：获取第一个匹配元素内部区域宽度（包括padding、不包括border）。
235 | - `.outerWidth()`：获取第一个匹配元素外部宽度（默认包括padding和border）。
236 | - `.scrollTop()`：设置/获取匹配元素相对滚动条顶部的偏移。
237 | - `.scrollLeft()`：设置/获取匹配元素相对滚动条左侧的偏移。
238 | - `offset()`：获取元素偏移，相对于文档而言，有四个选项（`.top, .left, .right, .bottom`）
239 | - `position`：获取元素位置，相对于拥有定位属性的祖先级元素而言，有四个选项（`.top, .left, .right, .bottom`）
240 |
--------------------------------------------------------------------------------
/第02章 jQuery DOM.md:
--------------------------------------------------------------------------------
1 | # 第01回：节点创建
2 |
3 | ## 1、创建元素节点
4 |
5 | 可以有几种方式，后面会慢慢接触。常见的就是直接把这个节点的结构通过HTML标记字符串描述出来，通过`$()`函数处理，`$("html结构")`
6 |
7 | ```javascript
8 | $('
')
9 | ```
10 |
11 | ## 2、创建文本节点
12 |
13 | 与创建元素节点类似，可以直接把文本内容一并描述
14 |
15 | ```javascript
16 | $('
我是文本节点
')
17 | ```
18 |
19 | ## 3、创建属性节点
20 |
21 | 与创建元素节点同样的方式
22 |
23 | ```javascript
24 | $("
我是文本节点
")
25 | ```
26 |
27 | # 第02回：节点插入
28 |
29 | ## 1、`.append()` 、`.appendTo()` *
30 |
31 | | 选择器 | 描述 |
32 | | ------------- | -------------------------------------------------- |
33 | | `append( )` | 向每个匹配的元素内部追加内容 |
34 | | `appendTo( )` | 把所有匹配的元素**追加到**另一个、指定的元素集合中 |
35 |
36 | ```javascript
37 | $(A).append(B); // 把B添加到A中(作为A的最后一个子元素)
38 | $(A).appendTo(B);// 把A添加到B中(作为B的最后一个子元素)
39 | ```
40 |
41 | ## 2、`.after()`、`.before()` *
42 |
43 | | 选择器 | 描述 |
44 | | ----------- | -------------------- |
45 | | `after( )` | 指定元素后面添加内容 |
46 | | `before( )` | 指定元素前面添加内容 |
47 |
48 | ```javascript
49 | $(A).after(B); // 在A的后面添加B
50 | $(A).before(B);// 在A的前面添加B
51 | ```
52 |
53 | ## 3、`.prepend()`、`.prependTo()` *
54 |
55 | | 选择器 | 描述 |
56 | | -------------- | ------------------------------ |
57 | | `prepend( )` | 指定元素内部前置一内容 |
58 | | `prependTo( )` | 指定元素前置到另一个元素的内部 |
59 |
60 | ```javascript
61 | $(A).prepend(B); // 把B添加到A中(作为A的第一个子元素)
62 | $(A).prependTo(B); // 把A添加到B中(作为B的第一个子元素)
63 | ```
64 |
65 | ## 4、`.insertAfter()`、`.insertBefore()`
66 |
67 | | 选择器 | 描述 |
68 | | ---------------- | -------------------------- |
69 | | `insertAfter()` | 将内容插入到指定元素的后面 |
70 | | `insertBefore()` | 将内容插入到指定元素的前面 |
71 |
72 | ```javascript
73 | $(A).insertAfter(B); // 将A插入到B的后面
74 | $(A).insertBefore(B); // 将A插入到B的前面
75 | ```
76 |
77 | # 第03回：节点删除
78 |
79 | ## 1、`.empty()`
80 |
81 | 该方法主要是用于清空指定元素的所有子节点，如：
82 |
83 | ```html
84 |
87 | ```
88 |
89 | 如果我们通过empty方法移除里面div的所有元素，它只是清空内部的html代码，但是标记仍然留在DOM中。
90 |
91 | ```javascript
92 | // 通过empty处理
93 | $('.hello').empty();
94 |
95 | // 结果：
96 | ```
97 |
98 | ## 2、`.remove()` *
99 |
100 | 移除元素自身，包括子节点、事件等信息。
101 |
102 | ```javascript
103 | // 通过remove处理
104 | $('.btn').remove(); // 结果：节点不存在了,同时事件也会被销毁
105 | ```
106 |
107 | ## 3、`.detach()`
108 |
109 | 如果我们希望临时删除页面上的节点，但是又不希望节点上的数据与事件丢失，并且能在下一个时间段让这个删除的节点显示到页面，这时候就可以使用detach方法来处理。
110 |
111 | detach从字面上就很容易理解。让一个web元素托管。即从当前页面中移除该元素，但保留这个元素的内存模型对象。
112 |
113 | > jQuery 官方文档说明：
114 |
115 | > ```javascript
116 | > 这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。
117 | > $("div").detach()这一句会移除对象，仅仅是显示效果没有了。但是内存中还是存在的。当你append之后，又重新回到了文档流中。就又显示出来了。
118 | > ```
119 |
120 | 当然这里要特别注意，detach方法是JQuery特有的，所以它只能处理通过JQuery的方法绑定的事件或者数据。
121 |
122 | ```js
123 | var li = $(".list li:eq(2)").detach();
124 | setTimeout(() => {
125 | $(".list").append(li);
126 | }, 3000);
127 | ```
128 |
129 | # 第04回：节点复制与替换
130 |
131 | ## 1、`.clone()`
132 |
133 | 克隆节点是DOM的常见操作，jQuery提供一个clone方法，专门用于处理dom的克隆。
134 |
135 | clone()方法深度复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。
136 |
137 | clone方法比较简单就是克隆节点，但是需要注意，如果节点有事件或者数据之类的其他处理，我们需要通过`clone(ture)` 传递一个布尔值 `ture`用来指定，这样不仅仅只是克隆单纯的节点结构，还要把附带的事件与数据给一并克隆了。
138 |
139 | ```javascript
140 | $("div").on('click', function() {//执行操作})
141 |
142 | //clone处理一
143 | $("div").clone() // 只克隆了结构，事件丢失
144 |
145 | //clone处理二
146 | $("div").clone(true) // 结构、事件与数据都克隆
147 | ```
148 |
149 | ## 2、`.replaceWith()`、`.replaceAll()` *
150 |
151 | ```javascript
152 | $(A).replaceWith(B); // 把A替换为B
153 | $(A).replaceAll(B); // 把B替换为A
154 | ```
155 |
156 | ## 3、`.wrap()`
157 |
158 | 如果要将元素用其他元素包裹起来，也就是给它增加一个父元素，针对这样的处理，JQuery提供了一个 *wrap* 方法。
159 |
160 | ```html
161 |
Hello, world!
162 | ```
163 |
164 | ```javascript
165 | $('p').wrap('
')
166 |
167 | // 结果为：
168 | /*
169 |
170 |
Hello, world!
171 |
172 | */
173 | ```
174 |
175 | ## 4、`.unwrap()`
176 |
177 | 该方法与wrap方法相反，unwrap方法将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。
178 |
179 | ## 5、`.wrapAll()`
180 |
181 | wrap是针对单个dom元素处理，如果要将集合中的元素用其他元素包裹起来，也就是给他们增加一个父元素，针对这样的处理，JQuery提供了一个wrapAll方法，比如，页面上有两个p元素，如果要为两个p元素添加共有的一个父类div，则通过如下代码实现：
182 |
183 | ```javascript
184 | $('p').wrapAll('
');
185 | ```
186 |
187 | ## 6、`.wrapInner()`
188 |
189 | 如果要将集合中的元素内部所有的子元素用其他元素包裹起来，并当作指定元素的子元素，针对这样的处理，JQuery提供了一个wrapInner方法。我们来看例子：
190 |
191 | ```html
192 |
Hello, world!
193 |
Hello, world!
194 | ```
195 |
196 | ```javascript
197 | $('div').wrapInner('
');
198 |
199 | // 结果为：
200 | /*
201 |
202 |
Hello, world!
203 |
204 |
205 |
Hello, world!
206 |
207 | */
208 | ```
209 |
210 | ## 第05回：节点遍历
211 |
212 | ## 1、`.children()` *
213 |
214 | jQuery是一个集合对象，如果想快速查找集合里面的第一级子元素，此时可以用 `children()` 方法。这里需要注意：*.children(selector)* 方法是返回匹配元素集合中每个元素的所有子元素（仅儿子辈，这里可以理解为就是父亲-儿子的关系）
215 |
216 | ```html
217 |
222 | ```
223 |
224 | 代码如果是 *$(".div").children()* ，那么意味着只能找到ul，因为div与ul是父子关系，li与div是祖辈关系，因此无法找到。
225 |
226 | > 提示：jQuery是一个集合对象，所以通过children是匹配集合中每一个元素的第一级子元素。
227 |
228 | 该方法可以接受参数，用于筛选子元素，如 *"$('.parent').children(.active)"*，匹配子元素中类名为 `active` 的那一个。
229 |
230 | ## 2、.find() *
231 |
232 | find 与 children 类似，区别在于 children是父子关系查找，find是后代关系查找（包含父子关系）。
233 |
234 | ```html
235 |
240 | ```
241 |
242 | 代码如果是 `$("div").find("li")` ，此时，li与div是祖辈关系，通过find方法就可以快速的查找到了。
243 |
244 | > 提示：
245 | >
246 | > 1. find是遍历当前元素集合中每个元素的后代。只要符合，不管是儿子辈，孙子辈都可以。
247 | > 2. 与其他的树遍历方法不同，选择器表达式对于 `.find()` 是必需的参数。如果我们需要实现对所有后代元素的取回，可以传递通配选择器 `*`。
248 | > 3. find只在后代中遍历，不包括自己。
249 |
250 | ## 3、`.parent()` *
251 |
252 | 如果想快速查找合集里面的每一个元素的父元素（这里可以理解为就是父亲-儿子的关系），此时可以用 *parent()* 方法。因为是父元素，这个方法只会向上查找一级。
253 |
254 | ```html
255 |
260 | ```
261 |
262 | 查找ul的父元素 div, *$(ul).parent()* ，就是这样简单的表达
263 |
264 | ## 4、`.parents()`
265 |
266 | jQuery是一个合集对象，如果想快速查找合集里面的每一个元素的所有祖辈元素，此时可以用 *parents()* 方法。其实也类似 *find* 与 *children* 的区别，parent只会查找一级，parents则会往上一直查到查找到祖先节点。
267 |
268 | ```html
269 |
274 | ```
275 |
276 | 在li节点上找到祖辈元素div， 这里可以用 *$("li").parents()* 方法
277 |
278 | ## 5、`.closest()`
279 |
280 | 以选定的元素为中心，往内查找可以通过find、children方法。如果往上查找，也就是查找当前元素的父辈祖辈元素，jQuery提供了*closest()* 方法，这个方法类似parents但是又有一些细微的区别，属于使用频率很高的方法。
281 |
282 | *closest()* 方法接受一个匹配元素的选择器字符串。从元素本身开始，在DOM 树上逐级向上级元素匹配，并返回最先匹配的祖先元素。例如：在a元素中，往上查找所有的li元素，可以这样表达：*$("a").closet("li')*。
283 |
284 | > 提示：jQuery是一个集合对象，所以通过closest是匹配集合中每一个元素的祖先元素。
285 |
286 | 粗看 *.parents()* 和 *.closest()* 是有点相似的，都是往上遍历祖辈元素，但是两者还是有区别的，否则就没有存在的意义了
287 |
288 | - 起始位置不同：.closest 开始于当前元素 .parents开始于父元素
289 | - 遍历的目标不同：.closest要找到指定的目标，.parents遍历到文档根元素，closest向上查找，直到找到一个匹配的就停止查找，parents 一直查找到根元素，并将匹配的元素加入集合
290 | - 结果不同：.closest返回的是包含零个或一个元素的jquery对象，parents返回的是包含零个或一个或多个元素的jquery对象
291 |
292 | ## 6、`.next()`、`.nextAll()` *
293 |
294 | - `.next()`：该方法用于匹配当前元素的下一个元素。
295 | - `.nextAll()`：查找当前元素之后所有的同辈元素。
296 |
297 | ## 7、.prev()、.prevAll() *
298 |
299 | - `.prev()`：该方法用于匹配当前元素的上一个元素。
300 | - `.prevAll()`：查找当前元素之前所有的同辈元素
301 |
302 | ## 8、`.siblings()` *
303 |
304 | 该方法用于匹配当前元素的所有兄弟元素。
305 |
306 | # 第 06 回：筛选
307 |
308 | ## 1、`.eq(index)` *
309 |
310 | 获取当前链式操作中第N个jQuery对象，返回jQuery对象，当参数大于等于0时为正向选取，比如0代表第一个，1代表第二个。当参数为负数时为反向选取，比如-1为倒数第一个，具体可以看以下示例。
311 |
312 | ## 2、`.first()`、`.last()` *
313 |
314 | - `.first()`：获取匹配元素集合中第一个元素。
315 | - `.last()`：获取匹配元素集合中最后一个元素。
316 |
317 | ## 3、`.filter()`
318 |
319 | 筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。
320 |
321 | ## 4、`.is()`
322 |
323 | 根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。如果没有元素符合，或者表达式无效，都返回'false'。
324 |
325 | 注意：、在jQuery 1.3中才对所有表达式提供了支持。在先前版本中，如果提供了复杂的表达式，比如层级选择器（比如 + , ~ 和 > ），始终会返回true
326 |
327 | ## 5、`.not()`
328 |
329 | 从匹配元素的集合中删除与指定表达式匹配的元素
330 |
331 | ## 6、`.map(callback)`
332 |
333 | 通过一个函数匹配当前集合中的每个元素,产生一个包含新的jQuery对象。
334 |
335 | ## 7、`.has()`
336 |
337 | 筛选匹配元素集合中的那些有相匹配的选择器或DOM元素的后代元素。
338 |
339 |
--------------------------------------------------------------------------------
/第03章 jQuery 事件.md:
--------------------------------------------------------------------------------
1 | # 第01回：事件添加
2 |
3 | 语法形式：
4 |
5 | ```javascript
6 | $el.eventType( [eventData ], handler(eventObject) )
7 | ```
8 |
9 | ```javascript
10 | $(".btn").click("Henry", function(event) {
11 | // this -> 按钮对象
12 | console.log(`Hello, ${event.data}!`);
13 | });
14 | ```
15 |
16 | # 第02回：事件类型
17 |
18 | 事件类型和原生事件类型一致，这里只列出jQuery特有的一些事件：
19 |
20 | ## 1、`.hover()`
21 |
22 | 切换事件，类似于css中的hover，其语法形式为：
23 |
24 | ```js
25 | $(selector).hover(handlerIn, handlerOut)
26 | ```
27 |
28 | ## 2、`.one()`
29 |
30 | 一次事件，顾名思义，事件方法只会触发一次。基本语法如下：
31 |
32 | ```javascript
33 | $("div").one(eventType, handler(eventObject) )
34 | ```
35 |
36 | > 特别注意：
37 | >
38 | > ```
39 | > form元素是有默认提交表单的行为，如果通过submit处理的话，需要禁止浏览器的这个默认行为
40 | > 传统的方式是调用事件对象 e.preventDefault() 来处理， jQuery中可以直接在函数中最后结尾return false即可
41 | > ```
42 | >
43 | > jQuery处理如下：
44 | >
45 | > ```javascript
46 | > $("#target").submit(function(data) {
47 | > return false; //阻止默认行为，提交表单
48 | > });
49 | > ```
50 |
51 | # 第03回：事件的绑定和解绑
52 |
53 | ## 1、`on()` 事件绑定
54 |
55 | 之前学的鼠标事件，表单事件与键盘事件都有个特点，就是直接给元素绑定一个处理函数，所有这类事件都是属于快捷处理。翻开源码其实可以看到，所有的快捷事件在底层的处理都是通过一个 `.on()` 方法来实现的。jQuery `.on()` 方法是官方推荐的绑定事件的一个方法。
56 |
57 | **基本用法**：
58 |
59 | ```javascript
60 | .on( events ,[ selector ] ,[ data ], fn )
61 | ```
62 |
63 | 最常见的给元素绑定一个点击事件，对比一下快捷方式与on方式的不同：
64 |
65 | ```javascript
66 | $("#btn").click(function(){}) // 快捷方式
67 | $("#btn").on('click',function(){}) // on方式
68 | ```
69 |
70 | **多个事件绑定同一个函数**
71 |
72 | ```javascript
73 | $("#btn").on("mouseover mouseout", function(){ });
74 | ```
75 |
76 | 通过空格分离，传递不同的事件名，可以同时绑定多个事件。
77 |
78 | **多个事件绑定不同函数**
79 |
80 | ```javascript
81 | $("#btn").on({
82 | mouseover: function(){},
83 | mouseout: function(){}
84 | });
85 | ```
86 |
87 | 通过逗号分离，传递不同的事件名，可以同时绑定多个事件，每一个事件执行自己的回调方法。
88 |
89 | **将数据传递到处理程序**
90 |
91 | ```javascript
92 | function fn(event) {
93 | console.log(`Hello, ${event.data.name}!`);
94 | }
95 | $(".btn").on("click", {name: "耀哥"}, fn);
96 | ```
97 |
98 | 可以通过第二参数（对象），当一个事件被触发时，要传递给事件处理函数的
99 |
100 | ## 2、on() 事件代理
101 |
102 | JavaScript中，由于事件的冒泡机制，我们可以为事件设置代理，同样的，jQuery在on方法上也添加了事件代理这一机制，其语法形式如下：
103 |
104 | ```javascript
105 | .on( events ,[ selector ] ,[ data ], handler(eventObject) )
106 | ```
107 |
108 | 在on的第二参数中提供了一个selector选择器，简单的来描述下：
109 |
110 | 参考下面3层结构
111 |
112 | ```html
113 |
114 |
115 | 目标节点
116 |
117 |
118 | ```
119 |
120 | 给出如下代码：
121 |
122 | ```javascript
123 | $('div').on('click', 'p', function(e) {
124 | e.target.textContent = 'Hello, world!';
125 | });
126 | ```
127 |
128 | > 事件绑定在最上层div元素上，当用户触发在a元素上，事件将往上冒泡，一直会冒泡在div元素上。如果提供了第二参数，那么事件在往上冒泡的过程中遇到了选择器匹配的元素，将会触发事件回调函数。
129 |
130 | ## 3、`off()` 卸载事件
131 |
132 | 根据on绑定事件的一些特性，off 方法也可以通过相应的传递组合的事件名，名字空间，选择器或处理函数来移除绑定在元素上指定的事件处理函数。当有多个过滤参数时，只有与这些参数完全匹配的事件处理函数才会被移除。
133 |
134 | 绑定两个事件
135 |
136 | ```javascript
137 | $("el").on("mousedown mouseup", fn)
138 | ```
139 |
140 | 删除一个事件
141 |
142 | ```javascript
143 | $("el").off("mousedown")
144 | ```
145 |
146 | 删除所有事件
147 |
148 | ```javascript
149 | $("el").off("mousedown mouseup")
150 | ```
151 |
152 | 快捷方式删除所有事件，这里不需要传递事件名了，节点上绑定的所有事件将全部销毁
153 |
154 | ```javascript
155 | $("el").off()
156 | ```
157 |
158 | # 第04回：事件对象
159 |
160 | 同原生
161 |
162 | # 第05回：自定义事件
163 |
164 | ## 1、trigger事件
165 |
166 | 众所周知类似于mousedown、click、keydown 等等这类型的事件都是浏览器提供的，通俗叫原生事件，这类型的事件是需要有交互行为才能被触发。
167 |
168 | 在jQuery通过on方法绑定一个原生事件
169 |
170 | ```javascript
171 | $('#elem').on('click', function() {
172 | alert("触发系统事件")
173 | });
174 | ```
175 |
176 | alert需要执行的条件：必须有用户点击才可以。如果不同用户交互是否能在某一时刻自动触发该事件呢？ 正常来说是不可以的，但是jQuery解决了这个问题，提供了一个 **trigger** 方法来触发浏览器事件
177 |
178 | 所以我们可以这样：
179 |
180 | ```javascript
181 | $('#elem').trigger('click');
182 | ```
183 |
184 | 在绑定on的事件元素上，通过trigger方法就可以调用到alert了，挺简单！
185 |
186 | **再来看看.trigger是什么？**
187 |
188 | > 简单来讲就是：根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为
189 |
190 | trigger除了能够触发浏览器事件，同时还支持自定义事件，并且自定义事件还支持传递参数
191 |
192 | ```javascript
193 | $('#elem').on('LiHy', function(event, arg1, arg2) {
194 | alert("触发自定义事件")
195 | });
196 | $('#elem').trigger('LiHy', ['参数1', '参数2'])
197 | ```
198 |
199 | **trigger触发浏览器事件与自定义事件区别？**
200 |
201 | - 自定义事件对象，是jQuery模拟原生实现的
202 | - 自定义事件可以传递参数
203 |
204 | ## 2、triggerHandler事件
205 |
206 | trigger事件还有一个特性：**会在DOM树上冒泡**，所以如果要阻止冒泡就需要在事件处理程序中返回 *false* 或调用事件对象中的 `.stopPropagation()` 方法可以使事件停止冒泡
207 |
208 | trigger事件是具有触发原生与自定义能力的，但是存在一个不可避免的问题**： 事件对象event无法完美的实现**，毕竟一个是浏览器给的，一个是自己模拟的。尽管 `.trigger()` 模拟事件对象，但是它并没有完美的复制自然发生的事件，若要触发通过 jQuery 绑定的事件处理函数，而不触发原生的事件，使用 `.triggerHandler()` 来代替。
209 |
210 | `triggerHandler` 与 `trigger` 的用法是一样的，重点看不同之处：
211 |
212 | - `triggerHandler`不会触发浏览器的默认行为，`.triggerHandler( "submit" )` 将不会调用表单上的 `.submit()`
213 | - `.trigger()` 会影响所有与 jQuery 对象相匹配的元素，而 `.triggerHandler()` 仅影响第一个匹配到的元素
214 | - 使用 `.triggerHandler()` 触发的事件，并不会在 DOM 树中向上冒泡。 如果它们不是由目标元素直接触发的，那么它就不会进行任何处理
215 | - 与普通的方法返回 jQuery 对象(这样就能够使用链式用法)相反，`.triggerHandler()` 返回最后一个处理的事件的返回值。如果没有触发任何事件，会返回 `undefined`
216 |
217 |
218 |
219 |
220 |
221 |
222 |
223 |
224 |
225 |
226 |
227 |
228 |
229 |
230 |
231 |
232 |
233 |
234 |
235 |
--------------------------------------------------------------------------------
/第04章 jQuery 动画.md:
--------------------------------------------------------------------------------
1 | # 第01回：隐藏、显示
2 |
3 | ## 1、`.hide()`
4 |
5 | 隐藏元素，其语法形式为：
6 |
7 | ```javascript
8 | .hide([speed,[easing],[fn]])
9 | ```
10 |
11 | > 参数解读：
12 |
13 | - **speed**：三种预定速度之一的字符串( `slow`, `normal`, or `fast`)或表示动画时长的毫秒数值(如：`1000`)
14 | - **easing**：用定切换效果，默认是"`swing`"，可用参数"`linear`"
15 | - **fn**：在动画完成时执行的函数，每个元素执行一次。
16 |
17 | > 提示：元素隐藏之后会脱离文档流
18 |
19 | ## 2、`.show()`
20 |
21 | 显示元素，其语法形式为：
22 |
23 | ```javascript
24 | .show([speed,[easing],[fn]])
25 | ```
26 |
27 | > 注意：
28 | >
29 | > 1. `.show()` 与 `.hide()` 方法是修改的display属性。
30 | > 2. 如果使用 `!important` 在你的样式中，比如 `display: none !important`，如果你希望 `.show()` 方法正常工作，必须使用 `.css('display', 'block !important')` 重写样式。
31 | > 3. 如果让 show 与 hide 成为一个动画，那么默认执行动画会改变元素的高度，高度，透明度。
32 |
33 | ## 3、`.toggle()`
34 |
35 | show与hide是一对互斥的方法。需要对元素进行显示隐藏的互斥切换，通常情况是需要先判断元素的display状态，然后调用其对应的处理方法。比如显示的元素，那么就要调用hide，反之亦然。 对于这样的操作行为，jQuery提供了一个便捷方法 `.toggle()` 用于切换显示或隐藏匹配元素。
36 |
37 | 语法形式如下：
38 |
39 | ```javascript
40 | .toggle([speed,[easing],[fn]])
41 | ```
42 |
43 | # 第02回：上卷、下拉
44 |
45 | ## 1、`.slideDown()`
46 |
47 | 对于隐藏的元素，在将其显示出来的过程中，可以对其进行一些变化的动画效果。之前学过了show方法，show方法在显示的过程中也可以有动画，但是 `.show()` 方法将会匹配元素的宽度，高度，以及不透明度，同时进行动画操作。这里将要学习一个新的显示方法 `.slideDown()` 方法，用滑动动画显示一个匹配元素。
48 |
49 | `.slideDown()` 方法将给匹配元素的高度的动画，这会导致页面的下面部分滑下去，弥补了显示的方式。其语法形式为：
50 |
51 | ```javascript
52 | .slideDown([speed,[easing],[fn]])
53 | ```
54 |
55 | > 注意：
56 | >
57 | > 1. 下拉动画是从无到有，所以一开始元素是需要先隐藏起来的，可以设置 `display:none`。
58 | > 2. 如果提供回调函数参数，callback 会在动画完成的时候调用。将不同的动画串联在一起按顺序排列执行是非常有用的。这个回调函数不设置任何参数，但是 this会设成将要执行动画的那个DOM元素，如果多个元素一起做动画效果，那么要非常注意，回调函数会在每一个元素执行完动画后都执行一次，而不是这组 动画整体才执行一次
59 |
60 | ## 2、`.slideUp()`
61 |
62 | 对于显示的元素，在将其隐藏的过程中，可以对其进行一些变化的动画效果。之前学过了hide方法，hide方法在显示的过程中也可以有动画，但 是`.hide()`方法将为匹配元素的宽度，高度，以及不透明度，同时进行动画操作。这里将要学习一个新的显示方法slideUp方法。
63 |
64 | 其语法形式为：
65 |
66 | ```javascript
67 | .slideUp( [speed ] [, easing ] [, complete ] )
68 | ```
69 |
70 | 这个使用的含义就是：找到元素的高度，然后采用一个下滑动画让元素一直滑到隐藏，当高度为0的时候，也就是不可见的时，修改元素display 样式属性被设置为none。这样就能确保这个元素不会影响页面布局了。
71 |
72 | ## 3、`.slideToggle()`
73 |
74 | slideDown与slideUp是一对相反的方法。需要对元素进行上下拉卷效果的切换，jQuery提供了一个便捷方法slideToggle用滑动动画显示或隐藏一个匹配元素。其语法形式为：
75 |
76 | ```
77 | .slideToggle( [speed ] [, easing ] [, complete ] )
78 | ```
79 |
80 | > 注意：
81 | >
82 | > 1. display属性值保存在jQuery的数据缓存中，所以display可以方便以后可以恢复到其初始值
83 | > 2. 当一个隐藏动画后，高度值达到0的时候，display 样式属性被设置为none，以确保该元素不再影响页面布局
84 |
85 | # 第03回：淡入、淡出
86 |
87 | 除了通过 `display` 设置元素的显示与隐藏，还有一种方法就是设置元素的不透明度（`opacity`），值范围为` 0~1` ，当不透明度为1时，元素显示，当不透明度为0时，元素隐藏。jQuery淡入淡出效果正是使用了这个原理。只不过，当不透明度为0时，元素虽然隐藏了，但是并没有脱离文档流，但是jQuery中，元素淡出会脱离文档流。
88 |
89 | ## 1、`.fadeIn()`
90 |
91 | ```javascript
92 | .fadeIn( [speed ] [, easing ] [, complete ] )
93 | ```
94 |
95 | ## 2、.fadeOut()
96 |
97 | ```javascript
98 | .fadeOut( [speed ] [, easing ] [, complete ] )
99 | ```
100 |
101 | ## 3、`.fadeToggle()`
102 |
103 | ```javascript
104 | .fadeToggle( [speed ] [, easing ] [, complete ] )
105 | ```
106 |
107 | ## 4、.fadeTo()
108 |
109 | ```javascript
110 | .fadeTo( speed , opacity , [, easing ] [, complete ] )
111 | ```
112 |
113 | # 第04回：自定义动画
114 |
115 | ## 1、`.animate()`
116 |
117 | jQuery 提供的动画有限，有时需要我们实现一些更为复杂的动画效果，这时我们就需要使用自定义动画了。当然，jQuery也为我们提供了自定义动画的接口，其语法形式如下：
118 |
119 | ```javascript
120 | .animate( prop ,[ speed ], [ easing ], [ complete ] )
121 | .animate( prop, options )
122 | ```
123 |
124 | **参数解读**
125 |
126 | - `prop`：一个或多个css属性的键值对所构成的Object对象，对 **数字属性值** 有效，驼峰命名，可使用快捷方式如‘show/toggle’。
127 | - `speed`：持续时间，单位ms，提供 'fast' 和 'slow' 字符串，分别表示持续时间为200 和 600毫秒。
128 | - `easing`：动画运动算法，jQuery库中默认调用 swing。如果需要其他的动画算法，请查找相关的插件
129 | - `complete`：回调函数
130 |
131 | ```javascript
132 | $(".box").click(function () {
133 | $(this).animate({
134 | left: "+=50px"
135 | },1000, function () {
136 | alert("动画执行完毕！");
137 | })
138 | });
139 | ```
140 |
141 | animate 在执行动画中，如果需要观察动画的一些执行情况，或者在动画进行中的某一时刻进行一些其他处理，我们可以通过animate提供的第二种设置语法，传递一个对象参数，可以拿到动画执行状态一些通知。
142 |
143 | ```javascript
144 | .animate( prop, options )
145 | ```
146 |
147 | **options参数：**
148 |
149 | - `duration`：设置动画执行的时间
150 | - `easing` ：规定要使用的 easing 函数，过渡使用哪种缓动函数
151 | - `step`：规定每个动画的每一步完成之后要执行的函数
152 | - `progress`：每一次动画调用的时候会执行这个回调，就是一个进度的概念
153 | - `complete`：动画完成回调
154 | - `queue`：布尔值。指示是否在效果队列中放置动画。如果为 false，则动画将立即开始
155 |
156 | ```javascript
157 | $(".box").click(function () {
158 | $(this).animate({
159 | left: "+=50px"
160 | }, {
161 | duration: 1000,
162 | complete: function () {
163 | alert("动画执行完毕！");
164 | }
165 | })
166 | });
167 | ```
168 |
169 | > 同步动画：
170 |
171 | 动画同时执行，如下所示：
172 |
173 | ```javascript
174 | $(".box").click(function () {
175 | $(this).animate({
176 | width: "50px",
177 | height: "50px",
178 | left: "800px",
179 | opacity: ".5",
180 | },1000, function () {
181 | alert("动画执行完毕！");
182 | })
183 | });
184 | ```
185 |
186 | > 队列动画
187 |
188 | 根据动画添加的先后顺序执行动画。
189 |
190 | 示例1：
191 |
192 | ```javascript
193 | $(".box").click(function () {
194 | $(this).animate({width: "50px", height: "50px"}, function () {
195 | $(this).animate({left: "800px"}, function () {
196 | $(this).animate({opacity: ".5"}, function () {
197 | alert("动画执行完毕！");
198 | })
199 | })
200 | });
201 | });
202 | ```
203 |
204 | 示例2：
205 |
206 | ```javascript
207 | $(".box").click(function () {
208 | $(this)
209 | .animate({width : "50px"}, 1000)
210 | .animate({height : "50px"}, 1000)
211 | .animate({opacity: ".5"}, 1000);
212 | });
213 | ```
214 |
215 | ## 2、.queue()
216 |
217 | animate 只对数字值的变化有效，如果想要将其他变化（比如颜色变化）加入到动画队列中，可使用 `.queue()` 方法，不过你需要指定 `next` 函数参数并调用，当其他变化执行之后手动执行后续动画队列。
218 |
219 | ```javascript
220 |
221 | $(".box").click(function () {
222 | $(this)
223 | .animate({width : "100px"}, 1000)
224 | .animate({height : "100px"}, 1000)
225 | .animate({opacity: ".5"}, 500)
226 | .queue(function (next) {
227 | // next -> 函数
228 | $(this).css({
229 | background: "blue"
230 | });
231 | next();
232 | })
233 | .slideUp(1000);
234 | });
235 | ```
236 |
237 | ## 3、`.dequeue()`
238 |
239 | `.queue()` 是 jQuery 1.4版本以后才出现的，而之前我们普遍使用的是 `.dequeue()` 方法。意思为执行下一个元素列队中的函数。 现在对上述代码进行修改，如下所示：
240 |
241 | ```javascript
242 | $(".box").click(function () {
243 | $(this)
244 | .animate({width : "100px"}, 1000)
245 | .animate({height : "100px"}, 1000)
246 | .animate({opacity: ".5"}, 500)
247 | .queue(function () {
248 | // next -> 函数
249 | $(this).css({
250 | background: "blue"
251 | });
252 | $(this).dequeue();
253 | })
254 | .slideUp(1000);
255 | });
256 | ```
257 |
258 | ## 4、.clearQueue()
259 |
260 | jQuery 还提供了一个清理列队的功能方法：`.clearQueue()`。
261 |
262 | 假如我想在执行完第二个动画就不再执行了。那么只要在第二个动画的回调函数那里添加一句 `$(this).clearQueue()` 就可以停止后面的列队动画了。
263 |
264 | ```javascript
265 | $(".box").click(function () {
266 | $(this)
267 | .animate({width : "100px"}, 1000)
268 | .animate({height : "100px"}, 1000)
269 | .animate({opacity: ".5"}, 500, function(){$(this).clearQueue();/* 清理队列*/})
270 | .queue(function () {
271 | // next -> 函数
272 | $(this).css({
273 | background: "blue"
274 | });
275 | $(this).dequeue();
276 | })
277 | .slideUp(1000);
278 | });
279 | ```
280 |
281 | 获取队列长度：
282 |
283 | ```javascript
284 | function getQueueCount() {
285 | //获取当前列队的长度，fx 是默认列队的参数
286 | return $(".box").queue("fx").length;
287 | }
288 | ```
289 |
290 | ## 5、.stop()
291 |
292 | 动画在执行过程中是允许被暂停的，当一个元素调用 `.stop()` 方法，当前正在运行的动画（如果有的话）立即停止。
293 |
294 | 语法形式：
295 |
296 | ```
297 | .stop( [clearQueue ], [ jumpToEnd ] )
298 | ```
299 |
300 | 该方法的可选参数，简单来说可以有3种情况：
301 |
302 | - `.stop()`： 停止当前动画，迅速执行后续动画效果。
303 | - `.stop(true)`：停止当前动画，清除后续动画队列。
304 | - `.stop(true,true)`：当前动画将停止，但该元素上的 CSS 属性会被立刻修改成动画的目标值
305 |
306 | 简单的说：参考下面代码、
307 |
308 | ```javascript
309 | $("#box").animate({
310 | height: 300
311 | }, 5000)
312 | $("#box").animate({
313 | width: 300
314 | }, 3000)
315 | $("#box").animate({
316 | opacity: 0.6
317 | }, 2000)
318 | ```
319 |
320 | 1. `stop()`：只会停止第一个动画，第二个第三个继续
321 | 2. `stop(true)`：停止第一个、第二个和第三个动画
322 | 3. `stop(true,ture)`：停止动画，直接跳到第一个动画的最终状态
323 |
324 | ## 6、.delay()
325 |
326 | 设置一个延时来推迟执行队列中之后的项目。
327 |
328 | 用于将队列中的函数延时执行。他既可以推迟动画队列的执行，也可以用于自定义队列。
329 |
330 | 语法形式：
331 |
332 | ```
333 | .delay(duration, [queueName]);
334 | ```
335 |
336 | > 参数解读：
337 |
338 | - `duration`：延时时间，单位：毫秒
339 |
340 | - `queueName`：队列名词，默认是Fx，动画队列。
341 |
342 | > 代码示例：
343 |
344 | ```javascript
345 | $('#foo').slideUp(300).delay(800).fadeIn(400);
346 | ```
347 |
348 | ## 7、`.finish()`
349 |
350 | 停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画。
351 |
352 | 当 `.finish()` 在一个元素上被调用，立即停止当前正在运行的动画和所有排队的动画（如果有的话），并且他们的CSS属性设置为它们的目标值（所有动画的目标值）。所有排队的动画将被删除。
353 |
354 | 如果第一个参数提供，该字符串表示的队列中的动画将被停止。
355 |
356 | `.finish()` 方法和 `.stop(true, true)` 很相似，`.stop(true, true)` 将清除队列，并且目前的动画跳转到其最终值。但是，不同的是，`.finish()` 会导致所有排队的动画的CSS属性跳转到他们的最终值。
357 |
358 | ## 8、jQuery.fx.off
359 |
360 | 关闭页面上所有的动画。
361 |
362 | 把这个属性设置为 `true` 可以立即关闭所有动画(所有效果会立即执行完毕)。有些情况下可能需要这样，比如：
363 |
364 | \* 你在配置比较低的电脑上使用jQuery。
365 |
366 | \* 你的一些用户由于动画效果而遇到了 [可访问性问题](http://www.jdeegan.phlegethon.org/turn_off_animation.html)
367 |
368 | 当把这个属性设成 `false` 之后，可以重新开启所有动画。
369 |
370 | ## 9、`jQuery.fx.interval`
371 |
372 | 设置jQuery动画每隔多少毫秒绘制一帧图像 (默认为13 毫秒) 数字越小越流畅，但可能影响浏览器性能。
373 |
--------------------------------------------------------------------------------
/第05章 jQuery 工具函数.md:
--------------------------------------------------------------------------------
1 | # 数组和对象操作
2 |
3 | ## 1. `$.each()`
4 |
5 | 通用遍历方法，可用于遍历对象和数组。
6 |
7 | 不同于遍历 jQuery 对象的 `$().each()` 方法，此方法可用于遍历任何对象。回调函数拥有两个参数：第一个为对象的成员或数组的索引，第二个为对应变量或内容。如果需要退出 each 循环可使回调函数返回 false，其它返回值将被忽略。
8 |
9 | ```js
10 | // 1.遍历数组
11 | $.each(['A', 'B', 'C'], function (index, val) {
12 | console.log(`下标：${index}，值：${val}`);
13 | });
14 | /*
15 | 下标：0，值：A
16 | 下标：1，值：B
17 | 下标：2，值：C*/
18 |
19 | // 2.遍历对象
20 | $.each({name:'Henry', age: 28}, function (key, val) {
21 | console.log(`键：${key}，值：${val}`);
22 | });
23 | /*
24 | 键：name，值：Henry
25 | 键：age， 值：28*/
26 | ```
27 |
28 | ## 2. `$.extend()`
29 |
30 | 用一个或多个其他对象来扩展一个对象，返回被扩展的对象。
31 |
32 | ```js
33 | function tool(options) {
34 | // 默认配置
35 | let configs = {
36 | duration: 1000,
37 | interval: 15
38 | };
39 | // 修改默认配置
40 | $.extend(configs, options);
41 | console.log(configs); // {duration: 2000, interval: 15, color: "green"}
42 | }
43 | tool({
44 | duration: 2000,
45 | color: 'green'
46 | });
47 | ```
48 |
49 | ## 3. `$.grep()`
50 |
51 | 过滤数组元素
52 |
53 | ```js
54 | resArr = $.grep([1, 2, 3, 4], (num, index) => {
55 | return num % 2 == 0;
56 | });
57 | console.log(resArr); // [2, 4]
58 | ```
59 |
60 |
61 |
62 |
--------------------------------------------------------------------------------