-
Notifications
You must be signed in to change notification settings - Fork 0
/
search.xml
2560 lines (2487 loc) · 732 KB
/
search.xml
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
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title><![CDATA[JQuery-事件]]></title>
<url>http://zak7.com/2017/01/02/JQuery-event/</url>
<content type="html"><![CDATA[<div style="background-image:url(http://115.28.217.112/github/java/cover170102.jpg);background-position: 30% 40%;background-repeat:no-repeat;min-height: 250px;max-width:550px;text-align:center;margin: -20px auto;background-size: cover;"><div class="demo" style="background-color: rgba(105, 94, 94, 0.5);min-width:150px;margin: 0px 0px 0 50%;"><p style="color:#ffffff;padding: 4px;">JQuery事件。</p></div></div>
<a id="more"></a>
]]></content>
</entry>
<entry>
<title><![CDATA[数据结构]]></title>
<url>http://zak7.com/2017/01/01/data-structure/</url>
<content type="html"><![CDATA[<p style="background-color:#b0f4f3;padding:15px">数据结构整理<br></p>
<a id="more"></a><!-- 空一行，上下间距更小 -->]]></content>
</entry>
<entry>
<title><![CDATA[JQuery-DOM操作]]></title>
<url>http://zak7.com/2017/01/01/JQuery-dom/</url>
<content type="html"><![CDATA[<p style="background-color:#f2f4b0;padding:15px">jQuery中节点的创建、插入、删除与替换，除此之外我们还可以了解到jQuery中丰富的遍历节点的方法。</p>
<a id="more"></a>
<h2 id="DOM节点的创建"><a href="#DOM节点的创建" class="headerlink" title="DOM节点的创建"></a>DOM节点的创建</h2><h3 id="javascript"><a href="#javascript" class="headerlink" title="javascript"></a>javascript</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> body = <span class="built_in">document</span>.querySelector(<span class="string">'body'</span>);</span><br><span class="line"><span class="built_in">document</span>.addEventListener(<span class="string">'click'</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{ </span><br><span class="line"> <span class="comment">//创建2个div元素</span></span><br><span class="line"> <span class="keyword">var</span> rightdiv = <span class="built_in">document</span>.createElement(<span class="string">'div'</span>)</span><br><span class="line"> <span class="keyword">var</span> rightaaron = <span class="built_in">document</span>.createElement(<span class="string">"div"</span>);</span><br><span class="line"></span><br><span class="line"> <span class="comment">//给2个div设置不同的属性</span></span><br><span class="line"> rightdiv.setAttribute(<span class="string">'class'</span>, <span class="string">'right'</span>)</span><br><span class="line"> rightaaron.className = <span class="string">'aaron'</span></span><br><span class="line"> rightaaron.innerHTML = <span class="string">"动态创建DIV元素节点"</span>;</span><br><span class="line"></span><br><span class="line"> <span class="comment">//2个div合并成包含关系</span></span><br><span class="line"> rightdiv.appendChild(rightaaron)</span><br><span class="line"> </span><br><span class="line"> <span class="comment">//绘制到页面body</span></span><br><span class="line"> body.appendChild(rightdiv)</span><br><span class="line">},<span class="literal">false</span>)</span><br></pre></td></tr></table></figure>
<h3 id="jQuery"><a href="#jQuery" class="headerlink" title="jQuery"></a>jQuery</h3><p>一条一句就搞定了，跟写HTML结构方式是一样的<br><code>$("<div class='right'><div class='aaron'>动态创建元素节点</div></div>")</code><br>这就是jQuery创建节点的方式，让我们保留HTML的结构书写方式，非常的简单、方便和灵活<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> $body = $(<span class="string">'body'</span>);</span><br><span class="line">$body.on(<span class="string">'click'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="comment">//通过jQuery生成div元素节点</span></span><br><span class="line"> <span class="keyword">var</span> div = $(<span class="string">"<div class='right'><div class='aaron'>动态创建DIV元素节点</div></div>"</span>)</span><br><span class="line"> $body.append(div)</span><br><span class="line">})</span><br></pre></td></tr></table></figure></p>
<h2 id="DOM节点的插入"><a href="#DOM节点的插入" class="headerlink" title="DOM节点的插入"></a>DOM节点的插入</h2><h3 id="append-与appendTo"><a href="#append-与appendTo" class="headerlink" title="append()与appendTo()"></a>append()与appendTo()</h3><blockquote>
<p><code>append(content)</code> 向每个匹配的元素内部追加内容<br><code>appendTo(content)</code> 把所有匹配的元素追加到另一个,指定的元素集合中</p>
</blockquote>
<h3 id="after-与before"><a href="#after-与before" class="headerlink" title="after()与before()"></a>after()与before()</h3><blockquote>
<p><code>after(content)</code> 在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点<br><code>before(content)</code> 据参数设定,在匹配元素的前面插入内容</p>
</blockquote>
<p><strong>2个方法都支持多个参数传递after(div1,div2,….) </strong></p>
<h3 id="prepend-与prependTo"><a href="#prepend-与prependTo" class="headerlink" title="prepend()与prependTo()"></a>prepend()与prependTo()</h3><blockquote>
<p><code>prepend</code> 向每个匹配的元素内部前置内容<br><code>prependTo</code> 把所有匹配的元素前置到另一个指定的元素集合中</p>
</blockquote>
<h3 id="insertAfter-与insertBefore"><a href="#insertAfter-与insertBefore" class="headerlink" title="insertAfter()与insertBefore()"></a>insertAfter()与insertBefore()</h3><blockquote>
<p><code>insertBefore</code> 在目标元素前面插入集合中每个匹配的元素<br><code>prependTo</code> 在目标元素后面插入集合中每个匹配的元素</p>
</blockquote>
<h2 id="DOM节点的删除"><a href="#DOM节点的删除" class="headerlink" title="DOM节点的删除"></a>DOM节点的删除</h2><h3 id="empty"><a href="#empty" class="headerlink" title="empty()"></a>empty()</h3><p><code>empty()</code>方法不仅移除子元素（和其他后代元素），同样移除元素里的文本。</p>
<h3 id="remove-的有参用法和无参用法"><a href="#remove-的有参用法和无参用法" class="headerlink" title="remove()的有参用法和无参用法"></a>remove()的有参用法和无参用法</h3><p><code>remove</code>与<code>empty</code>一样，都是移除元素的方法，但是remove会将元素自身移除，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//通过remove处理</span></span><br><span class="line">$(<span class="string">'.hello'</span>).remove()</span><br><span class="line"><span class="comment">//结果：<div class="hello"><p>慕课网</p></div> 全部被移除</span></span><br><span class="line"><span class="comment">//节点不存在了,同事事件也会被销毁</span></span><br></pre></td></tr></table></figure></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"button:first"</span>).on(<span class="string">'click'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="comment">//删除整个 class=test1的div节点</span></span><br><span class="line"> $(<span class="string">".test1"</span>).remove()</span><br><span class="line">})</span><br><span class="line"></span><br><span class="line">$(<span class="string">"button:last"</span>).on(<span class="string">'click'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="comment">//找到所有p元素中，包含了3的元素</span></span><br><span class="line"> <span class="comment">//这个也是一个过滤器的处理</span></span><br><span class="line"> $(<span class="string">"p"</span>).remove(<span class="string">":contains('3')"</span>)</span><br><span class="line">})</span><br></pre></td></tr></table></figure>
<h3 id="保留数据的删除操作detach"><a href="#保留数据的删除操作detach" class="headerlink" title="保留数据的删除操作detach()"></a>保留数据的删除操作detach()</h3><blockquote>
<p>这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。<br>$(“div”).detach()这一句会移除对象，仅仅是显示效果没有了。但是内存中还是存在的。当你append之后，又重新回到了文档流中。就又显示出来了。</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">'p'</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>{</span><br><span class="line"> alert(e.target.innerHTML)</span><br><span class="line">})</span><br><span class="line"><span class="keyword">var</span> p;</span><br><span class="line">$(<span class="string">"#bt1"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">if</span> (!$(<span class="string">"p"</span>).length) <span class="keyword">return</span>; <span class="comment">//去重</span></span><br><span class="line"> <span class="comment">//通过detach方法删除元素</span></span><br><span class="line"> <span class="comment">//只是页面不可见，但是这个节点还是保存在内存中</span></span><br><span class="line"> <span class="comment">//数据与事件都不会丢失</span></span><br><span class="line"> p = $(<span class="string">"p"</span>).detach()</span><br><span class="line">});</span><br><span class="line"></span><br><span class="line">$(<span class="string">"#bt2"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="comment">//把p元素在添加到页面中</span></span><br><span class="line"> <span class="comment">//事件还是存在</span></span><br><span class="line"> $(<span class="string">"body"</span>).append(p);</span><br><span class="line"> <span class="comment">//多次点击不会重复追加</span></span><br><span class="line">});</span><br></pre></td></tr></table></figure>
<h3 id="detach-与remove-区别"><a href="#detach-与remove-区别" class="headerlink" title="detach()与remove()区别"></a>detach()与remove()区别</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">'p'</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>{</span><br><span class="line"> alert(e.target.innerHTML)</span><br><span class="line">})</span><br><span class="line"></span><br><span class="line">$(<span class="string">"button:first"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> p = $(<span class="string">"p:first"</span>).remove();<span class="comment">//返回删除的元素</span></span><br><span class="line"> p.css(<span class="string">'color'</span>,<span class="string">'red'</span>)</span><br><span class="line"> $(<span class="string">"body"</span>).append(p);</span><br><span class="line">});</span><br><span class="line"></span><br><span class="line">$(<span class="string">"button:last"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> p = $(<span class="string">"p:first"</span>).detach();<span class="comment">//同上</span></span><br><span class="line"> p.css(<span class="string">'color'</span>,<span class="string">'blue'</span>)</span><br><span class="line"> $(<span class="string">"body"</span>).append(p);</span><br><span class="line">});</span><br></pre></td></tr></table></figure>
<h2 id="DOM节点的复制与替换"><a href="#DOM节点的复制与替换" class="headerlink" title="DOM节点的复制与替换"></a>DOM节点的复制与替换</h2><h3 id="DOM拷贝clone"><a href="#DOM拷贝clone" class="headerlink" title="DOM拷贝clone()"></a>DOM拷贝clone()</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//只克隆节点</span></span><br><span class="line"><span class="comment">//不克隆事件</span></span><br><span class="line">$(<span class="string">".aaron1"</span>).on(<span class="string">'click'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> $(<span class="string">".left"</span>).append( $(<span class="keyword">this</span>).clone().css(<span class="string">'color'</span>,<span class="string">'red'</span>) )</span><br><span class="line">})</span><br><span class="line"></span><br><span class="line"><span class="comment">//克隆节点</span></span><br><span class="line"><span class="comment">//克隆事件</span></span><br><span class="line">$(<span class="string">".aaron2"</span>).on(<span class="string">'click'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="number">1</span>)</span><br><span class="line"> $(<span class="string">".left"</span>).append( $(<span class="keyword">this</span>).clone(<span class="literal">true</span>).css(<span class="string">'color'</span>,<span class="string">'blue'</span>) )</span><br><span class="line">})</span><br></pre></td></tr></table></figure>
<h3 id="DOM替换replaceWith-与replaceAll"><a href="#DOM替换replaceWith-与replaceAll" class="headerlink" title="DOM替换replaceWith()与replaceAll()"></a>DOM替换replaceWith()与replaceAll()</h3><ol>
<li><code>.replaceWith( newContent )</code>：用提供的内容替换集合中所有匹配的元素并且<strong>返回被删除元素的集合</strong></li>
<li><code>.replaceAll( target )</code>：用集合的匹配元素替换每个目标元素。</li>
</ol>
<blockquote>
<p><code>.replaceAll()</code>和<code>.replaceWith()</code>功能类似，但是目标和源相反</p>
</blockquote>
<ul>
<li>.replaceAll()和.replaceWith()功能类似，主要是目标和源的位置区别</li>
<li>.replaceWith()与.replaceAll() 方法会删除与节点相关联的所有数据和事件处理程序</li>
<li>.replaceWith()方法，和大部分其他jQuery方法一样，返回jQuery对象，所以可以和其他方法链接使用</li>
<li>.replaceWith()方法返回的jQuery对象，引用的是替换前的节点，而不是通过replaceWith/replaceAll方法替换后的节点</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">".bt1"</span>).on(<span class="string">'click'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="comment">//找到内容为第二段的p元素</span></span><br><span class="line"> <span class="comment">//通过replaceWith删除并替换这个节点</span></span><br><span class="line"> $(<span class="string">".right > div:first p:eq(1)"</span>).replaceWith(<span class="string">'<a style="color:red">replaceWith替换第二段的内容</a>'</span>)</span><br><span class="line">})</span><br></pre></td></tr></table></figure>
<h3 id="DOM包裹wrap-方法"><a href="#DOM包裹wrap-方法" class="headerlink" title="DOM包裹wrap()方法"></a>DOM包裹wrap()方法</h3><p><code>.wrap( wrappingElement )</code>：在集合中匹配的每个元素周围包裹一个HTML结构<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">".aaron1"</span>).on(<span class="string">'click'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="comment">//给所有p元素，增加父容器div</span></span><br><span class="line"> $(<span class="string">'p'</span>).wrap(<span class="string">'<div></div>'</span>)</span><br><span class="line">})</span><br><span class="line"></span><br><span class="line">$(<span class="string">".aaron2"</span>).on(<span class="string">'click'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> a=$(<span class="string">'a'</span>).wrap(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> <span class="string">'<div class="'</span> + $(<span class="keyword">this</span>).text() + <span class="string">'" />'</span>;</span><br><span class="line"> })</span><br><span class="line"> <span class="comment">//返回原始的元素集</span></span><br><span class="line"> alert(a.parent().html())</span><br><span class="line"> <span class="comment">//输出<a>a元素</a></span></span><br><span class="line">})</span><br></pre></td></tr></table></figure></p>
<h3 id="DOM包裹unwrap-方法"><a href="#DOM包裹unwrap-方法" class="headerlink" title="DOM包裹unwrap()方法"></a>DOM包裹unwrap()方法</h3><p>jQuery提供了一个<code>unwarp()</code>方法 ，作用与wrap方法是相反的。将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">".aaron1"</span>).on(<span class="string">'click'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="comment">//找到所有p元素，删除父容器div</span></span><br><span class="line"> $(<span class="string">'p'</span>).unwrap(<span class="string">'<div></div>'</span>)</span><br><span class="line">})</span><br><span class="line"></span><br><span class="line">$(<span class="string">".aaron2"</span>).on(<span class="string">'click'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="comment">//找到所有p元素，删除父容器div</span></span><br><span class="line"> $(<span class="string">'a'</span>).unwrap(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> <span class="string">'<div></div>'</span>;</span><br><span class="line"> })</span><br><span class="line">})</span><br></pre></td></tr></table></figure></p>
<h3 id="DOM包裹wrapAll-方法"><a href="#DOM包裹wrapAll-方法" class="headerlink" title="DOM包裹wrapAll()方法"></a>DOM包裹wrapAll()方法</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">p</span>></span>p元素<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"><<span class="name">p</span>></span>p元素<span class="tag"></<span class="name">p</span>></span></span><br></pre></td></tr></table></figure>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">$('p').wrapAll('<div></div>')</span><br><span class="line"></span><br><span class="line"><div></span><br><span class="line"> <p>p元素</p></span><br><span class="line"> <p>p元素</p></span><br><span class="line"></div></span><br></pre></td></tr></table></figure>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">$('p').wrapAll(function() {</span><br><span class="line"> return '<div><div/>'; </span><br><span class="line">})</span><br><span class="line"></span><br><span class="line"><div></span><br><span class="line"> <p>p元素</p></span><br><span class="line"></div></span><br><span class="line"><div></span><br><span class="line"> <p>p元素</p></span><br><span class="line"></div></span><br></pre></td></tr></table></figure>
<h3 id="DOM包裹wrapInner-方法"><a href="#DOM包裹wrapInner-方法" class="headerlink" title="DOM包裹wrapInner()方法"></a>DOM包裹wrapInner()方法</h3><p><code>.wrapInner( wrappingElement )</code>：给集合中匹配的元素的内部，增加包裹的HTML结构<br><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span>></span>p元素<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"><<span class="name">div</span>></span>p元素<span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure></p>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">$('div').wrapInner('<p></p>')</span><br><span class="line"></span><br><span class="line"><div></span><br><span class="line"> <p>p元素</p></span><br><span class="line"></div></span><br><span class="line"><div></span><br><span class="line"> <p>p元素</p></span><br><span class="line"></div></span><br><span class="line"></span><br><span class="line">//效果相同</span><br><span class="line">$('div').wrapInner(function() {</span><br><span class="line"> return '<p></p>'; </span><br><span class="line">})</span><br></pre></td></tr></table></figure>
<h2 id="jQuery遍历"><a href="#jQuery遍历" class="headerlink" title="jQuery遍历"></a>jQuery遍历</h2><h3 id="children-方法"><a href="#children-方法" class="headerlink" title="children()方法"></a>children()方法</h3><p>jQuery是一个合集对象，如果想快速查找合集里面的第一级子元素，此时可以用<code>children()</code>方法。这里需要注意：<code>.children(selector)</code> 方法是返回匹配元素集合中每个元素的所有子元素（仅儿子辈，这里可以理解为就是父亲-儿子的关系）<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"#bt1"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> $(<span class="string">'div.div'</span>).childrean().css(<span class="string">'border'</span>,<span class="string">'1px solid red'</span>)</span><br><span class="line">})</span><br><span class="line"></span><br><span class="line">$(<span class="string">"#bt2"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="comment">//找到所有class=div的元素</span></span><br><span class="line"> <span class="comment">//找到其对应的子元素ul，然后筛选出最后一个，给边宽加上颜色</span></span><br><span class="line"> $(<span class="string">'.div'</span>).children(<span class="string">':last'</span>).css(<span class="string">'border'</span>, <span class="string">'3px solid blue'</span>)</span><br><span class="line">})</span><br></pre></td></tr></table></figure></p>
<h3 id="find-方法"><a href="#find-方法" class="headerlink" title="find()方法"></a>find()方法</h3><p>jQuery是一个合集对象，如果想快速查找DOM树中的这些元素的后代元素，此时可以用<code>find()</code>方法，这也是开发使用频率很高的方法。这里要注意 children与find方法的区别，children是父子关系查找，find是后代关系（包含父子关系）<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"button:first"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> $(<span class="string">'.left'</span>).find(<span class="string">'li:last'</span>).css(<span class="string">'border'</span>,<span class="string">'1px solid red'</span>)</span><br><span class="line">})</span><br><span class="line"></span><br><span class="line">$(<span class="string">"button:last"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="comment">//找到所有p元素，然后筛选出后代元素中的span标签节点</span></span><br><span class="line"> <span class="comment">//改变其字体颜色</span></span><br><span class="line"> <span class="keyword">var</span> $spans = $(<span class="string">'span'</span>);</span><br><span class="line"> $(<span class="string">"p"</span>).find($spans).css(<span class="string">'color'</span>, <span class="string">'red'</span>);</span><br><span class="line">})</span><br></pre></td></tr></table></figure></p>
<h3 id="parent-方法"><a href="#parent-方法" class="headerlink" title="parent()方法"></a>parent()方法</h3><p>Query是一个合集对象，如果想快速查找合集里面的每一个元素的父元素（这里可以理解为就是父亲-儿子的关系），此时可以用<code>parent()</code>方法<br><strong>因为是父元素，这个方法只会向上查找一级</strong><br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"button:first"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> $(<span class="string">'ul.level-3'</span>).parent().css(<span class="string">'border'</span>,<span class="string">'1px solid red'</span>)</span><br><span class="line">})</span><br><span class="line"></span><br><span class="line">$(<span class="string">"button:last"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="comment">//找到所有class=item-a的父元素</span></span><br><span class="line"> <span class="comment">//然后给每个ul,然后筛选出最后一个，加上蓝色的边</span></span><br><span class="line"> $(<span class="string">'.item-a'</span>).parent(<span class="string">':last'</span>).css(<span class="string">'border'</span>, <span class="string">'1px solid blue'</span>)</span><br><span class="line">})</span><br></pre></td></tr></table></figure></p>
<h3 id="parents-方法"><a href="#parents-方法" class="headerlink" title="parents()方法"></a>parents()方法</h3><p>jQuery是一个合集对象，如果想快速查找合集里面的每一个元素的所有祖辈元素，此时可以用<code>parents()</code>方法</p>
<p>其实也类似find与children的区别，parent只会查找一级，parents则会往上一直查到查找到祖先节点<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"button:first"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> $(<span class="string">'.item-b'</span>).parents().css(<span class="string">'border'</span>,<span class="string">'1px solid red'</span>)</span><br><span class="line">})</span><br><span class="line"></span><br><span class="line">$(<span class="string">"button:last"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="comment">//找到当前元素的所有祖辈元素,筛选出class="first-div"的元素</span></span><br><span class="line"> <span class="comment">//并且附上一个边</span></span><br><span class="line"> $(<span class="string">'.item-b'</span>).parents(<span class="string">'.first-div'</span>).css(<span class="string">'border'</span>, <span class="string">'2px solid blue'</span>)</span><br><span class="line">})</span><br></pre></td></tr></table></figure></p>
<h3 id="closest-方法"><a href="#closest-方法" class="headerlink" title="closest()方法"></a>closest()方法</h3><p>以选定的元素为中心，往内查找可以通过find、children方法。如果往上查找，也就是查找当前元素的父辈祖辈元素，jQuery提供了closest()方法，这个方法类似parents但是又有一些细微的区别，属于使用频率很高的方法</p>
<p><code>closest()</code>方法接受一个匹配元素的选择器字符串</p>
<p>从元素本身开始，<strong>在DOM 树上逐级向上级元素匹配，并返回最先匹配的祖先元素</strong><br>粗看.parents()和.closest()是有点相似的，都是往上遍历祖辈元素，但是两者还是有区别的，否则就没有存在的意义了</p>
<ol>
<li>起始位置不同：.closest开始于当前元素 .parents开始于父元素</li>
<li>遍历的目标不同：.closest要找到指定的目标，.parents遍历到文档根元素，closest向上查找，直到找到一个匹配的就停止查找，parents一直查找到根元素，并将匹配的元素加入集合</li>
<li>结果不同：.closest返回的是包含零个或一个元素的jquery对象，parents返回的是包含零个或一个或多个元素的jquery对象</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"button:first"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> $(<span class="string">'li.item-1'</span>).closest(<span class="string">'ul.level-2'</span>).css(<span class="string">'border'</span>,<span class="string">'1px solid red'</span>)</span><br><span class="line">})</span><br><span class="line"></span><br><span class="line">$(<span class="string">"button:last"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> itemB = $(<span class="string">'.item-b'</span>)</span><br><span class="line"> $(<span class="string">'li.item-1'</span>)</span><br><span class="line"> .closest(itemB)</span><br><span class="line"> .css(<span class="string">'border'</span>, <span class="string">'1px solid blue'</span>);</span><br><span class="line">})</span><br></pre></td></tr></table></figure>
<h3 id="next-方法"><a href="#next-方法" class="headerlink" title="next()方法"></a>next()方法</h3><p>jQuery是一个合集对象，如果想快速查找指定元素集合中每一个元素<strong>紧邻的后面同辈元素的元素集合</strong>，此时可以用<code>next()</code>方法<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"button:first"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> $(<span class="string">'.item-1'</span>).next(<span class="string">':last'</span>).css(<span class="string">'border'</span>,<span class="string">'1px solid red'</span>)</span><br><span class="line">})</span><br><span class="line"></span><br><span class="line">$(<span class="string">"button:last"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="comment">//找到所有class=item-3的li</span></span><br><span class="line"> <span class="comment">//然后筛选出第一个li，加上蓝色的边</span></span><br><span class="line"> $(<span class="string">'.item-2'</span>).next(<span class="string">':first'</span>).css(<span class="string">'border'</span>, <span class="string">'1px solid blue'</span>)</span><br><span class="line">})</span><br></pre></td></tr></table></figure></p>
<blockquote>
<p>同样的也是因为jQuery是合集对象，可能需要对这个合集对象进行一定的筛选，找出目标元素，所以允许传一个选择器的表达式</p>
</blockquote>
<h3 id="prev-方法"><a href="#prev-方法" class="headerlink" title="prev()方法"></a>prev()方法</h3><p>jQuery是一个合集对象，如果想快速查找指定元素集合中每一个元素<strong>紧邻的前面同辈元素的元素集合</strong>，此时可以用<code>prev()</code>方法</p>
<h3 id="siblings-方法"><a href="#siblings-方法" class="headerlink" title="siblings()方法"></a>siblings()方法</h3><p>jQuery是一个合集对象，如果想快速查找指定元素集合中<strong>每一个元素的同辈元素</strong>，此时可以用<code>siblings()</code>方法</p>
<blockquote>
<p>不包括自身, <code>:last</code>删选后得到的是所有匹配节点的最后<strong>一个</strong><br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"button:last"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="comment">//找到class=item-2的所有兄弟节点</span></span><br><span class="line"> <span class="comment">//然后筛选出最后一个，加上蓝色的边</span></span><br><span class="line"> $(<span class="string">'.item-2'</span>).siblings(<span class="string">':last'</span>).css(<span class="string">'border'</span>, <span class="string">'2px solid blue'</span>)</span><br><span class="line">})</span><br></pre></td></tr></table></figure></p>
</blockquote>
<h3 id="add-方法"><a href="#add-方法" class="headerlink" title="add()方法"></a>add()方法</h3><p>jQuery是一个合集对象，通过$()方法找到指定的元素合集后可以进行一系列的操作。$()之后就意味着这个合集对象已经是确定的，<strong>如果后期需要再往这个合集中添加一新的元素</strong>要如何处理？jQuery为此提供<code>add方法</code>，用来创建一个新的jQuery对象 ，元素添加到匹配的元素集合中<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"button:first"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="comment">//把p元素添加到li的合集中</span></span><br><span class="line"> $(<span class="string">'li'</span>).add(<span class="string">'p'</span>).css(<span class="string">'background'</span>, <span class="string">'red'</span>)</span><br><span class="line">})</span><br><span class="line"></span><br><span class="line">$(<span class="string">"button:last"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="comment">//把html结构'<p>新的p元素</p>'</span></span><br><span class="line"> <span class="comment">//加入到li的合集中</span></span><br><span class="line"> <span class="comment">//再重新appendTo到指定的节点处</span></span><br><span class="line"> <span class="comment">//值得注意：整个结构位置都改变了,进行了挪动</span></span><br><span class="line"> $(<span class="string">'li'</span>).add(<span class="string">'<p>新的p元素</p>'</span>).appendTo($(<span class="string">'.right'</span>))</span><br><span class="line">})</span><br></pre></td></tr></table></figure></p>
<h3 id="each-方法"><a href="#each-方法" class="headerlink" title="each()方法"></a>each()方法</h3><p>jQuery是一个合集对象，通过$()方法找到指定的元素合集后可以进行一系列的操作。比如我们操作$(“li”).css(‘’) 给所有的li设置style值，因为jQuery是一个合集对象，所以css方法内部就必须封装一个遍历的方法，被称为隐式迭代的过程。要一个一个给合集中每一个li设置颜色，这里方法就是<code>each</code></p>
<ol>
<li>each是一个for循环的包装迭代器</li>
<li>each通过回调的方式处理，并且会有2个固定的实参，索引与元素</li>
<li>each回调方法中的this指向当前迭代的dom元素</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"button:first"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="comment">//遍历所有的li</span></span><br><span class="line"> <span class="comment">//修改每个li内的字体颜色</span></span><br><span class="line"> $(<span class="string">"li"</span>).each(<span class="function"><span class="keyword">function</span>(<span class="params">index, element</span>) </span>{</span><br><span class="line"> $(<span class="keyword">this</span>).css(<span class="string">'color'</span>,<span class="string">'red'</span>)</span><br><span class="line"> })</span><br><span class="line"></span><br><span class="line">})</span><br><span class="line"></span><br><span class="line">$(<span class="string">"button:last"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="comment">//遍历所有的li</span></span><br><span class="line"> <span class="comment">//修改偶数li内的字体颜色</span></span><br><span class="line"> $(<span class="string">"li"</span>).each(<span class="function"><span class="keyword">function</span>(<span class="params">index, element</span>) </span>{</span><br><span class="line"> <span class="keyword">if</span> (index % <span class="number">2</span>) {</span><br><span class="line"> $(<span class="keyword">this</span>).css(<span class="string">'color'</span>,<span class="string">'blue'</span>)</span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line">})</span><br></pre></td></tr></table></figure>
<blockquote>
<p>如果需要<strong>提前退出，可以通过返回 false</strong>以便在回调函数内中止循环</p>
</blockquote>
]]></content>
</entry>
<entry>
<title><![CDATA[JQuery-选择器-属性/样式]]></title>
<url>http://zak7.com/2016/12/28/JQuery-selector-attr/</url>
<content type="html"><![CDATA[<p style="background-color:#f2f4b0;padding:15px">介绍jQuery的基础语法，选择器以及jQuery的一些属性和样式</p>
<a id="more"></a>
<h2 id="JQuery初识"><a href="#JQuery初识" class="headerlink" title="JQuery初识"></a>JQuery初识</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span>></span>1<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"><<span class="name">div</span>></span>2<span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>JQuery是一个类型数组对象, 而DOM对象就是一个单纯的DOM元素</p>
</blockquote>
<h3 id="JQuery对象转化为DOM对象"><a href="#JQuery对象转化为DOM对象" class="headerlink" title="JQuery对象转化为DOM对象"></a>JQuery对象转化为DOM对象</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> $div = $(<span class="string">'div'</span>)<span class="comment">//JQuery对象</span></span><br><span class="line"><span class="keyword">var</span> div = $div[<span class="number">0</span>]<span class="comment">//转化成DOM对象</span></span><br><span class="line">div.style.color=<span class="string">'red'</span></span><br><span class="line"><span class="comment">/***or****/</span></span><br><span class="line"><span class="keyword">var</span> $div = $(<span class="string">'div'</span>)<span class="comment">//JQuery对象</span></span><br><span class="line"><span class="keyword">var</span> div = $div.get(<span class="number">0</span>)<span class="comment">//通过JQuery的get方法,转化成DOM对象</span></span><br><span class="line">div.style.color=<span class="string">'red'</span></span><br></pre></td></tr></table></figure>
<h3 id="DOM对象转化成JQuery对象"><a href="#DOM对象转化成JQuery对象" class="headerlink" title="DOM对象转化成JQuery对象"></a>DOM对象转化成JQuery对象</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> div=<span class="built_in">document</span>.getElementsByTagName(<span class="string">'div'</span>)</span><br><span class="line"><span class="keyword">var</span> $div=$(div)</span><br><span class="line"><span class="keyword">var</span> $first=$div.first()</span><br><span class="line">$first.css(<span class="string">'color'</span>,<span class="string">'red'</span>)</span><br></pre></td></tr></table></figure>
<h2 id="JQuery选择器"><a href="#JQuery选择器" class="headerlink" title="JQuery选择器"></a>JQuery选择器</h2><blockquote>
<p>id选择器 $(‘#id’)<br>类选择器 $(‘.class’)<br>元素选择器 $(‘element’)<br>全选择器 $(‘*’)<br>层级选择器<br>  – 子选择器 $(‘parent > child’)<br>  – 后代选择器 $(‘ancestor descendant’)<br>  – 相邻兄弟选择器 $(‘prev + next’)<br>  – 一般兄弟选择器 $(‘prev ~ sibling’) </p>
</blockquote>
<h3 id="基本筛选选择器"><a href="#基本筛选选择器" class="headerlink" title="基本筛选选择器"></a>基本筛选选择器</h3><table>
<thead>
<tr>
<th style="text-align:left">选择器</th>
<th style="text-align:left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">$(‘:first’)</td>
<td style="text-align:left">匹配第一个元素</td>
</tr>
<tr>
<td style="text-align:left">$(‘:last’)</td>
<td style="text-align:left">匹配最后一个元素</td>
</tr>
<tr>
<td style="text-align:left">$(‘:eq(index)’)</td>
<td style="text-align:left">匹配集合中索引值为index的元素</td>
</tr>
<tr>
<td style="text-align:left">$(‘:gt(index)’)</td>
<td style="text-align:left">集合中大于index的元素</td>
</tr>
<tr>
<td style="text-align:left">$(‘:even’)</td>
<td style="text-align:left">索引为偶数的元素,0开始</td>
</tr>
<tr>
<td style="text-align:left">$(‘:odd’)</td>
<td style="text-align:left">索引为奇数的元素,0开始</td>
</tr>
<tr>
<td style="text-align:left">$(‘:lt(index)’)</td>
<td style="text-align:left">集合中小于index的元素</td>
</tr>
<tr>
<td style="text-align:left">$(‘:header’)</td>
<td style="text-align:left">所有标题元素 h1 h2 h3</td>
</tr>
<tr>
<td style="text-align:left">$(‘:lang(language)’)</td>
<td style="text-align:left">选择指定语言的所有元素</td>
</tr>
<tr>
<td style="text-align:left">$(‘:root’)</td>
<td style="text-align:left">选择该文档的根元素</td>
</tr>
<tr>
<td style="text-align:left">$(‘:animated’)</td>
<td style="text-align:left">选择正在执行动画效果的元素</td>
</tr>
<tr>
<td style="text-align:left">$(‘:not(selector)’)</td>
<td style="text-align:left">一个用来过滤的选择器, 选择所有去除不匹配给定选择器的元素</td>
</tr>
</tbody>
</table>
<h3 id="内容筛选选择器"><a href="#内容筛选选择器" class="headerlink" title="内容筛选选择器"></a>内容筛选选择器</h3><table>
<thead>
<tr>
<th style="text-align:left">选择器</th>
<th style="text-align:left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">$(‘:contains(text)’)</td>
<td style="text-align:left">选择所有包含指定文本的元素(匹配文本包含在元素的子元素中,同样认为符合条件)</td>
</tr>
<tr>
<td style="text-align:left">$(‘:parent’)</td>
<td style="text-align:left">选择所有含有子元素或者文本的元素</td>
</tr>
<tr>
<td style="text-align:left">$(‘:empty’)</td>
<td style="text-align:left">选择所有没有子元素的元素(包含文本节点)</td>
</tr>
<tr>
<td style="text-align:left">$(‘:has(selector)’)</td>
<td style="text-align:left">选择元素中至少包含指定选择器的元素</td>
</tr>
</tbody>
</table>
<h3 id="可见性筛选选择器"><a href="#可见性筛选选择器" class="headerlink" title="可见性筛选选择器"></a>可见性筛选选择器</h3><table>
<thead>
<tr>
<th style="text-align:left">选择器</th>
<th style="text-align:left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">$(‘:visiable’)</td>
<td style="text-align:left">选择所有显示的元素</td>
</tr>
<tr>
<td style="text-align:left">$(‘:hidden’)</td>
<td style="text-align:left">选择所有隐藏的元素</td>
</tr>
</tbody>
</table>
<p><strong>几种方法隐藏一个元素</strong></p>
<ol>
<li>CSS display:none</li>
<li>type=’hidden’的表单元素</li>
<li>高宽显式设置为0</li>
<li>一个祖先元素是隐藏的, 该元素不会在页面上显示</li>
<li>CSS visibility的值hidden</li>
<li>CSS opacity的值为0</li>
</ol>
<p>如果元素占据文档一定的空间,元素被认为是可见的.<br>可见元素的宽或高大于0<br>元素visibility:hidden,opacity:0被认为是可见的, 因为占据了空间</p>
<h3 id="属性选择器"><a href="#属性选择器" class="headerlink" title="属性选择器"></a>属性选择器</h3><table>
<thead>
<tr>
<th style="text-align:left">选择器</th>
<th style="text-align:left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">$(‘[attribute¦=value]’)</td>
<td style="text-align:left">选择指定属性值等于给定字符串或以该字符串为前缀(该字符串后跟一个连字符”-“)的元素</td>
</tr>
<tr>
<td style="text-align:left">$(‘[attribute*=value]’)</td>
<td style="text-align:left">选择指定属性具有包含一个给定子字符串的元素</td>
</tr>
<tr>
<td style="text-align:left">$(‘[attribute~=value]’)</td>
<td style="text-align:left">选择指定属性用空格分隔的值中包含一个给定值的元素</td>
</tr>
<tr>
<td style="text-align:left">$(‘[attribute=value]’)</td>
<td style="text-align:left">选择指定属性是给定值的元素</td>
</tr>
<tr>
<td style="text-align:left">$(‘[attribute!=value]’)</td>
<td style="text-align:left">选择不存在指定属性,或者指定的属性值不等于给定值的元素</td>
</tr>
<tr>
<td style="text-align:left">$(‘[attribute^=value]’)</td>
<td style="text-align:left">选择指定属性是以给定字符串开始的元素</td>
</tr>
<tr>
<td style="text-align:left">$(‘[attribute$=value]’)</td>
<td style="text-align:left">选择指定属性是以给定字符串结尾的元素,区分大小写</td>
</tr>
<tr>
<td style="text-align:left">$(‘[attribute]’)</td>
<td style="text-align:left">选择所有具有指定属性的元素</td>
</tr>
<tr>
<td style="text-align:left">$(‘[attributefilter1][attributefilter2]’)</td>
<td style="text-align:left">选择匹配所有指定属性筛选器的元素</td>
</tr>
</tbody>
</table>
<h3 id="子元素筛选器"><a href="#子元素筛选器" class="headerlink" title="子元素筛选器"></a>子元素筛选器</h3><table>
<thead>
<tr>
<th style="text-align:left">选择器</th>
<th style="text-align:left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">$(‘:first-child’)</td>
<td style="text-align:left">==$(‘:nth-child(1)’) 选择所有其父元素下的第一个子元素, 这里的子元素是相同选择器的子元素, 下同</td>
</tr>
<tr>
<td style="text-align:left">$(‘:last-child’)</td>
<td style="text-align:left">选择所有其父元素下的最后一个子元素</td>
</tr>
<tr>
<td style="text-align:left">$(‘:only-child’)</td>
<td style="text-align:left">如果某个元素是其父元素的唯一子元素,那么它就会被选中</td>
</tr>
<tr>
<td style="text-align:left">$(‘:nth-child(n)’)</td>
<td style="text-align:left">选择所有其父元素的第n个子元素,从1开始计数</td>
</tr>
<tr>
<td style="text-align:left">$(‘:nth-last-child(n)’)</td>
<td style="text-align:left">选择所有其父元素的第n个子元素,倒数, 从1开始计数</td>
</tr>
</tbody>
</table>
<h3 id="表单选择器"><a href="#表单选择器" class="headerlink" title="表单选择器"></a>表单选择器</h3><table>
<thead>
<tr>
<th style="text-align:left">选择器</th>
<th style="text-align:left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">$(‘:input’)</td>
<td style="text-align:left">选择所有的input/textarea/select和button元素</td>
</tr>
<tr>
<td style="text-align:left">$(‘:text’)</td>
<td style="text-align:left">匹配所有文本框, 前面建议加上input:text,下同</td>
</tr>
<tr>
<td style="text-align:left">$(‘:password’)</td>
<td style="text-align:left">$(‘[type=password]’)密码框</td>
</tr>
<tr>
<td style="text-align:left">$(‘:checkbox’)</td>
<td style="text-align:left">复选框</td>
</tr>
<tr>
<td style="text-align:left">$(‘:radio’)</td>
<td style="text-align:left">单选框</td>
</tr>
<tr>
<td style="text-align:left">$(‘:submit’)</td>
<td style="text-align:left">提交按钮</td>
</tr>
<tr>
<td style="text-align:left">$(‘:image’)</td>
<td style="text-align:left">所有图像域</td>
</tr>
<tr>
<td style="text-align:left">$(‘:button’)</td>
<td style="text-align:left">所有按钮</td>
</tr>
<tr>
<td style="text-align:left">$(‘:file’)</td>
<td style="text-align:left">文件域</td>
</tr>
</tbody>
</table>
<h3 id="表单对象属性筛选选择器"><a href="#表单对象属性筛选选择器" class="headerlink" title="表单对象属性筛选选择器"></a>表单对象属性筛选选择器</h3><p>| 选择器 | 描述 |<br>| $(‘:enabled’) | 选取可用的表单元素|<br>| $(‘:disabled’) | 选取不可用的表单元素|<br>| $(‘:checked’) | 选取被选中的input元素,前面加input|<br>| $(‘:selected’) | 选取被选中的option元素,前面加option|</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">JQuery.removeAttr(<span class="string">'checked'</span>)</span><br><span class="line">JQuery.css(<span class="string">'color'</span>,<span class="string">'#666'</span>)</span><br></pre></td></tr></table></figure>
<h3 id="特殊选择器this"><a href="#特殊选择器this" class="headerlink" title="特殊选择器this"></a>特殊选择器this</h3><p>this是JavaScript的关键字, 指的是当前上下文对象<br>这个上下文对象可以被动态的改变<strong>(call, apply)</strong>,改变对象this指向的内容</p>
<p>在DOM中this指向了这个html元素对象, this是DOM元素本身的一个引用</p>
<p><code>var $this =$(this)</code><br><code>this</code>, 表示当前的上下文对象是一个html对象,可以调用html对象的属性和方法<br><code>$(this)</code>, 表示上下文对象是一个JQuery对象, 可以调用对象的方法和属性值</p>
<h2 id="jQuery的属性与样式"><a href="#jQuery的属性与样式" class="headerlink" title="jQuery的属性与样式"></a>jQuery的属性与样式</h2><h3 id="attr-与-removeAttr"><a href="#attr-与-removeAttr" class="headerlink" title=".attr()与.removeAttr()"></a>.attr()与.removeAttr()</h3><ol>
<li><strong>attr(传入属性名)</strong>：获取属性的值</li>
<li><strong>attr(属性名, 属性值)</strong>：设置属性的值</li>
<li><strong>attr(属性名, 函数值)</strong>：设置属性的函数值<ol>
<li>$(selector).attr(attribute,function(index,oldvalue)) </li>
<li>该函数可接收并使用选择器的 index 值和当前属性值。</li>
</ol>
</li>
<li><p><strong>attr(attributes)</strong>：给指定元素设置多个属性值，即：{属性名一: “属性值一” , 属性名二: “属性值二” , … … }</p>
</li>
<li><p><strong>removeAttr()删除方法</strong><br> .removeAttr( attributeName ) : 为匹配的元素集合中的每个元素中移除一个属性（attribute）</p>
</li>
</ol>
<blockquote>
<p>dom中有个概念的区分：Attribute和Property翻译出来都是“属性”，《js高级程序设计》书中翻译为“特性”和“属性”。</p>
<p>简单理解，Attribute就是dom节点自带的属性<br>例如：html中常用的id、class、title、align等</p>
<p>而Property是这个DOM元素作为对象，其附加的内容，例如,tagName, nodeName, nodeType, defaultChecked, 和 defaultSelected 使用.prop()方法进行取值或赋值等<br><strong>获取Attribute就需要用attr，获取Property就需要用prop</strong></p>
</blockquote>
<h3 id="html-及-text"><a href="#html-及-text" class="headerlink" title=".html()及.text()"></a>.html()及.text()</h3><ol>
<li><strong>.html()</strong> 不传入值，就是获取集合中第一个匹配元素的HTML内容</li>
<li><strong>.html( htmlString )</strong> 设置每一个匹配元素的html内容</li>
<li><strong>.html( function(index, oldhtml) )</strong> 用来返回设置HTML内容的一个函数</li>
</ol>
<blockquote>
<p>.html()方法内部使用的是DOM的innerHTML属性来处理的，所以在设置与获取上需要注意的一个最重要的问题，这个操作是针对整个HTML内容（不仅仅只是文本内容）</p>
</blockquote>
<ol>
<li><strong>.text()</strong> 得到匹配元素集合中每个元素的合并文本，包括他们的后代</li>
<li><strong>.text( textString )</strong> 用于设置匹配元素内容的文本</li>
<li><strong>.text( function(index, text) )</strong> 用来返回设置文本内容的一个函数</li>
</ol>
<blockquote>
<p>得到匹配元素集合中每个元素的文本内容结合，包括他们的后代，或设置匹配元素集合中每个元素的文本内容为指定的文本内容。</p>
</blockquote>
<h3 id="val"><a href="#val" class="headerlink" title=".val()"></a>.val()</h3><p>jQuery中有一个.val()方法主要是用于处理表单元素的值，比如 input, select 和 textarea。</p>
<ol>
<li><strong>.val()</strong>无参数，获取匹配的元素集合中第一个元素的当前值</li>
<li><strong>.val( value )</strong>，设置匹配的元素集合中每个元素的值</li>
<li><strong>.val( function )</strong> ，一个用来返回设置值的函数</li>
</ol>
<blockquote>
<p>通过.val()处理select元素， 当没有选择项被选中，它返回null<br>.val()方法多用来设置表单的字段的值<br>如果select元素有multiple（多选）属性，并且至少一个选择项被选中， .val()方法返回一个数组，这个数组包含每个选中选择项的值</p>
</blockquote>
<h3 id="html-text-和-val-的差异总结"><a href="#html-text-和-val-的差异总结" class="headerlink" title=".html(), .text() 和 .val()的差异总结"></a>.html(), .text() 和 .val()的差异总结</h3><ol>
<li>.html(),.text(),.val()三种方法都是用来读取选定元素的内容；只不过.html()是用来读取元素的html内容（包括html标签），.text()用来读取元素的纯文本内容，包括其后代元素，.val()是用来读取表单元素的”value”值。其中.html()和.text()方法不能使用在表单元素上,而.val()只能使用在表单元素上；另外.html()方法使用在多个元素上时，只读取第一个元素；.val()方法和.html()相同，如果其应用在多个元素上时，只能读取第一个表单元素的”value”值，但是.text()和他们不一样，如果.text()应用在多个元素上时，将会读取所有选中元素的文本内容。</li>
<li>.html(htmlString),.text(textString)和.val(value)三种方法都是用来替换选中元素的内容，如果三个方法同时运用在多个元素上时，那么将会替换所有选中元素的内容。</li>
<li>.html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容。</li>
</ol>
<h3 id="addClass"><a href="#addClass" class="headerlink" title=".addClass()"></a>.addClass()</h3><ol>
<li><strong>.addClass( className )</strong> : 为每个匹配元素所要增加的一个或多个样式名</li>
<li><strong>.addClass( function(index, currentClass) )</strong> : 这个函数返回一个或更多用空格隔开的要增加的样式名</li>
</ol>
<h3 id="removeClass"><a href="#removeClass" class="headerlink" title=".removeClass()"></a>.removeClass()</h3><ol>
<li><strong>.removeClass( [className ] )</strong>：每个匹配元素移除的一个或多个用空格隔开的样式名</li>
<li><strong>.removeClass( function(index, class) )</strong> ： 一个函数，返回一个或多个将要被移除的样式名</li>
</ol>
<blockquote>
<p>如果一个样式类名作为一个参数,只有这样式类会被从匹配的元素集合中删除 。 如果没有样式名作为参数，那么所有的样式类将被移除</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//.removeClass() 方法允许我们指定一个函数作为参数，返回将要被删除的样式</span></span><br><span class="line">$(<span class="string">'.right > div:first'</span>).removeClass(<span class="function"><span class="keyword">function</span>(<span class="params">index,className</span>)</span>{</span><br><span class="line"> <span class="comment">//className = aa bb imoocClass</span></span><br><span class="line"> <span class="comment">//把div的className赋给下一个兄弟元素div</span></span><br><span class="line"> $(<span class="keyword">this</span>).next().addClass(className)</span><br><span class="line"> <span class="comment">//删除自己本身的imoocClass</span></span><br><span class="line"> <span class="keyword">return</span> <span class="string">'imoocClass'</span></span><br><span class="line">})</span><br></pre></td></tr></table></figure>
<h3 id="切换样式-toggleClass"><a href="#切换样式-toggleClass" class="headerlink" title="切换样式 .toggleClass()"></a>切换样式 .toggleClass()</h3><blockquote>
<p>jQuery提供一个toggleClass方法用于简化这种互斥的逻辑，通过toggleClass方法动态添加删除Class，一次执行相当于addClass，再次执行相当于removeClass</p>
</blockquote>
<ol>
<li><strong>.toggleClass( className )</strong>：在匹配的元素集合中的每个元素上用来切换的一个或多个（用空格隔开）样式类名</li>
<li><strong>.toggleClass( className, switch )</strong>：一个布尔值，用于判断样式是否应该被添加或移除</li>
<li><strong>.toggleClass( [switch ] )</strong>：一个用来判断样式类添加还是移除的 布尔值</li>
<li><strong>.toggleClass( function(index, class, switch) [, switch ] )</strong>：用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数</li>
</ol>
<blockquote>
<p>第二个参数<code>switch</code>判断样式类是否应该被添加或删除<br><code>true</code>，那么这个样式类将被添加;<br><code>false</code>，那么这个样式类将被移除</p>
</blockquote>
<h3 id="样式操作-css"><a href="#样式操作-css" class="headerlink" title="样式操作.css()"></a>样式操作.css()</h3><ol>
<li><strong>.css( propertyName )</strong> ：获取匹配元素集合中的第一个元素的样式属性的计算值</li>
<li><strong>.css( [propertyName1,propertyName2…] )</strong>：传递一组<strong>数组</strong>，返回一个<strong>对象结果</strong></li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> value = $(<span class="string">'.first'</span>).css([<span class="string">'width'</span>,<span class="string">'height'</span>]);</span><br><span class="line"><span class="comment">//因为获取的是一个对象，取到对应的值</span></span><br><span class="line">$(<span class="string">'p:eq(2)'</span>).text( <span class="string">'widht:'</span> + value.width + <span class="string">' height:'</span> +value.height )</span><br></pre></td></tr></table></figure>
<ol>
<li><strong>.css(propertyName, value )</strong>：设置CSS</li>
<li><strong>.css( propertyName, function )</strong>：可以传入一个回调函数，返回取到对应的值进行处理</li>
<li><strong>.css( properties )</strong>：可以传一个对象，同时设置多个样式</li>
</ol>
<blockquote>
<p>浏览器属性获取方式不同，在获取某些值的时候都jQuery采用统一的处理，比如<strong>颜色采用RBG，尺寸采用px</strong><br>.css()方法<strong>支持驼峰写法与大小写混搭</strong>的写法，内部做了容错的处理<br>当一个数只被作为值（value）的时候， jQuery会将其转换为一个字符串，并添在字符串的结尾处添加px，例如<strong> .css(“width”,50) 与 .css(“width”,”50px”)一样</strong></p>
</blockquote>
<h3 id="css-与-addClass-设置样式的区别"><a href="#css-与-addClass-设置样式的区别" class="headerlink" title=".css()与.addClass()设置样式的区别"></a>.css()与.addClass()设置样式的区别</h3><p><strong>1. 可维护性：</strong><br>.addClass()的本质是通过定义个class类的样式规则，给元素添加一个或多个类。css方法是通过JavaScript大量代码进行改变元素的样式<br>通过.addClass()我们可以批量的给相同的元素设置统一规则，变动起来比较方便，可以统一修改删除。如果通过.css()方法就需要指定每一个元素是一一的修改，日后维护也要一一的修改，比较麻烦</p>
<p><strong>2. 灵活性：</strong><br>通过.css()方式可以很容易动态的去改变一个样式的属性，不需要在去繁琐的定义个class类的规则。一般来说在不确定开始布局规则，通过动态生成的HTML代码结构中，都是通过.css()方法处理的</p>
<p><strong>3. 样式值：</strong><br>.addClass()本质只是针对class的类的增加删除，不能获取到指定样式的属性的值，.css()可以获取到指定的样式值。</p>
<p><strong>4. 样式的优先级：</strong><br>css的样式是有优先级的，当外部样式、内部样式和内联样式同一样式规则同时应用于同一个元素的时候，优先级如下<br><code>外部样式 < 内部样式 < 内联样式</code><br>.addClass()方法是通过增加class名的方式，那么这个样式是在外部文件或者内部样式中先定义好的，等到需要的时候在附加到元素上</p>
<blockquote>
<p>通过.css()方法处理的是内联样式，直接通过元素的style属性附加到元素上的<br>通过.css方法设置的样式属性优先级要高于.addClass方法</p>
</blockquote>
<h3 id="元素的数据存储"><a href="#元素的数据存储" class="headerlink" title="元素的数据存储"></a>元素的数据存储</h3><p>html5 dataset是新的HTML5标准，允许你在普通的元素标签里嵌入类似data-*的属性，来实现一些简单数据的存取。它的数量不受限制，并且也能由JavaScript动态修改，也支持CSS选择器进行样式设置。这使得data属性特别灵活，也非常强大。有了这样的属性我们能够更加有序直观的进行数据预设或存储。那么在不支持HTML5标准的浏览器中，我们如何实现数据存取? jQuery就提供了一个.data()的方法来处理这个问题</p>
<p>使用jQuery初学者一般不是很关心data方式，这个方法是jquery内部预用的，可以用来做性能优化，比如sizzle选择中可以用来缓存部分结果集等等。当然这个也是非常重要的一个API了，<strong>常常用于我们存放临时的一些数据，因为它是直接跟DOM元素对象绑定在一起的</strong><br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">jQuery.data( element, key, value ) <span class="comment">//静态接口,存数据</span></span><br><span class="line">jQuery.data( element, key ) <span class="comment">//静态接口,取数据 </span></span><br><span class="line">.data( key, value ) <span class="comment">//实例接口,存数据</span></span><br><span class="line">.data( key ) <span class="comment">//实例接口,存数据</span></span><br></pre></td></tr></table></figure></p>
<p>在jQuery的官方文档中，建议用.data()方法来代替。<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">jQuery.removeData( element [, name ] )</span><br><span class="line">.removeData( [name ] )</span><br></pre></td></tr></table></figure></p>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">$('.left').click(function() {</span><br><span class="line"> var ele = $(this);</span><br><span class="line"> //通过$.data方式设置数据</span><br><span class="line"> $.data(ele, "a", "data test")</span><br><span class="line"> $.data(ele, "b", {</span><br><span class="line"> name : "慕课网"</span><br><span class="line"> })</span><br><span class="line"> //通过$.data方式取出数据</span><br><span class="line"> var reset = $.data(ele, "a") + "</br>" + $.data(ele, "b").name</span><br><span class="line"> ele.find('span').append(reset)</span><br><span class="line">})</span><br><span class="line"></script></span><br><span class="line"><script type="text/javascript"></span><br><span class="line">$('.right').click(function() {</span><br><span class="line"> var ele = $(this);</span><br><span class="line"> //通过.data方式设置数据</span><br><span class="line"> ele.data("a", "data test")</span><br><span class="line"> ele.data("b", {</span><br><span class="line"> name: "慕课网"</span><br><span class="line"> })</span><br><span class="line"> //通过.data方式取出数据</span><br><span class="line"> var reset = ele.data("a") + "</br>" + ele.data("b").name</span><br><span class="line"> ele.find('span').append(reset)</span><br><span class="line">})</span><br></pre></td></tr></table></figure>]]></content>
</entry>
<entry>
<title><![CDATA[JS分类导航]]></title>
<url>http://zak7.com/2016/12/27/js-navigation/</url>
<content type="html"><![CDATA[<p style="background-color:#f2f4b0;padding:15px"><br>仿京东商城分类导航，详细分析并讲解制作过程，掌握运用CSS技巧及JavaScript动态改变CSS样式的两种实现方法，同时扩展讲解其它商城分类导航的不同及制作方法。<br></p>
<a id="more"></a>
<h2 id="Tips"><a href="#Tips" class="headerlink" title="Tips"></a>Tips</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> Lis=...<span class="comment">//dom对象</span></span><br><span class="line">Lis.className=<span class="string">"lihover"</span>;</span><br><span class="line"><span class="comment">//设为空</span></span><br><span class="line">Lis.className=<span class="string">""</span>;</span><br><span class="line"></span><br><span class="line"><span class="built_in">document</span>.write(str);</span><br></pre></td></tr></table></figure>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br></pre></td><td class="code"><pre><span class="line">body{</span><br><span class="line">padding: 0;</span><br><span class="line">font-size: 10px;</span><br><span class="line">behavior:url(css/csshover.htc);//兼容ie6</span><br><span class="line">}</span><br><span class="line">.topmenu{</span><br><span class="line"> display: block;</span><br><span class="line"> width: 220px;</span><br><span class="line"> border:2px solid #e4393c;</span><br><span class="line"> margin:0;</span><br><span class="line"> padding: 0;</span><br><span class="line">}</span><br><span class="line">.toptitle{</span><br><span class="line"> height:40px;</span><br><span class="line"> line-height: 40px;</span><br><span class="line"> text-align: left;</span><br><span class="line"> font-size: 11pt;</span><br><span class="line"> font-weight: bold;</span><br><span class="line"> color:white;</span><br><span class="line"> background: #e4393c;</span><br><span class="line"> padding-left: 20px;</span><br><span class="line">}</span><br><span class="line">.topmenu li{</span><br><span class="line"> height:30px;</span><br><span class="line"> line-height: 30px;</span><br><span class="line"> font-size: 11pt;</span><br><span class="line"> list-style: none;</span><br><span class="line"> text-align: left;</span><br><span class="line"> padding-left:8px;</span><br><span class="line"> z-index: 3;</span><br><span class="line"> background-image:url(1.jpg);</span><br><span class="line"> background-repeat: no-repeat;</span><br><span class="line"> background-position: right;</span><br><span class="line">}</span><br><span class="line">.topmenu li a{</span><br><span class="line"> text-decoration: none;</span><br><span class="line"> color:#313131;</span><br><span class="line">}</span><br><span class="line">.topmenu li a:hover{</span><br><span class="line"> text-decoration:underline;</span><br><span class="line"> font-weight:bold;</span><br><span class="line"> color:#e4393c;</span><br><span class="line">}</span><br><span class="line">.topmenu li:hover{</span><br><span class="line"> border:1px solid #DDD;</span><br><span class="line"> border-right: 0;</span><br><span class="line"> box-shadow: 0 0 8px #DDD;</span><br><span class="line"> -moz-box-shadow:0 0 8px #DDD;</span><br><span class="line"> -webkit-box-shadow:0 0 8px #DDD;</span><br><span class="line"> background-image:none;</span><br><span class="line">}</span><br><span class="line">.submenu{</span><br><span class="line"> display: none;</span><br><span class="line"> width:715px;</span><br><span class="line"> left:220px;</span><br><span class="line"> position: absolute;</span><br><span class="line"> top:40px;</span><br><span class="line"> border:1px solid #DDD;</span><br><span class="line"> z-index: 4;</span><br><span class="line"> background: white;</span><br><span class="line"> box-shadow: 0 0 8px #DDD;</span><br><span class="line"> -moz-box-shadow:0 0 8px #DDD;</span><br><span class="line"> -webkit-box-shadow:0 0 8px #DDD;</span><br><span class="line">}</span><br><span class="line">.leftdiv{</span><br><span class="line"> float:left;</span><br><span class="line"> width:490px;</span><br><span class="line"> margin:5px;</span><br><span class="line">}</span><br><span class="line">.rightdiv{</span><br><span class="line"> float:left;</span><br><span class="line"> width:200px;</span><br><span class="line"> margin:5px;</span><br><span class="line">}</span><br><span class="line">.topmenu li:hover .submenu{</span><br><span class="line"> display:block;</span><br><span class="line">}</span><br><span class="line">.topmenu li:hover span{</span><br><span class="line"> background: white;</span><br><span class="line"> display: inline-block;</span><br><span class="line"> z-index: 20;</span><br><span class="line"> width:20px;</span><br><span class="line"> height: 30px;</span><br><span class="line"> float: right;</span><br><span class="line"> position: relative;//相对于父标签定位</span><br><span class="line">}</span><br><span class="line">.leftdiv dl{</span><br><span class="line"> display:block;</span><br><span class="line"> border-bottom:1px solid #EEE;</span><br><span class="line"> padding-bottom: 6px;</span><br><span class="line"> overflow: hidden;</span><br><span class="line">}</span><br><span class="line">.leftdiv dl dt{</span><br><span class="line"> display:block;</span><br><span class="line"> float:left;</span><br><span class="line"> width:60px;</span><br><span class="line"> text-align: right;</span><br><span class="line"> height: 22px;</span><br><span class="line"> line-height: 22px;</span><br><span class="line"> padding-right: 6px;</span><br><span class="line">}</span><br><span class="line">.leftdiv dl dt a{</span><br><span class="line"> color:#e4393c;</span><br><span class="line"> font-weight: bold;</span><br><span class="line"> text-decoration: underline;</span><br><span class="line"> font-size: 10pt;</span><br><span class="line">}</span><br><span class="line">.leftdiv dl dd{</span><br><span class="line"> display: block;</span><br><span class="line"> overflow: hidden;</span><br><span class="line">}</span><br><span class="line">.leftdiv dl dd a{</span><br><span class="line"> display: block;</span><br><span class="line"> float: left;</span><br><span class="line"> border-left:1px solid #CCC;</span><br><span class="line"> color:#737373;</span><br><span class="line"> font-size: 9pt;</span><br><span class="line"> padding: 0 8px;</span><br><span class="line"> height: 14px;</span><br><span class="line"> line-height: 14px;</span><br><span class="line"> margin: 4px 0;</span><br><span class="line">}</span><br><span class="line">.rightdiv dl dd{</span><br><span class="line"> margin:3px 0;</span><br><span class="line">}</span><br><span class="line">.rightfiv dl dt{</span><br><span class="line"> color:#e4393c;</span><br><span class="line"> font-weight: bold;</span><br><span class="line"> font-size: 10pt;</span><br><span class="line">}</span><br><span class="line">.rightdiv dl dd a{</span><br><span class="line"> font-size:9pt;</span><br><span class="line"> color:#737373;</span><br><span class="line"> line-height:22px;</span><br><span class="line">}</span><br><span class="line">.rightdiv dl dd a:hover{</span><br><span class="line"> color:#737373;</span><br><span class="line"> font-weight: normal;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">html</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>导航 纯css<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">ul</span> <span class="attr">class</span>=<span class="string">"topmenu"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"toptitle"</span>></span>全部商品分类<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>图书/音像/数字商品<span class="tag"></<span class="name">a</span>></span><span class="tag"><<span class="name">span</span>></span><span class="tag"></<span class="name">span</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"submenu"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"leftdiv"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">dl</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">dt</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>电子书<span class="tag"></<span class="name">a</span>></span><span class="tag"></<span class="name">dt</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">dd</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>免费小说<span class="tag"></<span class="name">a</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>励志与成功<span class="tag"></<span class="name">a</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>免费小说<span class="tag"></<span class="name">a</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>励志与成功<span class="tag"></<span class="name">a</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>免费小说<span class="tag"></<span class="name">a</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>励志与成功<span class="tag"></<span class="name">a</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>免费小说<span class="tag"></<span class="name">a</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>励志与成功<span class="tag"></<span class="name">a</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>免费小说<span class="tag"></<span class="name">a</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>励志与成功<span class="tag"></<span class="name">a</span>></span><span class="tag"></<span class="name">dd</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">dl</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">dl</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">dt</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>电子书<span class="tag"></<span class="name">a</span>></span><span class="tag"></<span class="name">dt</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">dd</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>免费小说<span class="tag"></<span class="name">a</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>励志与成功<span class="tag"></<span class="name">a</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>免费小说<span class="tag"></<span class="name">a</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>励志与成功<span class="tag"></<span class="name">a</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>免费小说<span class="tag"></<span class="name">a</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>励志与成功<span class="tag"></<span class="name">a</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>免费小说<span class="tag"></<span class="name">a</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>励志与成功<span class="tag"></<span class="name">a</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>免费小说<span class="tag"></<span class="name">a</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>励志与成功<span class="tag"></<span class="name">a</span>></span><span class="tag"></<span class="name">dd</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">dl</span>></span> <span class="tag"><<span class="name">dl</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">dt</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>电子书<span class="tag"></<span class="name">a</span>></span><span class="tag"></<span class="name">dt</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">dd</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>免费小说<span class="tag"></<span class="name">a</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>励志与成功<span class="tag"></<span class="name">a</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>免费小说<span class="tag"></<span class="name">a</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>励志与成功<span class="tag"></<span class="name">a</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>免费小说<span class="tag"></<span class="name">a</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>励志与成功<span class="tag"></<span class="name">a</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>免费小说<span class="tag"></<span class="name">a</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>励志与成功<span class="tag"></<span class="name">a</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>免费小说<span class="tag"></<span class="name">a</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>励志与成功<span class="tag"></<span class="name">a</span>></span><span class="tag"></<span class="name">dd</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">dl</span>></span> <span class="tag"><<span class="name">dl</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">dt</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>电子书<span class="tag"></<span class="name">a</span>></span><span class="tag"></<span class="name">dt</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">dd</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>免费小说<span class="tag"></<span class="name">a</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>励志与成功<span class="tag"></<span class="name">a</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>免费小说<span class="tag"></<span class="name">a</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>励志与成功<span class="tag"></<span class="name">a</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>免费小说<span class="tag"></<span class="name">a</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>励志与成功<span class="tag"></<span class="name">a</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>免费小说<span class="tag"></<span class="name">a</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>励志与成功<span class="tag"></<span class="name">a</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>免费小说<span class="tag"></<span class="name">a</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>励志与成功<span class="tag"></<span class="name">a</span>></span><span class="tag"></<span class="name">dd</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">dl</span>></span> <span class="tag"><<span class="name">dl</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">dt</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>电子书<span class="tag"></<span class="name">a</span>></span><span class="tag"></<span class="name">dt</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">dd</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>免费小说<span class="tag"></<span class="name">a</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>励志与成功<span class="tag"></<span class="name">a</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>免费小说<span class="tag"></<span class="name">a</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>励志与成功<span class="tag"></<span class="name">a</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>免费小说<span class="tag"></<span class="name">a</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>励志与成功<span class="tag"></<span class="name">a</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>免费小说<span class="tag"></<span class="name">a</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>励志与成功<span class="tag"></<span class="name">a</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>免费小说<span class="tag"></<span class="name">a</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>励志与成功<span class="tag"></<span class="name">a</span>></span><span class="tag"></<span class="name">dd</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">dl</span>></span> <span class="tag"><<span class="name">dl</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">dt</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>电子书<span class="tag"></<span class="name">a</span>></span><span class="tag"></<span class="name">dt</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">dd</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>免费小说<span class="tag"></<span class="name">a</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>励志与成功<span class="tag"></<span class="name">a</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>免费小说<span class="tag"></<span class="name">a</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>励志与成功<span class="tag"></<span class="name">a</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>免费小说<span class="tag"></<span class="name">a</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>励志与成功<span class="tag"></<span class="name">a</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>免费小说<span class="tag"></<span class="name">a</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>励志与成功<span class="tag"></<span class="name">a</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>免费小说<span class="tag"></<span class="name">a</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>励志与成功<span class="tag"></<span class="name">a</span>></span><span class="tag"></<span class="name">dd</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">dl</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"rightdiv"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">dl</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">dd</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span><span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">""</span> <span class="attr">alt</span>=<span class="string">""</span> <span class="attr">width</span>=<span class="string">"194"</span> <span class="attr">height</span>=<span class="string">"70"</span> <span class="attr">title</span>=<span class="string">"家电"</span>></span><span class="tag"></<span class="name">a</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">dd</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">dd</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span><span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">""</span> <span class="attr">alt</span>=<span class="string">""</span> <span class="attr">width</span>=<span class="string">"194"</span> <span class="attr">height</span>=<span class="string">"70"</span> <span class="attr">title</span>=<span class="string">"家电"</span>></span><span class="tag"></<span class="name">a</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">dd</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">dl</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">dl</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">dt</span>></span>推荐品牌<span class="tag"></<span class="name">dt</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">dd</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>小熊旗舰店<span class="tag"></<span class="name">a</span>></span><span class="tag"></<span class="name">dd</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">dd</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>小熊旗舰店<span class="tag"></<span class="name">a</span>></span><span class="tag"></<span class="name">dd</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">dd</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>小熊旗舰店<span class="tag"></<span class="name">a</span>></span><span class="tag"></<span class="name">dd</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">dd</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>小熊旗舰店<span class="tag"></<span class="name">a</span>></span><span class="tag"></<span class="name">dd</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">dd</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>小熊旗舰店<span class="tag"></<span class="name">a</span>></span><span class="tag"></<span class="name">dd</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">dl</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">li</span>></span></span><br><span class="line"><span class="tag"><<span class="name">li</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>家用电器<span class="tag"></<span class="name">a</span>></span><span class="tag"></<span class="name">li</span>></span></span><br><span class="line"><span class="tag"><<span class="name">li</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>手机/数码<span class="tag"></<span class="name">a</span>></span><span class="tag"></<span class="name">li</span>></span></span><br><span class="line"><span class="tag"><<span class="name">li</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>电脑/办公<span class="tag"></<span class="name">a</span>></span><span class="tag"></<span class="name">li</span>></span></span><br><span class="line"><span class="tag"><<span class="name">li</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>家居/家具/家装/厨具<span class="tag"></<span class="name">a</span>></span><span class="tag"></<span class="name">li</span>></span></span><br><span class="line"><span class="tag"><<span class="name">li</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>服饰内衣/珠宝首饰<span class="tag"></<span class="name">a</span>></span><span class="tag"></<span class="name">li</span>></span></span><br><span class="line"><span class="tag"><<span class="name">li</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>个护化妆<span class="tag"></<span class="name">a</span>></span><span class="tag"></<span class="name">li</span>></span></span><br><span class="line"><span class="tag"><<span class="name">li</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>鞋靴/箱包/钟表/奢侈品<span class="tag"></<span class="name">a</span>></span><span class="tag"></<span class="name">li</span>></span></span><br><span class="line"><span class="tag"><<span class="name">li</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>运动户外<span class="tag"></<span class="name">a</span>></span><span class="tag"></<span class="name">li</span>></span></span><br><span class="line"><span class="tag"><<span class="name">li</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>汽车用品<span class="tag"></<span class="name">a</span>></span><span class="tag"></<span class="name">li</span>></span></span><br><span class="line"><span class="tag"><<span class="name">li</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>母婴/玩具乐器<span class="tag"></<span class="name">a</span>></span><span class="tag"></<span class="name">li</span>></span></span><br><span class="line"><span class="tag"><<span class="name">li</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>食品饮料/酒类/生鲜<span class="tag"></<span class="name">a</span>></span><span class="tag"></<span class="name">li</span>></span></span><br><span class="line"><span class="tag"><<span class="name">li</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>营养保健<span class="tag"></<span class="name">a</span>></span><span class="tag"></<span class="name">li</span>></span></span><br><span class="line"><span class="tag"><<span class="name">li</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>彩票/旅行/充值/票务<span class="tag"></<span class="name">a</span>></span><span class="tag"></<span class="name">li</span>></span></span><br><span class="line"><span class="tag"></<span class="name">ul</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure>]]></content>
</entry>
<entry>
<title><![CDATA[Angular基本概念]]></title>
<url>http://zak7.com/2016/12/23/angular-primary/</url>
<content type="html"><![CDATA[<p style="background-color:#f2f4b0;padding:15px">angular中MVC</p>
<a id="more"></a><!-- 空一行，上下间距更小 -->
<h2 id="MVC"><a href="#MVC" class="headerlink" title="MVC"></a>MVC</h2><blockquote>
<p><strong>Controller使用过程中的注意点</strong></p>
<ol>
<li>不要试图去复用Controller,一个控制器一般只负责一小块视图</li>
<li>不要在Controller中操作DOM,这不是控制器的职责</li>
<li>不要在Controller里面做数据格式化,ng有很好的表单控件</li>
<li>不要在Controller里面做数据过滤操作,ng有$filter服务</li>
<li>一般来说,Controller是不会相互调用的,控制器之间的交互通过事件进行</li>
</ol>
</blockquote>
<p>Angular中的MVC是借助$scope实现的<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">EventController</span>(<span class="params">$scope</span>)</span>{</span><br><span class="line"> $scope.count=<span class="number">0</span>;</span><br><span class="line"> $scope.$on(<span class="string">'MyEvent'</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> $scope.count++;</span><br><span class="line"> });</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><div ng-controller="EventController"></span><br><span class="line"> Root scope</span><br><span class="line"> <tt>MyEvent</tt> count: {{count}}</span><br><span class="line"> <ul></span><br><span class="line"> <li ng-repeat="i in [1]" ng-controller="EventController"></span><br><span class="line"> <button ng-click="$emit('MyEvent')"></span><br><span class="line"> $emit('MyEvent')</span><br><span class="line"> </button></span><br><span class="line"> <button ng-click="$broadcast('MyEvent')"></span><br><span class="line"> $broadcast('MyEvent')</span><br><span class="line"> </button></span><br><span class="line"> <br></span><br><span class="line"> Middle scope</span><br><span class="line"> <tt>MyEvent</tt>count: {{count}}</span><br><span class="line"> <ul></span><br><span class="line"> <li ng-repeat="item in [1,2]" ng-controller="EventController">Leaf scope<tt>MyEvent</tt>count: {{count}}</span><br><span class="line"> </li></span><br><span class="line"> </ul></span><br><span class="line"> </li></span><br><span class="line"> </ul></span><br><span class="line"></div></span><br></pre></td></tr></table></figure>
<h3 id="模块化"><a href="#模块化" class="headerlink" title="模块化"></a>模块化</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> iModule=angular.module(<span class="string">'HelloAngular'</span>,[]);</span><br><span class="line">iModule.controller(<span class="string">'helloAgCtrl'</span>,[<span class="string">'$scope'</span>,<span class="function"><span class="keyword">function</span>(<span class="params">$scope</span>)</span>{</span><br><span class="line"> $scope.greeting={</span><br><span class="line"> text:<span class="string">'hhahah'</span></span><br><span class="line"> };</span><br><span class="line">}]);</span><br></pre></td></tr></table></figure>
<h2 id="路由-模块-依赖注入"><a href="#路由-模块-依赖注入" class="headerlink" title="路由/模块/依赖注入"></a>路由/模块/依赖注入</h2><h2 id="双向数据绑定"><a href="#双向数据绑定" class="headerlink" title="双向数据绑定"></a>双向数据绑定</h2><h3 id="ng-bind"><a href="#ng-bind" class="headerlink" title="ng-bind"></a>ng-bind</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">//{{greeting.text}}</span><br><span class="line"><span class="tag"><<span class="name">span</span> <span class="attr">ng-bind</span>=<span class="string">"greeting.text"</span>></span><span class="tag"></<span class="name">span</span>></span></span><br></pre></td></tr></table></figure>
<h3 id="ng-class"><a href="#ng-class" class="headerlink" title="ng-class"></a>ng-class</h3><h3 id="ng-show-ng-hide"><a href="#ng-show-ng-hide" class="headerlink" title="ng-show/ng-hide"></a>ng-show/ng-hide</h3><h3 id="ng-animate"><a href="#ng-animate" class="headerlink" title="ng-animate"></a>ng-animate</h3><p>双向数据绑定2</p>
]]></content>
</entry>
<entry>
<title><![CDATA[JS信息滚动效果制作]]></title>
<url>http://zak7.com/2016/12/22/js-marquee/</url>
<content type="html"><![CDATA[<div style="background-image:url(http://115.28.217.112/github/java/cover3.jpg);background-position: 30% 40%;background-repeat:no-repeat;min-height: 250px;max-width:550px;text-align:center;margin: -20px auto;background-size: cover;"><div class="demo" style="background-color: rgba(105, 94, 94, 0.5);min-width:150px;margin: 0px 0px 0 40%;"><p style="color:#ffffff;padding: 4px;">JavaScript 信息滚动效果制作</p></div></div>
<a id="more"></a><!-- 空一行，上下间距更小 -->
<h2 id="marquee标签实现信息滚动"><a href="#marquee标签实现信息滚动" class="headerlink" title="marquee标签实现信息滚动"></a>marquee标签实现信息滚动</h2><p><code><marquee></code></p>
<marquee direction="right" behavior="alternate" bgcolor="#f2f4b0" width="50%" onmouseover="this.stop();" onmouseout="this.start();"><b>滚动字幕</b></marquee>
<ol>
<li>behavior滚动的方式<ol>
<li>alternate:表示在两端之间来回滚动</li>
<li>scroll:表示由一端滚动到另一端,会重复</li>
<li>slide:表示由一端滚动到另一端,不会重复</li>
</ol>
</li>
<li>direction滚动的方向<ol>
<li>down/up/left/right</li>
</ol>
</li>
<li>loop滚动的次数<ol>
<li>loop=-1表示一直滚动下去,默认</li>
</ol>
</li>
<li>scrollamount <ol>
<li>设定活动字幕的滚动速度</li>
</ol>
</li>
<li>scrolldelay<ol>
<li>设定活动字幕滚动两次之间的延迟时间</li>
</ol>
</li>
<li>onmouseover/onmouseout<ol>
<li>this.start();/this.stop();</li>
</ol>
</li>
</ol>
<h2 id="文字信息无缝滚动"><a href="#文字信息无缝滚动" class="headerlink" title="文字信息无缝滚动"></a>文字信息无缝滚动</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">window</span>.onload=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="keyword">var</span> scrollBox=<span class="built_in">document</span>.getElementById(<span class="string">'area'</span>),</span><br><span class="line"> list1=<span class="built_in">document</span>.getElementById(<span class="string">'list1'</span>),</span><br><span class="line"> list2=<span class="built_in">document</span>.getElementById(<span class="string">'list2'</span>),</span><br><span class="line"> timer=<span class="number">50</span>;</span><br><span class="line"> list2.innerHTML=list1.innerHTML;</span><br><span class="line"> <span class="keyword">var</span> scrollTimer=setInterval(<span class="string">'scrollUp()'</span>,timer);</span><br><span class="line"> scrollBox.onmouseover=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> clearInterval(scrollTimer);</span><br><span class="line"> }</span><br><span class="line"> scrollBox.onmouseout=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> scrollTimer=setInterval(<span class="string">'scrollUp()'</span>,timer);</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">scrollUp</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="keyword">if</span>(scrollBox.scrollTop>=list1.offsetHeight){</span><br><span class="line"> scrollBox.scrollTop=<span class="number">0</span>;</span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> scrollBox.scrollTop++;</span><br><span class="line"> }</span><br><span class="line"> </span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"scrollBox"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"area"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">ul</span> <span class="attr">id</span>=<span class="string">"list1"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>123123<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>ffff<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>aaaa<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>sdsd<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>jjjjj<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>kkkkk<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>llll<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>7777777<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>888888<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">ul</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">ul</span> <span class="attr">id</span>=<span class="string">"list2"</span>></span><span class="tag"></<span class="name">ul</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure>
<h2 id="间歇性无缝滚动"><a href="#间歇性无缝滚动" class="headerlink" title="间歇性无缝滚动"></a>间歇性无缝滚动</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> scrollTimer;</span><br><span class="line"><span class="built_in">window</span>.onload=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="keyword">var</span> iscrBox=<span class="built_in">document</span>.getElementById(<span class="string">'scrBox'</span>),</span><br><span class="line"> iarea=<span class="built_in">document</span>.getElementById(<span class="string">'area'</span>);</span><br><span class="line"> iarea.innerHTML+=iarea.innerHTML;</span><br><span class="line"> setTimeout(<span class="string">"startMove()"</span>,<span class="number">2000</span>);</span><br><span class="line">}</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">startMove</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="keyword">var</span> iscrBox=<span class="built_in">document</span>.getElementById(<span class="string">'scrBox'</span>);</span><br><span class="line"> iscrBox.scrollTop++;</span><br><span class="line"> scrollTimer=setInterval(<span class="string">"scrollUp()"</span>,<span class="number">50</span>);</span><br><span class="line">}</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">scrollUp</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="keyword">var</span> iscrBox=<span class="built_in">document</span>.getElementById(<span class="string">'scrBox'</span>),</span><br><span class="line"> iarea=<span class="built_in">document</span>.getElementById(<span class="string">'area'</span>);</span><br><span class="line"> iscrBox.scrollTop++;</span><br><span class="line"> <span class="comment">//直接写scrBox.scrollTop也能正常运行?</span></span><br><span class="line"> <span class="keyword">if</span>(iscrBox.scrollTop%<span class="number">20</span>==<span class="number">0</span>){</span><br><span class="line"> clearInterval(scrollTimer);</span><br><span class="line"> setTimeout(<span class="string">"startMove()"</span>,<span class="number">2000</span>);</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">if</span>(iscrBox.scrollTop>=iarea.offsetHeight/<span class="number">2</span>){</span><br><span class="line"> iscrBox.scrollTop=<span class="number">0</span>;</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"scrBox"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"area"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">ul</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>123123<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>ffff<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>aaaa<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>sdsd<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>jjjjj<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>kkkkk<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>llll<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>7777777<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>888888<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">ul</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br></pre></td></tr></table></figure>]]></content>
</entry>
<entry>
<title><![CDATA[JS时间]]></title>
<url>http://zak7.com/2016/12/22/js-time/</url>
<content type="html"><![CDATA[<div style="background-image:url(http://115.28.217.112/github/java/cover2.jpg);background-position: 30% 40%;background-repeat:no-repeat;min-height: 250px;max-width:550px;text-align:center;margin: -20px auto;background-size: cover;"><div class="demo" style="background-color: rgba(105, 94, 94, 0.5);min-width:150px;margin: 0px 0px 0 40%;"><p style="color:#ffffff;padding: 4px;">JavaScript时间相关</p></div></div>
<a id="more"></a><!-- 空一行，上下间距更小 -->
<h2 id="Date对象"><a href="#Date对象" class="headerlink" title="Date对象"></a>Date对象</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><script></span><br><span class="line"> <span class="built_in">window</span>.onload=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> showTime();</span><br><span class="line"> }</span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">checkTime</span>(<span class="params">i</span>)</span>{</span><br><span class="line"> <span class="keyword">if</span>(i<<span class="number">10</span>){</span><br><span class="line"> i=<span class="string">"0"</span>+i;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> i;</span><br><span class="line"> }</span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">showTime</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="keyword">var</span> myDate=<span class="keyword">new</span> <span class="built_in">Date</span>(),</span><br><span class="line"> year=myDate.getFullYear(),</span><br><span class="line"> month=myDate.getMonth(),</span><br><span class="line"> date=myDate.getDate()+<span class="number">1</span>,</span><br><span class="line"> day=myDate.getDay(),</span><br><span class="line"> h=myDate.getHours(),</span><br><span class="line"> m=myDate.getMinutes(),</span><br><span class="line"> s=myDate.getSeconds();</span><br><span class="line"> m=checkTime(m);</span><br><span class="line"> s=checkTime(s);</span><br><span class="line"> <span class="keyword">var</span> weekday=[<span class="string">"星期日"</span>,<span class="string">"星期一"</span>,<span class="string">"星期二"</span>,<span class="string">"星期三"</span>,<span class="string">"星期四"</span>,<span class="string">"星期五"</span>,<span class="string">"星期六"</span>];</span><br><span class="line"> <span class="keyword">var</span> tDiv=<span class="built_in">document</span>.getElementById(<span class="string">"time"</span>);</span><br><span class="line"> tDiv.innerHTML=year+<span class="string">"年"</span>+month+<span class="string">"月"</span>+date+<span class="string">"日"</span>+weekday[day]+h+<span class="string">":"</span>+m+<span class="string">":"</span>+s;</span><br><span class="line"> setTimeout(showTime,<span class="number">500</span>);</span><br><span class="line"> }</span><br><span class="line"><<span class="regexp">/script></span></span><br></pre></td></tr></table></figure>
<h2 id="剩余时间"><a href="#剩余时间" class="headerlink" title="剩余时间"></a>剩余时间</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">leftTime</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="keyword">var</span> curTime=<span class="keyword">new</span> <span class="built_in">Date</span>();</span><br><span class="line"> <span class="keyword">var</span> endTime=<span class="keyword">new</span> <span class="built_in">Date</span>(<span class="string">"2016,12,23"</span>);</span><br><span class="line"> <span class="keyword">var</span> leftTime=<span class="built_in">Math</span>.ceil((endTime.getTime()-curTime.getTime())/(<span class="number">24</span>*<span class="number">60</span>*<span class="number">60</span>*<span class="number">1000</span>));</span><br><span class="line"> <span class="keyword">var</span> lftDiv=<span class="built_in">document</span>.getElementById(<span class="string">"lefttime"</span>);</span><br><span class="line"> lftDiv.innerHTML=leftTime;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">leftTime</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="keyword">var</span> curTime=<span class="keyword">new</span> <span class="built_in">Date</span>();</span><br><span class="line"> <span class="keyword">var</span> endTime=<span class="keyword">new</span> <span class="built_in">Date</span>(<span class="string">"2016/12/23,20:56:11"</span>);</span><br><span class="line"> <span class="keyword">var</span> leftTime=<span class="built_in">parseInt</span>((endTime.getTime()-curTime.getTime())/(<span class="number">1000</span>));</span><br><span class="line"> <span class="keyword">var</span> day=<span class="built_in">parseInt</span>(leftTime/(<span class="number">24</span>*<span class="number">60</span>*<span class="number">60</span>)),</span><br><span class="line"> h=<span class="built_in">parseInt</span>(leftTime/(<span class="number">60</span>*<span class="number">60</span>)%<span class="number">24</span>),</span><br><span class="line"> m=<span class="built_in">parseInt</span>(leftTime/<span class="number">60</span>%<span class="number">60</span>),</span><br><span class="line"> s=<span class="built_in">parseInt</span>(leftTime%<span class="number">60</span>);</span><br><span class="line"> m=checkTime(m);</span><br><span class="line"> s=checkTime(s);</span><br><span class="line"> <span class="keyword">var</span> lftDiv=<span class="built_in">document</span>.getElementById(<span class="string">"lefttime"</span>);</span><br><span class="line"> lftDiv.innerHTML=<span class="string">"还剩"</span>+day+<span class="string">"天"</span>+h+<span class="string">"小时"</span>+m+<span class="string">"分"</span>+s+<span class="string">"秒"</span>;</span><br><span class="line"> setTimeout(<span class="string">"leftTime()"</span>,<span class="number">500</span>);<span class="comment">//里面的参数要避免命名冲突</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure>]]></content>
</entry>
<entry>
<title><![CDATA[JS动画效果]]></title>
<url>http://zak7.com/2016/12/18/js-animation/</url>
<content type="html"><![CDATA[<p style="background-color:#b0f4f3;padding:15px">js动画效果<br></p>
<a id="more"></a><!-- 空一行，上下间距更小 -->
<h2 id="简单动画-透明度动画"><a href="#简单动画-透明度动画" class="headerlink" title="简单动画(透明度动画)"></a>简单动画(透明度动画)</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><script></span><br><span class="line"><span class="built_in">window</span>.onload=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="keyword">var</span> oDiv=<span class="built_in">document</span>.getElementById(<span class="string">'div1'</span>);</span><br><span class="line"> oDiv.onmouseover=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> changeTo(<span class="number">100</span>);</span><br><span class="line"> }</span><br><span class="line"> oDiv.onmouseout=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> changeTo(<span class="number">30</span>);</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="keyword">var</span> timer=<span class="literal">null</span>;</span><br><span class="line"><span class="keyword">var</span> alpha=<span class="number">30</span>;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">changeTo</span>(<span class="params">iTarget</span>)</span>{</span><br><span class="line"> <span class="keyword">var</span> oDiv=<span class="built_in">document</span>.getElementById(<span class="string">'div1'</span>),</span><br><span class="line"> speed=<span class="number">0</span>;</span><br><span class="line"> clearInterval(timer);</span><br><span class="line"> timer=setInterval(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="built_in">document</span>.title=<span class="built_in">window</span>.getComputedStyle(oDiv,<span class="literal">null</span>).opacity;</span><br><span class="line"> <span class="keyword">if</span>(iTarget>alpha){</span><br><span class="line"> speed=<span class="number">10</span>;</span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> speed=<span class="number">-10</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">if</span>(iTarget==alpha){</span><br><span class="line"> clearInterval(timer);</span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> alpha+=speed;</span><br><span class="line"> oDiv.style.opacity=alpha/<span class="number">100</span>;</span><br><span class="line"> oDiv.style.filter=<span class="string">'alpha(opcaity:'</span>+alpha+<span class="string">')'</span>;</span><br><span class="line"> }</span><br><span class="line"> },<span class="number">500</span>);</span><br><span class="line">}</span><br><span class="line"><<span class="regexp">/script></span></span><br></pre></td></tr></table></figure>
<h2 id="缓冲动画"><a href="#缓冲动画" class="headerlink" title="缓冲动画"></a>缓冲动画</h2><p><strong>offsetWidth和clientWidth>>?</strong><br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">speed=(iTarget-alpha)/<span class="number">20</span>;</span><br><span class="line">speed=speed><span class="number">0</span>?<span class="built_in">Math</span>.ceil(speed):<span class="built_in">Math</span>.floor(speed);<span class="comment">//不能出现0速度</span></span><br></pre></td></tr></table></figure></p>
<h2 id="多物体运动"><a href="#多物体运动" class="headerlink" title="多物体运动"></a>多物体运动</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><script></span><br><span class="line"><span class="built_in">window</span>.onload=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="keyword">var</span> oLi=<span class="built_in">document</span>.getElementsByTagName(<span class="string">'li'</span>);</span><br><span class="line"> <span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i<oLi.length;i++){</span><br><span class="line"> oLi.timer=<span class="literal">null</span>;</span><br><span class="line"> oLi[i].onmouseover=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> startMove(<span class="keyword">this</span>,<span class="number">400</span>);</span><br><span class="line"> }</span><br><span class="line"> oLi[i].onmouseout=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> startMove(<span class="keyword">this</span>,<span class="number">200</span>);</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">startMove</span>(<span class="params">obj, iTarget</span>)</span>{</span><br><span class="line"> clearInterval(obj.timer);</span><br><span class="line"> obj.timer=setInterval(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="keyword">var</span> speed=(iTarget-obj.offsetWidth)/<span class="number">8</span>;</span><br><span class="line"> speed=speed><span class="number">0</span>?<span class="built_in">Math</span>.ceil(speed):<span class="built_in">Math</span>.floor(speed);</span><br><span class="line"> <span class="keyword">if</span>(obj.offsetWidth==iTarget){</span><br><span class="line"> clearInterval(obj.timer);</span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> obj.style.width=obj.offsetWidth+speed;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> ,<span class="number">20</span>);</span><br><span class="line"></span><br><span class="line">}</span><br><span class="line"><<span class="regexp">/script></span></span><br></pre></td></tr></table></figure>
<h2 id="获取样式"><a href="#获取样式" class="headerlink" title="获取样式"></a>获取样式</h2><figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><style></span><br><span class="line"> div{</span><br><span class="line"> width:200px;</span><br><span class="line"> height: 200px;</span><br><span class="line"> background: #00ff00;</span><br><span class="line"> border:2px solid #000;</span><br><span class="line"> }</span><br><span class="line"></style></span><br><span class="line"><script></span><br><span class="line"> window.onload=function(){</span><br><span class="line"> setInterval(function(){</span><br><span class="line"> var oDiv=document.getElementsByTagName('div')[0];</span><br><span class="line"> oDiv.style.width=parseInt(getStyle(oDiv,'width'))-1+'px';</span><br><span class="line"> //offsetWidth要加上div样式表中设置的宽度加边框,无单位</span><br><span class="line"> //oDiv.style.width获取的是行内样式,有单位</span><br><span class="line"> },30);</span><br><span class="line"> }</span><br><span class="line"> function getStyle(obj,attr){</span><br><span class="line"> if(obj.currentStyle){</span><br><span class="line"> return obj.currentStyle[attr];</span><br><span class="line">//针对IE浏览器</span><br><span class="line"> }else{</span><br><span class="line"> return getComputedStyle(obj,false)[attr];</span><br><span class="line">//针对fireFox浏览器</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"></script></span><br></pre></td></tr></table></figure>
<h2 id="任意属性值"><a href="#任意属性值" class="headerlink" title="任意属性值"></a>任意属性值</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br></pre></td><td class="code"><pre><span class="line"><script></span><br><span class="line"><span class="built_in">window</span>.onload=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="keyword">var</span> oLi1=<span class="built_in">document</span>.getElementById(<span class="string">'Li1'</span>);</span><br><span class="line"> <span class="keyword">var</span> oLi2=<span class="built_in">document</span>.getElementById(<span class="string">'Li2'</span>);</span><br><span class="line"> oLi1.onmouseover=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> startMove(<span class="keyword">this</span>,<span class="string">'opacity'</span>,<span class="number">100</span>);</span><br><span class="line"> }</span><br><span class="line"> oLi1.onmouseout=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> startMove(<span class="keyword">this</span>,<span class="string">'opacity'</span>,<span class="number">30</span>);</span><br><span class="line"> }</span><br><span class="line"> oLi2.onmouseover=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> startMove(<span class="keyword">this</span>,<span class="string">'height'</span>,<span class="number">400</span>);</span><br><span class="line"> }</span><br><span class="line"> oLi2.onmouseout=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> startMove(<span class="keyword">this</span>,<span class="string">'height'</span>,<span class="number">200</span>);</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">startMove</span>(<span class="params">obj, attr,iTarget</span>)</span>{</span><br><span class="line"> clearInterval(obj.timer);</span><br><span class="line"> obj.timer=setInterval(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="keyword">var</span> icur=<span class="number">0</span>;</span><br><span class="line"> <span class="keyword">if</span>(attr==<span class="string">'opacity'</span>){</span><br><span class="line"> icur=<span class="built_in">Math</span>.round(<span class="built_in">parseFloat</span>(getStyle(obj,attr))*<span class="number">100</span>);</span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> icur=<span class="built_in">parseInt</span>(getStyle(obj,attr));</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">var</span> speed=(iTarget-icur)/<span class="number">8</span>;</span><br><span class="line"> speed=speed><span class="number">0</span>?<span class="built_in">Math</span>.ceil(speed):<span class="built_in">Math</span>.floor(speed);</span><br><span class="line"> <span class="keyword">if</span>(icur==iTarget){</span><br><span class="line"> clearInterval(obj.timer);</span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> <span class="keyword">if</span>(attr==<span class="string">'opacity'</span>){</span><br><span class="line"> obj.style.opacity=(icur+speed)/<span class="number">100</span>;</span><br><span class="line"> obj.style.filter=<span class="string">'alpha(opacity:'</span>+(icur+speed)+<span class="string">')'</span>;</span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> obj.style[attr]=icur+speed+<span class="string">'px'</span>;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> ,<span class="number">20</span>);</span><br><span class="line"></span><br><span class="line">}</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getStyle</span>(<span class="params">obj,attr</span>)</span>{</span><br><span class="line"> <span class="keyword">if</span>(obj.currentStyle){</span><br><span class="line"> <span class="keyword">return</span> obj.currentStyle[attr];</span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> <span class="keyword">return</span> getComputedStyle(obj,<span class="literal">false</span>)[attr]</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><<span class="regexp">/script></span></span><br></pre></td></tr></table></figure>
<h2 id="JS链式动画"><a href="#JS链式动画" class="headerlink" title="JS链式动画"></a>JS链式动画</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><script></span><br><span class="line"> <span class="built_in">window</span>.onload=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="keyword">var</span> oLi1=<span class="built_in">document</span>.getElementById(<span class="string">'Li1'</span>);</span><br><span class="line"> oLi1.onmouseover=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> startMove(oLi1,<span class="string">'opacity'</span>,<span class="number">100</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> startMove(oLi1,<span class="string">'width'</span>,<span class="number">300</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> startMove(oLi1,<span class="string">'height'</span>,<span class="number">200</span>)</span><br><span class="line"> })</span><br><span class="line"> });</span><br><span class="line"> }</span><br><span class="line"> oLi1.onmouseout=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> startMove(oLi1,<span class="string">'height'</span>,<span class="number">100</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> startMove(oLi1,<span class="string">'width'</span>,<span class="number">200</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> startMove(oLi1,<span class="string">'opacity'</span>,<span class="number">30</span>)</span><br><span class="line"> })</span><br><span class="line"> });</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"><<span class="regexp">/script></span></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">startMove</span>(<span class="params">obj, attr, iTarget, fn</span>)</span>{</span><br><span class="line"> clearInterval(obj.timer);</span><br><span class="line"> obj.timer=setInterval(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="keyword">var</span> icur=<span class="number">0</span>;</span><br><span class="line"> <span class="keyword">if</span>(attr==<span class="string">'opacity'</span>){</span><br><span class="line"> icur=<span class="built_in">Math</span>.round(<span class="built_in">parseFloat</span>(getStyle(obj,attr))*<span class="number">100</span>);</span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> icur=<span class="built_in">parseInt</span>(getStyle(obj,attr));</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">var</span> speed=(iTarget-icur)/<span class="number">8</span>;</span><br><span class="line"> speed=speed><span class="number">0</span>?<span class="built_in">Math</span>.ceil(speed):<span class="built_in">Math</span>.floor(speed);</span><br><span class="line"> <span class="keyword">if</span>(icur==iTarget){</span><br><span class="line"> clearInterval(obj.timer);</span><br><span class="line"> <span class="keyword">if</span>(fn){</span><br><span class="line"> fn();</span><br><span class="line"> }</span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> <span class="keyword">if</span>(attr==<span class="string">'opacity'</span>){</span><br><span class="line"> obj.style.opacity=(icur+speed)/<span class="number">100</span>;</span><br><span class="line"> obj.style.filter=<span class="string">'alpha(opacity:'</span>+(icur+speed)+<span class="string">')'</span>;</span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> obj.style[attr]=icur+speed+<span class="string">'px'</span>;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> ,<span class="number">20</span>);</span><br><span class="line"></span><br><span class="line">}</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getStyle</span>(<span class="params">obj,attr</span>)</span>{</span><br><span class="line"> <span class="keyword">if</span>(obj.currentStyle){</span><br><span class="line"> <span class="keyword">return</span> obj.currentStyle[attr];</span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> <span class="keyword">return</span> getComputedStyle(obj,<span class="literal">false</span>)[attr];</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h2 id="同时运动-完美运动框架"><a href="#同时运动-完美运动框架" class="headerlink" title="同时运动(完美运动框架)"></a>同时运动(完美运动框架)</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><script></span><br><span class="line"> <span class="built_in">window</span>.onload=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="keyword">var</span> oLi1=<span class="built_in">document</span>.getElementById(<span class="string">'Li1'</span>);</span><br><span class="line"> oLi1.onmouseover=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> startMove(oLi1,{opacity:<span class="number">100</span>,height:<span class="number">200</span>,width:<span class="number">400</span>},<span class="number">100</span>);</span><br><span class="line"> }</span><br><span class="line"> oLi1.onmouseout=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> startMove(oLi1,{opacity:<span class="number">30</span>,height:<span class="number">100</span>,width:<span class="number">200</span>},<span class="number">100</span>);</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"><<span class="regexp">/script></span></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">startMove</span>(<span class="params">obj, json, fn</span>)</span>{</span><br><span class="line"> clearInterval(obj.timer);</span><br><span class="line"> obj.timer=setInterval(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="keyword">var</span> icur=<span class="number">0</span>;</span><br><span class="line"> <span class="keyword">var</span> flag=<span class="literal">true</span>;<span class="comment">//所有运动完毕</span></span><br><span class="line"> <span class="keyword">for</span>(<span class="keyword">var</span> attr <span class="keyword">in</span> json){</span><br><span class="line"> <span class="keyword">if</span>(attr==<span class="string">'opacity'</span>){</span><br><span class="line"> icur=<span class="built_in">Math</span>.round(<span class="built_in">parseFloat</span>(getStyle(obj,attr))*<span class="number">100</span>);</span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> icur=<span class="built_in">parseInt</span>(getStyle(obj,attr));</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">var</span> speed=(json[attr]-icur)/<span class="number">8</span>;<span class="comment">//分母越大 速度越慢</span></span><br><span class="line"> speed=speed><span class="number">0</span>?<span class="built_in">Math</span>.ceil(speed):<span class="built_in">Math</span>.floor(speed);</span><br><span class="line"> <span class="keyword">if</span>(icur!=json[attr]){</span><br><span class="line"> flag=<span class="literal">false</span>;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span>(attr==<span class="string">'opacity'</span>){</span><br><span class="line"> obj.style.opacity=(icur+speed)/<span class="number">100</span>;</span><br><span class="line"> obj.style.filter=<span class="string">'alpha(opacity:'</span>+(icur+speed)+<span class="string">')'</span>;</span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> obj.style[attr]=icur+speed+<span class="string">'px'</span>;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">if</span>(flag==<span class="literal">true</span>){</span><br><span class="line"> clearInterval(timer);</span><br><span class="line"> <span class="keyword">if</span>(fn){</span><br><span class="line"> fn();</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> }</span><br><span class="line"> ,<span class="number">20</span>);<span class="comment">//越小 刷新越快 速度越快</span></span><br><span class="line"></span><br><span class="line">}</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getStyle</span>(<span class="params">obj,attr</span>)</span>{</span><br><span class="line"> <span class="keyword">if</span>(obj.currentStyle){</span><br><span class="line"> <span class="keyword">return</span> obj.currentStyle[attr];</span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> <span class="keyword">return</span> getComputedStyle(obj,<span class="literal">false</span>)[attr];</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h2 id="jQuery动画案例"><a href="#jQuery动画案例" class="headerlink" title="jQuery动画案例"></a>jQuery动画案例</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> $(<span class="string">'#move a'</span>).mouseenter(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> $(<span class="keyword">this</span>).find(<span class="string">'i'</span>).aniamte({top:<span class="string">"-25px"</span>,opacity:<span class="string">"0"</span>},<span class="number">300</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> $(<span class="keyword">this</span>).css({top:<span class="string">"30px"</span>});</span><br><span class="line"> $(<span class="keyword">this</span>).animate({top:<span class="string">"20px"</span>,opacity:<span class="string">"1"</span>},<span class="number">200</span>)</span><br><span class="line"> })</span><br><span class="line"> })</span><br><span class="line">})</span><br></pre></td></tr></table></figure>]]></content>
</entry>
<entry>
<title><![CDATA[DOM事件探秘]]></title>
<url>http://zak7.com/2016/12/15/js-dom/</url>
<content type="html"><![CDATA[<p style="background-color:#b0f4f3;padding:15px">DOM事件是小伙伴们学习JS中较重要的一部分知识，所以学好JS事件可以为小伙伴们在JS的学习道路中更近一步。<br></p>
<a id="more"></a><!-- 空一行，上下间距更小 -->
<blockquote>
<p>事件冒泡: 即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播至最不具体的那个节点(文档).<br>事件捕获: 不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件</p>
</blockquote>
<h2 id="HTML-事件处理程序"><a href="#HTML-事件处理程序" class="headerlink" title="HTML 事件处理程序"></a>HTML 事件处理程序</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>事件流<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"box"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">id</span>=<span class="string">"btn"</span> <span class="attr">value</span>=<span class="string">"按钮"</span> <span class="attr">onclick</span>=<span class="string">"showMessage()"</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">showMessage</span>(<span class="params"></span>)</span>{</span><br><span class="line"> alert(<span class="string">"hello"</span>);</span><br><span class="line"> }</span><br><span class="line"></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure>
<p>HTML事件的缺点: HTML和JS代码紧密耦合在一起</p>
<h2 id="DOM0级事件处理程序"><a href="#DOM0级事件处理程序" class="headerlink" title="DOM0级事件处理程序"></a>DOM0级事件处理程序</h2><p>较传统的方式: 把一个函数赋值给一个事件的处理程序属性<br><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>事件流<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"box"</span>></span><span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">id</span>=<span class="string">"btn"</span> <span class="attr">value</span>=<span class="string">"按钮"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">showMessage</span>(<span class="params"></span>)</span>{</span><br><span class="line"> alert(<span class="string">"hello"</span>);</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">var</span> btn=<span class="built_in">document</span>.getElementById(<span class="string">"btn"</span>);</span><br><span class="line"> btn.onclick=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> alert(<span class="string">"DOM0级添加的事件"</span>);</span><br><span class="line"> }</span><br><span class="line"> btn.onclick=<span class="literal">null</span>;<span class="comment">//删除onclick属性</span></span><br><span class="line"></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure></p>
<h2 id="DOM2级事件处理程序"><a href="#DOM2级事件处理程序" class="headerlink" title="DOM2级事件处理程序"></a>DOM2级事件处理程序</h2><p>DOM2级事件定义了两个方法:<br>用于处理指定和删除事件处理程序的操作.<br><code>addEventListener()</code>和<code>removeEventListener()</code>.<br>接收三个参数: 要处理的事件名, 作为事件处理程序的函数和布尔值<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">btn.addEventListener(<span class="string">'click'</span>,showMessage,<span class="literal">false</span>);</span><br><span class="line">btn.removeEventListener(<span class="string">'click'</span>,showMessage,<span class="literal">false</span>);</span><br><span class="line">btn.addEventListener(<span class="string">'click'</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> alert(<span class="keyword">this</span>);</span><br><span class="line">},<span class="literal">false</span>)</span><br></pre></td></tr></table></figure></p>
<h2 id="IE事件处理程序"><a href="#IE事件处理程序" class="headerlink" title="IE事件处理程序"></a>IE事件处理程序</h2><p><code>attachEvent()</code>添加事件<br><code>detachEvent()</code>删除事件<br>接收相同的两个参数: 事件处理程序的名称和事件处理程序的函数</p>
<h2 id="跨浏览器的事件处理程序"><a href="#跨浏览器的事件处理程序" class="headerlink" title="跨浏览器的事件处理程序"></a>跨浏览器的事件处理程序</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> btn=<span class="built_in">document</span>.getElementById(<span class="string">"btn"</span>);</span><br><span class="line"><span class="keyword">var</span> eventUtil={</span><br><span class="line"> <span class="comment">//添加句柄</span></span><br><span class="line"> addHandler:<span class="function"><span class="keyword">function</span>(<span class="params">element,type,handler</span>)</span>{</span><br><span class="line"> <span class="keyword">if</span>(element.addEventListener){</span><br><span class="line"> element.addEventListener(type,handler,<span class="literal">false</span>);</span><br><span class="line"> }<span class="keyword">else</span> <span class="keyword">if</span>(element.attachEvent){</span><br><span class="line"> element.attachEvent(<span class="string">'on'</span>+type,handler);</span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> element[<span class="string">'on'</span>+type]=handler;</span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"> <span class="comment">//删除句柄</span></span><br><span class="line"> removeHandler:<span class="function"><span class="keyword">function</span>(<span class="params">element,type,handler</span>)</span>{</span><br><span class="line"> <span class="keyword">if</span>(element.removeEventListener){</span><br><span class="line"> element.removeEventListener(type,handler,<span class="literal">false</span>);</span><br><span class="line"> }<span class="keyword">else</span> <span class="keyword">if</span>(element.detachEvent){</span><br><span class="line"> element.detachEvent(<span class="string">'on'</span>+type,handler);</span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> element[<span class="string">'on'</span>+click]=<span class="literal">null</span>;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line">eventUtil.addHandler(btn,<span class="string">'click'</span>,showMessage);</span><br></pre></td></tr></table></figure>
<hr>
<h2 id="———————"><a href="#———————" class="headerlink" title="———————"></a>———————</h2><h2 id="DOM中的事件对象"><a href="#DOM中的事件对象" class="headerlink" title="DOM中的事件对象"></a>DOM中的事件对象</h2><ol>
<li>type属性 用于获取事件类型<strong>>>?</strong></li>
<li>taget属性 用于获取事件目标<strong>>>?</strong></li>
<li>stopPropagation()方法 用于阻止事件冒泡<br> <code>event.stoppropagation();</code><br> event<strong>>>?</strong></li>
<li>preventDefault()方法 阻止事件的默认行为<br> <code><a href='#'>...</a></code><br> <code>event.preventDefault();</code><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">showMes</span>(<span class="params">event</span>)</span>{</span><br><span class="line"> event=event||<span class="built_in">window</span>.event;</span><br><span class="line"> <span class="keyword">var</span> ele=event.target || event.srcElement;</span><br><span class="line"><span class="comment">//获取对象后有哪些属性可得</span></span><br><span class="line"> alert(ele);</span><br><span class="line"> event.stopPropagation();</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="IE中的事件对象"><a href="#IE中的事件对象" class="headerlink" title="IE中的事件对象"></a>IE中的事件对象</h2><ol>
<li>type属性 用于获取事件类型</li>
<li>srcElement属性 用于获取事件的目标</li>
<li>cancelBubble属性 用于阻止事件冒泡<br> 设置为true表示阻止冒泡 设置为false表示不阻止冒泡</li>
<li>returnValue属性 用于阻止事件的默认行为<br> 设置为false表示阻止事件的默认行为</li>
</ol>
<h2 id="跨浏览器的事件对象"><a href="#跨浏览器的事件对象" class="headerlink" title="跨浏览器的事件对象"></a>跨浏览器的事件对象</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> eventUntil={</span><br><span class="line"> ...,</span><br><span class="line"> getEvent:<span class="function"><span class="keyword">function</span>(<span class="params">event</span>)</span>{</span><br><span class="line"> <span class="keyword">return</span> event?event:<span class="built_in">window</span>.event;</span><br><span class="line"> },</span><br><span class="line"> getType:<span class="function"><span class="keyword">function</span>(<span class="params">event</span>)</span>{</span><br><span class="line"> <span class="keyword">return</span> event.typr;</span><br><span class="line"> },</span><br><span class="line"> getElement:<span class="function"><span class="keyword">function</span>(<span class="params">event</span>)</span>{</span><br><span class="line"> <span class="keyword">return</span> event.target || event.srcElement;</span><br><span class="line"> },</span><br><span class="line"> preventDefault:<span class="function"><span class="keyword">function</span>(<span class="params">event</span>)</span>{</span><br><span class="line"> <span class="keyword">if</span>(event.preventDefault){</span><br><span class="line"> event.preventDefault();</span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> event.returnValue=<span class="literal">false</span>;</span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"> stopPropagation:<span class="function"><span class="keyword">function</span>(<span class="params">event</span>)</span>{</span><br><span class="line"> <span class="keyword">if</span>(event.stopPropagation){</span><br><span class="line"> event.stopPropagation();</span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> event.canselBubble=<span class="literal">true</span>;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">eventUtil.addHandler(go,<span class="string">'click'</span>,<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>{</span><br><span class="line"> <span class="keyword">var</span> e = e || <span class="built_in">window</span>.event;</span><br><span class="line">});</span><br></pre></td></tr></table></figure>
<p><strong>>>?</strong></p>
<h2 id="封装getByClass"><a href="#封装getByClass" class="headerlink" title="封装getByClass"></a>封装getByClass</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getByClass</span>(<span class="params">clsName,parent</span>)</span>{</span><br><span class="line"> <span class="keyword">var</span> oparent=parent?<span class="built_in">document</span>.getElementById(parent):<span class="built_in">document</span>,</span><br><span class="line"> eles=[],</span><br><span class="line"> elements=oparent.getElementsByTagName(<span class="string">'*'</span>);</span><br><span class="line"> <span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>,l=elements.length;i<l;i++){</span><br><span class="line"> <span class="keyword">if</span>(elements[i].className==clsName){</span><br><span class="line"> eles.push(elements[i]);</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> eles;</span><br><span class="line">}</span><br><span class="line"><span class="built_in">window</span>.onload=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="keyword">var</span> toolDft=getByClass(<span class="string">"toolDefault"</span>,<span class="string">"box"</span>)[<span class="number">0</span>];</span><br><span class="line"> toolDft.onclick=<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>{</span><br><span class="line"> <span class="keyword">var</span> e=e ||<span class="built_in">window</span>.event;</span><br><span class="line"> <span class="keyword">var</span> property=<span class="string">""</span>;</span><br><span class="line"> <span class="keyword">for</span>(<span class="keyword">var</span> a <span class="keyword">in</span> e.target){</span><br><span class="line"> property+=a+<span class="string">":"</span>+e.target[a]+<span class="string">"<br/>"</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="built_in">document</span>.write(property);</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h2 id="拖动实现"><a href="#拖动实现" class="headerlink" title="拖动实现"></a>拖动实现</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">window</span>.onload=drag;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">drag</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="keyword">var</span> dragBtn=<span class="built_in">document</span>.getElementById(<span class="string">'dragBtn'</span>);</span><br><span class="line"> dragBtn.onmousedown=mDown;</span><br><span class="line">}</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">mDown</span>(<span class="params">e</span>)</span>{</span><br><span class="line"> <span class="keyword">var</span> box=<span class="built_in">document</span>.getElementById(<span class="string">'box'</span>);</span><br><span class="line"> e=e||<span class="built_in">window</span>.event;<span class="comment">//事件发生后创建事件对象</span></span><br><span class="line"> posX=e.clientX-box.offsetLeft;</span><br><span class="line"> posY=e.clientY-box.offsetTop;</span><br><span class="line"> <span class="built_in">document</span>.onmousemove=<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>{<span class="comment">//事件发生后创建新的事件对象</span></span><br><span class="line"> e=e||<span class="built_in">window</span>.event;</span><br><span class="line"> mMove(e,posX,posY);</span><br><span class="line"> </span><br><span class="line"> }</span><br><span class="line"> <span class="built_in">document</span>.onmouseup=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="built_in">document</span>.onmousemove=<span class="literal">null</span>;</span><br><span class="line"> <span class="built_in">document</span>.onmouseup=<span class="literal">null</span>;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line">}</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">mMove</span>(<span class="params">e,posX,posY</span>)</span>{</span><br><span class="line"> <span class="keyword">var</span> box=<span class="built_in">document</span>.getElementById(<span class="string">'box'</span>),</span><br><span class="line"> l=e.clientX-posX,</span><br><span class="line"> t=e.clientY-posY,</span><br><span class="line"> winW=<span class="built_in">document</span>.documentElement.clientWidth || <span class="built_in">document</span>.body.clientWidth,</span><br><span class="line"> winH=<span class="built_in">document</span>.documentElement.clientHeight || <span class="built_in">document</span>.body.clientHeight,</span><br><span class="line"> maxW=winW-box.offsetWidth<span class="number">-10</span>,</span><br><span class="line"> maxH=winH-box.offsetHeight;</span><br><span class="line"> <span class="keyword">if</span>(l<<span class="number">0</span>){</span><br><span class="line"> l=<span class="number">0</span>;</span><br><span class="line"> }<span class="keyword">else</span> <span class="keyword">if</span>(l>maxW){</span><br><span class="line"> l=maxW;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">if</span>(t<<span class="number">10</span>){</span><br><span class="line"> t=<span class="number">10</span>;</span><br><span class="line"> }<span class="keyword">else</span> <span class="keyword">if</span>(t>maxH){</span><br><span class="line"> t=maxH;</span><br><span class="line"> }</span><br><span class="line"> box.style.left=l+<span class="string">'px'</span>;</span><br><span class="line"> box.style.top=t+<span class="string">'px'</span>;</span><br><span class="line"> <span class="built_in">document</span>.title=e.clientX;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h2 id="状态列表实现"><a href="#状态列表实现" class="headerlink" title="状态列表实现"></a>状态列表实现</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">window</span>.onload=drag;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">drag</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="comment">// 切换状态</span></span><br><span class="line"> <span class="keyword">var</span> loginState=<span class="built_in">document</span>.getElementById(<span class="string">'loginState'</span>),</span><br><span class="line"> stateList=<span class="built_in">document</span>.getElementById(<span class="string">'loginStatePanel'</span>),</span><br><span class="line"> lis=stateList.getElementsByTagName(<span class="string">'li'</span>),</span><br><span class="line"> stateTxt=<span class="built_in">document</span>.getElementById(<span class="string">'login2qq_state_txt'</span>),</span><br><span class="line"> loginStateShow=<span class="built_in">document</span>.getElementById(<span class="string">'loginStateShow'</span>);</span><br><span class="line"></span><br><span class="line"> loginState.onclick=<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>{</span><br><span class="line"> e = e || <span class="built_in">window</span>.event;</span><br><span class="line"> <span class="keyword">if</span>(e.stopPropagation){</span><br><span class="line"> e.stopPropagation();</span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> e.cancelBubble=<span class="literal">true</span>;</span><br><span class="line"> }</span><br><span class="line"> stateList.style.display=<span class="string">'block'</span>;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 鼠标滑过、离开和点击状态列表时</span></span><br><span class="line"> <span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>,l=lis.length;i<l;i++){</span><br><span class="line"> lis[i].onmouseover=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="keyword">this</span>.style.background=<span class="string">'#567'</span>;</span><br><span class="line"> }</span><br><span class="line"> lis[i].onmouseout=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="keyword">this</span>.style.background=<span class="string">'#FFF'</span>;</span><br><span class="line"> }</span><br><span class="line"> lis[i].onclick=<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>{</span><br><span class="line"> e = e || <span class="built_in">window</span>.event;</span><br><span class="line"> <span class="keyword">if</span>(e.stopPropagation){</span><br><span class="line"> e.stopPropagation();</span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> e.cancelBubble=<span class="literal">true</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">var</span> id=<span class="keyword">this</span>.id;</span><br><span class="line"> stateList.style.display=<span class="string">'none'</span>;</span><br><span class="line"> stateTxt.innerHTML=getByClass(<span class="string">'stateSelect_text'</span>,id)[<span class="number">0</span>].innerHTML;</span><br><span class="line"> loginStateShow.className=<span class="string">''</span>;</span><br><span class="line"> loginStateShow.className=<span class="string">'login-state-show '</span>+id;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> <span class="built_in">document</span>.onclick=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> stateList.style.display=<span class="string">'none'</span>;</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h2 id="键盘事件"><a href="#键盘事件" class="headerlink" title="键盘事件"></a>键盘事件</h2><ol>
<li>keyDown 当用户按下键盘上的<code>任意键</code>时触发,而且如果按住不放的话,会重复触发此事件</li>
<li>keyPress 当用户按下键盘上的<code>字符键</code>时触发,而且如果按住不放会重复触发此事件</li>
<li>keyUp 当用户释放键盘上的键室触发</li>
</ol>
]]></content>
</entry>
<entry>
<title><![CDATA[JavaScript进阶]]></title>
<url>http://zak7.com/2016/12/15/js-further/</url>
<content type="html"><![CDATA[<p style="background-color:#b0f4f3;padding:15px">做为WEB攻城师必备技术JavaScript，本课程从如何插入JS代码开始，学习JS基础语法、语法、函数、方法等，让你掌握JS编程思路、知识的使用等，实现运用JS语言为网页增加动态效果，达到与用户交互的目的。<br></p>
<a id="more"></a><!-- 空一行，上下间距更小 -->
<h2 id="JS基础语法"><a href="#JS基础语法" class="headerlink" title="JS基础语法"></a>JS基础语法</h2><p>操作符之间的优先级（高到低）:<br><code>算术操作符 → 比较操作符 → 逻辑操作符 → "="赋值符号</code><br>如果同级的运算是按从左到右次序进行,多层括号由里向外。<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> numa=<span class="number">3</span>;</span><br><span class="line"><span class="keyword">var</span> numb=<span class="number">6</span>;</span><br><span class="line">jq= numa + <span class="number">30</span> ><span class="number">10</span> && numb * <span class="number">3</span><<span class="number">2</span>; <span class="comment">//结果为false</span></span><br></pre></td></tr></table></figure></p>
<h2 id="数组"><a href="#数组" class="headerlink" title="数组"></a>数组</h2><h3 id="数组声明"><a href="#数组声明" class="headerlink" title="数组声明"></a>数组声明</h3><ol>
<li><p><strong>方法一:</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><script type=<span class="string">"text/javascript"</span>></span><br><span class="line"> <span class="keyword">var</span> myarr=<span class="keyword">new</span> <span class="built_in">Array</span>(); <span class="comment">//定义数组</span></span><br><span class="line"> myarr[<span class="number">0</span>]=<span class="number">80</span>; </span><br><span class="line"> myarr[<span class="number">1</span>]=<span class="number">60</span>;</span><br><span class="line"> myarr[<span class="number">2</span>]=<span class="number">99</span>;</span><br><span class="line"> <span class="built_in">document</span>.write(<span class="string">"第一个人的成绩是:"</span>+myarr[<span class="number">0</span>]);</span><br><span class="line"> <span class="built_in">document</span>.write(<span class="string">"第二个人的成绩是:"</span>+myarr[<span class="number">1</span>]);</span><br><span class="line"> <span class="built_in">document</span>.write(<span class="string">"第三个人的成绩是:"</span>+myarr[<span class="number">2</span>]);</span><br><span class="line"><span class="xml"><span class="tag"></<span class="name">script</span>></span></span></span><br></pre></td></tr></table></figure>
</li>
<li><p><strong>方法二、三:</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> myarray = <span class="keyword">new</span> <span class="built_in">Array</span>(<span class="number">66</span>,<span class="number">80</span>,<span class="number">90</span>,<span class="number">77</span>,<span class="number">59</span>);<span class="comment">//创建数组同时赋值</span></span><br><span class="line"><span class="keyword">var</span> myarray = [<span class="number">66</span>,<span class="number">80</span>,<span class="number">90</span>,<span class="number">77</span>,<span class="number">59</span>];<span class="comment">//直接输入一个数组（称 “字面量数组”）</span></span><br></pre></td></tr></table></figure>
</li>
<li><p><strong>数组相关</strong><br>myarray.length; //获得数组myarray的长度</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr=[<span class="number">55</span>,<span class="number">32</span>,<span class="number">5</span>,<span class="number">90</span>,<span class="number">60</span>,<span class="number">98</span>,<span class="number">76</span>,<span class="number">54</span>];<span class="comment">//包含8个数值的数组arr </span></span><br><span class="line"><span class="built_in">document</span>.write(arr.length); <span class="comment">//显示数组长度8</span></span><br></pre></td></tr></table></figure>
<p> 二维数组定义</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> myarr=<span class="keyword">new</span> <span class="built_in">Array</span>(); <span class="comment">//先声明一维 </span></span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i<<span class="number">2</span>;i++){ <span class="comment">//一维长度为2</span></span><br><span class="line"> myarr[i]=<span class="keyword">new</span> <span class="built_in">Array</span>(); <span class="comment">//再声明二维 </span></span><br><span class="line"> <span class="keyword">for</span>(<span class="keyword">var</span> j=<span class="number">0</span>;j<<span class="number">3</span>;j++){ <span class="comment">//二维长度为3</span></span><br><span class="line"> myarr[i][j]=i+j; <span class="comment">// 赋值，每个数组元素的值为i+j</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> Myarr = [[<span class="number">0</span> , <span class="number">1</span> , <span class="number">2</span> ],[<span class="number">1</span> , <span class="number">2</span> , <span class="number">3</span>]]</span><br></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="事件响应"><a href="#事件响应" class="headerlink" title="事件响应"></a>事件响应</h2><p><img src="http://i.imgur.com/D5Orese.png" alt=""></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><script type=<span class="string">"text/javascript"</span>> </span><br><span class="line"> <span class="built_in">window</span>.onunload = onunload_message; </span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">onunload_message</span>(<span class="params"></span>)</span>{ </span><br><span class="line"> <span class="comment">//后台处理程序 </span></span><br><span class="line"> } </span><br><span class="line"><<span class="regexp">/script></span></span><br></pre></td></tr></table></figure>
<h2 id="Javascript内置对象"><a href="#Javascript内置对象" class="headerlink" title="Javascript内置对象"></a>Javascript内置对象</h2><p>JavaScript 中的所有事物都是对象，如:字符串、数值、数组、函数等，每个对象带有属性和方法。<br>对象的属性：反映该对象某些特定的性质的，如：字符串的长度、图像的长宽等；<br>对象的方法：能够在对象上执行的动作。例如，表单的“提交”(Submit)，时间的“获取”(getYear)等；</p>
<h3 id="Array数组对象"><a href="#Array数组对象" class="headerlink" title="Array数组对象"></a>Array数组对象</h3><p>JavaScript 提供多个内建对象，比如 String、Date、Array 等等，使用对象前先定义，如下使用数组对象：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> objectName =<span class="keyword">new</span> <span class="built_in">Array</span>();<span class="comment">//使用new关键字定义对象</span></span><br><span class="line">或者</span><br><span class="line"><span class="keyword">var</span> objectName =[];</span><br><span class="line"><span class="keyword">var</span> myl=myarray.length;<span class="comment">//访问数组长度length属性</span></span><br></pre></td></tr></table></figure>
<p><img src="http://i.imgur.com/FYjtPfX.png" alt=""></p>
<ol>
<li><p><code>concat()</code>方法用于连接两个或多个数组。此方法返回一个新数组，不改变原来的数组。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> mya = <span class="keyword">new</span> <span class="built_in">Array</span>(<span class="number">3</span>);</span><br><span class="line"> mya[<span class="number">0</span>] = <span class="string">"1"</span>;</span><br><span class="line"> mya[<span class="number">1</span>] = <span class="string">"2"</span>;</span><br><span class="line"> mya[<span class="number">2</span>] = <span class="string">"3"</span>;</span><br><span class="line"> <span class="built_in">document</span>.write(mya.concat(<span class="number">4</span>,<span class="number">5</span>)+<span class="string">"<br>"</span>);</span><br><span class="line"> <span class="keyword">var</span> mya1= <span class="keyword">new</span> <span class="built_in">Array</span>(<span class="string">"hello!"</span>);</span><br><span class="line"> <span class="keyword">var</span> mya2= <span class="keyword">new</span> <span class="built_in">Array</span>(<span class="string">"I"</span>,<span class="string">"love"</span>);</span><br><span class="line"> <span class="keyword">var</span> mya3= <span class="keyword">new</span> <span class="built_in">Array</span>(<span class="string">"JavaScript"</span>,<span class="string">"!"</span>);</span><br><span class="line"> <span class="keyword">var</span> mya4=mya1.concat(mya2,mya3);</span><br></pre></td></tr></table></figure>
</li>
<li><p><code>join()</code>方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> myarr = <span class="keyword">new</span> <span class="built_in">Array</span>(<span class="number">3</span>);</span><br><span class="line">myarr[<span class="number">0</span>] = <span class="string">"I"</span>;</span><br><span class="line">myarr[<span class="number">1</span>] = <span class="string">"love"</span>;</span><br><span class="line">myarr[<span class="number">2</span>] = <span class="string">"JavaScript"</span>;</span><br><span class="line"><span class="built_in">document</span>.write(myarr.join());</span><br><span class="line"><span class="built_in">document</span>.write(myarr.join(<span class="string">"."</span>));</span><br></pre></td></tr></table></figure>
</li>
<li><p><code>reverse()</code>方法用于颠倒数组中元素的顺序。<br>注意：该方法会改变原来的数组，而不会创建新的数组。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">document</span>.write(myarr.reverse())</span><br></pre></td></tr></table></figure>
</li>
<li><p><code>slice()</code>方法可从已有的数组中返回选定的元素。<br><code>arrayObject.slice(start,end)</code><br>返回一个新的数组，包含从 start 到 end <strong>（不包括该元素）</strong>的 arrayObject 中的元素。<br>该方法并不会修改数组，而是返回一个子数组。</p>
</li>
<li><p><code>sort()</code>方法使数组中的元素按照一定的顺序排列。<br>如果不指定<方法函数>，则按unicode码顺序排列。<br>如果指定<方法函数>，则按<方法函数>所指定的排序方法排序。<br>注意: 该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：<br>若返回值<=-1，则表示 A 在排序后的序列中出现在 B 之前。<br>若返回值>-1 && <1，则表示 a="" 和="" b="" 具有相同的排序顺序。="" 若返回值="">=1，则表示 A 在排序后的序列中出现在 B 之后。</1，则表示></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><script type=<span class="string">"text/javascript"</span>></span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">sortNum</span>(<span class="params">a,b</span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> a - b;</span><br><span class="line"> <span class="comment">//升序，如降序，把“a - b”该成“b - a”</span></span><br><span class="line">}</span><br><span class="line"> <span class="keyword">var</span> myarr = <span class="keyword">new</span> <span class="built_in">Array</span>(<span class="string">"80"</span>,<span class="string">"16"</span>,<span class="string">"50"</span>,<span class="string">"6"</span>,<span class="string">"100"</span>,<span class="string">"1"</span>);</span><br><span class="line"> <span class="built_in">document</span>.write(myarr + <span class="string">"<br>"</span>);</span><br><span class="line"> <span class="built_in">document</span>.write(myarr.sort(sortNum));</span><br><span class="line"><span class="xml"><span class="tag"></<span class="name">script</span>></span></span></span><br></pre></td></tr></table></figure>
</li>
</ol>
<h3 id="Date日期对象"><a href="#Date日期对象" class="headerlink" title="Date日期对象"></a>Date日期对象</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> Udate=<span class="keyword">new</span> <span class="built_in">Date</span>(); </span><br><span class="line"><span class="keyword">var</span> d = <span class="keyword">new</span> <span class="built_in">Date</span>(<span class="number">2012</span>, <span class="number">10</span>, <span class="number">1</span>); <span class="comment">//2012年10月1日</span></span><br><span class="line"><span class="keyword">var</span> d = <span class="keyword">new</span> <span class="built_in">Date</span>(<span class="string">'Oct 1, 2012'</span>); <span class="comment">//2012年10月1日</span></span><br></pre></td></tr></table></figure>
<p><img src="http://i.imgur.com/JKfkixS.png" alt=""></p>
<ol>
<li><p><strong>返回星期</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><script type=<span class="string">"text/javascript"</span>></span><br><span class="line"> <span class="keyword">var</span> mydate=<span class="keyword">new</span> <span class="built_in">Date</span>();<span class="comment">//定义日期对象</span></span><br><span class="line"> <span class="keyword">var</span> weekday=[<span class="string">"星期日"</span>,<span class="string">"星期一"</span>,<span class="string">"星期二"</span>,<span class="string">"星期三"</span>,<span class="string">"星期四"</span>,<span class="string">"星期五"</span>,<span class="string">"星期六"</span>];</span><br><span class="line"><span class="comment">//定义数组对象,给每个数组项赋值</span></span><br><span class="line"> <span class="keyword">var</span> mynum=mydate.getDay();<span class="comment">//返回值存储在变量mynum中</span></span><br><span class="line"> <span class="built_in">document</span>.write(mydate.getDay());<span class="comment">//输出getDay()获取值</span></span><br><span class="line"> <span class="built_in">document</span>.write(<span class="string">"今天是："</span>+ weekday[mynum]);<span class="comment">//输出星期几</span></span><br><span class="line"><<span class="regexp">/script></span></span><br></pre></td></tr></table></figure>
</li>
<li><p><strong>返回/设置时间方法</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><script type=<span class="string">"text/javascript"</span>></span><br><span class="line"> <span class="keyword">var</span> mydate=<span class="keyword">new</span> <span class="built_in">Date</span>();</span><br><span class="line"> <span class="built_in">document</span>.write(<span class="string">"当前时间："</span>+mydate+<span class="string">"<br>"</span>);</span><br><span class="line"> mydate.setTime(mydate.getTime() + <span class="number">60</span> * <span class="number">60</span> * <span class="number">1000</span>);</span><br><span class="line"> <span class="built_in">document</span>.write(<span class="string">"推迟一小时时间："</span> + mydate);</span><br><span class="line"><span class="xml"><span class="tag"></<span class="name">script</span>></span></span></span><br></pre></td></tr></table></figure>
</li>
</ol>
<h3 id="字符串对象"><a href="#字符串对象" class="headerlink" title="字符串对象"></a><strong>字符串对象</strong></h3><p><code>length</code><br><code>toUpperCase()</code>大写</p>
<ol>
<li><p><code>charAt()</code>返回指定位置的字符。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> mystr=<span class="string">"Hello World!"</span>;</span><br><span class="line"><span class="keyword">var</span> myl=mystr.length;</span><br><span class="line"><span class="keyword">var</span> mynum=mystr.toUpperCase();<span class="comment">//大写</span></span><br><span class="line"><span class="built_in">document</span>.write(mystr.charAt(<span class="number">2</span>));<span class="comment">//返回指定位置的字符。</span></span><br><span class="line"><span class="comment">//返回的字符是长度为 1 的字符串。</span></span><br></pre></td></tr></table></figure>
</li>
<li><p><code>indexOf()</code> 方法可返回某个指定的字符串值在字符串中首次出现的位置。<br><code>stringObject.indexOf(substring, startpos)</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><script type=<span class="string">"text/javascript"</span>></span><br><span class="line"> <span class="keyword">var</span> str=<span class="string">"I love JavaScript!"</span></span><br><span class="line"> <span class="built_in">document</span>.write(str.indexOf(<span class="string">"I"</span>) + <span class="string">"<br />"</span>);<span class="comment">//0</span></span><br><span class="line"> <span class="built_in">document</span>.write(str.indexOf(<span class="string">"v"</span>) + <span class="string">"<br />"</span>);<span class="comment">//4</span></span><br><span class="line"> <span class="built_in">document</span>.write(str.indexOf(<span class="string">"v"</span>,<span class="number">8</span>));<span class="comment">//9</span></span><br><span class="line"><<span class="regexp">/script></span></span><br></pre></td></tr></table></figure>
</li>
<li><p><code>split()</code>方法将字符串分割为字符串数组，并返回此数组。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> mystr = <span class="string">"www.imooc.com"</span>;</span><br><span class="line"><span class="built_in">document</span>.write(mystr.split(<span class="string">"."</span>)+<span class="string">"<br>"</span>);<span class="comment">//www,imooc,com</span></span><br><span class="line"><span class="built_in">document</span>.write(mystr.split(<span class="string">"."</span>, <span class="number">2</span>)+<span class="string">"<br>"</span>);<span class="comment">//www,imooc</span></span><br></pre></td></tr></table></figure>
</li>
<li><p><code>substring()</code> 方法用于提取字符串中介于两个指定下标之间的字符。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">stringObject.substring(startPos,stopPos)</span><br></pre></td></tr></table></figure>
</li>
<li><p><code>substr()</code> 方法从字符串中提取从 startPos位置开始的指定数目的字符串。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">stringObject.substr(startPos,length)</span><br></pre></td></tr></table></figure>
</li>
</ol>
<h3 id="Math对象"><a href="#Math对象" class="headerlink" title="Math对象"></a>Math对象</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><script type=<span class="string">"text/javascript"</span>></span><br><span class="line"> <span class="keyword">var</span> mypi=<span class="built_in">Math</span>.PI; </span><br><span class="line"> <span class="keyword">var</span> myabs=<span class="built_in">Math</span>.abs(<span class="number">-15</span>);</span><br><span class="line"> <span class="built_in">document</span>.write(mypi);<span class="comment">//3.141592653589793</span></span><br><span class="line"> <span class="built_in">document</span>.write(myabs);<span class="comment">//15</span></span><br><span class="line"><<span class="regexp">/script></span></span><br></pre></td></tr></table></figure>
<p><img src="http://i.imgur.com/AZQaCAw.png" alt=""><br><img src="http://i.imgur.com/wDAiHat.png" alt=""></p>
<h2 id="浏览器对象"><a href="#浏览器对象" class="headerlink" title="浏览器对象"></a>浏览器对象</h2><ol>
<li><code>window</code>对象<br>window对象是BOM的核心，window对象指当前的浏览器窗口。<br><img src="http://i.imgur.com/foH0hPJ.jpg" alt=""></li>
<li><p><code>setInterval()</code>在执行时,从载入页面后每隔指定的时间执行代码。<br>调用函数格式(假设有一个clock()函数):</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">setInterval(<span class="string">"clock()"</span>,<span class="number">1000</span>)</span><br><span class="line">或</span><br><span class="line">setInterval(clock,<span class="number">1000</span>)</span><br></pre></td></tr></table></figure>
<p> <code>clearInterval()</code> 方法可取消由 <code>setInterval()</code>设置的交互时间。<br> 语法：<br> <code>clearInterval(id_of_setInterval)</code><br> 参数说明:<br> id_of_setInterval：由 setInterval() 返回的 ID 值。</p>
</li>
<li><p><code>setTimeout()</code>计时器，在载入后延迟指定时间后,去执行一次表达式,仅执行一次。使用clearTimeout()，停止计时器。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><script type=<span class="string">"text/javascript"</span>></span><br><span class="line"> <span class="keyword">var</span> num=<span class="number">0</span>,i;</span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">timedCount</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="built_in">document</span>.getElementById(<span class="string">'txt'</span>).value=num;</span><br><span class="line"> num=num+<span class="number">1</span>;</span><br><span class="line"> i=setTimeout(timedCount,<span class="number">1000</span>);</span><br><span class="line"> }</span><br><span class="line"> setTimeout(timedCount,<span class="number">1000</span>);</span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">stopCount</span>(<span class="params"></span>)</span>{</span><br><span class="line"> clearTimeout(i);</span><br><span class="line"> }</span><br><span class="line"><<span class="regexp">/script></span></span><br></pre></td></tr></table></figure>
</li>
<li><p><code>window.history.back();</code>等价于<code>window.history.go(-1);</code>,点击浏览器的倒退按钮。<br><code>window.history.forward();</code>等价于<code>window.history.go(1);</code></p>
</li>
<li><code>Location</code>对象<br><strong>location对象属性图示:</strong><br><img src="http://i.imgur.com/KIWbY2s.png" alt=""><br><strong>location 对象属性：</strong><br><img src="http://i.imgur.com/gyz2AXJ.jpg" alt=""><br><strong>location 对象方法:</strong><br><img src="http://i.imgur.com/YRFe7wH.jpg" alt=""></li>
<li><code>Navigator</code>对象包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本。<br><img src="http://i.imgur.com/JR70NGM.jpg" alt=""></li>
<li><code>screen</code>对象用于获取用户的屏幕信息。<br><img src="http://i.imgur.com/1w3xH7U.jpg" alt=""><h2 id="DOM对象"><a href="#DOM对象" class="headerlink" title="DOM对象"></a>DOM对象</h2>文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。<br><strong>将HTML代码分解为DOM节点层次图:</strong><br><img src="http://i.imgur.com/24QvBFT.jpg" alt=""><br><code>元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。
文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。
属性节点:元素属性，如<a>标签的链接属性href="http://www.imooc.com"。</code><br><strong>节点属性:</strong><br><img src="http://i.imgur.com/KH7TviD.jpg" alt=""><br><strong>遍历节点树:</strong><br><img src="http://i.imgur.com/69P7lo1.png" alt=""><br><strong>DOM操作:</strong><br><img src="http://i.imgur.com/0nljgdw.png" alt=""></li>
<li><code>getElementsByName()</code>方法返回带有指定名称的节点对象的集合。返回的是元素的数组，而不是一个元素。也有length属性，可以和访问数组一样的方法来访问，从0开始。</li>
<li><code>getElementsByTagName()</code>方法</li>
<li><code>getAttribute()</code>方法，通过元素节点的属性名称获取属性的值。<br><code>elementNode.getAttribute(name)</code><br>elementNode：使用getElementById()、getElementsByTagName()等方法，获取到的元素节点。name：要想查询的元素节点的属性名字。<br><strong>获取h1标签的属性值：</strong><br><img src="http://i.imgur.com/YdmDvkC.png" alt=""></li>
<li><code>setAttribute()</code> 方法增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。<br><code>elementNode.setAttribute(name,value)</code></li>
<li>在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性 ：<br><strong>一、nodeName 属性: </strong>节点的名称，是只读的。<br> 1、元素节点的 nodeName 与标签名相同<br> 2、属性节点的 nodeName 是属性的名称<br> 3、文本节点的 nodeName 永远是 #text<br> 4、文档节点的 nodeName 永远是 #document<br><strong>二、nodeValue 属性：</strong>节点的值<br> 1、元素节点的 nodeValue 是 undefined 或 null<br> 2、文本节点的 nodeValue 是文本自身<br> 3、属性节点的 nodeValue 是属性的值<br><strong>三、nodeType 属性: </strong>节点的类型，是只读的。以下常用的几种结点类型:<br> 元素类型 节点类型<br> 元素 1<br> 属性 2<br> 文本 3<br> 注释 8<br> 文档 9</li>
<li><code>elementNode.childNodes</code><br><img src="http://i.imgur.com/FVq1Nn1.png" alt=""></li>
<li><code>node.firstChild</code>和<code>node.lastChild</code></li>
<li><code>elementNode.parentNode</code></li>
<li><code>nodeObject.nextSibling</code>和<code>nodeObject.previousSibling</code></li>
<li><code>appendChild(newnode)</code>在指定节点的最后一个子节点列表之后添加一个新的子节点。</li>
<li><code>insertBefore(newnode,node);</code>方法可在已有的子节点前插入一个新的子节点。<br>newnode: 要插入的新节点。<br>node: 指定此节点前插入节点<br><img src="http://i.imgur.com/EDBwce1.png" alt=""></li>
<li><code>removeChild()</code> 方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。<br><img src="http://i.imgur.com/u9PedMO.png" alt=""></li>
<li><code>replaceChild()</code><br><img src="http://i.imgur.com/PeiwjG4.png" alt=""></li>
<li><p><code>createElement()</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><script type=<span class="string">"text/javascript"</span>> </span><br><span class="line"> <span class="keyword">var</span> body= <span class="built_in">document</span>.body; </span><br><span class="line"> <span class="keyword">var</span> btn = <span class="built_in">document</span>.createElement(<span class="string">"input"</span>); </span><br><span class="line"> btn.setAttribute(<span class="string">"type"</span>, <span class="string">"text"</span>); </span><br><span class="line"> btn.setAttribute(<span class="string">"name"</span>, <span class="string">"q"</span>); </span><br><span class="line"> btn.setAttribute(<span class="string">"value"</span>, <span class="string">"使用setAttribute"</span>); </span><br><span class="line"> btn.setAttribute(<span class="string">"onclick"</span>, <span class="string">"javascript:alert('This is a text!');"</span>); </span><br><span class="line"> body.appendChild(btn); </span><br><span class="line"><span class="xml"><span class="tag"></<span class="name">script</span>></span></span></span><br></pre></td></tr></table></figure>
</li>
<li><p><code>createTextNode()</code> 方法创建新的文本节点，返回新创建的 Text 节点。<br><code>document.createTextNode(data)</code></p>
</li>
</ol>
]]></content>
</entry>
<entry>
<title><![CDATA[PHP安全性]]></title>
<url>http://zak7.com/2016/11/17/php-safe/</url>
<content type="html"><![CDATA[<p style="background-color:#f2f4b0;padding:15px">有关PHP的安全性方法</p>
<a id="more"></a><!-- 空一行，上下间距更小 -->
<h2 id="阻止垃圾邮件"><a href="#阻止垃圾邮件" class="headerlink" title="阻止垃圾邮件"></a>阻止垃圾邮件</h2><blockquote>
<p>PHP与Mysql动态网站开发,笔记</p>
</blockquote>
<h3 id="isset-和empty"><a href="#isset-和empty" class="headerlink" title="isset()和empty()"></a>isset()和empty()</h3><ol>
<li><p><strong><code>isset()</code></strong><br><strong>格式：</strong><code>bool isset ( mixed var [, mixed var [, ...]] )</code><br><strong>返回值：</strong><br>若变量不存在则返回 FALSE<br>若变量存在且其值为NULL，也返回 FALSE<br>若变量存在且值不为NULL，则返回 TURE<br>同时检查多个变量时，每个单项都符合上一条要求时才返回 TRUE，否则结果为 FALSE<br><strong>更多说明： </strong><br>使用 unset() 释放变量之后，它将不再是 isset()。 </p>
</li>
<li><p><strong><code>empty()</code></strong><br><strong>格式：</strong><code>bool empty ( mixed var )</code><br><strong>返回值：</strong><br>若变量不存在则返回 TRUE<br>若变量存在且其值为””、0、”0”、NULL、、FALSE、array()、var $var; 以及没有任何属性的对象，则返回 TURE<br>若变量存在且值不为””、0、”0”、NULL、、FALSE、array()、var $var; 以及没有任何属性的对象，则返回 FALSE </p>
</li>
</ol>
<hr>
<h3 id="stripos-value-v"><a href="#stripos-value-v" class="headerlink" title="stripos($value,$v)"></a>stripos($value,$v)</h3><p>在<code>$value</code>中第一次出现<code>$v</code>的位置。(不区分大小写)<br><code>strpos()</code>,第一次出现的位置,区分大小写<br><code>strripos()</code>,最后一次出现的位置,不区分大小写<br><code>strpos()</code>,最后一次出现的位置,区分大小写</p>
<hr>
<h3 id="trim"><a href="#trim" class="headerlink" title="trim()"></a>trim()</h3><p><code>trim()</code>移除字符串两侧空白符或预定义字符<br>省略,则移除以下所有字符:</p>
<ol>
<li>“\0” - NULL</li>
<li>“\t” - 制表符</li>
<li>“\n” - 换行</li>
<li>“\x0B” - 垂直制表符</li>
<li>“\r” - 回车</li>
<li>“ “ - 空格</li>
</ol>
<hr>
<h3 id="array-map"><a href="#array-map" class="headerlink" title="array_map()"></a>array_map()</h3><p><code>$scrubbed=array_map('spam_scrubber',$_POST);</code><br>array_map()有两个必需的参数，第一个是要调用的函数的名称,这里是spam_scrubber，第二个参数是一个数组。<br>这一行代码获取可能包含垃圾数据的完整数组（$_POST）,使用spam_scrubber()来清理它,并把结果赋予新变量。<br><strong>从此开始,脚本将使用干净的$scrubbed数组,而不是$_POST,它仍可能包含垃圾数据</strong></p>
]]></content>
</entry>
<entry>
<title><![CDATA[JAVA入门]]></title>
<url>http://zak7.com/2016/08/18/java-begin/</url>
<content type="html"><![CDATA[<div style="background-image:url(http://115.28.217.112/github/java/cover.jpg);background-position: 30% 40%;background-repeat:no-repeat;min-height: 250px;max-width:550px;text-align:center;margin: -20px auto;background-size: cover;"><div class="demo" style="background-color: rgba(105, 94, 94, 0.5);min-width:150px;margin: 0px 0px 0 40%;"><p style="color:#ffffff;">JAVA入门<br>慕课网教程笔记。</p></div></div>
<a id="more"></a><!-- 空一行，上下间距更小 -->
<p><link rel="stylesheet" type="text/css" href="http://115.28.217.112/github/extend/like/css/style.css"><link rel="stylesheet" type="text/css" href="http://115.28.217.112/github/extend/calendar/calendar.css"><div id="container"><div class="feed" id="feed2"><div class="likeCount" id="likeCount2" name="likeCount">—</div><div class="likeIt" id="likeIt2">Click heart</div><div class="heart" id="like2" rel="like"></div><form name="countForm"><input name="countNumber" type="hidden" id="countNumber" value="---"></form></div></div><div style="clear:both;content:''"></div></p>
<script src="http://115.28.217.112/github/extend/like/js/jquery.min.js" type="text/javascript"></script><script type="text/javascript">
$(document).ready(function(){
var t;
var timeOnce;
var n=5;
countCallback();
function countCallback() {
var j = $("form").serializeArray();//序列化name/value
$.ajax({
type: 'GET', //这里用GET
url: 'http://115.28.217.112/github/extend/like/likecount.php',
dataType: 'jsonp', //类型
data: j,
jsonp: 'callback', //jsonp回调参数，必需
async: false,
success: function(result) {//返回的json数据
//alert(result.message); //回调输出
result = result || {};
if (result.msg=='newcount'&&n>0){
$("#likeCount2").html(result.number);
$("#countNumber").val(result.number);
}
},
timeout: 3000
})
}
$('body').on("click",'.heart',function(){
var A=$(this).attr("id");
var B=A.split("like");
var messageID=B[1];
//var C=parseInt($("#likeCount"+messageID).html());
$(this).css("background-position","")
var D=$(this).attr("rel");
if(n==1){
n=0;
countCallback();
$("#likeIt"+messageID).html("I love YOU !");
$("#likeCount"+messageID).html("1314");
surprise();
function surprise()
{
$("#like"+messageID).addClass("heartAnimation").attr("rel","like");
$("#like"+messageID).css("background-position","right");
setTimeout(test1,600);
function test1()
{
$("#like"+messageID).removeClass("heartAnimation").attr("rel","like");
$("#like"+messageID).css("background-position","right");
}
setTimeout(surprise,800);
}
}else if(n>1){
if(timeOnce==1){
}else{
if(D === 'like') {
n=n-1;
//$("#likeCount"+messageID).html(C+1);
//...
countCallback();
//...
//$("#countNumber").val(C+1);
if(n==4)$("#likeIt"+messageID).html("I");
if(n==3)$("#likeIt"+messageID).html("I love");
if(n==2)$("#likeIt"+messageID).html("I love Y");
if(n==1)$("#likeIt"+messageID).html("I love YO");
$(this).addClass("heartAnimation").attr("rel","like");
timeOnce=1;
t=setTimeout(test,600);
function test()
{
timeOnce=0;
clearTimeout(t);
$("#like"+messageID).removeClass("heartAnimation").attr("rel","like");
$("#like"+messageID).css("background-position","right");
}
}
else{
$("#likeCount"+messageID).html(C-1);
$(this).removeClass("heartAnimation").attr("rel","like");
$(this).css("background-position","left");
}
}
}
});
});
</script>
<h2 id="JAVA的一些基本概念"><a href="#JAVA的一些基本概念" class="headerlink" title="JAVA的一些基本概念"></a>JAVA的一些基本概念</h2><ol>
<li><strong>核心概念：JVM、JDK、JRE</strong><ul>
<li>JVM，即JAVA虚拟机（java virtual mechine）</li>
<li>JDK，即java开发工具包（java development kit）</li>
<li>JRE，即JAVA运行环境（java runtime environment）</li>
<li>JVM、JDK、JRE层层包含。即安装完JDK，你就已经拥有了JRE；安装完JRE，你也就已经有了JVM。<p style="background-color:#FFFACD;padding:15px"><code>.java</code>源文件通过编译器（compiler）转为<code>.class</code>字节码文件，最后通过解释器（interpreter）执行。字节码与平台无关，JVM包含解释器，故跨平台通过JVM实现。</p></li>
</ul>
</li>
<li><strong>基础核心：JAVA SE</strong><br>JAVA SE包含<code>{面向对象，API，JVM等}</code>，以此基础有JAVA EE<code>{JSP，EJB，服务等}</code>，以及JAVA ME<code>{游戏，移动设备，通信}</code></li>
<li><p><strong>安装JDK</strong></p>
<blockquote>
<p><a href="http://www.oracle.com/technetwork/java/javase/downloads/index.html" target="_blank" rel="external"><span style="color:red;"> <strong>下载链接</strong> </span></a></p>
</blockquote>
<p> 根据自己的电脑，下载相应版本JDK，进行安装（安装路径自定义，其余一路下一步）。<br> 安装完jdk后需要配置<strong>环境变量</strong>：</p>
<ul>
<li>JAVA_HOME，JDK安装路径，例：<code>D:\Java\jdk1.8.0_101</code></li>
<li>PATH，JDK命令文件位置，即bin目录，例：<code>D:\Java\jdk1.8.0_101\bin</code></li>
<li>CLASSPATH，类库文件位置，即lib目录，例：<code>.;D:\Java\jdk1.8.0_101\lib</code><br>配置好后<code>运行</code>-<code>cmd</code> 输入<code>java -version</code>即可看到JAVA的版本，JAVA安装成功。</li>
</ul>
</li>
<li><strong>记事本编写JAVA</strong><br>略（太简单了，就略了啊）<br><code>dir</code> 查看当前目录。<br><code>javac hello.java</code> 编译<br><code>java hello</code> 执行（不需要后缀名）</li>
<li><p><strong>使用Eclipse开发java</strong><br>Eclipse是一个集成开发环境（IDE），还有MyEclipse也是，Myeclipse是对Eclipse的扩展。<br>Eclipse是绿色版的，故解压就可以使用。</p>
<blockquote>
<p><a href="http://www.eclipse.org/downloads/" target="_blank" rel="external"><span style="color:red;"> <strong>下载链接</strong> </span></a></p>
</blockquote>
<ul>
<li>创建JAVA项目，项目中的src目录用于放源代码文件：new java project</li>
<li>创建程序包，可避免重名问题：new package</li>
<li>编写JAVA源程序：new class</li>
<li>运行JAVA程序：run as-> java app</li>
</ul>
</li>
<li><strong>程序的移植</strong><ul>
<li><code>项目右击</code>-><code>properties</code>-><code>location</code>找到文件并复制</li>
<li>新工作环境中，<code>项目右击</code>-><code>import</code>-><code>Existing</code></li>
</ul>
</li>
</ol>
<h2 id="JAVA基础语法"><a href="#JAVA基础语法" class="headerlink" title="JAVA基础语法"></a>JAVA基础语法</h2><p>JAVA是一种强类型语言</p>
<table>
<thead>
<tr>
<th>类型</th>
<th>类型名</th>
<th>字节长</th>
</tr>
</thead>
<tbody>
<tr>
<td>int</td>
<td>整型</td>
<td>4</td>
</tr>
<tr>
<td>double</td>
<td>双精度浮点型</td>
<td>8</td>
</tr>
<tr>
<td>float</td>
<td>单精度浮点型（2.0f）</td>
<td>4</td>
</tr>
<tr>
<td>char</td>
<td>字符(‘a’)</td>
<td>2</td>
</tr>
<tr>
<td>boolen</td>
<td>布尔型</td>
<td>1</td>
</tr>
</tbody>
</table>
<ul>
<li><strong>JAVA常量</strong> <code>final 常量名（大写）=值</code></li>
<li>可通过<code>javadoc</code>命令从文档注释中提取内容，生成程序的<strong>API帮助文档</strong>。<code>javadoc -d doc demo.java</code></li>
</ul>
<ol>
<li><strong>JAVA中的逻辑运算符</strong><br><code>&&</code>,<code>||</code>,<code>!</code>,<code>^</code>（异或，a^b，则a与b有且仅有一个true，则返回true）</li>
<li><strong>JAVA条件运算符？</strong><br>也称为“三元运算符”。<code>布尔表达式？表达式1：表达式2</code>。</li>
<li><strong>JAVA运算符</strong><br><code>(11+3*8)/4%3=2</code></li>
</ol>
<h2 id="JAVA面向对象"><a href="#JAVA面向对象" class="headerlink" title="JAVA面向对象"></a>JAVA面向对象</h2><h3 id="基本概念"><a href="#基本概念" class="headerlink" title="基本概念"></a>基本概念</h3><p><strong>类</strong>：是模子，确定对象会拥有的特征（属性）和行为（方法）<br><strong>属性</strong>：对象具有的各种特征<br><strong>方法</strong>：对象执行的操作<br>类是抽象的概念、模板，对象是具体实体。</p>
<ol>
<li><strong>类中的变量</strong><ul>
<li>成员变量： 在类中定义，用来描述对象的属性，会被赋初值。</li>
<li>局部变量： 在类的方法中定义，在方法中临时保存数据，不会被赋初值。</li>
<li>上述两种变量重名时，局部变量具有更高的优先级</li>
</ul>
</li>
<li><p><strong>构造方法</strong><br>有参的构造方法和无参的构造方法可以同时存在。</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">public</span> 构造方法名(){</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
</li>
<li><p><strong>static的使用</strong><br>略。多个对象共享static声明的静态变量。</p>
</li>
<li><p><strong>初始化块</strong></p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">int</span> num1;</span><br><span class="line"><span class="keyword">static</span> <span class="keyword">int</span> num2;</span><br><span class="line">{</span><br><span class="line"> num1=<span class="number">91</span>;</span><br><span class="line">}</span><br><span class="line"><span class="keyword">static</span>{</span><br><span class="line"> num2=<span class="number">45</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<ul>
<li>静态初始化块只在类加载时执行且<strong>只会执行一次</strong>。</li>
<li>程序运行时，先执行静态初始化块，然后执行普通初始化块，最后才执行构造函数</li>
</ul>
</li>
</ol>
<p></p><p style="background-color:#FFFACD;padding:15px">下面讲JAVA面向对象的三大特性：封装、继承、多态</p><p></p>
<h3 id="封装"><a href="#封装" class="headerlink" title="封装"></a>封装</h3><p>封装的实现：</p>
<ul>
<li>修改属性的可见性</li>
<li>创建getter/setter方法</li>
<li>在getter/setter方法中加入属性控制语句，防止错误赋值等</li>
</ul>
<h3 id="使用包管理JAVA类"><a href="#使用包管理JAVA类" class="headerlink" title="使用包管理JAVA类"></a>使用包管理JAVA类</h3><ol>
<li>包的声明：<code>package 包名</code>必须放在程序的第一行。</li>
<li>下面讲解包的使用<ul>
<li>可以通过<code>import</code>关键字，在某个文件中使用其它文件中的类：<code>import com.zak.Tel</code></li>
<li>Java中，包的命名规范是全小写字母拼写</li>
<li>使用时，不但可以加载某个包下的所有文件<br><code>e.g: com.zak.*</code><br>而且可以加载某个具体子包下的所有文件<br><code>e.g: com.zak.music.*</code></li>
</ul>
</li>
</ol>
<h3 id="访问修饰符"><a href="#访问修饰符" class="headerlink" title="访问修饰符"></a>访问修饰符</h3><table>
<thead>
<tr>
<th>访问修饰符</th>
<th>本类</th>
<th>同包</th>
<th>子类</th>
<th>其他</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>private </strong></td>
<td>√</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><strong> 默认</strong></td>
<td>√</td>
<td>√</td>
<td></td>
<td></td>
</tr>
<tr>