-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
1196 lines (1156 loc) · 122 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JSLite</title>
<link rel="stylesheet" type="text/css" href="static/css/main.css">
</head>
<body>
<div class="nav">
<div class="logo">
JSLite
</div>
<ul><li class="active"><a href="index.html">文档</a></li><li><a href="html/关于.html">关于</a></li></ul></div>
<div class="forkgithub"><a target="_blank" href="https://github.com/JSLite/JSLite"></a></div>
<div class="warpper">
<div class="page-toc">
<ul><li><a href="#t0核心">核心</a><ul><li><a href="#t1$()">$()</a></li><li><a href="#t2JSLite()">JSLite()</a></li><li><a href="#t3noConflict">noConflict</a><ul><li><a href="#t4常规">常规</a></li><li><a href="#t5映射回原始的对象">映射回原始的对象</a></li><li><a href="#t6恢复使用别名">恢复使用别名</a></li><li><a href="#t7简写">简写</a></li><li><a href="#t8创建别名">创建别名</a></li><li><a href="#t9新的命名空间">新的命名空间</a></li></ul></li></ul></li><li><a href="#t10插件编写">插件编写</a><ul><li><a href="#t11$.extend">$.extend</a></li><li><a href="#t12$.fn.extend">$.fn.extend</a></li><li><a href="#t13$.error">$.error</a></li></ul></li><li><a href="#t14字符串处理">字符串处理</a><ul><li><a href="#t15$.trim">$.trim</a></li><li><a href="#t16trim">trim</a></li></ul></li><li><a href="#t17URL">URL</a><ul><li><a href="#t18$.getUrlParam">$.getUrlParam</a></li><li><a href="#t19$.param">$.param</a></li></ul></li><li><a href="#t20数组对象操作">数组对象操作</a><ul><li><a href="#t21最大(小)值">最大(小)值</a></li><li><a href="#t22Array.remove">Array.remove</a></li><li><a href="#t23$.intersect">$.intersect</a></li><li><a href="#t24$.unique">$.unique</a></li><li><a href="#t25$.sibling">$.sibling</a></li><li><a href="#t26$.inArray">$.inArray</a></li><li><a href="#t27$.map">$.map</a></li><li><a href="#t28$.each">$.each</a></li><li><a href="#t29$.grep">$.grep</a></li><li><a href="#t30$.parseJSON">$.parseJSON</a></li></ul></li><li><a href="#t31测试操作">测试操作</a><ul><li><a href="#t32$.isDocument">$.isDocument</a></li><li><a href="#t33$.isWindow">$.isWindow</a></li><li><a href="#t34$.isFunction">$.isFunction</a></li><li><a href="#t35$.isObject">$.isObject</a></li><li><a href="#t36$.isPlainObject">$.isPlainObject</a></li><li><a href="#t37$.isArray">$.isArray</a></li><li><a href="#t38$.isJson">$.isJson</a></li><li><a href="#t39$.contains">$.contains</a></li><li><a href="#t40$.likeArray">$.likeArray</a></li><li><a href="#t41$.type">$.type</a></li><li><a href="#t42$.matches">$.matches</a></li><li><a href="#t43is">is</a></li></ul></li><li><a href="#t44对象访问">对象访问</a><ul><li><a href="#t45each">each</a></li><li><a href="#t46map">map</a></li><li><a href="#t47forEach">forEach</a></li><li><a href="#t48eq">eq</a></li><li><a href="#t49first">first</a></li><li><a href="#t50get">get</a></li><li><a href="#t51index">index</a></li><li><a href="#t52indexOf">indexOf</a></li><li><a href="#t53length">length</a></li></ul></li><li><a href="#t54HTML代码/文本/值">HTML代码/文本/值</a><ul><li><a href="#t55text">text</a></li><li><a href="#t56html">html</a></li><li><a href="#t57val">val</a></li><li><a href="#t58data">data</a></li></ul></li><li><a href="#t59节点属性">节点属性</a><ul><li><a href="#t60pluck">pluck</a></li><li><a href="#t61attr">attr</a></li><li><a href="#t62removeAttr">removeAttr</a></li><li><a href="#t63prop">prop</a></li><li><a href="#t64removeProp">removeProp</a></li></ul></li><li><a href="#t65CSS 类">CSS 类</a><ul><li><a href="#t66css">css</a></li><li><a href="#t67hasClass">hasClass</a></li><li><a href="#t68addClass">addClass</a></li><li><a href="#t69removeClass">removeClass</a></li><li><a href="#t70toggleClass">toggleClass</a></li></ul></li><li><a href="#t71效果">效果</a><ul><li><a href="#t72toggle">toggle</a></li><li><a href="#t73show">show</a></li><li><a href="#t74hide">hide</a></li></ul></li><li><a href="#t75尺寸位置">尺寸位置</a><ul><li><a href="#t76offset">offset</a></li><li><a href="#t77width">width</a></li><li><a href="#t78height">height</a></li><li><a href="#t79scrollLeft">scrollLeft</a></li><li><a href="#t80scrollTop">scrollTop</a></li></ul></li><li><a href="#t81过滤">过滤</a><ul><li><a href="#t82filter">filter</a></li><li><a href="#t83not">not</a></li></ul></li><li><a href="#t84删除节点">删除节点</a><ul><li><a href="#t85empty">empty</a></li><li><a href="#t86remove">remove</a></li><li><a href="#t87detach !">detach !</a></li></ul></li><li><a href="#t88查找节点">查找节点</a><ul><li><a href="#t89find">find</a></li><li><a href="#t90children">children</a></li><li><a href="#t91contents">contents</a></li><li><a href="#t92parent">parent</a></li><li><a href="#t93parents">parents</a></li><li><a href="#t94closest">closest</a></li><li><a href="#t95prev">prev</a></li><li><a href="#t96next">next</a></li><li><a href="#t97prevAll">prevAll</a></li><li><a href="#t98nextAll">nextAll</a></li><li><a href="#t99siblings">siblings</a></li><li><a href="#t100slice">slice</a></li><li><a href="#t101add">add</a></li></ul></li><li><a href="#t102插入节点方法">插入节点方法</a><ul><li><a href="#t103prepend">prepend</a></li><li><a href="#t104prependTo">prependTo</a></li><li><a href="#t105append">append</a></li><li><a href="#t106appendTo">appendTo</a></li><li><a href="#t107after">after</a></li><li><a href="#t108insertAfter">insertAfter</a></li><li><a href="#t109before">before</a></li><li><a href="#t110insertBefore">insertBefore</a></li><li><a href="#t111unwrap">unwrap</a></li><li><a href="#t112replaceWith">replaceWith</a></li><li><a href="#t113clone">clone</a></li></ul></li><li><a href="#t114事件处理">事件处理</a><ul><li><a href="#t115ready">ready</a></li><li><a href="#t116$(func)">$(func)</a></li><li><a href="#t117bind">bind</a></li><li><a href="#t118unbind">unbind</a></li><li><a href="#t119on">on</a></li><li><a href="#t120off">off</a></li><li><a href="#t121trigger">trigger</a></li></ul></li><li><a href="#t122Ajax">Ajax</a><ul><li><a href="#t123$.get">$.get</a></li><li><a href="#t124$.ajax(GET)">$.ajax(GET)</a></li><li><a href="#t125$.getJSON">$.getJSON</a></li><li><a href="#t126jsonp">jsonp</a></li><li><a href="#t127$.post">$.post</a></li><li><a href="#t128$.ajax(POST)">$.ajax(POST)</a></li><li><a href="#t129$.ajaxJSONP">$.ajaxJSONP</a></li><li><a href="#t130load">load</a></li></ul></li><li><a href="#t131Form">Form</a><ul><li><a href="#t132submit">submit</a></li><li><a href="#t133serializeArray">serializeArray</a></li><li><a href="#t134serialize">serialize</a></li></ul></li><li><a href="#t135最近访客">最近访客</a></li><li><a href="#t136给我留言">给我留言</a></li></ul>
</div>
<div class="content markdown-body">
<h1 id="t0核心">核心 <a href="#t0核心"> # </a></h1>
<h2 id="t1$()">$() <a href="#t1$()"> # </a></h2>
<blockquote>
<p>选择器使用的是浏览器自带的方法的 <code>document.querySelectorAll</code> 接口，支持标准的 CSS 选择器，没有使用jQuery作者John Resig开发的DOM选择器引擎(Dom Selector Engine) <code>Sizzle</code> 。
目前 IE8/9及Firefox/Chrome/Safari/Opera 的最新版已经支持 <code>querySelectorAll</code> 。 </p>
<p><code>$(selector)</code> //⇒ 选择节点<br><code>$("<DOM nodes>")</code> //⇒ 生成节点<br><code>$("htmlString")</code> //⇒ 生成<br><code>JSLite(function($){ ... })</code> //⇒ 相当于ready</p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-string">"#box"</span>) <span class="hljs-comment">//⇒ 返回节点数组 //⇒ [<div>​…​</div>​]</span>
$(<span class="hljs-string">"<div></div>"</span>) <span class="hljs-comment">//⇒ 生成div节点</span>
<span class="hljs-comment">//JSLite(func) 相当于ready</span>
JSLite(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">$</span>)</span>{
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">"在节点加载完成之后执行"</span>)
})
<span class="hljs-comment">//$(func) 相当于ready</span>
$(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">$</span>)</span>{
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">"在节点加载完成之后执行"</span>)
})
</code></pre>
<h2 id="t2JSLite()">JSLite() <a href="#t2JSLite()"> # </a></h2>
<blockquote>
<p>与<code>$()</code>相同。</p>
</blockquote>
<h2 id="t3noConflict">noConflict <a href="#t3noConflict"> # </a></h2>
<p><code>noConflict()</code> 方法让渡变量 $ 的 <code>JSLite</code> 控制权，解决俩库之间的$冲突。<br>该方法释放 <code>JSLite</code> 对 <code>$</code> 变量的控制。<br>该方法也可用于为 <code>JSLite</code> 变量规定新的自定义名称。 </p>
<h3 id="t4常规">常规 <a href="#t4常规"> # </a></h3>
<pre><code class="lang-js">$.noConflict();
JSLite(<span class="hljs-built_in">document</span>).ready(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">$</span>) </span>{
<span class="hljs-comment">// 使用 JSLite $ 的代码</span>
});
<span class="hljs-comment">// 使用其他库的 $ 的代码</span>
</code></pre>
<h3 id="t5映射回原始的对象">映射回原始的对象 <a href="#t5映射回原始的对象"> # </a></h3>
<p>将 <code>$</code> 引用的对象映射回原始的对象：</p>
<pre><code class="lang-js">JSLite.noConflict();
JSLite(<span class="hljs-string">"div p"</span>).hide(); <span class="hljs-comment">// 使用 JSLite</span>
$(<span class="hljs-string">"content"</span>).style.display = <span class="hljs-string">"none"</span>; <span class="hljs-comment">// 使用其他库的 $()</span>
</code></pre>
<h3 id="t6恢复使用别名">恢复使用别名 <a href="#t6恢复使用别名"> # </a></h3>
<p>恢复使用别名 <code>$</code>，然后创建并执行一个函数，在这个函数的作用域中仍然将 <code>$</code> 作为 <code>JSLite</code> 的别名来使用。在这个函数中，原来的 <code>$</code> 对象是无效的。这个函数对于大多数不依赖于其他库的插件都十分有效：</p>
<pre><code class="lang-js">JSLite.noConflict();
(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">$</span>) </span>{
$(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
<span class="hljs-comment">// 使用 $ 作为 JSLite 别名的代码</span>
});
})(JSLite);
... <span class="hljs-comment">// 其他用 $ 作为别名的库的代码</span>
</code></pre>
<h3 id="t7简写">简写 <a href="#t7简写"> # </a></h3>
<p>可以将 <code>JSLite.noConflict()</code> 与简写的 <code>ready</code> 结合，使代码更紧凑</p>
<pre><code class="lang-js">JSLite.noConflict()(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
<span class="hljs-comment">// 使用 JSLite 的代码</span>
<span class="hljs-built_in">console</span>.log($(<span class="hljs-string">'div'</span>))
});
</code></pre>
<h3 id="t8创建别名">创建别名 <a href="#t8创建别名"> # </a></h3>
<p>创建一个新的别名用以在接下来的库中使用 <code>JSLite</code> 对象：</p>
<pre><code class="lang-js"><span class="hljs-keyword">var</span> j = JSLite.noConflict();
j(<span class="hljs-string">"#box"</span>).hide(); <span class="hljs-comment">// 基于 JSLite 的代码</span>
$(<span class="hljs-string">"content"</span>).style.display = <span class="hljs-string">"none"</span>; <span class="hljs-comment">// 基于其他库的 $() 代码</span>
</code></pre>
<h3 id="t9新的命名空间">新的命名空间 <a href="#t9新的命名空间"> # </a></h3>
<p>完全将 <code>JSLite</code> 移到一个新的命名空间：</p>
<pre><code class="lang-js"><span class="hljs-keyword">var</span> dom = {};
dom.jslite = JSLite.noConflict(<span class="hljs-literal">true</span>);
</code></pre>
<p>结果:</p>
<pre><code class="lang-js">dom.jslite(<span class="hljs-string">"div p"</span>).hide(); <span class="hljs-comment">// 新 JSLite 的代码</span>
$(<span class="hljs-string">"content"</span>).style.display = <span class="hljs-string">"none"</span>; <span class="hljs-comment">// 另一个库 $() 的代码</span>
JSLite(<span class="hljs-string">"div > p"</span>).hide(); <span class="hljs-comment">// 另一个版本 JSLite 的代码</span>
</code></pre>
<hr>
<h1 id="t10插件编写">插件编写 <a href="#t10插件编写"> # </a></h1>
<h2 id="t11$.extend">$.extend <a href="#t11$.extend"> # </a></h2>
<blockquote>
<p>通过源对象扩展目标对象的属性，扩展 <code>JSLite</code> 元素集来提供新的方法（通常用来制作插件）</p>
</blockquote>
<pre><code class="lang-js">$.extend({
min: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">a, b</span>) </span>{ <span class="hljs-keyword">return</span> a < b ? a : b; },
max: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">a, b</span>) </span>{ <span class="hljs-keyword">return</span> a > b ? a : b; }
});
$.min(<span class="hljs-number">2</span>,<span class="hljs-number">3</span>); <span class="hljs-comment">//⇒ 2</span>
$.max(<span class="hljs-number">4</span>,<span class="hljs-number">5</span>); <span class="hljs-comment">//⇒ 5</span>
<span class="hljs-comment">// 在$上扩展了几个方法 </span>
<span class="hljs-comment">//调用方法 $.min(2,3); //⇒ 2</span>
<span class="hljs-comment">//调用方法 $.max(4,5); //⇒ 5</span>
</code></pre>
<h2 id="t12$.fn.extend">$.fn.extend <a href="#t12$.fn.extend"> # </a></h2>
<blockquote>
<p>扩展 <code>JSLite</code> 元素集来提供新的方法（通常用来制作插件）。</p>
</blockquote>
<pre><code class="lang-js">$.fn.extend({ <span class="hljs-comment">//增加两个插件方法。</span>
check: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.each(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword">this</span>.checked = <span class="hljs-literal">true</span>; });
},
uncheck: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.each(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword">this</span>.checked = <span class="hljs-literal">false</span>; });
}
});
$(<span class="hljs-string">"input[type=checkbox]"</span>).check(); <span class="hljs-comment">//选中</span>
$(<span class="hljs-string">"input[type=radio]"</span>).uncheck(); <span class="hljs-comment">//取消选中</span>
</code></pre>
<h2 id="t13$.error">$.error <a href="#t13$.error"> # </a></h2>
<blockquote>
<p>当元素遇到错误（没有正确载入）时，发生 <code>error</code> 事件。</p>
</blockquote>
<pre><code class="lang-js">$.error(<span class="hljs-string">"2222"</span>)
<span class="hljs-comment">//⇒ 输出错误 Uncaught 2222</span>
</code></pre>
<hr>
<h1 id="t14字符串处理">字符串处理 <a href="#t14字符串处理"> # </a></h1>
<h2 id="t15$.trim">$.trim <a href="#t15$.trim"> # </a></h2>
<p>去掉字符串起始和结尾的空格。</p>
<pre><code class="lang-js">$.trim(<span class="hljs-string">" hello, how are you? "</span>);<span class="hljs-comment">//⇒ "hello, how are you?"</span>
</code></pre>
<h2 id="t16trim">trim <a href="#t16trim"> # </a></h2>
<p>同上，去掉字符串起始和结尾的空格。</p>
<pre><code class="lang-js"><span class="hljs-string">" hello, how are you? "</span>.trim()<span class="hljs-comment">//⇒ "hello, how are you?"</span>
</code></pre>
<hr>
<h1 id="t17URL">URL <a href="#t17URL"> # </a></h1>
<h2 id="t18$.getUrlParam">$.getUrlParam <a href="#t18$.getUrlParam"> # </a></h2>
<blockquote>
<p>获取 <code>url</code> 参数的值。</p>
</blockquote>
<pre><code class="lang-js"><span class="hljs-comment">//[URL] = http://blog.pc175.com/?param=2</span>
$.getUrlParam(<span class="hljs-string">"param"</span>) <span class="hljs-comment">//⇒ 2</span>
</code></pre>
<h2 id="t19$.param">$.param <a href="#t19$.param"> # </a></h2>
<blockquote>
<p>将表单元素数组或者对象序列化。如果shallow设置为true，嵌套对象不会被序列化，嵌套数组的值不会使用放括号在他们的key上。<br><code>$.param(object, [shallow]) ⇒ string</code><br><code>$.param(array) ⇒ string</code> </p>
</blockquote>
<pre><code class="lang-js">$.param({
foo: {one: <span class="hljs-number">1</span>,two: <span class="hljs-number">2</span> }
}) <span class="hljs-comment">//⇒ "foo[one]=1&foo[two]=2"</span>
$.param({
ids:[<span class="hljs-string">"a1"</span>,<span class="hljs-string">"b2"</span>,<span class="hljs-string">"c3"</span>],
c:{g:<span class="hljs-number">23</span>,e:[<span class="hljs-number">567</span>]},
a:<span class="hljs-number">3</span>
},<span class="hljs-literal">true</span>) <span class="hljs-comment">//⇒ ids=a1&&ids=b2&&ids=c3&&c=[object Object]&a=3</span>
$.param({
ids:[<span class="hljs-string">"a1"</span>,<span class="hljs-string">"b2"</span>,<span class="hljs-string">"c3"</span>],
c:{g:<span class="hljs-number">23</span>,e:[<span class="hljs-number">567</span>]},
a:<span class="hljs-number">3</span>
}) <span class="hljs-comment">//⇒ ids[]=a1&&ids[]=b2&&ids[]=c3&&c[g]=23&&c[e]=567&&a=3</span>
$.param([<span class="hljs-number">1</span>,<span class="hljs-number">2</span>,<span class="hljs-number">3</span>]) <span class="hljs-comment">//⇒ 0=1&&1=2&&2=3</span>
$.param({
ids:[<span class="hljs-number">1</span>,<span class="hljs-number">2</span>,<span class="hljs-number">3</span>]
}) <span class="hljs-comment">//=> "ids[]=1&ids[]=2&ids[]=3"</span>
</code></pre>
<hr>
<h1 id="t20数组对象操作">数组对象操作 <a href="#t20数组对象操作"> # </a></h1>
<h2 id="t21最大(小)值">最大(小)值 <a href="#t21最大(小)值"> # </a></h2>
<pre><code class="lang-js"><span class="hljs-comment">//顺带小教程</span>
<span class="hljs-comment">//获取最大值最小值</span>
<span class="hljs-keyword">var</span> a=[<span class="hljs-number">1</span>,<span class="hljs-number">2</span>,<span class="hljs-number">3</span>,<span class="hljs-number">5</span>];
<span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">Math</span>.max.apply(<span class="hljs-literal">null</span>, a));<span class="hljs-comment">//最大值</span>
<span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">Math</span>.min.apply(<span class="hljs-literal">null</span>, a));<span class="hljs-comment">//最小值</span>
<span class="hljs-keyword">var</span> a=[<span class="hljs-number">1</span>,<span class="hljs-number">2</span>,<span class="hljs-number">3</span>,[<span class="hljs-number">5</span>,<span class="hljs-number">6</span>],[<span class="hljs-number">1</span>,<span class="hljs-number">4</span>,<span class="hljs-number">8</span>]];
<span class="hljs-keyword">var</span> ta=a.join(<span class="hljs-string">","</span>).split(<span class="hljs-string">","</span>);<span class="hljs-comment">//转化为一维数组</span>
<span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">Math</span>.max.apply(<span class="hljs-literal">null</span>,ta));<span class="hljs-comment">//最大值</span>
<span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">Math</span>.min.apply(<span class="hljs-literal">null</span>,ta));<span class="hljs-comment">//最小值</span>
</code></pre>
<h2 id="t22Array.remove">Array.remove <a href="#t22Array.remove"> # </a></h2>
<blockquote>
<p>这个是在Array原型对象上扩展的。</p>
</blockquote>
<pre><code class="lang-js">[<span class="hljs-number">1</span>,<span class="hljs-number">5</span>,<span class="hljs-number">6</span>].remove(<span class="hljs-number">1</span>)<span class="hljs-comment">//⇒ [5, 6]</span>
</code></pre>
<h2 id="t23$.intersect">$.intersect <a href="#t23$.intersect"> # </a></h2>
<blockquote>
<p>数组交集</p>
</blockquote>
<pre><code class="lang-js">$.intersect([<span class="hljs-number">1</span>,<span class="hljs-number">2</span>,<span class="hljs-number">3</span>,<span class="hljs-string">'asdkjf'</span>],[<span class="hljs-number">2</span>,<span class="hljs-number">3</span>,<span class="hljs-number">6</span>,<span class="hljs-string">'asdkjf'</span>])
<span class="hljs-comment">//⇒ [2, 3, "asdkjf"]</span>
</code></pre>
<h2 id="t24$.unique">$.unique <a href="#t24$.unique"> # </a></h2>
<blockquote>
<p>删除数组中重复元素。</p>
</blockquote>
<pre><code class="lang-js">$.unique([<span class="hljs-number">1</span>,<span class="hljs-number">2</span>,<span class="hljs-number">12</span>,<span class="hljs-number">3</span>,<span class="hljs-number">2</span>,<span class="hljs-number">1</span>,<span class="hljs-number">2</span>,<span class="hljs-number">1</span>,<span class="hljs-number">1</span>,<span class="hljs-number">1</span>,<span class="hljs-number">1</span>]) <span class="hljs-comment">//⇒ [1, 2, 12, 3]</span>
<span class="hljs-keyword">var</span> arr = $(<span class="hljs-string">'#box'</span>).concat($(<span class="hljs-string">'#box'</span>)) <span class="hljs-comment">//两个一模一样的数组</span>
$.unique(arr) <span class="hljs-comment">//去重</span>
</code></pre>
<h2 id="t25$.sibling">$.sibling <a href="#t25$.sibling"> # </a></h2>
<blockquote>
<p>根据类型获取节点对象属性的集合 <code>(node,type)</code>。</p>
</blockquote>
<pre><code class="lang-js">$.sibling($(<span class="hljs-string">"input"</span>),<span class="hljs-string">"type"</span>) <span class="hljs-comment">//⇒ ["text", "button", "checkbox"] </span>
$.sibling($(<span class="hljs-string">"input"</span>),<span class="hljs-string">"tagName"</span>) <span class="hljs-comment">//⇒ ["INPUT"]</span>
</code></pre>
<h2 id="t26$.inArray">$.inArray <a href="#t26$.inArray"> # </a></h2>
<blockquote>
<p>搜索数组中指定值并返回它的索引（如果没有找到则返回<code>-1</code>)。</p>
</blockquote>
<pre><code class="lang-js"><span class="hljs-keyword">var</span> arr = [ <span class="hljs-number">4</span>, <span class="hljs-string">"Pete"</span>, <span class="hljs-number">8</span>, <span class="hljs-string">"John"</span> ];
$.inArray(<span class="hljs-string">"John"</span>, arr); <span class="hljs-comment">//⇒ 3</span>
$.inArray(<span class="hljs-number">4</span>, arr); <span class="hljs-comment">//⇒ 0</span>
$.inArray(<span class="hljs-string">"David"</span>, arr); <span class="hljs-comment">//⇒ -1</span>
$.inArray(<span class="hljs-string">"Pete"</span>, arr, <span class="hljs-number">2</span>); <span class="hljs-comment">//⇒ -1</span>
</code></pre>
<h2 id="t27$.map">$.map <a href="#t27$.map"> # </a></h2>
<blockquote>
<p>通过遍历集合中的节点对象，通过函数返回一个新的数组，<code>null</code> 或 <code>undefined</code> 将被过滤掉。</p>
</blockquote>
<pre><code class="lang-js">$.map({<span class="hljs-string">"w"</span>:<span class="hljs-number">1</span>,<span class="hljs-string">"c"</span>:<span class="hljs-number">2</span>,<span class="hljs-string">"j"</span>:<span class="hljs-number">3</span>},<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">idx,item</span>)</span>{
<span class="hljs-keyword">return</span> item
});
<span class="hljs-comment">//⇒ ["w", "c", "j"]</span>
</code></pre>
<h2 id="t28$.each">$.each <a href="#t28$.each"> # </a></h2>
<blockquote>
<p>通用例遍方法，可用于例遍对象和数组</p>
</blockquote>
<pre><code class="lang-js">$.each([<span class="hljs-string">'a'</span>, <span class="hljs-string">'b'</span>, <span class="hljs-string">'c'</span>], <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">index, item</span>)</span>{
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'item %d is: %s'</span>, index, item)
})
</code></pre>
<h2 id="t29$.grep">$.grep <a href="#t29$.grep"> # </a></h2>
<blockquote>
<p>使用过滤函数过滤数组元素。</p>
</blockquote>
<pre><code class="lang-js">$.grep( [<span class="hljs-number">0</span>,<span class="hljs-number">1</span>,<span class="hljs-number">2</span>], <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">n,i</span>)</span>{
<span class="hljs-keyword">return</span> n != <span class="hljs-number">0</span>;
});
</code></pre>
<h2 id="t30$.parseJSON">$.parseJSON <a href="#t30$.parseJSON"> # </a></h2>
<blockquote>
<p>与 <code>JSON.parse</code> 方法相同，接受一个标准格式的 JSON 字符串，并返回解析后的 JavaScript 对象。</p>
</blockquote>
<hr>
<h1 id="t31测试操作">测试操作 <a href="#t31测试操作"> # </a></h1>
<h2 id="t32$.isDocument">$.isDocument <a href="#t32$.isDocument"> # </a></h2>
<blockquote>
<p>判断对象是否为【document】。</p>
</blockquote>
<pre><code class="lang-js">$.isDocument(<span class="hljs-built_in">document</span>) <span class="hljs-comment">//⇒ true</span>
</code></pre>
<h2 id="t33$.isWindow">$.isWindow <a href="#t33$.isWindow"> # </a></h2>
<blockquote>
<p>确定参数是否为一个窗口（window对象），如果是则返回true。这在处理iframe时非常有用，因为每个iframe都有它们自己的window对象，使用常规方法obj==window校验这些objects的时候会失败。</p>
</blockquote>
<h2 id="t34$.isFunction">$.isFunction <a href="#t34$.isFunction"> # </a></h2>
<blockquote>
<p>判断对象是否为函数【function】。</p>
</blockquote>
<pre><code class="lang-js">$.isFunction(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{}) <span class="hljs-comment">//⇒ true</span>
</code></pre>
<h2 id="t35$.isObject">$.isObject <a href="#t35$.isObject"> # </a></h2>
<blockquote>
<p>判断是否为 <code>Object</code> 。</p>
</blockquote>
<pre><code class="lang-js">$.isObject({}) <span class="hljs-comment">//⇒ true</span>
</code></pre>
<h2 id="t36$.isPlainObject">$.isPlainObject <a href="#t36$.isPlainObject"> # </a></h2>
<blockquote>
<p><code>$.isPlainObject(object) ⇒ boolean</code><br>如果通过 "{}" 或者 "new Object" 创建的则返回true。判断对象是否是纯粹的对象。</p>
</blockquote>
<pre><code class="lang-js">$.isPlainObject({}) <span class="hljs-comment">// => true</span>
$.isPlainObject(<span class="hljs-keyword">new</span> <span class="hljs-built_in">Object</span>) <span class="hljs-comment">// => true</span>
$.isPlainObject(<span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>) <span class="hljs-comment">// => false</span>
$.isPlainObject(<span class="hljs-built_in">window</span>) <span class="hljs-comment">// => false</span>
</code></pre>
<h2 id="t37$.isArray">$.isArray <a href="#t37$.isArray"> # </a></h2>
<blockquote>
<p>判断是否为【数组】。</p>
</blockquote>
<pre><code class="lang-js">$.isArray([<span class="hljs-number">1</span>,<span class="hljs-number">2</span>,<span class="hljs-number">3</span>]) <span class="hljs-comment">//⇒ true</span>
</code></pre>
<h2 id="t38$.isJson">$.isJson <a href="#t38$.isJson"> # </a></h2>
<blockquote>
<p>判断是否为【数组】。</p>
</blockquote>
<pre><code class="lang-js">$.isJson({}) <span class="hljs-comment">//⇒ true</span>
</code></pre>
<h2 id="t39$.contains">$.contains <a href="#t39$.contains"> # </a></h2>
<blockquote>
<p><code>$.contains(parent, node) ⇒ boolean</code>
<code>parent</code>是否包含<code>node</code>节点对象。</p>
</blockquote>
<pre><code class="lang-js">$.contains($(<span class="hljs-string">"#box"</span>)[<span class="hljs-number">0</span>],$(<span class="hljs-string">".boxss"</span>)[<span class="hljs-number">0</span>]) <span class="hljs-comment">//⇒ parent是否包含node节点对象</span>
</code></pre>
<h2 id="t40$.likeArray">$.likeArray <a href="#t40$.likeArray"> # </a></h2>
<blockquote>
<p>判断对象是否为数组或者是字符。</p>
</blockquote>
<pre><code class="lang-js">$.likeArray([<span class="hljs-number">1</span>,<span class="hljs-number">2</span>,<span class="hljs-number">3</span>]) <span class="hljs-comment">//⇒ true</span>
$.likeArray(<span class="hljs-string">"222"</span>) <span class="hljs-comment">//⇒ true</span>
</code></pre>
<h2 id="t41$.type">$.type <a href="#t41$.type"> # </a></h2>
<blockquote>
<p>获取JavaScript 对象的类型。可能的类型有： <code>null</code> <code>undefined</code> <code>boolean</code> <code>number</code> <code>string</code> <code>function</code> <code>array</code> <code>date</code> <code>regexp</code> <code>object</code> <code>error</code> 。</p>
</blockquote>
<pre><code class="lang-js">$.type(<span class="hljs-literal">true</span>) <span class="hljs-comment">//⇒ Boolean</span>
$.type(<span class="hljs-string">"div"</span>) <span class="hljs-comment">//⇒ String</span>
</code></pre>
<h2 id="t42$.matches">$.matches <a href="#t42$.matches"> # </a></h2>
<blockquote>
<p>如果当前节点能被指定的css选择器查找到，则返回<code>true</code>，否则返回<code>false</code>。<br><code>$.matches(element,selector) ⇒ boolean</code></p>
</blockquote>
<pre><code class="lang-js">$.matches($(<span class="hljs-string">"#box"</span>)[<span class="hljs-number">0</span>], <span class="hljs-string">"#box"</span>)<span class="hljs-comment">//⇒ true</span>
</code></pre>
<h2 id="t43is">is <a href="#t43is"> # </a></h2>
<blockquote>
<p>判断当前匹配的元素集合中的元素，是否为一个选择器，DOM元素
is(selector) ⇒ boolean<br>is(element) ⇒ boolean</p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-string">'#box'</span>).is(<span class="hljs-string">'div'</span>); <span class="hljs-comment">//⇒ true </span>
$(<span class="hljs-string">'#box'</span>).is(<span class="hljs-string">'#box'</span>); <span class="hljs-comment">//⇒ true </span>
$(<span class="hljs-string">'#box'</span>).is(<span class="hljs-string">'#boxsss'</span>); <span class="hljs-comment">//⇒ false </span>
$(<span class="hljs-string">'div'</span>).is($(<span class="hljs-string">'#box'</span>)[<span class="hljs-number">0</span>]) <span class="hljs-comment">//⇒ true 节点是否在 $('#box')[0] 是否再集合中</span>
</code></pre>
<hr>
<h1 id="t44对象访问">对象访问 <a href="#t44对象访问"> # </a></h1>
<h2 id="t45each">each <a href="#t45each"> # </a></h2>
<blockquote>
<p>遍历一个 <code>JSLite</code> 集合对象，为每一个匹配元素执行一个函数。this关键字指向当前item(作为函数的第二个参数传递)。如果函数返回 false，遍历结束。</p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-string">"img"</span>).each(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">i</span>)</span>{
<span class="hljs-keyword">this</span>.src = <span class="hljs-string">"test"</span> + i + <span class="hljs-string">".jpg"</span>;
});
<span class="hljs-comment">//⇒ 找到所有的img对象给设置src </span>
<span class="hljs-comment">//⇒ 返回 [ <img src="test0.jpg" />, <img src="test1.jpg" /> ]</span>
</code></pre>
<h2 id="t46map">map <a href="#t46map"> # </a></h2>
<blockquote>
<p>遍历节点对象集合中的所有节点对象返回一个新的集合对象</p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-string">".box"</span>).map(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">index,item</span>)</span>{
<span class="hljs-keyword">return</span> $(<span class="hljs-keyword">this</span>).text()
})
<span class="hljs-comment">//⇒ 返回 ["12boxOne", "6", "11", "22123456", "7123123"]</span>
</code></pre>
<h2 id="t47forEach">forEach <a href="#t47forEach"> # </a></h2>
<blockquote>
<p>类似 each，forEach遍历不会停止。</p>
</blockquote>
<pre><code class="lang-js"><span class="hljs-comment">//遍历数组</span>
[<span class="hljs-number">1</span>,<span class="hljs-number">5</span>,<span class="hljs-number">2</span>,<span class="hljs-number">3</span>].forEach(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">item,index,array</span>)</span>{
<span class="hljs-built_in">console</span>.log(item,index,array)
})
<span class="hljs-comment">//遍历节点</span>
$(<span class="hljs-string">"img"</span>).forEach(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">item,index,array</span>)</span>{
<span class="hljs-built_in">console</span>.log(item,index,array)
})
</code></pre>
<h2 id="t48eq">eq <a href="#t48eq"> # </a></h2>
<blockquote>
<p>指定匹配元素的集合为的索引的哪一个元素。一个整数，指示元素的位置，以 <code>0</code> 为基数。
eq(index) ⇒ collection
eq(-index) ⇒ collection</p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-string">"div"</span>).eq(<span class="hljs-number">0</span>)<span class="hljs-comment">//⇒ 返回数组第一个节点数组 [div#box.boxOne.box2.box3, init: function…]</span>
$(<span class="hljs-string">"div"</span>).eq(-<span class="hljs-number">1</span>)<span class="hljs-comment">//⇒ 倒数第一个节点数组</span>
$(<span class="hljs-string">"div"</span>).eq(-<span class="hljs-number">2</span>)<span class="hljs-comment">//⇒ 倒数第二个节点数组</span>
</code></pre>
<h2 id="t49first">first <a href="#t49first"> # </a></h2>
<blockquote>
<p>获取当前对象集合中的第一个元素。
first() ⇒ collection</p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-string">'form'</span>).first()
</code></pre>
<h2 id="t50get">get <a href="#t50get"> # </a></h2>
<blockquote>
<p>当前对象集合中获取所有节点对象或单个节点对象。</p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-string">"div"</span>).get(<span class="hljs-number">0</span>)<span class="hljs-comment">//⇒ 返回节点 <div id="box" class="boxOne box2 box3" ></div></span>
</code></pre>
<h2 id="t51index">index <a href="#t51index"> # </a></h2>
<blockquote>
<p>获取一个元素的位置。当elemen参数没有给出时，返回当前元素在兄弟节点中的位置。
.index() //对象中第一个元素相对于它同辈元素的位置
.index(selector)<br>.index(element)</p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-string">"#box"</span>).index()<span class="hljs-comment">//⇒ 4</span>
$(<span class="hljs-string">"div"</span>).index(<span class="hljs-string">"#box"</span>)<span class="hljs-comment">//⇒ 2</span>
$(<span class="hljs-string">"div"</span>).index($(<span class="hljs-string">"#box"</span>))<span class="hljs-comment">//⇒ 2</span>
$(<span class="hljs-string">"div"</span>).index($(<span class="hljs-string">"#box"</span>)[<span class="hljs-number">0</span>])<span class="hljs-comment">//⇒ 2</span>
</code></pre>
<h2 id="t52indexOf">indexOf <a href="#t52indexOf"> # </a></h2>
<blockquote>
<p>在当前获取的节点数组中获取一个元素在这个数组的位置。</p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-string">"div"</span>).indexOf($(<span class="hljs-string">"#box"</span>)[<span class="hljs-number">0</span>])
<span class="hljs-comment">//⇒ 2</span>
</code></pre>
<h2 id="t53length">length <a href="#t53length"> # </a></h2>
<blockquote>
<p>对象中元素的个数。</p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-string">"img"</span>).length;
<span class="hljs-comment">//⇒ 2</span>
</code></pre>
<hr>
<h1 id="t54HTML代码/文本/值">HTML代码/文本/值 <a href="#t54HTML代码/文本/值"> # </a></h1>
<h2 id="t55text">text <a href="#t55text"> # </a></h2>
<blockquote>
<p>取得所有匹配节点对象的文本内容。</p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-string">"#box"</span>).text() <span class="hljs-comment">//⇒ string 返回文本</span>
$(<span class="hljs-string">"#box"</span>).text(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
<span class="hljs-keyword">return</span> <span class="hljs-string">"这里干点儿什么？"</span>
}) <span class="hljs-comment">//⇒ string 返回"#box"中的文本</span>
</code></pre>
<h2 id="t56html">html <a href="#t56html"> # </a></h2>
<blockquote>
<p>获取或设置节点对象内容。</p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-string">"#box"</span>).html()
<span class="hljs-comment">//⇒ string 返回包括HTML的文本</span>
</code></pre>
<h2 id="t57val">val <a href="#t57val"> # </a></h2>
<blockquote>
<p>获取设置input的 value 。</p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-string">'input'</span>).val() <span class="hljs-comment">//⇒ string </span>
$(<span class="hljs-string">'input'</span>).val(<span class="hljs-string">'test'</span>) <span class="hljs-comment">//⇒ self </span>
$(<span class="hljs-string">'#input'</span>).val(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">index,oldvalue</span>)</span>{
<span class="hljs-built_in">console</span>.log(index,oldvalue)
<span class="hljs-keyword">return</span> <span class="hljs-string">'111'</span> + oldvalue
}) <span class="hljs-comment">//⇒ self</span>
</code></pre>
<h2 id="t58data">data <a href="#t58data"> # </a></h2>
<blockquote>
<p>读取或写入dom的 data-* 属性。
data(name) ⇒ value
data(name, value) ⇒ self</p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-string">'#test'</span>).eq(<span class="hljs-number">0</span>).data(<span class="hljs-string">'name'</span>,{<span class="hljs-string">"sss"</span>:<span class="hljs-number">1</span>}) <span class="hljs-comment">//⇒ self</span>
$(<span class="hljs-string">'#test'</span>).eq(<span class="hljs-number">0</span>).data(<span class="hljs-string">'name'</span>,[<span class="hljs-number">1</span>,<span class="hljs-number">2</span>,<span class="hljs-number">3</span>,<span class="hljs-number">4</span>]) <span class="hljs-comment">//⇒ self </span>
$(<span class="hljs-string">'#test'</span>).eq(<span class="hljs-number">0</span>).data(<span class="hljs-string">'name'</span>) <span class="hljs-comment">//⇒ [1,2,3,4] 或者 {"sss":1} 对象</span>
$(<span class="hljs-string">'#test'</span>).data({<span class="hljs-string">"aa"</span>:<span class="hljs-number">1</span>,<span class="hljs-string">"www"</span>:<span class="hljs-number">334343</span>}) <span class="hljs-comment">//⇒ 设置节点属性 data-aa="1" | data-www="334343"</span>
$(<span class="hljs-string">'#test'</span>).data() <span class="hljs-comment">//⇒ {"aa":1,"www":334343}</span>
</code></pre>
<hr>
<h1 id="t59节点属性">节点属性 <a href="#t59节点属性"> # </a></h1>
<h2 id="t60pluck">pluck <a href="#t60pluck"> # </a></h2>
<blockquote>
<p>获取对象集合中每一个元素的属性值。</p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-string">"#box"</span>).pluck(<span class="hljs-string">"nodeName"</span>) <span class="hljs-comment">//⇒ ["DIV"]</span>
$(<span class="hljs-string">"#box"</span>).pluck(<span class="hljs-string">"nextElementSibling"</span>) <span class="hljs-comment">//⇒ <div class="boxs">1234567890</div></span>
$(<span class="hljs-string">"#box"</span>).pluck(<span class="hljs-string">'children'</span>) <span class="hljs-comment">//⇒ [HTMLCollection[4]]</span>
</code></pre>
<h2 id="t61attr">attr <a href="#t61attr"> # </a></h2>
<blockquote>
<p>读取或设置dom的属性。</p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-string">".button"</span>).attr({<span class="hljs-string">"class"</span>:<span class="hljs-string">""</span>,<span class="hljs-string">"style"</span>:<span class="hljs-string">"background:red"</span>}) <span class="hljs-comment">//⇒ self 设置红色清空class</span>
$(<span class="hljs-string">".button"</span>).attr(<span class="hljs-string">"class"</span>,<span class="hljs-string">"name"</span>) <span class="hljs-comment">//⇒ self 设置class替换之前的</span>
$(<span class="hljs-string">".button"</span>).attr(<span class="hljs-string">"class"</span>) <span class="hljs-comment">//⇒ string 获取class属性值</span>
</code></pre>
<h2 id="t62removeAttr">removeAttr <a href="#t62removeAttr"> # </a></h2>
<blockquote>
<p>移动当前对象集合中所有元素的指定属性。</p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-string">"#box"</span>).removeAttr(<span class="hljs-string">"class"</span>) <span class="hljs-comment">//⇒ self 移除class</span>
</code></pre>
<h2 id="t63prop">prop <a href="#t63prop"> # </a></h2>
<blockquote>
<p>读取或设置dom的属性。它在读取属性值的情况下优先于 <a href="#attr">attr</a>，因为这些属性值会因为用户的交互发生改变，如 <code>checked</code> 和 <code>selected</code> 。</p>
</blockquote>
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"taiyang"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"check1"</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"checkbox"</span> <span class="hljs-attribute">checked</span>=<span class="hljs-value">"checked"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"yaotaiyang"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"check2"</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"checkbox"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript">
$(<span class="hljs-string">"#check1"</span>).attr(<span class="hljs-string">"checked"</span>); <span class="hljs-comment">//=> "checked"</span>
$(<span class="hljs-string">"#check1"</span>).prop(<span class="hljs-string">"checked"</span>); <span class="hljs-comment">//=> "true"</span>
$(<span class="hljs-string">"#check2"</span>).attr(<span class="hljs-string">"checked"</span>); <span class="hljs-comment">//=> "false"</span>
$(<span class="hljs-string">"#check2"</span>).prop(<span class="hljs-string">"checked"</span>); <span class="hljs-comment">//=> "false"</span>
$(<span class="hljs-string">"input[type='checkbox']"</span>).prop(<span class="hljs-string">"type"</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">index,oldvalue</span>)</span>{
<span class="hljs-built_in">console</span>.log(index+<span class="hljs-string">"|"</span>+oldvalue);
});
<span class="hljs-comment">//=> 0|checkbox</span>
<span class="hljs-comment">//=> 1|checkbox</span>
$(<span class="hljs-string">"input[type='checkbox']"</span>).prop(<span class="hljs-string">"className"</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">index,oldvalue</span>)</span>{
<span class="hljs-built_in">console</span>.log(index+<span class="hljs-string">"|"</span>+oldvalue);
});
<span class="hljs-comment">//=> 0|taiyang</span>
<span class="hljs-comment">//=> 1|yaotaiyang</span>
</span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
</code></pre>
<h2 id="t64removeProp">removeProp <a href="#t64removeProp"> # </a></h2>
<blockquote>
<p>为集合中匹配的元素删除一个属性（property）。<code>removeProp()</code> 方法用来删除由<code>.prop()</code>方法设置的属性集。</p>
</blockquote>
<p><strong>注意</strong>: 不要使用此方法来删除原生的属性（ property ），比如checked, disabled, 或者 selected。这将完全移除该属性，一旦移除，不能再次被添加到元素上。使用.prop()来设置这些属性设置为false代替。</p>
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-title">p</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"n2"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"demo test"</span> <span class="hljs-attribute">data-key</span>=<span class="hljs-value">"UUID"</span> <span class="hljs-attribute">data_value</span>=<span class="hljs-value">"1235456465"</span>></span>CodePlayer<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"><<span class="hljs-title">script</span>></span><span class="javascript">
<span class="hljs-keyword">var</span> $n2 = $(<span class="hljs-string">"#n2"</span>);
$n2.prop(<span class="hljs-string">"prop_a"</span>, <span class="hljs-string">"CodePlayer"</span>);
$n2.prop(<span class="hljs-string">"prop_b"</span>, { name: <span class="hljs-string">"CodePlayer"</span>, age: <span class="hljs-number">20</span> } );
<span class="hljs-built_in">console</span>.log($n2.prop(<span class="hljs-string">"prop_a"</span>)) <span class="hljs-comment">//⇒ CodePlayer</span>
<span class="hljs-built_in">console</span>.log($n2.prop(<span class="hljs-string">"prop_b"</span>)) <span class="hljs-comment">//⇒ Object {name: "CodePlayer", age: 20}</span>
$n2.removeProp(<span class="hljs-string">"data-key"</span>);
$n2.prop(<span class="hljs-string">"data-key"</span>) <span class="hljs-comment">//⇒ undefined</span>
$n2.attr(<span class="hljs-string">"data-key"</span>) <span class="hljs-comment">//⇒ "UUID"</span>
</span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
</code></pre>
<hr>
<h1 id="t65CSS 类">CSS 类 <a href="#t65CSS 类"> # </a></h1>
<h2 id="t66css">css <a href="#t66css"> # </a></h2>
<blockquote>
<p>获取或设置节点对象的style样式内容。</p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-string">"#box"</span>).css(<span class="hljs-string">'color'</span>,<span class="hljs-string">'yellow'</span>) <span class="hljs-comment">//⇒ self 返回Array 节点内容</span>
$(<span class="hljs-string">"#box"</span>).css({<span class="hljs-string">'color'</span>:<span class="hljs-string">'yellow'</span>}) <span class="hljs-comment">//⇒ self 返回Array 节点内容</span>
</code></pre>
<h2 id="t67hasClass">hasClass <a href="#t67hasClass"> # </a></h2>
<blockquote>
<p>集合中是否有节点对象含有指定的class。</p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-string">"#box"</span>).hasClass(<span class="hljs-string">'box2'</span>) <span class="hljs-comment">//⇒ true</span>
</code></pre>
<h2 id="t68addClass">addClass <a href="#t68addClass"> # </a></h2>
<blockquote>
<p>为每个匹配的节点对象添加指定的class类名。</p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-string">"#box"</span>).addClass(<span class="hljs-string">'box23 go'</span>) <span class="hljs-comment">//⇒ self 原有对象class上添加 box23和 go</span>
$(<span class="hljs-string">"#box"</span>).addClass(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
<span class="hljs-keyword">return</span> <span class="hljs-string">'box23 wcj'</span>
}) <span class="hljs-comment">//⇒ self 原有对象class上添加 box23 和wcj</span>
</code></pre>
<h2 id="t69removeClass">removeClass <a href="#t69removeClass"> # </a></h2>
<blockquote>
<p>清除节点对象中所有节点对象的指定class类名，不填写清空。</p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-string">"#box"</span>).removeClass(<span class="hljs-string">'box23'</span>) <span class="hljs-comment">//⇒ self 删除原有对象class中box23</span>
$(<span class="hljs-string">"div"</span>).removeClass() <span class="hljs-comment">//⇒ self 所有匹配的对象class属性被删除</span>
</code></pre>
<h2 id="t70toggleClass">toggleClass <a href="#t70toggleClass"> # </a></h2>
<blockquote>
<p>在匹配的节点对象集合中的每个节点对象上添加或删除一个或多个样式类。</p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-string">"#box"</span>).toggleClass(<span class="hljs-string">'box1 box2'</span>) <span class="hljs-comment">//⇒ self 原有对象class上添加 "box1 box2"或者删除"box1 box2"</span>
</code></pre>
<hr>
<h1 id="t71效果">效果 <a href="#t71效果"> # </a></h1>
<h2 id="t72toggle">toggle <a href="#t72toggle"> # </a></h2>
<blockquote>
<p>显示或隐藏匹配节点对象。</p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-string">"#box"</span>).toggle() <span class="hljs-comment">//⇒ self 原有对象如果隐藏就显示，如果显示就隐藏。</span>
</code></pre>
<h2 id="t73show">show <a href="#t73show"> # </a></h2>
<blockquote>
<p>显示匹配节点对象。</p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-string">"#box"</span>).show() <span class="hljs-comment">//⇒ self 显示匹配节点对象</span>
</code></pre>
<h2 id="t74hide">hide <a href="#t74hide"> # </a></h2>
<blockquote>
<p>隐藏匹配节点对象。</p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-string">"#box"</span>).hide() <span class="hljs-comment">//⇒ self 隐藏匹配的对象</span>
</code></pre>
<hr>
<h1 id="t75尺寸位置">尺寸位置 <a href="#t75尺寸位置"> # </a></h1>
<h2 id="t76offset">offset <a href="#t76offset"> # </a></h2>
<blockquote>
<p>获得当前元素相对于document的位置。返回一个对象含有：left|top|width|height</p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-string">"#box"</span>).offset() <span class="hljs-comment">//⇒Object {left: 8, top: 8, width: 1260, height: 0}</span>
$(<span class="hljs-string">"#box"</span>).offset().left <span class="hljs-comment">//⇒ 8</span>
</code></pre>
<h2 id="t77width">width <a href="#t77width"> # </a></h2>
<blockquote>
<p>width() ⇒ number<br>width(value) ⇒ self<br>width(function(index, oldWidth){ ... }) ⇒ self<br>获取对象象集合中第一个元素的宽，或设置对象集合所有元素的宽。</p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-string">'#box'</span>).width() <span class="hljs-comment">// => 342</span>
$(<span class="hljs-built_in">window</span>).width() <span class="hljs-comment">// => 456 (可视区域宽度)</span>
$(<span class="hljs-built_in">document</span>).width() <span class="hljs-comment">// => dsf</span>
</code></pre>
<h2 id="t78height">height <a href="#t78height"> # </a></h2>
<blockquote>
<p>height() ⇒ number<br>height(value) ⇒ self<br>height(function(index, oldWidth){ ... }) ⇒ self<br>获取对象象集合中第一个元素的高，或设置对象集合所有元素的高。</p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-string">'#box'</span>).height() <span class="hljs-comment">// => 342</span>
$(<span class="hljs-built_in">window</span>).height() <span class="hljs-comment">// => 456 (可视区域高度)</span>
$(<span class="hljs-built_in">document</span>).height() <span class="hljs-comment">// => dsf</span>
</code></pre>
<h2 id="t79scrollLeft">scrollLeft <a href="#t79scrollLeft"> # </a></h2>
<blockquote>
<p>scrollLeft() ⇒ self
获取匹配的元素集合中第一个元素的当前水平滚动条的位置</p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-string">'body'</span>).scrollLeft(<span class="hljs-number">400</span>);
</code></pre>
<h2 id="t80scrollTop">scrollTop <a href="#t80scrollTop"> # </a></h2>
<blockquote>
<p>scrollTop() ⇒ self
获取匹配的元素集合中第一个元素的当前垂直滚动条的位置</p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-string">'body'</span>).scrollTop(<span class="hljs-number">400</span>);
</code></pre>
<hr>
<h1 id="t81过滤">过滤 <a href="#t81过滤"> # </a></h1>
<h2 id="t82filter">filter <a href="#t82filter"> # </a></h2>
<blockquote>
<p>筛选出与指定表达式匹配的元素集合。<br><code>filter(selector)</code><br><code>filter(function(index){ ... })</code> 筛选出与 <code>非</code> 指定表达式匹配的元素集合。</p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-string">"div"</span>).filter(<span class="hljs-string">"#box"</span>) <span class="hljs-comment">//⇒ self 在所有的div对象中选择器为 #box 的过滤出来。</span>
$(<span class="hljs-string">"#select option"</span>).filter(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">idx</span>)</span>{
<span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.selected)
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.selected
})
<span class="hljs-comment">//上面这种方法跟 not(function(index){ ... }) 是一样的</span>
</code></pre>
<h2 id="t83not">not <a href="#t83not"> # </a></h2>
<blockquote>
<p>not(selector) ⇒ collection<br>not(collection) ⇒ collection<br>not(function(index){ ... }) ⇒ collection<br>筛选出与 <code>非</code> 指定表达式匹配的元素集合。它的作用刚好与 <code>filter</code> 相反，返回。</p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-string">"#select option"</span>).not(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">idx</span>)</span>{
<span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.selected)
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.selected
})
<span class="hljs-comment">//⇒ [<option value="3">哈哈3</option>]</span>
$(<span class="hljs-string">'input'</span>).not(<span class="hljs-string">'#input'</span>) <span class="hljs-comment">//⇒ 返回除去 匹配到的#input</span>
$(<span class="hljs-string">'input'</span>).not(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
<span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.type)
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.type==<span class="hljs-string">'text'</span>
})
</code></pre>
<hr>
<h1 id="t84删除节点">删除节点 <a href="#t84删除节点"> # </a></h1>
<h2 id="t85empty">empty <a href="#t85empty"> # </a></h2>
<blockquote>
<p>所有匹配节点对象集合中移除所有的dom子节点，不包括自己，清空内容。</p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-string">"#box"</span>).empty()
<span class="hljs-comment">//⇒ self <div id="box" class="boxOne box2 box3" ></div></span>
</code></pre>
<h2 id="t86remove">remove <a href="#t86remove"> # </a></h2>
<blockquote>
<p>删除所有匹配节点对象【自己】及所有【自己】里面的内容。</p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-string">"#box"</span>).remove()
<span class="hljs-comment">//⇒ self <div id="box" class="boxOne box2 box3" ></div></span>
</code></pre>
<h2 id="t87detach !">detach ! <a href="#t87detach !"> # </a></h2>
<blockquote>
<p>被遗弃的方法(不建议使用)，作用跟remove一样，所有绑定的事件、附加的数据等都会保留下来。</p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-string">"#box"</span>).click(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">"wcj"</span>)
})
<span class="hljs-keyword">var</span> a = $(<span class="hljs-string">'#box'</span>).detach();<span class="hljs-comment">//删除的对象赋给a</span>
$(<span class="hljs-string">'body'</span>).append(a)<span class="hljs-comment">//将a添加到 body 中还是可以点击</span>
</code></pre>
<hr>
<h1 id="t88查找节点">查找节点 <a href="#t88查找节点"> # </a></h1>
<h2 id="t89find">find <a href="#t89find"> # </a></h2>
<blockquote>
<p>后代节点的集合(可以带上滤选择器)。</p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-string">"#box"</span>).find() <span class="hljs-comment">//⇒后代节点的集合</span>
$(<span class="hljs-string">"#box"</span>).find(<span class="hljs-string">".box"</span>) <span class="hljs-comment">//⇒后代节点的集合，返回匹配'.box' 的集合</span>
</code></pre>
<h2 id="t90children">children <a href="#t90children"> # </a></h2>
<blockquote>
<p>获得每个匹配元素集合元素的直接子元素(可以带上滤选择器)。</p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-string">"#box"</span>).children()
<span class="hljs-comment">//下面这种方法也可以的 CSS3 节点选择器 -_+</span>
$(<span class="hljs-string">"#box *"</span>)
</code></pre>
<h2 id="t91contents">contents <a href="#t91contents"> # </a></h2>
<blockquote>
<p>获得每个匹配元素集合元素的子元素，包括文字和注释节点。
<code>contents() ⇒ collection</code></p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-string">"#box"</span>).contents()
</code></pre>
<h2 id="t92parent">parent <a href="#t92parent"> # </a></h2>
<blockquote>
<p>对象集合中每个元素的直接父元素。</p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-string">"#box"</span>).parent()
</code></pre>
<h2 id="t93parents">parents <a href="#t93parents"> # </a></h2>
<blockquote>
<p>获取对象集合每个元素所有的祖先元素（不包含根元素）。<br><code>parents([selector]) ⇒ collection</code></p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-string">"#box"</span>).parents()
$(<span class="hljs-string">"#boxWhy"</span>).parents(<span class="hljs-string">".boxss"</span>)
</code></pre>
<h2 id="t94closest">closest <a href="#t94closest"> # </a></h2>
<blockquote>
<p>从元素本身开始，逐级向上级元素匹配，并返回最先匹配<code>selector</code>的祖先元素。如果<code>context</code>节点参数存在。那么直考虑该节点的后代。这个方法与 <code>parents(selector)</code>有点相像，但他只返回最先匹配的祖先元素。</p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-string">"#box"</span>).closest(<span class="hljs-string">'div'</span>)
$(<span class="hljs-built_in">document</span>).bind(<span class="hljs-string">"click"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>) </span>{
<span class="hljs-built_in">console</span>.log(e.target)<span class="hljs-comment">//当前点击的对象</span>
$(e.target).closest(<span class="hljs-string">"li"</span>).css(<span class="hljs-string">'background'</span>,<span class="hljs-string">'red'</span>);
});
$(<span class="hljs-string">"#boxWhy"</span>).closest(<span class="hljs-string">'.boxss'</span>,$(<span class="hljs-string">'#box'</span>)[<span class="hljs-number">0</span>])<span class="hljs-comment">//#boxWhy节点的父节点为："$('#box')[0]"的子节点".boxss"</span>
</code></pre>
<h2 id="t95prev">prev <a href="#t95prev"> # </a></h2>
<blockquote>
<p>获取对象集合每个元素的所有上一个对象(可以带上滤选择器)。</p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-string">"#box"</span>).prev(<span class="hljs-string">"div"</span>)
</code></pre>
<h2 id="t96next">next <a href="#t96next"> # </a></h2>
<blockquote>
<p>获取对象集合每个元素的所有下一个对象(可以带上滤选择器)。</p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-string">"#box"</span>).next(<span class="hljs-string">"div"</span>)
</code></pre>
<h2 id="t97prevAll">prevAll <a href="#t97prevAll"> # </a></h2>
<blockquote>
<p>获取对此对象【上】所有兄弟对象(可以带上滤选择器)。</p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-string">"#box"</span>).prevAll(<span class="hljs-string">"div"</span>)
</code></pre>
<h2 id="t98nextAll">nextAll <a href="#t98nextAll"> # </a></h2>
<blockquote>
<p>获取对此对象【下】所有兄弟对象(可以带上滤选择器)。</p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-string">"#box"</span>).nextAll(<span class="hljs-string">"div"</span>)
</code></pre>
<h2 id="t99siblings">siblings <a href="#t99siblings"> # </a></h2>
<blockquote>
<p>获取对此对象【其它】所有兄弟对象(可以带上滤选择器)。</p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-string">"#box"</span>).siblings()
</code></pre>
<h2 id="t100slice">slice <a href="#t100slice"> # </a></h2>
<blockquote>
<p>array中提取的方法。从start开始，如果end 指出。提取不包含end位置的元素。
<code>slice(start, [end]) ⇒ array</code></p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-string">"div"</span>).slice(<span class="hljs-number">3</span>) <span class="hljs-comment">//返回数组中第三个(包含第三个)之后的所有元素</span>
$(<span class="hljs-string">"div"</span>).slice(<span class="hljs-number">3</span>,<span class="hljs-number">5</span>) <span class="hljs-comment">//返回数组 3-5之间的元素</span>
</code></pre>
<h2 id="t101add">add <a href="#t101add"> # </a></h2>
<blockquote>
<p>添加元素到匹配的<code>JSLite</code>对象集合</p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-string">"#box"</span>).siblings()
</code></pre>
<hr>
<h1 id="t102插入节点方法">插入节点方法 <a href="#t102插入节点方法"> # </a></h1>
<h2 id="t103prepend">prepend <a href="#t103prepend"> # </a></h2>
<blockquote>
<p>插入到标签开始标记之后（里面的第一个）。<br><code>prepend(content) ⇒ self</code>
<code>prepend(Function) ⇒ self</code> </p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-string">"#box"</span>).prepend(<span class="hljs-string">"dd"</span>) <span class="hljs-comment">//⇒ self</span>
$(<span class="hljs-string">"#box"</span>).prepend(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
<span class="hljs-keyword">return</span> <span class="hljs-string">"asdfasdf"</span>
}) <span class="hljs-comment">//⇒ self</span>
</code></pre>
<h2 id="t104prependTo">prependTo <a href="#t104prependTo"> # </a></h2>
<blockquote>
<p>将生成的内容插入到匹配的节点标签开始标记之后。这有点像prepend，但是是相反的方式。<br><code>prependTo(selector) ⇒ self</code></p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-string">'<div>test</div>'</span>).prependTo(<span class="hljs-string">'#box'</span>)
</code></pre>
<h2 id="t105append">append <a href="#t105append"> # </a></h2>
<blockquote>
<p>插入到标签结束标记前（里面的结尾）。<br><code>append(content) ⇒ self</code>
<code>append(Function) ⇒ self</code></p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-string">"#box"</span>).append(<span class="hljs-string">"dd"</span>) <span class="hljs-comment">//⇒ self</span>
$(<span class="hljs-string">"#box"</span>).append(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
<span class="hljs-keyword">return</span> <span class="hljs-string">"asdfasdf"</span>
}) <span class="hljs-comment">//⇒ self</span>
</code></pre>
<h2 id="t106appendTo">appendTo <a href="#t106appendTo"> # </a></h2>
<blockquote>
<p>将生成的内容插入到匹配的元素标签结束标记前（里面的最后）。这个有点像append，但是插入的目标与其相反。
<code>appendTo(selector) ⇒ self</code></p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-string">'<div>test</div>'</span>).appendTo(<span class="hljs-string">'#box'</span>)
</code></pre>
<h2 id="t107after">after <a href="#t107after"> # </a></h2>
<blockquote>
<p>插入到标签结束标记后。（兄弟节点的下面）<br><code>after(content) ⇒ self</code>
<code>after(Function) ⇒ self</code> </p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-string">"#box"</span>).after(<span class="hljs-string">"dd"</span>) <span class="hljs-comment">//⇒ self</span>
$(<span class="hljs-string">"#box"</span>).after(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
<span class="hljs-keyword">return</span> <span class="hljs-string">"asdfasdf"</span>
}) <span class="hljs-comment">//⇒ self</span>
</code></pre>
<h2 id="t108insertAfter">insertAfter <a href="#t108insertAfter"> # </a></h2>
<blockquote>
<p>插入的对象集合中的元素到指定的每个元素后面的dom中。这个有点像 <code>after</code> ，但是使用方式相反。<br><code>insertAfter(selector) ⇒ self</code> </p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-string">'<p>test</p>'</span>).insertAfter(<span class="hljs-string">'#box'</span>) <span class="hljs-comment">//⇒ self</span>
$(<span class="hljs-string">'#input'</span>).insertAfter(<span class="hljs-string">'#box'</span>) <span class="hljs-comment">//⇒ self $('#input')</span>
</code></pre>
<h2 id="t109before">before <a href="#t109before"> # </a></h2>
<blockquote>
<p>插入到标签开始前。<br><code>after(content) ⇒ self</code>
<code>after(Function) ⇒ self</code> </p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-string">"#box"</span>).before($(<span class="hljs-string">'input'</span>)) <span class="hljs-comment">//⇒ self</span>
$(<span class="hljs-string">"#box"</span>).before(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
<span class="hljs-keyword">return</span> <span class="hljs-string">"asdfasdf"</span>
}) <span class="hljs-comment">//⇒ self</span>
</code></pre>
<h2 id="t110insertBefore">insertBefore <a href="#t110insertBefore"> # </a></h2>
<blockquote>
<p>将生成的内容插入 <code>selector</code> 匹配的节点标签开始前。这个有点像 <code>before</code>，但是使用方式相反。
<code>insertBefore(selector) ⇒ self</code> </p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-string">'<p>test</p>'</span>).insertBefore(<span class="hljs-string">'#box'</span>)
</code></pre>
<h2 id="t111unwrap">unwrap <a href="#t111unwrap"> # </a></h2>
<blockquote>
<p>移除集合中每个元素的直接父节点，并把他们的子元素保留在原来的位置。 基本上，这种方法删除上一的祖先元素，同时保持DOM中的当前元素。
<code>replaceWith(content|fn)</code> </p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-string">"p"</span>).unwrap() <span class="hljs-comment">// ⇒ self</span>
</code></pre>
<h2 id="t112replaceWith">replaceWith <a href="#t112replaceWith"> # </a></h2>
<blockquote>
<p>将所有匹配的元素替换成指定的HTML或DOM元素。<br><code>replaceWith(content|fn)</code> </p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-string">"p"</span>).replaceWith(<span class="hljs-string">"<b>段落。</b>"</span>);
</code></pre>
<p>用第一段替换第三段，你可以发现他是移动到目标位置来替换，而不是复制一份来替换。 </p>
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"container"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"inner first"</span>></span>Hello<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"inner second"</span>></span>And<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"inner third"</span>></span>Goodbye<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript">
$(<span class="hljs-string">'.third'</span>).replaceWith($(<span class="hljs-string">'.first'</span>)); <span class="hljs-comment">// ⇒ 返回 “.third” 节点</span>
</span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
</code></pre>
<p>上面的结果</p>
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"container"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"inner second"</span>></span>And<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"inner first"</span>></span>Hello<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
</code></pre>
<h2 id="t113clone">clone <a href="#t113clone"> # </a></h2>
<blockquote>
<p>clone() ⇒ collection<br>通过深度克隆来复制集合中的所有元素。(通过原生 <code>cloneNode</code> 方法深度克隆来复制集合中的所有元素。此方法不会有数据和事件处理程序复制到新的元素。这点和jquery中利用一个参数来确定是否复制数据和事件处理不相同。)</p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-string">'body'</span>).append($(<span class="hljs-string">"#box"</span>).clone())
</code></pre>
<hr>
<h1 id="t114事件处理">事件处理 <a href="#t114事件处理"> # </a></h1>
<blockquote>
<p><code>blur</code> <code>focus</code> <code>focusin</code> <code>focusout</code> <code>load</code> <code>resize</code> <code>scroll</code> <code>unload</code> <code>click</code> <code>dblclick</code> <code>mousedown</code> <code>mouseup</code> <code>mousemove</code> <code>mouseover</code> <code>mouseout</code> <code>mouseenter</code> <code>mouseleave</code> <code>change</code> <code>select</code> <code>submit</code> <code>keydown</code> <code>keypress</code> <code>keyup</code> <code>error</code> 对象上直接添加事件。</p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-string">"#box"</span>).click(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">"绑定点击事件"</span>)
});
</code></pre>
<h2 id="t115ready">ready <a href="#t115ready"> # </a></h2>
<blockquote>
<p>ready(function($){ ... }) ⇒ self<br>添加一个事件侦听器，当页面 <code>dom</code> 加载完毕 <code>DOMContentLoaded</code> 事件触发时触发。加载完毕执行，建议使用 <code>$(func)</code> 来代替这种用法。</p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-built_in">document</span>).ready(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
alert(<span class="hljs-string">"当页面dom加载完毕执行"</span>);
<span class="hljs-built_in">console</span>.log($(<span class="hljs-string">"#box"</span>));
})
</code></pre>
<h2 id="t116$(func)">$(func) <a href="#t116$(func)"> # </a></h2>
<blockquote>
<p>加载完毕执行。与 <code>ready</code> 方法相同</p>
</blockquote>
<pre><code class="lang-js"><span class="hljs-comment">//或者使用下面方法代替ready</span>
$(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">"当页面dom加载完毕执行"</span>);
})
</code></pre>
<h2 id="t117bind">bind <a href="#t117bind"> # </a></h2>
<blockquote>
<p>为每个匹配元素的特定事件绑定事件处理函数。可以绑定这些事件 <code>blur</code> <code>focus</code> <code>focusin</code> <code>focusout</code> <code>load</code> <code>resize</code> <code>scroll</code> <code>unload</code> <code>click</code> <code>dblclick</code> <code>mousedown</code> <code>mouseup</code> <code>mousemove</code> <code>mouseover</code> <code>mouseout</code> <code>mouseenter</code> <code>mouseleave</code> <code>change</code> <code>select</code> <code>submit</code> <code>keydown</code> <code>keypress</code> <code>keyup</code> <code>error</code> <code>paste</code> <code>drop</code> <code>dragover</code> 。</p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-string">"#box"</span>).bind(<span class="hljs-string">"click"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">"绑定点击事件"</span>)
});
</code></pre>
<h2 id="t118unbind">unbind <a href="#t118unbind"> # </a></h2>
<blockquote>
<p>解除绑定事件，从每一个匹配的节点对象中删除绑定的事件。</p>
</blockquote>
<pre><code class="lang-js"><span class="hljs-keyword">var</span> f1=<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{alert(<span class="hljs-string">'41'</span>);}
$(<span class="hljs-string">"#box"</span>).bind(<span class="hljs-string">"click"</span>,f1) <span class="hljs-comment">//⇒ 绑定事件</span>
$(<span class="hljs-string">"#box"</span>).unbind(<span class="hljs-string">"click"</span>,f1) <span class="hljs-comment">//⇒ 解除绑定事件</span>
$(<span class="hljs-string">"#box"</span>).bind(<span class="hljs-string">"click"</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{alert(<span class="hljs-string">'41'</span>);}) <span class="hljs-comment">//⇒ 绑定事件</span>
$(<span class="hljs-string">"#box"</span>).unbind(<span class="hljs-string">"click"</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{alert(<span class="hljs-string">'41'</span>);}) <span class="hljs-comment">//⇒ 解除绑定事件</span>
</code></pre>
<h2 id="t119on">on <a href="#t119on"> # </a></h2>
<blockquote>
<p>on(type, [selector], function(e){ ... }) ⇒ self<br>on({ type: handler, type2: handler2, ... }, [selector]) ⇒ self<br>为每个匹配元素的特定事件绑定事件处理函数。可以绑定这些事件 <code>blur</code> <code>focus</code> <code>focusin</code> <code>focusout</code> <code>load</code> <code>resize</code> <code>scroll</code> <code>unload</code> <code>click</code> <code>dblclick</code> <code>mousedown</code> <code>mouseup</code> <code>mousemove</code> <code>mouseover</code> <code>mouseout</code> <code>mouseenter</code> <code>mouseleave</code> <code>change</code> <code>select</code> <code>submit</code> <code>keydown</code> <code>keypress</code> <code>keyup</code> <code>error</code> <code>paste</code> <code>drop</code> <code>dragover</code> 。</p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-string">"#box"</span>).on(<span class="hljs-string">"click"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">"绑定点击事件"</span>)
});
$(<span class="hljs-string">"#box"</span>).on(<span class="hljs-string">'click mouseover'</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">evn</span>)</span>{
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'2'</span>+evn)
}) <span class="hljs-comment">//⇒ self 绑定两个事件</span>
$(<span class="hljs-string">"#box"</span>).on(<span class="hljs-string">'click'</span>,<span class="hljs-string">'p'</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">"被点击了"</span>)
})<span class="hljs-comment">//⇒ self 返回“#box”节点</span>
$(<span class="hljs-string">"#box"</span>).on(<span class="hljs-string">"click"</span>,{val:<span class="hljs-number">1</span>},<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{<span class="hljs-comment">//传参数</span>
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">"dddd"</span>,<span class="hljs-string">"event.data.val = "</span> + event.data.val)
})
$( <span class="hljs-string">"#box"</span> ).on({ <span class="hljs-comment">//绑定多个事件</span>
click: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
$( <span class="hljs-keyword">this</span> ).css(<span class="hljs-string">"background"</span>,<span class="hljs-string">"red"</span>);
},
mouseover: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
$( <span class="hljs-keyword">this</span> ).css(<span class="hljs-string">"background"</span>,<span class="hljs-string">"yellow"</span>)
},
mousedown: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
$( <span class="hljs-keyword">this</span> ).css(<span class="hljs-string">"background"</span>,<span class="hljs-string">"green"</span>)
}
});
</code></pre>
<h2 id="t120off">off <a href="#t120off"> # </a></h2>
<blockquote>
<p>解除绑定事件，从每一个匹配的节点对象中删除绑定的事件。</p>
</blockquote>
<pre><code class="lang-js"><span class="hljs-keyword">var</span> f1=<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{alert(<span class="hljs-string">'41'</span>);}
$(<span class="hljs-string">"#box"</span>).on(<span class="hljs-string">"click"</span>,f1) <span class="hljs-comment">//⇒ 绑定事件</span>
$(<span class="hljs-string">"#box"</span>).off(<span class="hljs-string">"click"</span>,f1) <span class="hljs-comment">//⇒ 解除绑定事件</span>
$(<span class="hljs-string">"#box"</span>).on(<span class="hljs-string">"click"</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{alert(<span class="hljs-string">'41'</span>);}) <span class="hljs-comment">//⇒ 绑定事件</span>
$(<span class="hljs-string">"#box"</span>).off(<span class="hljs-string">"click"</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{alert(<span class="hljs-string">'41'</span>);}) <span class="hljs-comment">//⇒ 解除绑定事件</span>
</code></pre>
<h2 id="t121trigger">trigger <a href="#t121trigger"> # </a></h2>
<blockquote>
<p>trigger(event, [args]) ⇒ self<br>匹配到的节点集合的元素上触发指定的事件。如果给定args参数，它会作为参数传递给事件函数。</p>
</blockquote>
<pre><code class="lang-js">$(<span class="hljs-string">"#box"</span>).on(<span class="hljs-string">'abc:click'</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">evn,a,c</span>)</span>{
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'2'</span>+a+c)
}) <span class="hljs-comment">//⇒ self 绑定一个事件</span>
$(<span class="hljs-string">"#box"</span>).trigger(<span class="hljs-string">'abc:click'</span>,[<span class="hljs-string">'wwww'</span>]) <span class="hljs-comment">//⇒ self 触发并传一个参数进去</span>
</code></pre>
<hr>
<h1 id="t122Ajax">Ajax <a href="#t122Ajax"> # </a></h1>
<p>执行Ajax请求。请求地址可以是本地的或者跨域的，在支持的浏览器中通过 <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS">HTTP access control</a>或者通过 <a href="http://json-p.org/">JSONP</a>来完成。</p>
<blockquote>
<p>执行Ajax请求。<br>type：请求方法 ("GET", "POST")<br>data：(默认：none)发送到服务器的数据；如果是get请求，它会自动被作为参数拼接到url上。非String对象<br>processData (默认： true)： 对于非Get请求。是否自动将 data 转换为字符串。<br>dataType：(<code>json</code>, <code>jsonp</code>, <code>xml</code>, <code>html</code>, or <code>text</code>)<br>contentType：一个额外的"{键:值}"对映射到请求一起发送<br>headers：(默认：{})： 一个额外的"{键:值}"对映射到请求一起发送<br>url：发送请求的地址<br>async：此参数不传默认为true(异步请求)，false同步请求<br>success(cdata)：请求成功之后调用。传入返回后的数据，以及包含成功代码的字符串。<br>error(status, statusText)：请求出错时调用。 (超时，解析错误，或者状态码不在HTTP 2xx)。 </p>
</blockquote>
<h2 id="t123$.get">$.get <a href="#t123$.get"> # </a></h2>
<blockquote>
<p>$.get(url, function(data, status, xhr){ ... }) ⇒ XMLHttpRequest<br>$.get(url, [data], [function(data, status, xhr){ ... }], [dataType]) ⇒ XMLHttpRequest </p>
</blockquote>
<pre><code class="lang-js">$.get(<span class="hljs-string">'http://127.0.0.1/api.php?wcj=123'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">cdata</span>) </span>{
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'ok'</span>, cdata)
},<span class="hljs-string">'json'</span>)