-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathatom.xml
More file actions
896 lines (796 loc) · 235 KB
/
Copy pathatom.xml
File metadata and controls
896 lines (796 loc) · 235 KB
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
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>Bitamin Blog</title>
<subtitle>黄东鹏</subtitle>
<link href="/atom.xml" rel="self"/>
<link href="http://bitamin.pw/"/>
<updated>2017-01-24T18:01:45.000Z</updated>
<id>http://bitamin.pw/</id>
<author>
<name>Bitamin Kim</name>
</author>
<generator uri="http://hexo.io/">Hexo</generator>
<entry>
<title>关于DOM编程</title>
<link href="http://bitamin.pw/2017/01/07/%E5%85%B3%E4%BA%8EDOM%E7%BC%96%E7%A8%8B/"/>
<id>http://bitamin.pw/2017/01/07/关于DOM编程/</id>
<published>2017-01-07T09:55:42.000Z</published>
<updated>2017-01-24T18:01:45.000Z</updated>
<content type="html"><![CDATA[<p>关于JavaScript-DOM编程的一些基础知识要点</p>
<a id="more"></a>
<h2 id="DOM-Document-Object-Model-文档对象模型"><a href="#DOM-Document-Object-Model-文档对象模型" class="headerlink" title="DOM(Document Object Model) 文档对象模型"></a>DOM(Document Object Model) 文档对象模型</h2><h4 id="DOM编程通过标签属性获取节点的方法"><a href="#DOM编程通过标签属性获取节点的方法" class="headerlink" title="DOM编程通过标签属性获取节点的方法"></a>DOM编程通过标签属性获取节点的方法</h4><ol>
<li>document.getElementById(“HTML标签元素的ID”);</li>
<li>document.getElementsByTagName(“HTML标签元素名”); (返回值是数组)</li>
<li>document.getElementsByName(“HTML标签元素的name”); (返回值是数组)</li>
</ol>
<h4 id="DOM编程通过关系获取标签节点的方法"><a href="#DOM编程通过关系获取标签节点的方法" class="headerlink" title="DOM编程通过关系获取标签节点的方法"></a>DOM编程通过关系获取标签节点的方法</h4><ol>
<li><p>nodeType 获取当前节点的类型</p>
<ol>
<li>文本节点类型是：3</li>
<li>注释节点类型是：8</li>
<li>标签节点类型是：1</li>
</ol>
</li>
<li><p>parentNode 获取当前元素的父节点</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> bodyNode = <span class="built_in">document</span>.getElementsByTagName(<span class="string">"body"</span>)[<span class="number">0</span>];</div><div class="line"><span class="keyword">var</span> parentNode = bodyNode.parentNode;(获取得该元素的父节点对象)</div><div class="line"><span class="keyword">var</span> parentNodeName = parentNode.nodeName;(获取到该父节点名称)</div></pre></td></tr></table></figure>
</li>
<li><p>childNodes 获取当前元素的所有下一级子元素</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> bodyNode = <span class="built_in">document</span>.getElementsByTagName(<span class="string">"body"</span>)[<span class="number">0</span>];</div><div class="line"><span class="keyword">var</span> childNodes = bodyNode.childNodes;(获取得该元素的下一级子元素对象的数组)</div><div class="line"><span class="keyword">var</span> childNodesName = parentNode[<span class="number">0</span>].nodeName;(获取到该子节点<span class="number">0</span>指针的名称) </div><div class="line"><span class="comment">//如果有Script标签并且不在body标签体内的情况，浏览器会自动修正把script标签放进body中。且句尾后具有空文本，也算一个节点。注释也算一个节点。如果需要纯标签节点可以使用nodeType来判断类型进行for循环筛选</span></div><div class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span> ; i < childNodes.length ; i++){</div><div class="line"> <span class="keyword">if</span>(childNodes[i].nodeType == <span class="number">1</span>){</div><div class="line"> alert(childNodes[i].nodeName);</div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure>
</li>
<li><p>firstChild 获取当前节点的第一个子节点</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> bodyNode = <span class="built_in">document</span>.getElementsByTagName(<span class="string">"body"</span>)[<span class="number">0</span>];</div><div class="line"><span class="keyword">var</span> firstChild = bodyNode.firstChild;(获取当前节点的第一个子节点对象)</div><div class="line"><span class="keyword">var</span> firstChildName = firstChild.nodeName;(获取到第一个子节点名称)</div></pre></td></tr></table></figure>
</li>
<li><p>lastChild 获取当前节点的最后一个子节点</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> bodyNode = <span class="built_in">document</span>.getElementsByTagName(<span class="string">"body"</span>)[<span class="number">0</span>];</div><div class="line"><span class="keyword">var</span> lastChild = bodyNode.lastChild;(获取当前节点的最后一个子节点对象)</div><div class="line"><span class="keyword">var</span> lastChildName = lastChild.nodeName;(获取到最后一个子节点名称)</div></pre></td></tr></table></figure>
<hr>
</li>
<li><p>previousSibling 获取当前节点的上一个节点（兄节点）</p>
</li>
<li><p>nextSibling 获取当前节点的下一个节点（弟节点）</p>
</li>
</ol>
<h4 id="DOM编程-创建节点，插入节点"><a href="#DOM编程-创建节点，插入节点" class="headerlink" title="DOM编程 创建节点，插入节点"></a>DOM编程 创建节点，插入节点</h4><ol>
<li><p>document.createElement(“标签名”); 创建标签对象</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> tableNode = <span class="built_in">document</span>.getElementsByTagName(<span class="string">"table"</span>)[<span class="number">0</span>];</div><div class="line"><span class="keyword">var</span> trNode = <span class="built_in">document</span>.createElement(<span class="string">"tr"</span>);</div><div class="line"><span class="keyword">var</span> tdNode1 = <span class="built_in">document</span>.createElement(<span class="string">"td"</span>);</div><div class="line"><span class="keyword">var</span> tdNode2 = <span class="built_in">document</span>.createElement(<span class="string">"td"</span>);</div></pre></td></tr></table></figure>
</li>
<li><p>Object.setAttribute(“属性名”,”属性值”); 设置标签属性</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">trNode.setAttribute(<span class="string">"id"</span>,<span class="string">"trNode"</span>);</div></pre></td></tr></table></figure>
</li>
<li><p>Object.innerHTML=””;</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">tdNode1.innerHTML = <span class="string">"<input type='file'/>"</span>;</div><div class="line">tdNode2.innerHTML = "<a href="#">delete</a>;</div></pre></td></tr></table></figure>
</li>
<li><p>Object.appendChild(e); 添加元素对象到Object中子元素最后的位置</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">trNode.appendChild(tdNode1);</div><div class="line">trNode.appendChild(tdNode2);</div></pre></td></tr></table></figure>
</li>
<li><p>Object.insertBefore(newE,e); 添加元素对象到Object中指定子元素对象前一个位置</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">tableNode.insertBefore(trNode,e);</div></pre></td></tr></table></figure>
</li>
<li><p>Object.removeChild(e); 删除指定的子节点</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">tableNode.removeChild(e);</div></pre></td></tr></table></figure>
</li>
<li><p>添加创建的标签到文档内</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">tableNode.appendChild(trNode);</div><div class="line"><span class="keyword">var</span> bodyNode = <span class="built_in">document</span>.getElementsByTagName(<span class="string">"body"</span>);</div><div class="line">bodyNode.appendChild(tableNode);</div></pre></td></tr></table></figure>
</li>
</ol>
<p>####例子</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div></pre></td><td class="code"><pre><div class="line"><span class="meta"><!DOCTYPE html></span></div><div class="line"><span class="tag"><<span class="name">html</span>></span></div><div class="line"><span class="tag"><<span class="name">head</span>></span></div><div class="line"> <span class="tag"><<span class="name">title</span>></span><span class="tag"></<span class="name">title</span>></span></div><div class="line"><span class="tag"></<span class="name">head</span>></span></div><div class="line"><span class="tag"><<span class="name">body</span>></span></div><div class="line"> <span class="tag"><<span class="name">table</span>></span></div><div class="line"> <span class="tag"><<span class="name">tr</span>></span></div><div class="line"> <span class="tag"><<span class="name">td</span>></span><span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"file"</span> <span class="attr">name</span>=<span class="string">"file"</span>></span><span class="tag"></<span class="name">td</span>></span></div><div class="line"> <span class="tag"></<span class="name">tr</span>></span></div><div class="line"> <span class="tag"><<span class="name">tr</span> <span class="attr">id</span>=<span class="string">"lastRow"</span>></span></div><div class="line"> <span class="tag"><<span class="name">td</span>></span><span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">name</span>=<span class="string">"buttoon"</span> <span class="attr">onclick</span>=<span class="string">"addFile()"</span> <span class="attr">value</span>=<span class="string">"添加"</span>></span><span class="tag"></<span class="name">td</span>></span></div><div class="line"> <span class="tag"></<span class="name">tr</span>></span></div><div class="line"> <span class="tag"></<span class="name">table</span>></span></div><div class="line"> <span class="tag"><<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>></span><span class="undefined"></span></div><div class="line"><span class="javascript"> <span class="function"><span class="keyword">function</span> <span class="title">addFile</span>(<span class="params"></span>)</span>{</span></div><div class="line"><span class="javascript"> <span class="comment">//var tableNode = document.getElementsByTagName("table")[0];</span></span></div><div class="line"><span class="javascript"> <span class="keyword">var</span> tbodyNode = <span class="built_in">document</span>.getElementsByTagName(<span class="string">"tbody"</span>)[<span class="number">0</span>];</span></div><div class="line"><span class="javascript"> <span class="keyword">var</span> trNode = <span class="built_in">document</span>.createElement(<span class="string">"tr"</span>);</span></div><div class="line"><span class="javascript"> <span class="keyword">var</span> tdNode1 = <span class="built_in">document</span>.createElement(<span class="string">"td"</span>);</span></div><div class="line"><span class="javascript"> <span class="keyword">var</span> tdNode2 = <span class="built_in">document</span>.createElement(<span class="string">"td"</span>);</span></div><div class="line"><span class="xml"> tdNode1.innerHTML = "<span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">'file'</span>/></span>";</span></div><div class="line"><span class="xml"> tdNode2.innerHTML = "<span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">'#'</span> <span class="attr">onclick</span>=<span class="string">'delFile(this)'</span>></span>delete<span class="tag"></<span class="name">a</span>></span>";</span></div><div class="line"><span class="undefined"> trNode.appendChild(tdNode1);</span></div><div class="line"><span class="undefined"> trNode.appendChild(tdNode2);</span></div><div class="line"><span class="javascript"> <span class="comment">//tableNode.insertBefore(trNode,tableNode.firstChild); 在第一个添加</span></span></div><div class="line"><span class="javascript"> tbodyNode.insertBefore(trNode,<span class="built_in">document</span>.getElementById(<span class="string">"lastRow"</span>));</span></div><div class="line"><span class="undefined"> }</span></div><div class="line"><span class="javascript"> <span class="function"><span class="keyword">function</span> <span class="title">delFile</span>(<span class="params">aNode</span>)</span>{</span></div><div class="line"><span class="javascript"> <span class="keyword">var</span> trNode = aNode.parentNode.parentNode;</span></div><div class="line"><span class="javascript"> <span class="keyword">var</span> tbodyNode = <span class="built_in">document</span>.getElementsByTagName(<span class="string">"tbody"</span>)[<span class="number">0</span>];</span></div><div class="line"><span class="undefined"> tbodyNode.removeChild(trNode);</span></div><div class="line"><span class="undefined"> }</span></div><div class="line"><span class="undefined"> </span><span class="tag"></<span class="name">script</span>></span></div><div class="line"><span class="tag"></<span class="name">body</span>></span></div><div class="line"><span class="tag"></<span class="name">html</span>></span></div></pre></td></tr></table></figure>
<h4 id="利用DOM编程制作联动框"><a href="#利用DOM编程制作联动框" class="headerlink" title="利用DOM编程制作联动框"></a>利用DOM编程制作联动框</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div></pre></td><td class="code"><pre><div class="line"><span class="meta"><!DOCTYPE html></span></div><div class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"zh"</span>></span></div><div class="line"> <span class="tag"><<span class="name">head</span>></span></div><div class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>></span></div><div class="line"> <span class="tag"></<span class="name">head</span>></span></div><div class="line"> <span class="tag"><<span class="name">body</span>></span></div><div class="line"> 省份</div><div class="line"> <span class="tag"><<span class="name">select</span> <span class="attr">id</span>=<span class="string">"province"</span> <span class="attr">onchange</span>=<span class="string">"showCity()"</span>></span></div><div class="line"> <span class="tag"><<span class="name">option</span>></span>选择<span class="tag"></<span class="name">option</span>></span></div><div class="line"> <span class="tag"><<span class="name">option</span>></span>广东<span class="tag"></<span class="name">option</span>></span></div><div class="line"> <span class="tag"><<span class="name">option</span>></span>湖南<span class="tag"></<span class="name">option</span>></span></div><div class="line"> <span class="tag"><<span class="name">option</span>></span>广西<span class="tag"></<span class="name">option</span>></span></div><div class="line"> <span class="tag"></<span class="name">select</span>></span></div><div class="line"> 城市</div><div class="line"> <span class="tag"><<span class="name">select</span> <span class="attr">id</span>=<span class="string">"city"</span>></span></div><div class="line"> <span class="tag"><<span class="name">option</span>></span>选择<span class="tag"></<span class="name">option</span>></span></div><div class="line"> <span class="tag"></<span class="name">select</span>></span></div><div class="line"> <span class="tag"><<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>></span><span class="undefined"></span></div><div class="line"><span class="javascript"> <span class="function"><span class="keyword">function</span> <span class="title">showCity</span>(<span class="params"></span>)</span>{</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript"> <span class="keyword">var</span> citys = [[],[<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 class="string">"郴州"</span>],[<span class="string">"南宁"</span>,<span class="string">"桂林"</span>,<span class="string">"贵港"</span>,<span class="string">"柳州"</span>]];</span></div><div class="line"><span class="javascript"> <span class="keyword">var</span> proviceNode = <span class="built_in">document</span>.getElementById(<span class="string">"province"</span>);</span></div><div class="line"><span class="javascript"> <span class="keyword">var</span> selectIndex = province.selectedIndex;</span></div><div class="line"><span class="javascript"> <span class="keyword">var</span> cityDatas = citys[selectIndex];</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript"> cityNode = <span class="built_in">document</span>.getElementById(<span class="string">"city"</span>);</span></div><div class="line"><span class="undefined"> cityNodes = cityNode.childNodes;</span></div><div class="line"><span class="undefined"> /*</span></div><div class="line"><span class="javascript"> <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i < cityNodes.length;) {</span></div><div class="line"><span class="undefined"> cityNode.removeChild(cityNodes[i]);</span></div><div class="line"><span class="undefined"> }</span></div><div class="line"><span class="undefined"> </span></div><div class="line"><span class="javascript"> <span class="keyword">while</span>(cityNodes[<span class="number">0</span>] != <span class="literal">null</span>){</span></div><div class="line"><span class="undefined"> cityNode.removeChild(cityNodes[0]);</span></div><div class="line"><span class="undefined"> }</span></div><div class="line"><span class="undefined"> */</span></div><div class="line"><span class="undefined"> cityNode.options.length = 1;</span></div><div class="line"><span class="javascript"> <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i < cityDatas.length; i++) {</span></div><div class="line"><span class="javascript"> <span class="keyword">var</span> option = <span class="built_in">document</span>.createElement(<span class="string">"option"</span>);</span></div><div class="line"><span class="undefined"> option.innerHTML = cityDatas[i];</span></div><div class="line"><span class="undefined"> cityNode.appendChild(option);</span></div><div class="line"><span class="undefined"> }</span></div><div class="line"><span class="undefined"> }</span></div><div class="line"><span class="undefined"> </span><span class="tag"></<span class="name">script</span>></span></div><div class="line"> <span class="tag"></<span class="name">body</span>></span></div><div class="line"><span class="tag"></<span class="name">html</span>></span></div></pre></td></tr></table></figure>
<p><strong>注意事项：</strong>当选择了一元数组的时候（广东），不会出现问题，正常循环添加option标签到城市的select标签中。而当再次选择一元数组的时候会导致原先option的数据留存，而重复显示了广东相关的城市，所以需要在添加一个方法来清空城市select标签。而在清空过程，每removeChild一个元素，则下标会往前移，从而导致用for循环删除的时候没清空干净。此时可以去掉for循环的i++，使该循环只删除0下标，直到没有内容，或者使用whlie循环判断该数组是否为空，不为空则就执行一次remoceChild。或者还有一个更为简便的方法，使用option标签方法中获取到options数组，再对该数组赋值长度为0，从而清空。</p>
<h4 id="时间联动框例子"><a href="#时间联动框例子" class="headerlink" title="时间联动框例子"></a>时间联动框例子</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div></pre></td><td class="code"><pre><div class="line"><!DOCTYPE html></div><div class="line"><html lang=<span class="string">"zh"</span>></div><div class="line"> <head></div><div class="line"> <meta charset=<span class="string">"utf-8"</span>></div><div class="line"> <<span class="regexp">/head></span></div><div class="line"><span class="regexp"> <body></span></div><div class="line"><span class="regexp"> 年<select id="year" onchange="showMonth()"><option>选择</</span>option><span class="xml"><span class="tag"></<span class="name">select</span>></span></span></div><div class="line"> 月<select id=<span class="string">"month"</span> onchange=<span class="string">"showDay()"</span>><span class="xml"><span class="tag"><<span class="name">option</span>></span>选择<span class="tag"></<span class="name">option</span>></span></span><span class="xml"><span class="tag"></<span class="name">select</span>></span></span></div><div class="line"> 日<select id=<span class="string">"day"</span>><span class="xml"><span class="tag"><<span class="name">option</span>></span>选择<span class="tag"></<span class="name">option</span>></span></span><span class="xml"><span class="tag"></<span class="name">select</span>></span></span></div><div class="line"> <script type=<span class="string">"text/javascript"</span>></div><div class="line"> <span class="keyword">var</span> date = <span class="keyword">new</span> <span class="built_in">Date</span>().getFullYear();</div><div class="line"> <span class="keyword">var</span> years = [<span class="number">0</span>,<span class="number">2017</span>,<span class="number">2016</span>,<span class="number">2015</span>,<span class="number">2014</span>,<span class="number">2013</span>,<span class="number">2012</span>,<span class="number">2011</span>,<span class="number">2010</span>,<span class="number">2009</span>,<span class="number">2008</span>,<span class="number">2007</span>,<span class="number">2006</span>,<span class="number">2005</span>,<span class="number">2004</span>,<span class="number">2003</span>,<span class="number">2002</span>,<span class="number">2001</span>,<span class="number">2000</span>,<span class="number">1999</span>,<span class="number">1998</span>,<span class="number">1997</span>,<span class="number">1996</span>,<span class="number">1995</span>,<span class="number">1994</span>,<span class="number">1993</span>,<span class="number">1992</span>,<span class="number">1991</span>,<span class="number">1990</span>,<span class="number">1989</span>,<span class="number">1988</span>,<span class="number">1987</span>,<span class="number">1986</span>,<span class="number">1985</span>,<span class="number">1984</span>,<span class="number">1983</span>,<span class="number">1982</span>,<span class="number">1981</span>,<span class="number">1980</span>,<span class="number">1979</span>,<span class="number">1978</span>,<span class="number">1977</span>,<span class="number">1976</span>,<span class="number">1975</span>,<span class="number">1974</span>,<span class="number">1973</span>,<span class="number">1972</span>,<span class="number">1971</span>,<span class="number">1970</span>,<span class="number">1969</span>,<span class="number">1968</span>,<span class="number">1967</span>,<span class="number">1966</span>,<span class="number">1965</span>,<span class="number">1964</span>,<span class="number">1963</span>,<span class="number">1962</span>,<span class="number">1961</span>,<span class="number">1960</span>,<span class="number">1959</span>,<span class="number">1958</span>,<span class="number">1957</span>,<span class="number">1956</span>,<span class="number">1955</span>,<span class="number">1954</span>,<span class="number">1953</span>,<span class="number">1952</span>,<span class="number">1951</span>,<span class="number">1950</span>,<span class="number">1949</span>,<span class="number">1948</span>,<span class="number">1947</span>,<span class="number">1946</span>,<span class="number">1945</span>,<span class="number">1944</span>,<span class="number">1943</span>,<span class="number">1942</span>,<span class="number">1941</span>,<span class="number">1940</span>,<span class="number">1939</span>,<span class="number">1938</span>,<span class="number">1937</span>,<span class="number">1936</span>,<span class="number">1935</span>,<span class="number">1934</span>,<span class="number">1933</span>,<span class="number">1932</span>,<span class="number">1931</span>,<span class="number">1930</span>,<span class="number">1929</span>,<span class="number">1928</span>,<span class="number">1927</span>,<span class="number">1926</span>,<span class="number">1925</span>,<span class="number">1924</span>,<span class="number">1923</span>,<span class="number">1922</span>,<span class="number">1921</span>,<span class="number">1920</span>,<span class="number">1919</span>,<span class="number">1918</span>,<span class="number">1917</span>,<span class="number">1916</span>,<span class="number">1915</span>,<span class="number">1914</span>,<span class="number">1913</span>,<span class="number">1912</span>,<span class="number">1911</span>,<span class="number">1910</span>,<span class="number">1909</span>,<span class="number">1908</span>,<span class="number">1907</span>,<span class="number">1906</span>,<span class="number">1905</span>,<span class="number">1904</span>,<span class="number">1903</span>,<span class="number">1902</span>,<span class="number">1901</span>,<span class="number">1900</span>];</div><div class="line"> <span class="keyword">var</span> rmonths = [<span class="number">0</span>,<span class="number">31</span>,<span class="number">29</span>,<span class="number">31</span>,<span class="number">30</span>,<span class="number">31</span>,<span class="number">30</span>,<span class="number">31</span>,<span class="number">31</span>,<span class="number">30</span>,<span class="number">31</span>,<span class="number">30</span>,<span class="number">31</span>];</div><div class="line"> <span class="keyword">var</span> nrmonths = [<span class="number">0</span>,<span class="number">31</span>,<span class="number">28</span>,<span class="number">31</span>,<span class="number">30</span>,<span class="number">31</span>,<span class="number">30</span>,<span class="number">31</span>,<span class="number">31</span>,<span class="number">30</span>,<span class="number">31</span>,<span class="number">30</span>,<span class="number">31</span>];</div><div class="line"> <span class="keyword">var</span> months = [<span class="number">0</span>,<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">6</span>,<span class="number">7</span>,<span class="number">8</span>,<span class="number">9</span>,<span class="number">10</span>,<span class="number">11</span>,<span class="number">12</span>];</div><div class="line"> <span class="keyword">var</span> days = [<span class="number">0</span>,<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">6</span>,<span class="number">7</span>,<span class="number">8</span>,<span class="number">9</span>,<span class="number">10</span>,<span class="number">11</span>,<span class="number">12</span>,<span class="number">13</span>,<span class="number">14</span>,<span class="number">15</span>,<span class="number">16</span>,<span class="number">17</span>,<span class="number">18</span>,<span class="number">19</span>,<span class="number">20</span>,<span class="number">21</span>,<span class="number">22</span>,<span class="number">23</span>,<span class="number">24</span>,<span class="number">25</span>,<span class="number">26</span>,<span class="number">27</span>,<span class="number">28</span>,<span class="number">29</span>,<span class="number">30</span>,<span class="number">31</span>];</div><div class="line"> <span class="keyword">var</span> yearsNode = <span class="built_in">document</span>.getElementById(<span class="string">"year"</span>);</div><div class="line"> <span class="keyword">var</span> monthsNode = <span class="built_in">document</span>.getElementById(<span class="string">"month"</span>);</div><div class="line"> <span class="keyword">var</span> daysNode = <span class="built_in">document</span>.getElementById(<span class="string">"day"</span>);</div><div class="line"> </div><div class="line"> </div><div class="line"> <span class="comment">//year import</span></div><div class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">1</span>; i < years.length; i++) {</div><div class="line"> <span class="keyword">var</span> optionNode = <span class="built_in">document</span>.createElement(<span class="string">"option"</span>);</div><div class="line"> optionNode.innerHTML=years[i];</div><div class="line"> yearsNode.appendChild(optionNode);</div><div class="line"> }</div><div class="line"> <span class="comment">//month import</span></div><div class="line"> <span class="function"><span class="keyword">function</span> <span class="title">showMonth</span>(<span class="params"></span>)</span>{</div><div class="line"> monthsNode.options.length = <span class="number">1</span>;</div><div class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">1</span>; i < months.length; i++) {</div><div class="line"> <span class="keyword">var</span> optionNode = <span class="built_in">document</span>.createElement(<span class="string">"option"</span>);</div><div class="line"> optionNode.innerHTML = months[i];</div><div class="line"> monthsNode.appendChild(optionNode);</div><div class="line"> }</div><div class="line"> }</div><div class="line"> <span class="comment">//day import</span></div><div class="line"> <span class="function"><span class="keyword">function</span> <span class="title">showDay</span>(<span class="params"></span>)</span>{</div><div class="line"> daysNode.options.length = <span class="number">1</span>;</div><div class="line"> <span class="keyword">var</span> r;</div><div class="line"> <span class="keyword">if</span>(yearsNode.value%<span class="number">4</span> == <span class="number">0</span>){</div><div class="line"> r = rmonths[monthsNode.value];</div><div class="line"> }<span class="keyword">else</span>{</div><div class="line"> r = nrmonths[monthsNode.value];</div><div class="line"> }</div><div class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">1</span>; i <= r; i++) {</div><div class="line"> <span class="keyword">var</span> optionNode = <span class="built_in">document</span>.createElement(<span class="string">"option"</span>);</div><div class="line"> optionNode.innerHTML = days[i];</div><div class="line"> daysNode.appendChild(optionNode);</div><div class="line"> }</div><div class="line"> }</div><div class="line"> </div><div class="line"> </div><div class="line"> <<span class="regexp">/script></span></div><div class="line"><span class="regexp"> </</span>body></div><div class="line"><<span class="regexp">/html></span></div></pre></td></tr></table></figure>
]]></content>
<summary type="html">
<p>关于JavaScript-DOM编程的一些基础知识要点</p>
</summary>
<category term="开发" scheme="http://bitamin.pw/categories/%E5%BC%80%E5%8F%91/"/>
<category term="DOM" scheme="http://bitamin.pw/tags/DOM/"/>
<category term="JavaScript" scheme="http://bitamin.pw/tags/JavaScript/"/>
</entry>
<entry>
<title>关于Html,Css,JavaScript的一些基础知识要点</title>
<link href="http://bitamin.pw/2016/12/27/%E5%85%B3%E4%BA%8EHtml,Css,Js%E7%9A%84%E4%B8%80%E4%BA%9B%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E8%A6%81%E7%82%B9/"/>
<id>http://bitamin.pw/2016/12/27/关于Html,Css,Js的一些基础知识要点/</id>
<published>2016-12-27T07:20:49.000Z</published>
<updated>2017-01-31T07:33:22.000Z</updated>
<content type="html"><![CDATA[<p>关于Html,Css,JavaScript的一些基础知识要点</p>
<a id="more"></a>
<h2 id="html-css-javaScript-就类似MVC结构（不完全相同，还是有区别）"><a href="#html-css-javaScript-就类似MVC结构（不完全相同，还是有区别）" class="headerlink" title="html css javaScript 就类似MVC结构（不完全相同，还是有区别）"></a>html css javaScript 就类似MVC结构（不完全相同，还是有区别）</h2><h3 id="介绍"><a href="#介绍" class="headerlink" title="介绍"></a>介绍</h3><p><strong>Html</strong>：Model（一个页面的模型，包含了整体的结构模型）</p>
<p><strong>Css</strong>：View（一个项目的视图，视觉，提供了一个页面的美化）</p>
<p><strong>JavaScript</strong>：Controller（一个项目的控制，用户的交互方式，提供一些业务逻辑设计）</p>
<p>跟正统MVC区别：html这一块在一个前端项目中不单单只有模型，也包括了view，毕竟实际浏览器也是根据Html来进行解析展示的，严格上来讲，Model就是纯粹的模型数据，根据需求给Controller进行调用操作。</p>
<p>而Css最多只能起到一个基于Html内容的美化，把类似Model层的Html数据加工，制作出多种结构和样式，例如html中定义两个div：div2，div2。在没有css的情况，按照顺序div1在上，div2在下，使用css进行定位处理还是可以进行变换。Html实质上也算是一个View，提供视图展示，而Css只是在视图的基础上进行渲染。</p>
<h3 id="关于HTML"><a href="#关于HTML" class="headerlink" title="关于HTML"></a>关于HTML</h3><h4 id="主要结构和注意事项"><a href="#主要结构和注意事项" class="headerlink" title="主要结构和注意事项"></a>主要结构和注意事项</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div></pre></td><td class="code"><pre><div class="line"><span class="meta"><!DOCTYPE html></span></div><div class="line"><span class="tag"><<span class="name">html</span>></span></div><div class="line"> <span class="tag"><<span class="name">heat</span>></span></div><div class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"Content-Type"</span> <span class="attr">content</span>=<span class="string">"text/html; charset=utf-8"</span> /></span> //为浏览器定义解析方式</div><div class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"keywords"</span> <span class="attr">content</span>=<span class="string">"HTML, CSS, XML, XHTML, JavaScript"</span>></span> //为搜索引擎定义关键词</div><div class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"description"</span> <span class="attr">content</span>=<span class="string">"Free Web tutorials on HTML and CSS"</span>></span> //为网页定义描述内容</div><div class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"author"</span> <span class="attr">content</span>=<span class="string">"Hege Refsnes"</span>></span> //定义网页作者</div><div class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"refresh"</span> <span class="attr">content</span>=<span class="string">"30"</span>></span> //每30秒中刷新当前页面</div><div class="line"> <span class="tag"><<span class="name">title</span>></span><span class="tag"></<span class="name">title</span>></span></div><div class="line"> <span class="tag"><<span class="name">style</span>></span><span class="undefined"></span><span class="tag"></<span class="name">style</span>></span><span class="tag"><<span class="name">link</span>/></span></div><div class="line"> <span class="tag"></<span class="name">heat</span>></span></div><div class="line"> <span class="tag"><<span class="name">body</span>></span><span class="tag"><<span class="name">script</span>></span><span class="undefined"></span><span class="tag"></<span class="name">script</span>></span><span class="tag"></<span class="name">body</span>></span></div><div class="line"> <span class="tag"><<span class="name">footer</span>></span><span class="tag"></<span class="name">footer</span>></span></div><div class="line"><span class="tag"></<span class="name">html</span>></span></div></pre></td></tr></table></figure>
<ol>
<li>在Html中，Css样式表建议在头部<heat>标签中优先定义，在页面加载的时候同时加载，以防出现页面错位等无样式问题。</heat></li>
<li>Js脚本建议在<body>标签中的最下方进行导入或者编写，以便js可以在运行时基于完全加载页面信息后的数据进行操作。</body></li>
<li>建议编写html的时候声明该页面为UTF-8编码或者一些统一编码，以便浏览器端更好的解析，不会造成乱码。</li>
</ol>
<h3 id="关于Css"><a href="#关于Css" class="headerlink" title="关于Css"></a>关于Css</h3><h4 id="Css的引用方式"><a href="#Css的引用方式" class="headerlink" title="Css的引用方式"></a>Css的引用方式</h4><ol>
<li><p>在需要使用Css样式的标签内定义style属性(行内样式)</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"http://Bitamin.pw"</span> <span class="attr">style</span>=<span class="string">"color:#000"</span>></span>Bitamin Blog<span class="tag"></<span class="name">a</span>></span></div></pre></td></tr></table></figure>
</li>
<li><p>使用style标签(内部样式)</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="tag"><<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>></span><span class="undefined">a{color:#000;}</span><span class="tag"></<span class="name">style</span>></span></div></pre></td></tr></table></figure>
</li>
<li><p>引入外部Css文件(外部样式)</p>
<ol>
<li><p>使用link标签引入Css文件</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="tag"><<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">href</span>=<span class="string">"CssBootStarp.css"</span>/></span></div></pre></td></tr></table></figure>
</li>
<li><p>使用style标签引入Css文件</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="tag"><<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>></span><span class="undefined"></span></div><div class="line"><span class="undefined"> @import url("CssBootStarp.css");</span></div><div class="line"><span class="undefined"> //@import "CssBootStarp.css"; </span></div><div class="line"><span class="undefined"></span><span class="tag"></<span class="name">style</span>></span></div><div class="line"><span class="tag"><<span class="name">style</span> <span class="attr">src</span>=<span class="string">"CssBootStarp.css"</span> ></span><span class="undefined"></span><span class="tag"></<span class="name">style</span>></span><span class="comment"><!-- XHtml2 --></span></div></pre></td></tr></table></figure>
<p></p>
</li>
</ol>
</li>
</ol>
<h4 id="关于link和-import的区别"><a href="#关于link和-import的区别" class="headerlink" title="关于link和@import的区别"></a>关于link和@import的区别</h4><ul>
<li>隶属：link是属于Html标签，import是Css样式style提供的引入一种方式</li>
<li>限制：import只能引入31次Css文件，link不限制</li>
<li>优先：使用link引入的Css文件在页面加载的时候会同时加载，而import会在页面加载完成后再加载</li>
<li>兼容：import是在Css2.1提出的，只能在IE5以上才能识别，link无此问题</li>
<li>控制：使用Js控制DOM(document.styleSheets)改变样式的时候，只能使用link，import不是标签，不能受DOM控制</li>
</ul>
<h4 id="关于Css的优先级问题"><a href="#关于Css的优先级问题" class="headerlink" title="关于Css的优先级问题"></a>关于Css的优先级问题</h4><p> 行内样式 >>>>> 内部样式 >>>>> 外部样式 </p>
<p> 就近原则，哪个距离html内容近则哪个优先</p>
<h4 id="关于Css选择器的使用方式"><a href="#关于Css选择器的使用方式" class="headerlink" title="关于Css选择器的使用方式"></a>关于Css选择器的使用方式</h4><h5 id="关于选择器的种类"><a href="#关于选择器的种类" class="headerlink" title="关于选择器的种类"></a>关于选择器的种类</h5><ol>
<li><p>标签选择器</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line"><span class="tag"><<span class="name">html</span>></span></div><div class="line"> <span class="tag"><<span class="name">head</span>></span></div><div class="line"> <span class="tag"><<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>></span><span class="undefined"></span></div><div class="line"><span class="undefined"> a{color:#000;}</span></div><div class="line"><span class="undefined"> p{color:#000;}</span></div><div class="line"><span class="undefined"> </span><span class="tag"></<span class="name">style</span>></span></div><div class="line"> <span class="tag"></<span class="name">head</span>></span></div><div class="line"> <span class="tag"><<span class="name">body</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>p<span class="tag"></<span class="name">a</span>></span><span class="tag"><<span class="name">p</span>></span>p<span class="tag"></<span class="name">p</span>></span><span class="tag"></<span class="name">body</span>></span></div><div class="line"> <span class="tag"><<span class="name">footer</span>></span><span class="tag"></<span class="name">footer</span>></span></div><div class="line"><span class="tag"></<span class="name">html</span>></span></div></pre></td></tr></table></figure>
</li>
<li><p>类选择器 （类名不能以数字开头）</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line"><span class="tag"><<span class="name">html</span>></span></div><div class="line"> <span class="tag"><<span class="name">head</span>></span></div><div class="line"> <span class="tag"><<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>></span><span class="undefined"></span></div><div class="line"><span class="undefined"> .c{</span></div><div class="line"><span class="undefined"> color:#000;</span></div><div class="line"><span class="undefined"> }</span></div><div class="line"><span class="undefined"> </span><span class="tag"></<span class="name">style</span>></span></div><div class="line"> <span class="tag"></<span class="name">head</span>></span></div><div class="line"> <span class="tag"><<span class="name">body</span>></span><span class="tag"><<span class="name">p</span> <span class="attr">class</span>=<span class="string">"c"</span>></span>This is<span class="tag"><<span class="name">pre</span>></span>&lt;p&gt;<span class="tag"></<span class="name">pre</span>></span><span class="tag"><<span class="name">P</span>></span><span class="tag"></<span class="name">P</span>></span><span class="tag"></<span class="name">p</span>></span><span class="tag"></<span class="name">body</span>></span></div><div class="line"> <span class="tag"><<span class="name">footer</span>></span><span class="tag"></<span class="name">footer</span>></span></div><div class="line"><span class="tag"></<span class="name">html</span>></span></div></pre></td></tr></table></figure>
<p></p>
</li>
<li><p>id选择器 （id属性不能数字开头，id属性推荐在每个Html文档中只出现一次，方便Js控制）</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line"><span class="tag"><<span class="name">html</span>></span></div><div class="line"> <span class="tag"><<span class="name">head</span>></span></div><div class="line"> <span class="tag"><<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>></span><span class="undefined"></span></div><div class="line"><span class="undefined"> #i{</span></div><div class="line"><span class="undefined"> color:#000;</span></div><div class="line"><span class="undefined"> }</span></div><div class="line"><span class="undefined"> </span><span class="tag"></<span class="name">style</span>></span></div><div class="line"> <span class="tag"></<span class="name">head</span>></span></div><div class="line"> <span class="tag"><<span class="name">body</span>></span><span class="tag"><<span class="name">p</span> <span class="attr">id</span>=<span class="string">"i"</span>></span>This is<span class="tag"><<span class="name">pre</span>></span>&lt;p&gt;<span class="tag"></<span class="name">pre</span>></span><span class="tag"><<span class="name">P</span>></span><span class="tag"></<span class="name">P</span>></span><span class="tag"></<span class="name">p</span>></span><span class="tag"></<span class="name">body</span>></span></div><div class="line"> <span class="tag"><<span class="name">footer</span>></span><span class="tag"></<span class="name">footer</span>></span></div><div class="line"><span class="tag"></<span class="name">html</span>></span></div></pre></td></tr></table></figure>
</li>
<li><p>交集选择器</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div></pre></td><td class="code"><pre><div class="line"><span class="tag"><<span class="name">html</span>></span></div><div class="line"> <span class="tag"><<span class="name">head</span>></span></div><div class="line"> <span class="tag"><<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>></span><span class="undefined"></span></div><div class="line"><span class="undefined"> #i pre{</span></div><div class="line"><span class="undefined"> color:#000;</span></div><div class="line"><span class="undefined"> }</span></div><div class="line"><span class="undefined"> .c pre{</span></div><div class="line"><span class="undefined"> color:#FFF;</span></div><div class="line"><span class="undefined"> }</span></div><div class="line"><span class="undefined"> </span><span class="tag"></<span class="name">style</span>></span></div><div class="line"> <span class="tag"></<span class="name">head</span>></span></div><div class="line"> <span class="tag"><<span class="name">body</span>></span></div><div class="line"> <span class="tag"><<span class="name">p</span> <span class="attr">id</span>=<span class="string">"i"</span>></span>This is<span class="tag"><<span class="name">pre</span>></span>&lt;p&gt;<span class="tag"></<span class="name">pre</span>></span><span class="tag"><<span class="name">P</span>></span><span class="tag"></<span class="name">P</span>></span><span class="tag"></<span class="name">p</span>></span></div><div class="line"> <span class="tag"><<span class="name">p</span> <span class="attr">class</span>=<span class="string">"c"</span>></span>This is<span class="tag"><<span class="name">pre</span>></span>&lt;p&gt;<span class="tag"></<span class="name">pre</span>></span><span class="tag"><<span class="name">P</span>></span><span class="tag"></<span class="name">P</span>></span><span class="tag"></<span class="name">p</span>></span></div><div class="line"> <span class="tag"></<span class="name">body</span>></span></div><div class="line"> <span class="tag"><<span class="name">footer</span>></span><span class="tag"></<span class="name">footer</span>></span></div><div class="line"><span class="tag"></<span class="name">html</span>></span></div></pre></td></tr></table></figure>
</li>
<li><p>并集选择器</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div></pre></td><td class="code"><pre><div class="line"><span class="tag"><<span class="name">html</span>></span></div><div class="line"> <span class="tag"><<span class="name">head</span>></span></div><div class="line"> <span class="tag"><<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>></span><span class="undefined"></span></div><div class="line"><span class="undefined"> p h1{</span></div><div class="line"><span class="undefined"> color:#000;</span></div><div class="line"><span class="undefined"> }</span></div><div class="line"><span class="undefined"> </span><span class="tag"></<span class="name">style</span>></span></div><div class="line"> <span class="tag"></<span class="name">head</span>></span></div><div class="line"> <span class="tag"><<span class="name">body</span>></span></div><div class="line"> <span class="tag"><<span class="name">p</span> <span class="attr">class</span>=<span class="string">"c"</span>></span>This is<span class="tag"><<span class="name">pre</span>></span>&lt;p&gt;<span class="tag"></<span class="name">pre</span>></span><span class="tag"><<span class="name">P</span>></span><span class="tag"></<span class="name">P</span>></span><span class="tag"></<span class="name">p</span>></span></div><div class="line"> <span class="tag"><<span class="name">h1</span>></span>h1<span class="tag"></<span class="name">h1</span>></span></div><div class="line"> <span class="tag"><<span class="name">h2</span>></span>h2<span class="tag"></<span class="name">h2</span>></span></div><div class="line"> <span class="tag"><<span class="name">h3</span>></span>h3<span class="tag"></<span class="name">h3</span>></span></div><div class="line"> <span class="tag"></<span class="name">body</span>></span></div><div class="line"> <span class="tag"><<span class="name">footer</span>></span><span class="tag"></<span class="name">footer</span>></span></div><div class="line"><span class="tag"></<span class="name">html</span>></span></div></pre></td></tr></table></figure>
<p></p>
</li>
<li><p>派生选择器 （类似家庭但是有分级，按照元素一个个向右寻找）</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div></pre></td><td class="code"><pre><div class="line"><span class="tag"><<span class="name">html</span>></span></div><div class="line"> <span class="tag"><<span class="name">head</span>></span></div><div class="line"> <span class="tag"><<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>></span><span class="undefined"></span></div><div class="line"><span class="undefined"> p pre{</span></div><div class="line"><span class="undefined"> color:#000;</span></div><div class="line"><span class="undefined"> }</span></div><div class="line"><span class="undefined"> p strong pre{</span></div><div class="line"><span class="undefined"> color:#FFF;</span></div><div class="line"><span class="undefined"> }</span></div><div class="line"><span class="undefined"> p u a{</span></div><div class="line"><span class="undefined"> color:#FFF;</span></div><div class="line"><span class="undefined"> }</span></div><div class="line"><span class="undefined"> </span><span class="tag"></<span class="name">style</span>></span></div><div class="line"> <span class="tag"></<span class="name">head</span>></span></div><div class="line"> <span class="tag"><<span class="name">body</span>></span></div><div class="line"> <span class="tag"><<span class="name">p</span> <span class="attr">id</span>=<span class="string">"i"</span>></span>This is<span class="tag"><<span class="name">pre</span>></span>&lt;p&gt;<span class="tag"></<span class="name">pre</span>></span><span class="tag"><<span class="name">P</span>></span><span class="tag"></<span class="name">P</span>></span><span class="tag"></<span class="name">p</span>></span></div><div class="line"> <span class="tag"><<span class="name">p</span> <span class="attr">class</span>=<span class="string">"c"</span>></span>This <span class="tag"><<span class="name">strong</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>is<span class="tag"></<span class="name">a</span>></span><span class="tag"></<span class="name">strong</span>></span><span class="tag"><<span class="name">pre</span>></span>&lt;p&gt;<span class="tag"></<span class="name">pre</span>></span><span class="tag"></<span class="name">p</span>></span></div><div class="line"> <span class="tag"><<span class="name">p</span> <span class="attr">class</span>=<span class="string">"c"</span>></span>This <span class="tag"><<span class="name">u</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>is<span class="tag"></<span class="name">a</span>></span><span class="tag"></<span class="name">u</span>></span><span class="tag"></<span class="name">strong</span>></span><span class="tag"><<span class="name">pre</span>></span>&lt;p&gt;<span class="tag"></<span class="name">pre</span>></span><span class="tag"></<span class="name">p</span>></span></div><div class="line"> <span class="tag"></<span class="name">body</span>></span></div><div class="line"> <span class="tag"><<span class="name">footer</span>></span><span class="tag"></<span class="name">footer</span>></span></div><div class="line"><span class="tag"></<span class="name">html</span>></span></div></pre></td></tr></table></figure>
</li>
<li><p>后代选择器 （类似家庭，可以直接从左向右寻找该标签的子标签）</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div></pre></td><td class="code"><pre><div class="line"><span class="tag"><<span class="name">html</span>></span></div><div class="line"> <span class="tag"><<span class="name">head</span>></span></div><div class="line"> <span class="tag"><<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>></span><span class="undefined"></span></div><div class="line"><span class="undefined"> p pre{</span></div><div class="line"><span class="undefined"> color:#000;</span></div><div class="line"><span class="undefined"> }</span></div><div class="line"><span class="undefined"> p em{</span></div><div class="line"><span class="undefined"> color:#FFF;</span></div><div class="line"><span class="undefined"> }</span></div><div class="line"><span class="undefined"> </span><span class="tag"></<span class="name">style</span>></span></div><div class="line"> <span class="tag"></<span class="name">head</span>></span></div><div class="line"> <span class="tag"><<span class="name">body</span>></span></div><div class="line"> <span class="tag"><<span class="name">p</span> <span class="attr">id</span>=<span class="string">"i"</span>></span>This is<span class="tag"><<span class="name">pre</span>></span>&lt;p&gt;<span class="tag"></<span class="name">pre</span>></span><span class="tag"><<span class="name">P</span>></span><span class="tag"></<span class="name">P</span>></span><span class="tag"></<span class="name">p</span>></span></div><div class="line"> <span class="tag"><<span class="name">p</span> <span class="attr">class</span>=<span class="string">"c"</span>></span>This <span class="tag"><<span class="name">strong</span>></span><span class="tag"><<span class="name">em</span>></span>is<span class="tag"></<span class="name">em</span>></span><span class="tag"></<span class="name">strong</span>></span><span class="tag"><<span class="name">pre</span>></span>&lt;p&gt;<span class="tag"></<span class="name">pre</span>></span><span class="tag"><<span class="name">P</span>></span><span class="tag"></<span class="name">P</span>></span><span class="tag"></<span class="name">p</span>></span></div><div class="line"> <span class="tag"></<span class="name">body</span>></span></div><div class="line"> <span class="tag"><<span class="name">footer</span>></span><span class="tag"></<span class="name">footer</span>></span></div><div class="line"><span class="tag"></<span class="name">html</span>></span></div></pre></td></tr></table></figure>
</li>
<li><p>子元素选择器（类似父子，有直接关系，必须在第一级标签下的第二级标签才会选中）</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div></pre></td><td class="code"><pre><div class="line"><span class="tag"><<span class="name">html</span>></span></div><div class="line"> <span class="tag"><<span class="name">head</span>></span></div><div class="line"> <span class="tag"><<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>></span><span class="undefined"></span></div><div class="line"><span class="undefined"> p pre{</span></div><div class="line"><span class="undefined"> color:#000;</span></div><div class="line"><span class="undefined"> }</span></div><div class="line"><span class="undefined"> h1 > u{</span></div><div class="line"><span class="undefined"> color:#FFF;</span></div><div class="line"><span class="undefined"> }</span></div><div class="line"><span class="undefined"> </span><span class="tag"></<span class="name">style</span>></span></div><div class="line"> <span class="tag"></<span class="name">head</span>></span></div><div class="line"> <span class="tag"><<span class="name">body</span>></span></div><div class="line"> <span class="tag"><<span class="name">p</span> <span class="attr">id</span>=<span class="string">"i"</span>></span>This is<span class="tag"><<span class="name">pre</span>></span>&lt;p&gt;<span class="tag"></<span class="name">pre</span>></span><span class="tag"><<span class="name">P</span>></span><span class="tag"></<span class="name">P</span>></span><span class="tag"></<span class="name">p</span>></span></div><div class="line"> <span class="tag"><<span class="name">h1</span>></span><span class="tag"><<span class="name">u</span>></span><span class="tag"><<span class="name">em</span>></span>This is <span class="tag"></<span class="name">em</span>></span><span class="tag"></<span class="name">u</span>></span><span class="tag"><<span class="name">u</span>></span><span class="tag"><<span class="name">em</span>></span>h1<span class="tag"></<span class="name">em</span>></span><span class="tag"></<span class="name">u</span>></span><span class="tag"><<span class="name">u</span>></span>h1<span class="tag"></<span class="name">u</span>></span><span class="tag"></<span class="name">h1</span>></span></div><div class="line"> <span class="tag"><<span class="name">h1</span>></span><span class="tag"><<span class="name">em</span>></span><span class="tag"><<span class="name">u</span>></span>This is <span class="tag"></<span class="name">u</span>></span><span class="tag"></<span class="name">em</span>></span><span class="tag"><<span class="name">u</span>></span>h1<span class="tag"></<span class="name">u</span>></span><span class="tag"></<span class="name">h1</span>></span></div><div class="line"> <span class="tag"></<span class="name">body</span>></span></div><div class="line"> <span class="tag"><<span class="name">footer</span>></span><span class="tag"></<span class="name">footer</span>></span></div><div class="line"><span class="tag"></<span class="name">html</span>></span></div></pre></td></tr></table></figure>
</li>
<li><p>相邻兄弟选择器（类似兄弟，并且最终选择是后者开始，且需要有相同的父元素， 相同子元素会在第二个开始到最后一个，不相同相邻子元素则只选择后者）</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div></pre></td><td class="code"><pre><div class="line"><span class="tag"><<span class="name">html</span>></span></div><div class="line"> <span class="tag"><<span class="name">head</span>></span></div><div class="line"> <span class="tag"><<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>></span><span class="undefined"></span></div><div class="line"><span class="undefined"> li+li{</span></div><div class="line"><span class="undefined"> color:#555;</span></div><div class="line"><span class="undefined"> }</span></div><div class="line"><span class="undefined"> p+h1{</span></div><div class="line"><span class="undefined"> color:#FFF;</span></div><div class="line"><span class="undefined"> }</span></div><div class="line"><span class="undefined"> </span><span class="tag"></<span class="name">style</span>></span></div><div class="line"> <span class="tag"></<span class="name">head</span>></span></div><div class="line"> <span class="tag"><<span class="name">body</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">ul</span>></span></div><div class="line"> <span class="tag"><<span class="name">li</span>></span>List item 1<span class="tag"></<span class="name">li</span>></span></div><div class="line"> <span class="tag"><<span class="name">li</span>></span>List item 2<span class="tag"></<span class="name">li</span>></span>//变色</div><div class="line"> <span class="tag"><<span class="name">li</span>></span>List item 3<span class="tag"></<span class="name">li</span>></span>//变色</div><div class="line"> <span class="tag"></<span class="name">ul</span>></span></div><div class="line"> <span class="tag"><<span class="name">ol</span>></span></div><div class="line"> <span class="tag"><<span class="name">li</span>></span>List item 1<span class="tag"></<span class="name">li</span>></span></div><div class="line"> <span class="tag"><<span class="name">li</span>></span>List item 2<span class="tag"></<span class="name">li</span>></span>//变色</div><div class="line"> <span class="tag"><<span class="name">li</span>></span>List item 3<span class="tag"></<span class="name">li</span>></span>//变色</div><div class="line"> <span class="tag"></<span class="name">ol</span>></span></div><div class="line"> <span class="tag"><<span class="name">h1</span>></span>This is h1<span class="tag"></<span class="name">h1</span>></span></div><div class="line"> <span class="tag"><<span class="name">p</span>></span>This is p<span class="tag"></<span class="name">p</span>></span>//变色</div><div class="line"> <span class="tag"><<span class="name">p</span>></span>This is p<span class="tag"></<span class="name">p</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">h1</span>></span>This is h1 <span class="tag"></<span class="name">h1</span>></span></div><div class="line"> <span class="tag"><<span class="name">p</span>></span>This is p <span class="tag"></<span class="name">p</span>></span>//变色</div><div class="line"> <span class="tag"><<span class="name">p</span>></span>This is p <span class="tag"></<span class="name">p</span>></span></div><div class="line"> <span class="tag"></<span class="name">body</span>></span></div><div class="line"> <span class="tag"><<span class="name">footer</span>></span><span class="tag"></<span class="name">footer</span>></span></div><div class="line"><span class="tag"></<span class="name">html</span>></span></div></pre></td></tr></table></figure>
</li>
<li><p>通用选择器（代表选择所有元素，优先级最低）</p>
</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div></pre></td><td class="code"><pre><div class="line"><span class="tag"><<span class="name">html</span>></span></div><div class="line"> <span class="tag"><<span class="name">head</span>></span></div><div class="line"> <span class="tag"><<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>></span><span class="undefined"></span></div><div class="line"><span class="undefined"> *{</span></div><div class="line"><span class="undefined"> color:#000;</span></div><div class="line"><span class="undefined"> }</span></div><div class="line"><span class="undefined"> </span><span class="tag"></<span class="name">style</span>></span></div><div class="line"> <span class="tag"></<span class="name">head</span>></span></div><div class="line"> <span class="tag"><<span class="name">body</span>></span></div><div class="line"> <span class="tag"><<span class="name">h1</span>></span><span class="tag"><<span class="name">u</span>></span><span class="tag"><<span class="name">em</span>></span>This is <span class="tag"></<span class="name">em</span>></span><span class="tag"></<span class="name">u</span>></span><span class="tag"><<span class="name">u</span>></span><span class="tag"><<span class="name">em</span>></span>h1<span class="tag"></<span class="name">em</span>></span><span class="tag"></<span class="name">u</span>></span><span class="tag"><<span class="name">u</span>></span>h1<span class="tag"></<span class="name">u</span>></span><span class="tag"></<span class="name">h1</span>></span></div><div class="line"> <span class="tag"><<span class="name">h1</span>></span><span class="tag"><<span class="name">em</span>></span><span class="tag"><<span class="name">u</span>></span>This is <span class="tag"></<span class="name">u</span>></span><span class="tag"></<span class="name">em</span>></span><span class="tag"><<span class="name">u</span>></span>h1<span class="tag"></<span class="name">u</span>></span><span class="tag"></<span class="name">h1</span>></span></div><div class="line"> <span class="tag"></<span class="name">body</span>></span></div><div class="line"> <span class="tag"><<span class="name">footer</span>></span><span class="tag"></<span class="name">footer</span>></span></div><div class="line"><span class="tag"></<span class="name">html</span>></span></div></pre></td></tr></table></figure>
<ol>
<li>伪类选择器</li>
</ol>
<ul>
<li>a:link //元素没有被访问过的状态（未点击过）</li>
</ul>
<ul>
<li>a:visited //元素已经访问过的状态（点击过，鼠标点击后放开）</li>
</ul>
<ul>
<li>a:hover //鼠标经过元素的状态（鼠标经过元素的时候）</li>
</ul>
<ul>
<li>a:active //鼠标按下激活元素的状态 （鼠标点击元素，还没放开的时候）</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div></pre></td><td class="code"><pre><div class="line"><span class="tag"><<span class="name">html</span>></span></div><div class="line"> <span class="tag"><<span class="name">head</span>></span></div><div class="line"> <span class="tag"><<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>></span><span class="undefined"></span></div><div class="line"><span class="undefined"> a:link{</span></div><div class="line"><span class="undefined"> color:#F00;</span></div><div class="line"><span class="undefined"> }</span></div><div class="line"><span class="undefined"> a:visited{</span></div><div class="line"><span class="undefined"> color:#0F0;</span></div><div class="line"><span class="undefined"> }</span></div><div class="line"><span class="undefined"> a:hover{</span></div><div class="line"><span class="undefined"> color:#00F;</span></div><div class="line"><span class="undefined"> font-size:24px;</span></div><div class="line"><span class="undefined"> }</span></div><div class="line"><span class="undefined"> a:active{</span></div><div class="line"><span class="undefined"> color:#F0F;</span></div><div class="line"><span class="undefined"> }</span></div><div class="line"><span class="undefined"> </span><span class="tag"></<span class="name">style</span>></span></div><div class="line"> <span class="tag"></<span class="name">head</span>></span></div><div class="line"> <span class="tag"><<span class="name">body</span>></span></div><div class="line"> <span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>Bitamin<span class="tag"></<span class="name">a</span>></span></div><div class="line"> <span class="tag"></<span class="name">body</span>></span></div><div class="line"> <span class="tag"><<span class="name">footer</span>></span><span class="tag"></<span class="name">footer</span>></span></div><div class="line"><span class="tag"></<span class="name">html</span>></span></div></pre></td></tr></table></figure>
<h4 id="关于选择器的优先级和选择器的使用例子"><a href="#关于选择器的优先级和选择器的使用例子" class="headerlink" title="关于选择器的优先级和选择器的使用例子"></a>关于选择器的优先级和选择器的使用例子</h4><p>标签选择器 <<<<< 类选择器 <<<<< id选择器 <<<<<</p>
<p>选择器可以是类，标签和其他选择器或者d，标签和其他选择器相加</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div></pre></td><td class="code"><pre><div class="line"><span class="tag"><<span class="name">html</span>></span></div><div class="line"> <span class="tag"><<span class="name">head</span>></span></div><div class="line"> <span class="tag"><<span class="name">style</span>></span><span class="undefined"></span></div><div class="line"><span class="undefined"> .c strong em{</span></div><div class="line"><span class="undefined"> color:#000;</span></div><div class="line"><span class="undefined"> }//类选择器+后代选择器+...</span></div><div class="line"><span class="undefined"> .c pre,</span></div><div class="line"><span class="undefined"> .c p{</span></div><div class="line"><span class="undefined"> color:#000;</span></div><div class="line"><span class="undefined"> }//类选择器+后代选择器+并集选择器</span></div><div class="line"><span class="undefined"> h1 > u em{</span></div><div class="line"><span class="undefined"> color:#FFF;</span></div><div class="line"><span class="undefined"> }//子类选择器+后代选择器</span></div><div class="line"><span class="undefined"> #i p u{</span></div><div class="line"><span class="undefined"> color:#FFF;</span></div><div class="line"><span class="undefined"> } ID选择器+后代选择器</span></div><div class="line"><span class="undefined"> </span><span class="tag"></<span class="name">style</span>></span></div><div class="line"> <span class="tag"></<span class="name">head</span>></span></div><div class="line"> <span class="tag"><<span class="name">body</span>></span></div><div class="line"> <span class="tag"><<span class="name">p</span> <span class="attr">id</span>=<span class="string">"i"</span>></span>This is<span class="tag"><<span class="name">pre</span>></span>&lt;p&gt;<span class="tag"></<span class="name">pre</span>></span><span class="tag"><<span class="name">P</span>></span>1<span class="tag"><<span class="name">u</span>></span>2<span class="tag"></<span class="name">u</span>></span><span class="tag"></<span class="name">P</span>></span><span class="tag"></<span class="name">p</span>></span></div><div class="line"> <span class="tag"><<span class="name">p</span> <span class="attr">class</span>=<span class="string">"c"</span>></span>This <span class="tag"><<span class="name">strong</span>></span><span class="tag"><<span class="name">em</span>></span>is<span class="tag"></<span class="name">em</span>></span><span class="tag"></<span class="name">strong</span>></span><span class="tag"><<span class="name">pre</span>></span>&lt;p&gt;<span class="tag"></<span class="name">pre</span>></span><span class="tag"><<span class="name">P</span>></span><span class="tag"></<span class="name">P</span>></span><span class="tag"></<span class="name">p</span>></span></div><div class="line"> <span class="tag"><<span class="name">h1</span>></span><span class="tag"><<span class="name">u</span>></span><span class="tag"><<span class="name">em</span>></span>This is <span class="tag"></<span class="name">em</span>></span><span class="tag"></<span class="name">u</span>></span><span class="tag"><<span class="name">u</span>></span><span class="tag"><<span class="name">em</span>></span>h1<span class="tag"></<span class="name">em</span>></span><span class="tag"></<span class="name">u</span>></span><span class="tag"><<span class="name">u</span>></span>h1<span class="tag"></<span class="name">u</span>></span><span class="tag"></<span class="name">h1</span>></span></div><div class="line"> <span class="tag"><<span class="name">h1</span>></span><span class="tag"><<span class="name">em</span>></span><span class="tag"><<span class="name">u</span>></span>This is <span class="tag"></<span class="name">u</span>></span><span class="tag"></<span class="name">em</span>></span><span class="tag"><<span class="name">u</span>></span>h1<span class="tag"></<span class="name">u</span>></span><span class="tag"></<span class="name">h1</span>></span></div><div class="line"> <span class="tag"><<span class="name">h1</span>></span><span class="tag"><<span class="name">u</span>></span><span class="tag"><<span class="name">em</span>></span>This is <span class="tag"></<span class="name">em</span>></span><span class="tag"></<span class="name">u</span>></span><span class="tag"><<span class="name">u</span>></span>h1<span class="tag"></<span class="name">u</span>></span><span class="tag"></<span class="name">h1</span>></span></div><div class="line"> <span class="tag"></<span class="name">body</span>></span></div><div class="line"> <span class="tag"><<span class="name">footer</span>></span><span class="tag"></<span class="name">footer</span>></span></div><div class="line"><span class="tag"></<span class="name">html</span>></span></div></pre></td></tr></table></figure>
<h4 id="关于CSS的定位"><a href="#关于CSS的定位" class="headerlink" title="关于CSS的定位"></a>关于CSS的定位</h4><ol>
<li><p>相对定位</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div></pre></td><td class="code"><pre><div class="line"><span class="tag"><<span class="name">html</span>></span></div><div class="line"> <span class="tag"><<span class="name">head</span>></span></div><div class="line"> <span class="tag"><<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>></span><span class="undefined"></span></div><div class="line"><span class="undefined"> div{</span></div><div class="line"><span class="undefined"> border-style:solid;</span></div><div class="line"><span class="undefined"> width:100px;</span></div><div class="line"><span class="undefined"> height:100px;</span></div><div class="line"><span class="undefined"> }</span></div><div class="line"><span class="undefined"> .div2{</span></div><div class="line"><span class="undefined"> position:relative; //相对定位</span></div><div class="line"><span class="undefined"> top:10px; // 距离上一个对象边框10像素</span></div><div class="line"><span class="undefined"> left:10px; //距离左边对象边框10像素</span></div><div class="line"><span class="undefined"> }</span></div><div class="line"><span class="undefined"> </span><span class="tag"></<span class="name">style</span>></span></div><div class="line"> <span class="tag"></<span class="name">head</span>></span></div><div class="line"> <span class="tag"><<span class="name">body</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"div1"</span> ></span>div1<span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"div2"</span> ></span>div2<span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"div3"</span> ></span>div3<span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"></<span class="name">body</span>></span></div><div class="line"> <span class="tag"><<span class="name">footer</span>></span><span class="tag"></<span class="name">footer</span>></span></div><div class="line"><span class="tag"></<span class="name">html</span>></span></div></pre></td></tr></table></figure>
</li>
<li><p>绝对定位</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div></pre></td><td class="code"><pre><div class="line"><span class="tag"><<span class="name">html</span>></span></div><div class="line"> <span class="tag"><<span class="name">head</span>></span></div><div class="line"> <span class="tag"><<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>></span><span class="undefined"></span></div><div class="line"><span class="undefined"> div{</span></div><div class="line"><span class="undefined"> border-style:solid;</span></div><div class="line"><span class="undefined"> width:100px;</span></div><div class="line"><span class="undefined"> height:100px;</span></div><div class="line"><span class="undefined"> }</span></div><div class="line"><span class="undefined"> .div1{</span></div><div class="line"><span class="undefined"> position:absolute; //绝对定位</span></div><div class="line"><span class="undefined"> color:#F00;</span></div><div class="line"><span class="undefined"> top:200;</span></div><div class="line"><span class="undefined"> left:400;</span></div><div class="line"><span class="undefined"> }</span></div><div class="line"><span class="undefined"> </span><span class="tag"></<span class="name">style</span>></span></div><div class="line"> <span class="tag"></<span class="name">head</span>></span></div><div class="line"> <span class="tag"><<span class="name">body</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"div1"</span> ></span>div1<span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"></<span class="name">body</span>></span></div><div class="line"> <span class="tag"><<span class="name">footer</span>></span><span class="tag"></<span class="name">footer</span>></span></div><div class="line"><span class="tag"></<span class="name">html</span>></span></div></pre></td></tr></table></figure>
</li>
<li><p>固定定位</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div></pre></td><td class="code"><pre><div class="line"><span class="tag"><<span class="name">html</span>></span></div><div class="line"> <span class="tag"><<span class="name">head</span>></span></div><div class="line"> <span class="tag"><<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>></span><span class="undefined"></span></div><div class="line"><span class="undefined"> div{</span></div><div class="line"><span class="undefined"> border-style:solid;</span></div><div class="line"><span class="undefined"> width:100px;</span></div><div class="line"><span class="undefined"> height:100px;</span></div><div class="line"><span class="undefined"> }</span></div><div class="line"><span class="undefined"> #div1{</span></div><div class="line"><span class="undefined"> position:fixed; //固定定位</span></div><div class="line"><span class="undefined"> top:400px;</span></div><div class="line"><span class="undefined"> left:1000px;</span></div><div class="line"><span class="undefined"> }</span></div><div class="line"><span class="undefined"> </span><span class="tag"></<span class="name">style</span>></span></div><div class="line"> <span class="tag"></<span class="name">head</span>></span></div><div class="line"> <span class="tag"><<span class="name">body</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"div1"</span> ></span><span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">".../img.jpg"</span>/></span><span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"></<span class="name">body</span>></span></div><div class="line"> <span class="tag"><<span class="name">footer</span>></span><span class="tag"></<span class="name">footer</span>></span></div><div class="line"><span class="tag"></<span class="name">html</span>></span></div></pre></td></tr></table></figure>
<p></p>
</li>
</ol>
<h3 id="关于JavaScript"><a href="#关于JavaScript" class="headerlink" title="关于JavaScript"></a>关于JavaScript</h3><h4 id="JavaScript的组成部分"><a href="#JavaScript的组成部分" class="headerlink" title="JavaScript的组成部分"></a>JavaScript的组成部分</h4><ol>
<li><p>EMCAScript（基本语法）</p>
</li>
<li><p>BOM（BrowSer Object Model）浏览器对象模型</p>
<p>把浏览器中的各个部分都用一个对象描述，如果要操作浏览器的属性，就可通过BOM的对象进行操作。</p>
<h5 id="常用属性"><a href="#常用属性" class="headerlink" title="常用属性"></a>常用属性</h5><ol>
<li><p>window 代表一个新开窗口</p>
<p>常用方法：</p>
<p>日常使用前缀window可省略，由于window是BOM中的顶层对象，因此调用可省略。</p>
<ol>
<li>open();</li>
<li>resizeTo();</li>
<li>moveBy();</li>
<li>moveTo();</li>
<li>setInterval();</li>
<li>clearInterval();</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div></pre></td><td class="code"><pre><div class="line"><span class="meta"><!DOCTYPE html></span></div><div class="line"><span class="tag"><<span class="name">html</span>></span></div><div class="line"> <span class="tag"><<span class="name">head</span>></span></div><div class="line"> <span class="tag"><<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>></span><span class="undefined"></span></div><div class="line"><span class="javascript"> <span class="keyword">var</span> id;</span></div><div class="line"><span class="javascript"> <span class="function"><span class="keyword">function</span> <span class="title">showAd</span>(<span class="params"></span>)</span>{</span></div><div class="line"><span class="javascript"> <span class="built_in">window</span>.open(<span class="string">"http://www.baidu.com"</span>,<span class="string">"_blank"</span>,<span class="string">"height=300px,width=300,top=100,toolbar=no,location=no"</span>,<span class="string">"http://www.google.com"</span>);</span></div><div class="line"><span class="javascript"> }<span class="comment">//参数一为网址，二打开方式，三网页属性，四如果找不到参数一网页则用此处网页替代</span></span></div><div class="line"><span class="javascript"> <span class="function"><span class="keyword">function</span> <span class="title">change</span>(<span class="params"></span>)</span>{</span></div><div class="line"><span class="javascript"> <span class="built_in">window</span>.resizeTo(<span class="number">300</span>,<span class="number">300</span>);</span></div><div class="line"><span class="undefined"> }</span></div><div class="line"><span class="javascript"> <span class="function"><span class="keyword">function</span> <span class="title">changeAdMap</span>(<span class="params"></span>)</span>{</span></div><div class="line"><span class="javascript"> <span class="built_in">window</span>.moveBy(<span class="number">200</span>,<span class="number">200</span>);</span></div><div class="line"><span class="undefined"> }</span></div><div class="line"><span class="javascript"> <span class="function"><span class="keyword">function</span> <span class="title">schangeAdMap</span>(<span class="params"></span>)</span>{</span></div><div class="line"><span class="javascript"> <span class="built_in">window</span>.moveTo(<span class="number">700</span>,<span class="number">300</span>);</span></div><div class="line"><span class="undefined"> }</span></div><div class="line"><span class="javascript"> <span class="function"><span class="keyword">function</span> <span class="title">openSetinterval</span>(<span class="params"></span>)</span>{</span></div><div class="line"><span class="javascript"> id = <span class="built_in">window</span>.setInterval(<span class="string">"showAd()"</span>,<span class="number">2000</span>);</span></div><div class="line"><span class="undefined"> }</span></div><div class="line"><span class="javascript"> <span class="function"><span class="keyword">function</span> <span class="title">clearSetinterval</span>(<span class="params"></span>)</span>{</span></div><div class="line"><span class="javascript"> <span class="built_in">window</span>.clearInterval(id);</span></div><div class="line"><span class="undefined"> }</span></div><div class="line"><span class="undefined"> </span><span class="tag"></<span class="name">script</span>></span></div><div class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"Content-Type"</span> <span class="attr">content</span>=<span class="string">"text/html ; charset=utf-8"</span>/></span></div><div class="line"> <span class="tag"></<span class="name">head</span>></span></div><div class="line"> <span class="tag"><<span class="name">body</span>></span></div><div class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">onclick</span>=<span class="string">"showAd()"</span> <span class="attr">value</span>=<span class="string">"显示窗口"</span>/></span></div><div class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">onclick</span>=<span class="string">"change()"</span> <span class="attr">value</span>=<span class="string">"更改当前窗口大小"</span>/></span></div><div class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">onclick</span>=<span class="string">"changeAdMap()"</span> <span class="attr">value</span>=<span class="string">"相对移动当前窗口位置"</span>/></span></div><div class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">onclick</span>=<span class="string">"schangeAdMap()"</span> <span class="attr">value</span>=<span class="string">"基于屏幕移动窗口位置"</span>/></span></div><div class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">onclick</span>=<span class="string">"openSetinterval()"</span> <span class="attr">value</span>=<span class="string">"打开设置定时任务"</span>/></span></div><div class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">onclick</span>=<span class="string">"clearSetinterval()"</span> <span class="attr">value</span>=<span class="string">"取消设置定时任务"</span>/></span></div><div class="line"> <span class="tag"></<span class="name">body</span>></span></div><div class="line"><span class="tag"></<span class="name">html</span>></span></div><div class="line">```</div></pre></td></tr></table></figure>
</li>
<li><p>location 代表地址栏的对象 </p>
<p>location.href 地址字符串</p>
<p>location.reload();重载页面</p>
</li>
<li><p>screen 代表整个屏幕的对象</p>
<p>screen.availHeight 获取系统屏幕工作区域高度，排除任务栏</p>
<p>screen.availWidth 获取系统屏幕工作区域宽度，排除任务栏</p>
<p>screen.height 获取系统屏幕的垂直分辨率</p>
<p>screen.width 获取系统屏幕的水平分辨率</p>
</li>
</ol>
</li>
<li><p>DOM（Document Object Model）</p>
</li>
</ol>
<h3 id="JavaScript的函数创建方式以及使用"><a href="#JavaScript的函数创建方式以及使用" class="headerlink" title="JavaScript的函数创建方式以及使用"></a>JavaScript的函数创建方式以及使用</h3><ol>
<li><p>创建无形参函数和创建对象<br></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">kim</span>(<span class="params"></span>)</span>{}</div><div class="line"><span class="keyword">var</span> kim = <span class="keyword">new</span> kim();</div><div class="line">kim.id = <span class="number">1</span>;</div><div class="line">kim.name = <span class="string">"Bitamin"</span>; </div><div class="line">kim.say = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{ </div><div class="line"> aleft(<span class="string">"id:"</span>+id+<span class="string">",name:"</span>+name); </div><div class="line">} </div><div class="line"><span class="built_in">document</span>.write(<span class="string">"id:"</span>+kim.id+<span class="string">",name:"</span>+kim.name); </div><div class="line">kim.say();</div></pre></td></tr></table></figure>
<p></p>
<p></p>
</li>
<li><p>创建有形参函数和创建对象</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">kim</span>(<span class="params">id,name</span>)</span>{</div><div class="line"> <span class="keyword">this</span>.id = id;</div><div class="line"> <span class="keyword">this</span>.name = name;</div><div class="line"> <span class="keyword">this</span>.say = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</div><div class="line"> aleft(<span class="string">"id:"</span>+id+<span class="string">",name:"</span>+name);</div><div class="line"> }</div><div class="line">}</div><div class="line"><span class="keyword">var</span> kim = <span class="keyword">new</span> kim(<span class="number">1</span>,<span class="string">"Bitamin"</span>);</div><div class="line"><span class="built_in">document</span>.write(<span class="string">"id:"</span>+kim.id+<span class="string">",name:"</span>+kim.name);</div><div class="line">kim.say();</div></pre></td></tr></table></figure>
<p></p>
</li>
<li><p>使用Object函数创建对象（JavaScript内置创建好的Object函数，可以直接使用）</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> Obj = <span class="keyword">new</span> <span class="built_in">Object</span>();</div><div class="line">Obj.id = <span class="number">1</span>;</div><div class="line">Obj.name = <span class="string">"Bitamin"</span>;</div><div class="line">Obj.say = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</div><div class="line"> aleft(<span class="string">"id:"</span>+id+<span class="string">",name:"</span>+name);</div><div class="line">}</div><div class="line"><span class="built_in">document</span>.write(<span class="string">"id:"</span>+Obj.id+<span class="string">",name:"</span>+Obj.name);</div><div class="line">Obj.say();</div></pre></td></tr></table></figure>
<p></p>
</li>
<li><p>使用字面量的方式创建函数</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> kim = {</div><div class="line"> id:<span class="number">1</span>,</div><div class="line"> name:<span class="string">"Bitamin"</span>,</div><div class="line"> say:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</div><div class="line"> aleft(<span class="string">"id:"</span>+id+<span class="string">",name:"</span>+name);</div><div class="line"> }</div><div class="line">}</div><div class="line"><span class="built_in">document</span>.write(<span class="string">"id:"</span>+kim.id+<span class="string">",name:"</span>+kim.name);</div><div class="line">kim.say();</div></pre></td></tr></table></figure>
<p></p>
<p></p>
</li>
</ol>
<h3 id="JavaScript的事件注册方法"><a href="#JavaScript的事件注册方法" class="headerlink" title="JavaScript的事件注册方法"></a>JavaScript的事件注册方法</h3><ol>
<li><p>直接在Html元素标签里注册</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><html></div><div class="line"> <body onload=<span class="string">"ready()"</span>></div><div class="line"> <<span class="regexp">/body></span></div><div class="line"><span class="regexp"> <script type="text/</span>javascript<span class="string">"></span></div><div class="line"><span class="string"> function ready(){</span></div><div class="line"><span class="string"> alert("</span>body loading done<span class="string">");</span></div><div class="line"><span class="string"> }</span></div><div class="line"><span class="string"> </script></span></div><div class="line"><span class="string"></html></span></div></pre></td></tr></table></figure>
</li>
<li><p>直接在Js代码中找到对应对象注册</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line"><html></div><div class="line"> <body id=<span class="string">"body"</span>></div><div class="line"> <<span class="regexp">/body></span></div><div class="line"><span class="regexp"> <script type="text/</span>javascript<span class="string">" ></span></div><div class="line"><span class="string"> var bodyNode = document.getElementByid("</span>body<span class="string">");</span></div><div class="line"><span class="string"> bodyNode.onload = function(){</span></div><div class="line"><span class="string"> alert("</span>body loading done<span class="string">");</span></div><div class="line"><span class="string"> }</span></div><div class="line"><span class="string"> </script></span></div><div class="line"><span class="string"></html></span></div></pre></td></tr></table></figure>
</li>
</ol>
<h4 id="Javascript常用事件"><a href="#Javascript常用事件" class="headerlink" title="Javascript常用事件"></a>Javascript常用事件</h4><ol>
<li>鼠标点击事件<ol>
<li>onclick; 当用户左键单击对象时触发事件</li>
<li>ondblclick; 当用户左键双击对象时触发事件</li>
<li>onmousedown; 当用户用任意鼠标按钮单击对象时触发事件</li>
<li>onmouseup; 当用户点击后释放按键的时候触发事件</li>
</ol>
</li>
<li>鼠标移动事件<ol>
<li>onmousemove; 当用户鼠标指针移进对象边界触发事件</li>
<li>onmouseout; 当用户鼠标指针移出对象边界触发事件</li>
</ol>
</li>
<li>鼠标焦点事件<ol>
<li>onfocus; 当对象失去焦点时触发事件</li>
<li>onblur; 当对象获得焦点时触发事件</li>
</ol>
</li>
<li>其他事件<ol>
<li>onchange; 当对象或焦点内容改变时触发事件</li>
<li>onload; 当浏览器完成所有对象的装载后触发事件</li>
<li>onsubmit; 当表单将要被提交时触发</li>
</ol>
</li>
</ol>
<h4 id="相关使用例子"><a href="#相关使用例子" class="headerlink" title="相关使用例子"></a>相关使用例子</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div><div class="line">64</div><div class="line">65</div><div class="line">66</div><div class="line">67</div><div class="line">68</div><div class="line">69</div><div class="line">70</div><div class="line">71</div><div class="line">72</div><div class="line">73</div></pre></td><td class="code"><pre><div class="line"><span class="meta"><!DOCTYPE html></span></div><div class="line"><span class="tag"><<span class="name">html</span>></span></div><div class="line"> <span class="tag"><<span class="name">head</span>></span></div><div class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"Content-Type"</span> <span class="attr">content</span>=<span class="string">"text/html ; charset=utf-8"</span>/></span></div><div class="line"> <span class="tag"><<span class="name">title</span>></span><span class="tag"></<span class="name">title</span>></span></div><div class="line"> <span class="tag"><<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>></span><span class="undefined"></span></div><div class="line"><span class="javascript"> <span class="comment">//var id;</span></span></div><div class="line"><span class="javascript"> <span class="function"><span class="keyword">function</span> <span class="title">clickbutton</span>(<span class="params"></span>)</span>{</span></div><div class="line"><span class="javascript"> alert(<span class="string">"单击按钮"</span>);</span></div><div class="line"><span class="undefined"> }</span></div><div class="line"><span class="javascript"> <span class="function"><span class="keyword">function</span> <span class="title">dbclickbutton</span>(<span class="params"></span>)</span>{</span></div><div class="line"><span class="javascript"> alert(<span class="string">"双击按钮"</span>);</span></div><div class="line"><span class="undefined"> }</span></div><div class="line"><span class="javascript"> <span class="function"><span class="keyword">function</span> <span class="title">rbutton</span>(<span class="params"></span>)</span>{</span></div><div class="line"><span class="javascript"> alert(<span class="string">"任意点击按钮"</span>);</span></div><div class="line"><span class="undefined"> }</span></div><div class="line"><span class="javascript"> <span class="function"><span class="keyword">function</span> <span class="title">outbutton</span>(<span class="params"></span>)</span>{</span></div><div class="line"><span class="javascript"> alert(<span class="string">"点击释放按钮"</span>);</span></div><div class="line"><span class="undefined"> }</span></div><div class="line"><span class="javascript"> <span class="function"><span class="keyword">function</span> <span class="title">showTime</span>(<span class="params"></span>)</span>{</span></div><div class="line"><span class="javascript"> <span class="keyword">var</span> spanTime = <span class="built_in">document</span>.getElementById(<span class="string">"spanTime"</span>);</span></div><div class="line"><span class="javascript"> <span class="keyword">var</span> date = <span class="keyword">new</span> <span class="built_in">Date</span>().toLocaleString();</span></div><div class="line"><span class="javascript"> spanTime.innerHTML = date.fontcolor(<span class="string">"red"</span>);</span></div><div class="line"><span class="undefined"> }</span></div><div class="line"><span class="javascript"> <span class="function"><span class="keyword">function</span> <span class="title">hideTime</span>(<span class="params"></span>)</span>{</span></div><div class="line"><span class="javascript"> <span class="keyword">var</span> spanTime = <span class="built_in">document</span>.getElementById(<span class="string">"spanTime"</span>);</span></div><div class="line"><span class="javascript"> spanTime.innerHTML=<span class="string">""</span>;</span></div><div class="line"><span class="undefined"> }</span></div><div class="line"><span class="javascript"> <span class="function"><span class="keyword">function</span> <span class="title">showUserText</span>(<span class="params"></span>)</span>{</span></div><div class="line"><span class="javascript"> <span class="keyword">var</span> userSpan = <span class="built_in">document</span>.getElementById(<span class="string">"userSpan"</span>);</span></div><div class="line"><span class="javascript"> userSpan.innerHTML = <span class="string">"请输入用户名"</span>;</span></div><div class="line"><span class="javascript"> <span class="comment">//id = window.setInterval("changeUserText()",10);</span></span></div><div class="line"><span class="undefined"> }</span></div><div class="line"><span class="javascript"> <span class="function"><span class="keyword">function</span> <span class="title">closeUserText</span>(<span class="params"></span>)</span>{</span></div><div class="line"><span class="javascript"> <span class="keyword">var</span> userSpan = <span class="built_in">document</span>.getElementById(<span class="string">"userSpan"</span>);</span></div><div class="line"><span class="javascript"> userSpan.innerHTML = <span class="string">""</span>;</span></div><div class="line"><span class="javascript"> <span class="comment">//window.clearInterval(id);</span></span></div><div class="line"><span class="undefined"> }</span></div><div class="line"><span class="javascript"> <span class="function"><span class="keyword">function</span> <span class="title">changeUserText</span>(<span class="params"></span>)</span>{</span></div><div class="line"><span class="javascript"> <span class="comment">//document.getElementById("synText").value = document.getElementById("synUser").value;</span></span></div><div class="line"><span class="javascript"> <span class="built_in">document</span>.getElementById(<span class="string">"synText"</span>).value = <span class="built_in">document</span>.getElementById(<span class="string">"synselect"</span>).value;</span></div><div class="line"><span class="undefined"> }</span></div><div class="line"><span class="javascript"> <span class="function"><span class="keyword">function</span> <span class="title">formSubmit</span>(<span class="params"></span>)</span>{</span></div><div class="line"><span class="javascript"> alert(<span class="string">"提交完成"</span>);</span></div><div class="line"><span class="undefined"> }</span></div><div class="line"><span class="undefined"> </span><span class="tag"></<span class="name">script</span>></span></div><div class="line"> <span class="tag"></<span class="name">head</span>></span></div><div class="line"> <span class="tag"><<span class="name">body</span> <span class="attr">id</span>=<span class="string">"body"</span>></span></div><div class="line"> <span class="tag"><<span class="name">form</span> <span class="attr">onsubmit</span>=<span class="string">"formSubmit()"</span> <span class="attr">action</span>=<span class="string">"http://www.baidu.com"</span>></span></div><div class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">onclick</span>=<span class="string">"clickbutton()"</span> <span class="attr">value</span>=<span class="string">"单击按钮"</span>/></span></div><div class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">ondblclick</span>=<span class="string">"dbclickbutton()"</span> <span class="attr">value</span>=<span class="string">"双击按钮"</span>/></span></div><div class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">onmousedown</span>=<span class="string">"rbutton()"</span> <span class="attr">value</span>=<span class="string">"任意点击按钮"</span>/></span></div><div class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">onmouseup</span>=<span class="string">"outbutton()"</span> <span class="attr">value</span>=<span class="string">"释放按钮"</span>/></span></div><div class="line"> <span class="tag"><<span class="name">br</span>></span></div><div class="line"> <span class="tag"><<span class="name">span</span> <span class="attr">onmousemove</span>=<span class="string">"showTime()"</span> <span class="attr">onmouseout</span>=<span class="string">"hideTime()"</span>></span>显示时间事件:<span class="tag"></<span class="name">span</span>></span><span class="tag"><<span class="name">span</span> <span class="attr">id</span>=<span class="string">"spanTime"</span>></span><span class="tag"></<span class="name">span</span>></span></div><div class="line"> <span class="tag"><<span class="name">br</span>></span></div><div class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">id</span>=<span class="string">"synUser"</span> <span class="attr">onfocus</span>=<span class="string">"showUserText()"</span> <span class="attr">onblur</span>=<span class="string">"closeUserText()"</span> <span class="attr">type</span>=<span class="string">"username"</span>/></span><span class="tag"><<span class="name">span</span> <span class="attr">id</span>=<span class="string">"userSpan"</span>></span><span class="tag"></<span class="name">span</span>></span><span class="tag"><<span class="name">br</span>></span></div><div class="line"> <span class="tag"><<span class="name">select</span> <span class="attr">id</span>=<span class="string">"synselect"</span> <span class="attr">onchange</span>=<span class="string">"changeUserText()"</span>></span></div><div class="line"> <span class="tag"><<span class="name">option</span>></span>北京<span class="tag"></<span class="name">option</span>></span></div><div class="line"> <span class="tag"><<span class="name">option</span>></span>上海<span class="tag"></<span class="name">option</span>></span></div><div class="line"> <span class="tag"><<span class="name">option</span>></span>广州<span class="tag"></<span class="name">option</span>></span></div><div class="line"> <span class="tag"></<span class="name">select</span>></span></div><div class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">id</span>=<span class="string">"synText"</span> <span class="attr">type</span>=<span class="string">"username"</span> /></span><span class="tag"><<span class="name">br</span>></span></div><div class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"submit"</span>/ <span class="attr">value</span>=<span class="string">"提交"</span>></span></div><div class="line"> <span class="tag"></<span class="name">form</span>></span></div><div class="line"> <span class="tag"></<span class="name">body</span>></span></div><div class="line"> <span class="tag"><<span class="name">script</span> <span class="attr">type</span>=<span class="string">text/javascript</span>></span><span class="undefined"></span></div><div class="line"><span class="javascript"> <span class="keyword">var</span> loadBody = <span class="built_in">document</span>.getElementById(<span class="string">"body"</span>);</span></div><div class="line"><span class="javascript"> loadBody.onload = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span></div><div class="line"><span class="javascript"> alert(<span class="string">"bodyloading..."</span>);</span></div><div class="line"><span class="undefined"> }</span></div><div class="line"><span class="undefined"> </span><span class="tag"></<span class="name">script</span>></span></div><div class="line"><span class="tag"></<span class="name">html</span>></span></div></pre></td></tr></table></figure>
<p> </p>
<p> </p>
]]></content>
<summary type="html">
<p>关于Html,Css,JavaScript的一些基础知识要点</p>
</summary>
<category term="前端开发" scheme="http://bitamin.pw/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/"/>
<category term="JavaScript" scheme="http://bitamin.pw/tags/JavaScript/"/>
<category term="Html" scheme="http://bitamin.pw/tags/Html/"/>
<category term="Css" scheme="http://bitamin.pw/tags/Css/"/>
</entry>
<entry>
<title>关于java的一些基础知识要点</title>
<link href="http://bitamin.pw/2016/12/23/%E5%85%B3%E4%BA%8Ejava%E7%9A%84%E4%B8%80%E4%BA%9B%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E8%A6%81%E7%82%B9/"/>
<id>http://bitamin.pw/2016/12/23/关于java的一些基础知识要点/</id>
<published>2016-12-23T07:04:49.000Z</published>
<updated>2016-12-25T10:34:10.000Z</updated>
<content type="html"><![CDATA[<p>JAVA的一些知识要点</p>
<a id="more"></a>
<h2 id="关于集合和泛型"><a href="#关于集合和泛型" class="headerlink" title="关于集合和泛型"></a>关于集合和泛型</h2><h3 id="集合常用类"><a href="#集合常用类" class="headerlink" title="集合常用类"></a>集合常用类</h3><ol>
<li><p>Collection 单列集合根接口</p>
<ol>
<li>List 有序的，可以重复<ol>
<li>ArrayList 底层代码使用了Object数组实现，特点在查询速度快，增删慢</li>
<li>LinkedList 底层代码用的是链表数据结构实现，特点在查询速度慢，增删快</li>
<li>Vector 底层跟ArrayList一样用的Object数组实现，但是线程是安全的，操作效率较低</li>
</ol>
</li>
<li>Set 无序的，不可以重复<ol>
<li>HashSet 底层代码用的是哈希表实现，特点在存取速度快</li>
<li>TreeSet 底层代码用的是二叉树(红黑树) ，特点在会对集合中的元素自动进行排序</li>
</ol>
</li>
</ol>
</li>
<li><p>Map</p>
<ol>
<li>HashMap</li>
<li>TreeMap</li>
</ol>
<p></p>
</li>
</ol>
<h4 id="集合的遍历方式"><a href="#集合的遍历方式" class="headerlink" title="集合的遍历方式"></a>集合的遍历方式</h4><ol>
<li>List遍历，list.add数据后，for循环遍历调用list.get来获取数据或者用高级for</li>
</ol>
<figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">ArrayList<String> arrlist = <span class="keyword">new</span> ArrayList<String>();</div><div class="line">arrlist.add(<span class="string">"This is ArrayList 1"</span>);</div><div class="line">arrlist.add(<span class="string">"This is ArrayList 2"</span>);</div><div class="line">arrlist.add(<span class="string">"This is ArrayList 3"</span>);</div><div class="line"><span class="keyword">for</span>(<span class="keyword">int</span> i=<span class="number">0</span> ;i<arrlist.size();i++){</div><div class="line"> System.out.println(arraylist.get(i));</div><div class="line">}</div></pre></td></tr></table></figure>
<ol>
<li>iterator迭代器遍历，set.add或者list.add数据后，获取迭代器，迭代器始终为true，使用while，hasNext遍历数据，用X.next获取当前数据</li>
</ol>
<figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div></pre></td><td class="code"><pre><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">Person</span></span>{</div><div class="line"> <span class="keyword">int</span> id;</div><div class="line"> String name;</div><div class="line"> <span class="function"><span class="keyword">public</span> <span class="title">Persion</span><span class="params">(<span class="keyword">int</span> id, String name)</span></span>{</div><div class="line"> Super();</div><div class="line"> <span class="keyword">this</span>.id = id;</div><div class="line"> <span class="keyword">this</span>.name = name;</div><div class="line"> }</div><div class="line"> <span class="meta">@Override</span> </div><div class="line"> <span class="function"><span class="keyword">public</span> String <span class="title">toString</span><span class="params">()</span></span>{</div><div class="line"> <span class="keyword">return</span> <span class="string">"id:"</span> + <span class="keyword">this</span>.id + <span class="string">"name:"</span> + <span class="keyword">this</span>.name;</div><div class="line"> }</div><div class="line">}</div><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">xxxx</span></span>{</div><div class="line"> <span class="function"><span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">void</span> <span class="title">main</span><span class="params">(String[] args)</span></span>{</div><div class="line">HashSet<Person> hset = <span class="keyword">new</span> HashSet<Person>();</div><div class="line">hset.add(<span class="keyword">new</span> Person(<span class="number">1</span>,<span class="string">"ruby"</span>));</div><div class="line">hset.add(<span class="keyword">new</span> Person(<span class="number">2</span>,<span class="string">"node"</span>));</div><div class="line">hset.add(<span class="keyword">new</span> Person(<span class="number">2</span>,<span class="string">"node"</span>));</div><div class="line"> <span class="comment">//hashset，Set集合由于是无序的并且是不可重复的，此处重复了2,"node"后输出依旧会输出，因为此处添加的是一个person对象，而每一个新对象都有不同哈希值，hashset判断重复原理是根据哈希值来判断，如哈希表中该哈希值不存在则存入数据，否则则不允许存入。所以此处应当覆写hashcode方法，返回唯一的id来辨认对象是否一致。并且hashset在确定哈希表中存在相同哈希值的情况是使用equals方法在该位置上的元素再比较一次，所以还需要覆写equals方法，把对象id传入并且对比该对象的id是否一致。如果一致则是有相同元素。不再写入重复元素，否则写入元素</span></div><div class="line">System.out.println(hset);</div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure>
<figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line">HashSet<String> hset = <span class="keyword">new</span> HashSet<String>();</div><div class="line">hset.add(<span class="string">"This is HashSet 1"</span>);</div><div class="line">hset.add(<span class="string">"This is HashSet 2"</span>);</div><div class="line">hset.add(<span class="string">"This is HashSet 3"</span>);</div><div class="line">Iterator<String> it = hset.iterator();</div><div class="line"><span class="keyword">while</span>(it.hasNext){</div><div class="line"> System.out.println(it.next());</div><div class="line">}</div></pre></td></tr></table></figure>
<ul>
<li><p>foreach循环遍历（高级for），左临时变量获取右集合变量内数据，然后输出临时变量。“底层也是迭代器”,迭代器迭代过程不允许集合对象修改元素的个数，只能用迭代器的方法</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">ArrayList<String> arrlist = <span class="keyword">new</span> ArrayList<String>();</div><div class="line">arrlist.add(<span class="string">"This is ArrayList 1"</span>);</div><div class="line">arrlist.add(<span class="string">"This is ArrayList 2"</span>);</div><div class="line">arrlist.add(<span class="string">"This is ArrayList 3"</span>);</div><div class="line"><span class="keyword">for</span>(String templist : arrlist){</div><div class="line"> System.out.println(templist);</div><div class="line">}</div></pre></td></tr></table></figure>
<p></p>
</li>
<li><p>map键值遍历，map.put数据后，使用Entry遍历，map对象获取到entrySet，返回Set集合，然后使用foreach循环输出键值对</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line">HashMap<String,String> map = <span class="keyword">new</span> HashMap<String,String>();</div><div class="line">map.put(<span class="string">"1"</span>,<span class="string">"Csharp"</span>);</div><div class="line">map.put(<span class="string">"2"</span>,<span class="string">"node"</span>);</div><div class="line">map.put(<span class="string">"3"</span>,<span class="string">"python"</span>);</div><div class="line">Set<Entry<String,String>> entrys = map.entrySet();</div><div class="line"><span class="keyword">for</span>(Entry<String,String> entry : entrys){</div><div class="line"> System.out.println(<span class="string">"key:"</span>+ entry.getKey() + <span class="string">" value:"</span> + entry.getValue());</div><div class="line">}</div></pre></td></tr></table></figure>
<p></p>
</li>
</ul>
<h3 id="泛型"><a href="#泛型" class="headerlink" title="泛型"></a>泛型</h3><p>规范一个对象的类型，把运行时出现的问题提前到编译时（原因是在创建对象或者数组的时候，如果没有指定泛型 ，那么传入多个不同类型的参数时没办法跟返回参数一致。例如一个集合放入字符串String类型，然后获取该集合中的字符串，此时是没问题的，但是如果在该集合中插入添加了Integer类型的情况，那么获取集合中元素或者操作集合元素的时候将会出错，而使用泛型的情况，在编译时就将会提醒用户该集合中插入了不同类型的元素的错误。）</p>
<h4 id="例子"><a href="#例子" class="headerlink" title="例子"></a>例子</h4><figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">xxxxx</span></span>{</div><div class="line"> <span class="function"><span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">void</span> <span class="title">main</span><span class="params">(String[] args)</span></span>{</div><div class="line"> ArrayList arrlist = <span class="keyword">new</span> ArrayList();</div><div class="line"> arrlist.add(<span class="string">"java jdk"</span>);</div><div class="line"> arrlist.add(<span class="string">"java jre"</span>);</div><div class="line"> arrlist.add(<span class="string">"java jvm"</span>);</div><div class="line"> arrlist.add(<span class="number">19</span>);<span class="comment">//此时集合无泛型，可添加Object类，所以String和Int类型都可添加，但是在进行读取胡总操作时将会出错</span></div><div class="line"> <span class="keyword">for</span>(<span class="keyword">int</span> i = <span class="number">0</span> ; i<arrlist.size() ; i++ ){</div><div class="line"> String str = (String) arrlist.get(i);<span class="comment">//此时在集合中的第四个元素，Int类型19在传引用到str时将会报类型转换出错。</span></div><div class="line"> System.out.println(str.toUpperCase());<span class="comment">//而对集合进行大小写转换操作时，Int类型没有大小写之分，所以也会报错。</span></div><div class="line"> }</div><div class="line"> <span class="comment">//正确应当：</span></div><div class="line"> ArrayList<String> arrlist2 = <span class="keyword">new</span> ArrayList<String>();</div><div class="line"> arrlist.add(<span class="string">"java jdk"</span>);</div><div class="line"> arrlist.add(<span class="string">"java jre"</span>);</div><div class="line"> arrlist.add(<span class="string">"java jvm"</span>);</div><div class="line"> arrlist.add(<span class="number">19</span>);<span class="comment">//此时编译器就会报错，添加了非String类型数据</span></div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure>
<h4 id="泛型的好处和注意事项"><a href="#泛型的好处和注意事项" class="headerlink" title="泛型的好处和注意事项:"></a>泛型的好处和注意事项:</h4><ol>
<li>避免无谓的强制转换类型</li>
<li>泛型没有多态的说法或者概念</li>
<li>泛型推荐两边都要一致，写单边可以通过是为了兼容老版本系统</li>
</ol>
<figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">X<S> x = <span class="keyword">new</span> X<S>(); <span class="keyword">true</span></div><div class="line">X<S> x = <span class="keyword">new</span> X<O>(); <span class="keyword">false</span></div><div class="line">X<O> x = <span class="keyword">new</span> X<S>(); <span class="keyword">false</span></div><div class="line">X x = <span class="keyword">new</span> X<S>(); <span class="keyword">true</span></div><div class="line">X<S> x = <span class="keyword">new</span> X(); <span class="keyword">true</span></div></pre></td></tr></table></figure>
<h5 id="自定义泛型-（自定义泛型的声明可以是合法的名称即可）"><a href="#自定义泛型-（自定义泛型的声明可以是合法的名称即可）" class="headerlink" title="自定义泛型 （自定义泛型的声明可以是合法的名称即可）"></a>自定义泛型 （自定义泛型的声明可以是合法的名称即可）</h5><p>自定义泛型就是相当于调用方法传的值 T 是什么类型，而返回就是什么类型。<t> T占位符 等同于一个变量 <t>相当于声明一个T变量<br>修饰符 <声明自定义泛型> 返回值类型泛型 函数名(形参)</t></t></p>
<h6 id="泛型类的声明"><a href="#泛型类的声明" class="headerlink" title="泛型类的声明"></a>泛型类的声明</h6><p>可以在类名上声明出一个自定义泛型，要注意的是：</p>
<ol>
<li>在类上自定义泛型的时候，具体的数据类型是在创建对象的时候指定。</li>
<li>在类上自定义的泛型，如果创建该类的对象没有指定泛型的具体类型，那么默认为泛型类中声明的Object类型。</li>
</ol>
<figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">xxxxx</span><<span class="title">T</span>></span>{</div><div class="line"> Object[] arr = <span class="keyword">new</span> Object[<span class="number">10</span>];</div><div class="line"> <span class="function"><span class="keyword">public</span> <span class="title">xxxxx</span><span class="params">()</span></span>{}</div><div class="line"> <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">xxx</span><span class="params">(T t)</span></span>{}</div><div class="line"> xxxxx<String> xx = <span class="keyword">new</span> xxxxx<String>(); <span class="comment">//此时xx.xxx(T t)中只能添加String</span></div><div class="line"> xxxxx xx = <span class="keyword">new</span> xxxxx(); <span class="comment">//不给泛型类加泛型的时候，xx.xxx(T t)中是Object类型</span></div><div class="line">}</div></pre></td></tr></table></figure>
<h6 id="泛型接口的声明"><a href="#泛型接口的声明" class="headerlink" title="泛型接口的声明"></a>泛型接口的声明</h6><p>可以在接口上声明出一个自定义泛型，要注意的是：</p>
<ol>
<li>在接口上自定义泛型的是hi，具体的数据类型是在实现xxxxx接口的时候指定</li>
<li>在接口上自定义的泛型，如果实现该接口时没有指定泛型的具体类型，那么默认为Object类型。</li>
<li>如果希望在使用创建接口实现类对象的时候再指定接口自定义泛型具体类型，则需要在实现接口出声明出<t>然后去创建实现类的时候再指定具体类型</t></li>
</ol>
<figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div></pre></td><td class="code"><pre><div class="line"><span class="class"><span class="keyword">interface</span> <span class="title">xxxxx</span><<span class="title">T</span>></span>{</div><div class="line"> <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">xxx</span><span class="params">(T t)</span></span>;</div><div class="line"> <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">xxxvvv</span><span class="params">(T t)</span></span>;</div><div class="line">}</div><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">vvvvv</span> <span class="keyword">implements</span> <span class="title">xxxxx</span><<span class="title">String</span>></span>{ <span class="comment">//指定为String，实现的方法则为String</span></div><div class="line"> <span class="meta">@Override</span></div><div class="line"> <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">xxx</span><span class="params">(String t)</span></span>;</div><div class="line"> <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">xxxvvv</span><span class="params">(String t)</span></span>;</div><div class="line">}</div><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">vvvvv</span> <span class="keyword">implements</span> <span class="title">xxxxx</span></span>{<span class="comment">//不去指定泛型，实现的方法则为Object</span></div><div class="line"> <span class="meta">@Override</span></div><div class="line"> <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">xxx</span><span class="params">(Object t)</span></span>;</div><div class="line"> <span class="meta">@Override</span></div><div class="line"> <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">xxxvvv</span><span class="params">(Object t)</span></span>;</div><div class="line">}</div><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">vvvvv</span> <span class="keyword">implements</span> <span class="title">xxxxx</span></span>{<span class="comment">//如果想在创建和使用对象的时候指定类型，则需要在实现接口的时候指定类型为<T>,然后再在类方法中创建对象的时候指定具体的类型</span></div><div class="line"> <span class="meta">@Override</span></div><div class="line"> <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">xxx</span><span class="params">(Object t)</span></span>;</div><div class="line"> <span class="meta">@Override</span></div><div class="line"> <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">xxxvvv</span><span class="params">(Object t)</span></span>;</div><div class="line">}</div></pre></td></tr></table></figure>
<h2 id="常用IO操作和Thread操作"><a href="#常用IO操作和Thread操作" class="headerlink" title="常用IO操作和Thread操作"></a>常用IO操作和Thread操作</h2><h3 id="IO操作的常用类"><a href="#IO操作的常用类" class="headerlink" title="IO操作的常用类"></a>IO操作的常用类</h3><ol>
<li>字节流<ol>
<li>InputStream //IO操作中字节流的基类(父类)，也是个抽象类<ol>
<li>FileInputStream //向文件写入字节数据的写入字节流</li>
<li>BufferedInputStream //缓冲写入字节数据的缓冲写入字节流，为写入文件字节提高效率的类</li>
</ol>
</li>
<li>OutputStream<ol>
<li>FileOutputStream //向文件输出字节数据的输出字节流</li>
<li>BufferedOutputStream //缓冲输出字节数据的缓冲输出字节流，为输出文件字节提高效率的类</li>
</ol>
</li>
</ol>
</li>
<li>字符流<ol>
<li>Reader //IO操作中字符流的基类(父类)，也是个抽象类<ol>
<li>FileReader //向文件写入字符数据的写入字符流</li>
<li>BufferedReader //缓冲写入字符数据的缓冲写入字符流，为写入文件字符提高效率的类</li>
</ol>
</li>
<li>Writer<ol>
<li>FileWriter //向文件输出字符数据的输出字符流</li>
<li>BufferedWriter //缓冲输出字符数据的缓冲输出字符流，为输出文件字符提高效率的类</li>
</ol>
</li>
</ol>
</li>
<li>转换流（可以把对应的字节流转换为字符流并且还能指定字符集）<ol>
<li>InputStreamReader //输入字节流的转换流</li>
<li>OutputStreamWriter //输出字节流的转换流</li>
</ol>
</li>
</ol>
<h5 id="转换流的实际用例"><a href="#转换流的实际用例" class="headerlink" title="转换流的实际用例"></a>转换流的实际用例</h5><ol>
<li><p>字节输入流转换为字符输入流</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">xxxxx</span></span>{</div><div class="line"> <span class="function"><span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">void</span> <span class="title">main</span><span class="params">(String[] args)</span></span>{</div><div class="line"> InputStream in = System.in;</div><div class="line"> InputStreamReader isr = <span class="keyword">new</span> InputStreamReader(in); <span class="comment">//把控制台输入的字节流转换为字符流</span></div><div class="line"> BufferedReader br = <span class="keyword">new</span> BufferedReader(isr);</div><div class="line"> <span class="comment">//此时BufferedReader缓冲字符流需要传入的是一个Reader字符流对象，InputStream无法传入，所以需要进行转换</span></div><div class="line"> String s = br.readLine();</div><div class="line"> System.out.println(s);</div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure>
</li>
<li><p>字节输出流转换为字符输出流</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div></pre></td><td class="code"><pre><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">xxxxx</span></span>{</div><div class="line"> <span class="function"><span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">void</span> <span class="title">main</span><span class="params">(String[] args)</span></span>{</div><div class="line"> Socket socket = <span class="keyword">new</span> Socket(InetAddress.getLocalHost(),<span class="number">8080</span>);/</div><div class="line"> OutputStream out = socket.getOutputStream();<span class="comment">///获取到socket的输出流对象</span></div><div class="line"> OutputStreamWriter outsw = <span class="keyword">new</span> OutputStreamWriter(out);</div><div class="line"> <span class="comment">//把获取到的输出字节流转换为输出字符流，同时在OutputStreamWriter的构造方法中还有一个形参可以指定字符集，如：new OutputStreamWriter(out，"utf-8")</span></div><div class="line"> outsw.write(<span class="string">"Java IOStream"</span>);</div><div class="line"> }</div><div class="line"> <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">fileIO</span><span class="params">()</span></span>{</div><div class="line"> InputStream in = System.in;</div><div class="line"> InputStreamReader isr = <span class="keyword">new</span> InputStreamReader(in); </div><div class="line"> BufferedReader br = <span class="keyword">new</span> BufferedReader(isr);</div><div class="line"> String s = br.readLine();</div><div class="line"> System.out.println(s);</div><div class="line"> FileOutputStream file = <span class="keyword">new</span> FileOutputStream(</div><div class="line"> <span class="string">"C:"</span>+File.separator+<span class="string">"Users"</span>+File.separator+</div><div class="line"> <span class="string">"bitam"</span>+File.separator+<span class="string">"Desktop"</span>+File.separator+<span class="string">"x.txt"</span>);</div><div class="line"> <span class="comment">//创建文件和程序的数据连接</span></div><div class="line"> OutputStreamWriter outsw = <span class="keyword">new</span> OutputStreamWriter(file,<span class="string">"utf-8"</span>);</div><div class="line"> <span class="comment">//创建一个输出字节转换字符流并指定字符集来写入数据</span></div><div class="line"> outsw.write(s);<span class="comment">//写入操作</span></div><div class="line"> outsw.close();<span class="comment">//关闭IO资源</span></div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure>
</li>
</ol>
<h3 id="多线程"><a href="#多线程" class="headerlink" title="多线程"></a>多线程</h3><h4 id="多线程的创建方式"><a href="#多线程的创建方式" class="headerlink" title="多线程的创建方式"></a>多线程的创建方式</h4><ol>
<li><p>extends Thread （继承Thread多线程类）</p>
<ol>
<li>创建一个类去继承Thread类</li>
<li>覆写Thread的run方法，把自定义线程的任务写在run方法中</li>
<li>创建一个Thread的子类对象（该继承了Thread并覆写了run方法的那个类），并且使用start方法来启动该线程</li>
</ol>
<figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">xxxxx</span> <span class="keyword">extends</span> <span class="title">Thread</span> </span>{</div><div class="line"> <span class="meta">@Override</span></div><div class="line"> <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">run</span><span class="params">()</span></span>{</div><div class="line"> <span class="keyword">for</span>(<span class="keyword">int</span> i =<span class="number">0</span> ; i<<span class="number">100</span> ; i++){</div><div class="line"> System.out.println(Thread.currentThread().getName()+<span class="string">":"</span>+i);<span class="comment">//获取当前方法线程名并输出i</span></div><div class="line"> }</div><div class="line"> }</div><div class="line"> <span class="function"><span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">void</span> <span class="title">main</span><span class="params">(String[] args)</span></span>{</div><div class="line"> xxxxx x = <span class="keyword">new</span> xxxxx();</div><div class="line"> x.start();</div><div class="line"> <span class="keyword">for</span>(<span class="keyword">int</span> i =<span class="number">0</span> ; i<<span class="number">100</span> ; i++){</div><div class="line"> System.out.println(Thread.currentThread().getName()+<span class="string">":"</span>+i);<span class="comment">//获取当前方法线程名并输出i</span></div><div class="line"> }</div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure>
</li>
<li><p>implements Runnable (实现Runnable多线程接口)</p>
<ol>
<li>创建一个类实现Runnable接口</li>
<li>覆写Runnable的run方法，把自定义线程的任务写在run方法中</li>
<li>创建一个Runnable实现类对象(也就是实现了Runnable接口并覆写了run方法的那个类)</li>
<li>创建一个Thread对象，然后把Runnable实现类的对象作为参数去传递给Thread对象</li>
<li>调用Thread对象的strat方法开启线程</li>
</ol>
<figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div></pre></td><td class="code"><pre><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">xxxxx</span> <span class="keyword">implements</span> <span class="title">Runnable</span></span>{</div><div class="line"> <span class="meta">@Override</span></div><div class="line"> <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">run</span><span class="params">()</span> </span>{</div><div class="line"> <span class="keyword">for</span>(<span class="keyword">int</span> i = <span class="number">0</span> ; i<<span class="number">100</span> ; i++){</div><div class="line"> System.out.println(Thread.currentThread().getName()+<span class="string">":"</span>+i);</div><div class="line"> }</div><div class="line"> }</div><div class="line">}</div><div class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">ttttt</span> </span>{</div><div class="line"> <span class="function"><span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">void</span> <span class="title">main</span><span class="params">(String[] args)</span></span>{</div><div class="line"> xxxxx x = <span class="keyword">new</span> xxxxx();</div><div class="line"> Thread t = <span class="keyword">new</span> Thread(x);</div><div class="line"> t.start();</div><div class="line"> <span class="keyword">for</span>(<span class="keyword">int</span> i = <span class="number">0</span> ; i<<span class="number">100</span> ; i++){</div><div class="line"> System.out.println(Thread.currentThread().getName()+<span class="string">":"</span>+i);</div><div class="line"> }</div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure>
</li>
</ol>
<h4 id="线程安全问题的解决方案"><a href="#线程安全问题的解决方案" class="headerlink" title="线程安全问题的解决方案"></a>线程安全问题的解决方案</h4><h5 id="线程安全问题出现情况原因："><a href="#线程安全问题出现情况原因：" class="headerlink" title="线程安全问题出现情况原因："></a>线程安全问题出现情况原因：</h5><ol>
<li>必须有存在两个或者以上的线程共享着一个资源的情况才会出现</li>
<li>操作共享资源的代码必须有两句或者以上</li>
</ol>
<h5 id="线程安全的解决方式"><a href="#线程安全的解决方式" class="headerlink" title="线程安全的解决方式"></a>线程安全的解决方式</h5><ol>
<li><p>同步代码块</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">synchronized</span>(锁){</div><div class="line"> 需要被同步的代码</div><div class="line">}</div></pre></td></tr></table></figure>
</li>
<li><p>同步函数</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">修饰符 <span class="keyword">synchronized</span> 返回值类型 函数名(形参列表...){</div><div class="line"> </div><div class="line">}</div></pre></td></tr></table></figure>
</li>
</ol>
<h5 id="注意事项："><a href="#注意事项：" class="headerlink" title="注意事项："></a>注意事项：</h5><ol>
<li>同步代码块的锁可以使任意的对象，同步函数的锁是固定的</li>
<li>非静态函数的锁对象是this对象，静态函数的锁对象是class对象</li>
<li>锁对象必须是多线程共享的对象，否则锁不住</li>
<li>在同步代码块或者是同步函数中调用sleep方法是不会释放锁对象的，如果是调用了wait方法是会释放锁对象的</li>
</ol>
<h3 id="关于-和equals的区别"><a href="#关于-和equals的区别" class="headerlink" title="关于==和equals的区别"></a>关于==和equals的区别</h3><h4 id="从简单来说"><a href="#从简单来说" class="headerlink" title="从简单来说"></a>从简单来说</h4><h5 id="是字面意思，等于。equals则是比较，是否相同。而等于跟相同是两个概念，可以从以下例子来理解："><a href="#是字面意思，等于。equals则是比较，是否相同。而等于跟相同是两个概念，可以从以下例子来理解：" class="headerlink" title="==是字面意思，等于。equals则是比较，是否相同。而等于跟相同是两个概念，可以从以下例子来理解："></a>==是字面意思，等于。equals则是比较，是否相同。而等于跟相同是两个概念，可以从以下例子来理解：</h5><figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div></pre></td><td class="code"><pre><div class="line">String i = <span class="string">"Java"</span>;</div><div class="line">String ii = <span class="string">"Java"</span>;</div><div class="line">String iii = <span class="string">"Java1"</span>;</div><div class="line">String iiii = <span class="keyword">new</span> String(<span class="string">"Java"</span>);</div><div class="line">System.out.println(i.equals(ii));<span class="comment">//由于String有覆写了equals方法，所以内容相同时，比较返回true</span></div><div class="line">System.out.println(i.equals(iii));<span class="comment">//由于内容不相同所以返回false</span></div><div class="line">System.out.println(i.equals(iiii));<span class="comment">//由于内容相同，但是String覆写了equals方法，所以内容相同返回true</span></div><div class="line">System.out.println(i==ii);<span class="comment">//由于JAVA中对象内容一致的时候，非创建新对象，则堆中内容指向相同的栈引用</span></div><div class="line">System.out.println(i==iiii);<span class="comment">//;由于==是比较的地址值，这里new了一个心对象，所以地址值不同，返回false</span></div><div class="line">System.out.println(i.toString()+<span class="string">"|"</span>+i.getBytes()+<span class="string">"|"</span>+i.hashCode());</div><div class="line">System.out.println(ii.toString()+<span class="string">"|"</span>+ii.getBytes()+<span class="string">"|"</span>+ii.hashCode());</div><div class="line">System.out.println(iii.toString()+<span class="string">"|"</span>+iii.getBytes()+<span class="string">"|"</span>+iii.hashCode());</div><div class="line">System.out.println(iiii.toString()+<span class="string">"|"</span>+iiii.getBytes()+<span class="string">"|"</span>+iiii.hashCode());</div></pre></td></tr></table></figure>
<h4 id="从Java角度来说"><a href="#从Java角度来说" class="headerlink" title="从Java角度来说"></a>从Java角度来说</h4><p>==是判断两个变量或者对象实例是不是指向相同的内存栈(地址值)，equals则判断两个变量或者对象实例的hashcode是不是相同（相同引用），使用==的情况会对内存地址值进行比较，equals则对该对象的hashcode进行比较。</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">String s = <span class="string">"Java"</span>;<span class="comment">// hashcode:2301506 内存地址值:[B@5a3e03b3</span></div><div class="line">String srt = <span class="keyword">new</span> String(<span class="string">"Java"</span>); <span class="comment">//hashcode:2301506 内存地址值:[B@1d650b0e</span></div></pre></td></tr></table></figure>
<h4 id="实战中"><a href="#实战中" class="headerlink" title="实战中"></a>实战中</h4><p>如果只比较两个基本数据类型值，那么只需要使用==，而不能使用equals，因为equals是个函数（方法），而基本类型如int，float，double等不是对象，那么就没有函数，所以是无法equals的。</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">int</span> i = <span class="number">1</span>;</div><div class="line"><span class="keyword">int</span> y = <span class="number">1</span>;</div><div class="line">System.out.println(i.equals(y));</div><div class="line">将会提示错误信息：</div><div class="line"><span class="function">Cannot invoke <span class="title">equals</span><span class="params">(<span class="keyword">int</span>)</span> on the primitive type <span class="keyword">int</span>。</span></div><div class="line"><span class="function">除非把声明类型换为Integer对象</span></div><div class="line"><span class="function">Integer i </span>= <span class="number">1</span>;</div><div class="line">Integer y = <span class="number">1</span>;</div><div class="line">System.out.println(i.equals(y));</div><div class="line">则会通过，并输出<span class="keyword">true</span></div></pre></td></tr></table></figure>
<p>所以如果比较的是值，建议使用==，而不用equals，具体原因如下。</p>
<p>equals底层源码是：</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">public</span> <span class="keyword">boolean</span> <span class="title">equals</span><span class="params">(Object obj)</span> </span>{</div><div class="line"> <span class="keyword">if</span> (obj <span class="keyword">instanceof</span> Integer) {</div><div class="line"> <span class="keyword">return</span> value == ((Integer)obj).intValue();</div><div class="line"> }</div><div class="line"> <span class="keyword">return</span> <span class="keyword">false</span>;</div><div class="line">}</div></pre></td></tr></table></figure>
<p>传入一个对象，如果对比两个实例是否是同一个实例（instanceof），如果是则继续判断该实例对象的hashcode跟该被比较对象的hashcode用==对比，相同则返回true，否则返回false。</p>
<p>而如果传入对象后对比两个实例根本不是同一个实例，那么也就不用在进一步用==对比地址值，直接返回false。</p>
<p>也就是equals其实也是直接调用了==操作，不过是当实例相同时调用它来对比hashcode。</p>
<p>如果想对比一个对象的地址值是否相同，应该按照自己的需求去覆写equals方法。而且如果在不覆写equals方法的情况，使用==就是比较地址值，使用equals就是比较是否同一引用和hashcode是否相同。</p>
<h3 id="Junit-常用注释："><a href="#Junit-常用注释：" class="headerlink" title="Junit 常用注释："></a>Junit 常用注释：</h3><p>测试体@Test </p>
<p>//测试体不能是static修饰和不能有形参</p>
<p>非静态测试前环境@Before </p>
<p>非静态测试后清理@After </p>
<p> //不带Class在每个测试方法测试的时候会调用一次 </p>
<p>静态测试前环境 @BeforeClass</p>
<p>静态测试后清理@AfterClass</p>
<p> //带Class在所有测试方法测试之前和测试之后的时候只调用一次</p>
]]></content>
<summary type="html">
<p>JAVA的一些知识要点</p>
</summary>
<category term="开发" scheme="http://bitamin.pw/categories/%E5%BC%80%E5%8F%91/"/>
<category term="JAVA" scheme="http://bitamin.pw/tags/JAVA/"/>
<category term="集合" scheme="http://bitamin.pw/tags/%E9%9B%86%E5%90%88/"/>
<category term="泛型" scheme="http://bitamin.pw/tags/%E6%B3%9B%E5%9E%8B/"/>
</entry>
<entry>
<title>留言板的学习记录</title>
<link href="http://bitamin.pw/2016/07/25/%E7%95%99%E8%A8%80%E6%9D%BF%E5%AD%A6%E4%B9%A0%E8%AE%B0%E5%BD%95/"/>
<id>http://bitamin.pw/2016/07/25/留言板学习记录/</id>
<published>2016-07-25T08:55:42.000Z</published>
<updated>2016-07-24T11:46:41.000Z</updated>
<content type="html"><![CDATA[<p>留言板的学习记录<br><a id="more"></a></p>
<h1 id="留言板的学习记录"><a href="#留言板的学习记录" class="headerlink" title="留言板的学习记录"></a>留言板的学习记录</h1><p>php mysql requirejs 实现一个简单的留言系统</p>
<p>要求：<br>1、可以留言 √<br>2、结果分页显示<br>3、做些css3的动画效果 √<br>4、php写接口，前端用js的ajax去调用 √<br>5、数据存入数据库 √</p>
<p>执行：</p>
<ol>
<li>留言板页面编写 √</li>
<li>数据库字段设计 √</li>
<li>PHP逻辑编写 √ <ol>
<li>制作PHP数据库的DAO，数据库连接，增加，查询操作接口 √ </li>
<li>制作Js获取到DB连接，判断是否有数据库message_board，没有则建立，并且创建message表填入第一条留言，有则直接填入留言 √ </li>
<li>监听按钮后用Js的Ajax调用数据库的增加查询 √ </li>
<li>显示结果超过4条分页</li>
<li>制作CSS动画 √ </li>
</ol>
</li>
</ol>
<h3 id="用到的技术"><a href="#用到的技术" class="headerlink" title="用到的技术"></a>用到的技术</h3><blockquote>
<ul>
<li>PHPEclipse</li>
<li>PHP入门语法基础 √</li>
<li>Linux系统搭建LAMP √</li>
<li>Windows系统搭建WAMP √</li>
<li>跨平台系统搭建XAMPP √</li>
<li>requirejs </li>
<li>Ajax</li>
<li>MySQL √</li>
<li>数据库的操作 </li>
<li>留言板页面</li>
<li>分页技术</li>
<li>CSS3动画</li>
<li></li>
</ul>
</blockquote>
<h4 id="关于RequireJs"><a href="#关于RequireJs" class="headerlink" title="关于RequireJs"></a>关于RequireJs</h4><h5 id="RequireJs是遵循的AMD-Asynchronous-Module-Definition-异步模块定义的规范。"><a href="#RequireJs是遵循的AMD-Asynchronous-Module-Definition-异步模块定义的规范。" class="headerlink" title="RequireJs是遵循的AMD(Asynchronous Module Definition) 异步模块定义的规范。"></a>RequireJs是遵循的AMD(Asynchronous Module Definition) 异步模块定义的规范。</h5><p>相关联的有<strong>Seajs</strong>的<strong>CMD(Common Module Definition)</strong>同步模块定义。</p>
<h6 id="RequireJs常用的方法："><a href="#RequireJs常用的方法：" class="headerlink" title="RequireJs常用的方法："></a>RequireJs常用的方法：</h6><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line"><span class="number">1.</span> requirejs.config({paths:{<span class="string">"Module"</span>:[<span class="string">"URL://js"</span>,<span class="string">"scr://js"</span>]or<span class="string">"scr://js"</span>}}); <span class="comment">//为模块(JS)配置别名，可以配置联网路径也可以同时配置本地路径</span></div><div class="line"> <span class="number">1.</span>requirejs.config({baseUrl:<span class="string">'path/js'</span>}); <span class="comment">//指定js基目录</span></div><div class="line"><span class="number">2.</span> requirejs([<span class="string">"Module"</span>],<span class="function"><span class="keyword">function</span>(<span class="params">module</span>)</span>{$js}); <span class="comment">//写好的模块引入，根据引入的模块编写主代码</span></div><div class="line"><span class="number">3.</span> define([<span class="string">"Module"</span>],<span class="function"><span class="keyword">function</span>(<span class="params">module</span>)</span>{$js}); <span class="comment">//利用define编写模块，然后引入requirejs（需要建立模块.js）</span></div><div class="line"><span class="number">4.</span> define([<span class="string">"Module"</span>],<span class="function"><span class="keyword">function</span>(<span class="params">module</span>)</span>{<span class="keyword">return</span> {}});</div><div class="line"><span class="number">6.</span> define(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{<span class="function"><span class="keyword">function</span> <span class="title">module</span>(<span class="params"></span>)</span>{}});</div><div class="line"><span class="number">5.</span> define([],<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{<span class="keyword">return</span>{<span class="built_in">module</span>: <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{}}});</div></pre></td></tr></table></figure>
<p>require()接受2个参数，第一个是模块数组，第二个是回调函数，模块加载完成后调用该函数</p>
<p>引入RequireJs文件的时候加上主入口参数来配置,建立main.js文件进行方法编写。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"\js\require.js"</span> <span class="attr">data-main</span>=<span class="string">"js\main"</span>></span><span class="undefined"></span><span class="tag"></<span class="name">script</span>></span>//普通加载</div><div class="line"><span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"\js\require.js"</span> <span class="attr">data-main</span>=<span class="string">"js\main"</span> <span class="attr">defer</span> <span class="attr">async</span>=<span class="string">"true"</span>></span><span class="undefined"></span><span class="tag"></<span class="name">script</span>></span>//异步加载</div></pre></td></tr></table></figure>
<p>主要是学习如何利用define把每一个功能定义成模块</p>
<h4 id="关于AJAX"><a href="#关于AJAX" class="headerlink" title="关于AJAX"></a>关于AJAX</h4><h5 id="Asynchronous-JavaScript-And-Xml-异步的JavaScript和Xml"><a href="#Asynchronous-JavaScript-And-Xml-异步的JavaScript和Xml" class="headerlink" title="Asynchronous JavaScript And Xml 异步的JavaScript和Xml"></a>Asynchronous JavaScript And Xml 异步的JavaScript和Xml</h5><p>让<strong>XHR</strong>兼容IE6以前的浏览器</p>
<figure class="highlight php"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> request;</div><div class="line"><span class="keyword">if</span>(window.XMLHttpRequest){</div><div class="line"> request = <span class="keyword">new</span> XMLHttpRequest();<span class="comment">//IE7\Firefox\Chrome\Opera\Safari...</span></div><div class="line">}<span class="keyword">else</span>{</div><div class="line"> request = <span class="keyword">new</span> ActiveXObject(<span class="string">"microsoft.XMLHTTP"</span>);<span class="comment">//IE5\IE6</span></div><div class="line">}</div></pre></td></tr></table></figure>
<p><strong>XHR</strong>：XMLHttpRequest</p>
<figure class="highlight php"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">- open(method,url,async);<span class="comment">//e.g open(Get/Post,Url);async默认true异步</span></div><div class="line">- setRequestHeader(<span class="string">"Content-type"</span>,<span class="string">"application/x-www-form-urlencoded"</span>); </div><div class="line">- send(string);<span class="comment">//发送信息</span></div><div class="line">- onreadystatechange = <span class="function"><span class="keyword">function</span><span class="params">()</span></span>{</div><div class="line"> <span class="keyword">if</span>(request.readyState===<span class="number">4</span> && request.status===<span class="number">200</span>)<span class="comment">//响应正确，获取信息</span></div><div class="line"> request.responseText;</div><div class="line">}</div></pre></td></tr></table></figure>
]]></content>
<summary type="html">
<p>留言板的学习记录<br>
</summary>
<category term="开发" scheme="http://bitamin.pw/categories/%E5%BC%80%E5%8F%91/"/>
<category term="MySQL PHP JS RequireJs" scheme="http://bitamin.pw/tags/MySQL-PHP-JS-RequireJs/"/>
</entry>
<entry>
<title>PHP的学习记录</title>
<link href="http://bitamin.pw/2016/06/25/PHP%E7%9A%84%E5%AD%A6%E4%B9%A0%E8%AE%B0%E5%BD%95/"/>
<id>http://bitamin.pw/2016/06/25/PHP的学习记录/</id>
<published>2016-06-25T08:55:42.000Z</published>
<updated>2016-07-24T11:47:13.000Z</updated>
<content type="html"><![CDATA[<p>PHP的学习记录<br><a id="more"></a></p>
<h1 id="PHP的学习记录"><a href="#PHP的学习记录" class="headerlink" title="PHP的学习记录"></a>PHP的学习记录</h1><h3 id="PHP系统常量"><a href="#PHP系统常量" class="headerlink" title="PHP系统常量"></a>PHP系统常量</h3><figure class="highlight php"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">__FILE__</span>; <span class="comment">//当前文件路径：xx/xx/xxx.php</span></div><div class="line"><span class="keyword">__LINE__</span>; <span class="comment">//当前PHP代码位于当前PHP文件的行数</span></div><div class="line">PHP_VERSION; <span class="comment">//当前PHP解析的版本号</span></div><div class="line">PHP_OS; <span class="comment">//当前PHP环境所在的操作系统名称</span></div></pre></td></tr></table></figure>
<h3 id="PHP系统函数"><a href="#PHP系统函数" class="headerlink" title="PHP系统函数"></a>PHP系统函数</h3><figure class="highlight php"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">date_default_timezone_set(<span class="string">'Asia/ShangHai'</span>); <span class="comment">//</span></div></pre></td></tr></table></figure>
<h3 id="PHP页面内容返回格式"><a href="#PHP页面内容返回格式" class="headerlink" title="PHP页面内容返回格式"></a>PHP页面内容返回格式</h3><figure class="highlight php"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">header(<span class="string">"content-Type:text/plain;charset=utf-8"</span>);</div><div class="line">header(<span class="string">"content-Type:application/json;charset=utf-8"</span>);</div><div class="line">header(<span class="string">"content-Type:text/xml;charset=utf-8"</span>);</div><div class="line">header(<span class="string">"content-Type:text/html;charset=utf-8"</span>);</div><div class="line">header(<span class="string">"content-Type:application/javascript;charset=utf-8"</span>);</div></pre></td></tr></table></figure>
<h3 id="PHP的3种数据库连接方式"><a href="#PHP的3种数据库连接方式" class="headerlink" title="PHP的3种数据库连接方式"></a>PHP的3种数据库连接方式</h3><h3 id="mysql扩展进行数据库连接的方法："><a href="#mysql扩展进行数据库连接的方法：" class="headerlink" title="mysql扩展进行数据库连接的方法："></a>mysql扩展进行数据库连接的方法：</h3><figure class="highlight php"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$link = mysql_connect(<span class="string">'mysql_host'</span>, <span class="string">'mysql_user'</span>, <span class="string">'mysql_password'</span>)<span class="keyword">or</span> <span class="keyword">die</span>(<span class="string">'数据库连接失败'</span>);</div></pre></td></tr></table></figure>
<h3 id="mysqli扩展："><a href="#mysqli扩展：" class="headerlink" title="mysqli扩展："></a>mysqli扩展：</h3><figure class="highlight php"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$link = mysqli_connect(<span class="string">'mysql_host'</span>, <span class="string">'mysql_user'</span>, <span class="string">'mysql_password'</span>,<span class="string">'mysql_database'</span>);</div></pre></td></tr></table></figure>
<h3 id="PDO扩展"><a href="#PDO扩展" class="headerlink" title="PDO扩展"></a>PDO扩展</h3><figure class="highlight php"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">$dsn = <span class="string">'mysql:dbname=testdb;host=127.0.0.1'</span>;</div><div class="line">$user = <span class="string">'dbuser'</span>;</div><div class="line">$password = <span class="string">'dbpass'</span>;</div><div class="line">$dbh = <span class="keyword">new</span> PDO($dsn, $user, $password);</div></pre></td></tr></table></figure>
<h3 id="PHP检测连接"><a href="#PHP检测连接" class="headerlink" title="PHP检测连接"></a>PHP检测连接</h3><figure class="highlight php"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">if</span> ($link->connect_error) {</div><div class="line"> <span class="keyword">die</span>(<span class="string">"Connection failed: "</span> . $link->connect_error);</div><div class="line">} <span class="comment">// 检测连接</span></div><div class="line">mysql_error();<span class="comment">//检测错误</span></div></pre></td></tr></table></figure>
<h3 id="PHP查询、提交SQL"><a href="#PHP查询、提交SQL" class="headerlink" title="PHP查询、提交SQL"></a>PHP查询、提交SQL</h3><figure class="highlight php"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div></pre></td><td class="code"><pre><div class="line">old:</div><div class="line">mysql_select_db(<span class="string">'databases'</span>);<span class="comment">//连接数据库</span></div><div class="line">$result = mysql_query(<span class="string">'SQL'</span>);<span class="comment">//SQL语法编写</span></div><div class="line">$row = mysql_fetch_assoc($result);<span class="comment">//提交SQL返回结果</span></div><div class="line">print_r($row);<span class="comment">//打印结果</span></div><div class="line"><span class="comment">//获取和显示数据</span></div><div class="line">mysql_fetch_row();<span class="comment">//依次查询取结果，无数据返回空，一般结合while来循环输出所有</span></div><div class="line">mysql_fetch_array();</div><div class="line">mysql_fetch_assoc();</div><div class="line">mysql_fetch_object();</div><div class="line"></div><div class="line"><span class="keyword">new</span>:</div><div class="line">$result = mysqli_query($link,<span class="string">'SQL'</span>);<span class="comment">//SQL语法编写</span></div><div class="line">$row = mysqli_fetch_assoc($result);<span class="comment">//获取和显示返回结果</span></div><div class="line">print_r($row);<span class="comment">//打印结果</span></div><div class="line"><span class="comment">//获取和显示数据</span></div><div class="line">mysqli_fetch_row();</div><div class="line">mysqli_fetch_array();</div><div class="line">mysqli_fetch_assoc();</div><div class="line">mysqli_fetch_object();</div></pre></td></tr></table></figure>
<h3 id="PHP关闭连接"><a href="#PHP关闭连接" class="headerlink" title="PHP关闭连接"></a>PHP关闭连接</h3><figure class="highlight php"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">old:</div><div class="line">mysql_close($link);</div><div class="line"><span class="keyword">new</span>:</div><div class="line">mysqli_close($link);</div></pre></td></tr></table></figure>
<p>PHP的变量命名用$表示，不同于其他语言。声明变量可以不用声明类型，根据赋值的类型而自动定义变量类型</p>
]]></content>
<summary type="html">
<p>PHP的学习记录<br>
</summary>
<category term="开发" scheme="http://bitamin.pw/categories/%E5%BC%80%E5%8F%91/"/>
<category term="MySQL PHP" scheme="http://bitamin.pw/tags/MySQL-PHP/"/>
</entry>
<entry>
<title>github和coding的pages共存</title>
<link href="http://bitamin.pw/2016/06/14/%E5%A6%82%E4%BD%95%E8%AE%BE%E7%BD%AEgithub%E5%92%8Ccoding%E7%9A%84pages%E5%9F%9F%E5%90%8D%E7%BB%91%E5%AE%9A/"/>
<id>http://bitamin.pw/2016/06/14/如何设置github和coding的pages域名绑定/</id>
<published>2016-06-13T16:05:29.000Z</published>
<updated>2016-06-14T04:32:31.000Z</updated>
<content type="html"><![CDATA[<p>Hexo同时push至github和coding上并且实现国内外分流绑定域名</p>
<a id="more"></a>
]]></content>
<summary type="html">
<p>Hexo同时push至github和coding上并且实现国内外分流绑定域名</p>
</summary>
<category term="域名" scheme="http://bitamin.pw/categories/%E5%9F%9F%E5%90%8D/"/>
<category term="Domain" scheme="http://bitamin.pw/tags/Domain/"/>
<category term="github" scheme="http://bitamin.pw/tags/github/"/>
<category term="coding" scheme="http://bitamin.pw/tags/coding/"/>
</entry>
<entry>
<title>MySQL的命令总结（二）</title>
<link href="http://bitamin.pw/2016/05/27/MySQL%E7%9A%84%E5%91%BD%E4%BB%A4%E6%80%BB%E7%BB%93-%E4%BA%8C/"/>
<id>http://bitamin.pw/2016/05/27/MySQL的命令总结-二/</id>
<published>2016-05-27T07:04:49.000Z</published>
<updated>2016-05-27T07:24:24.000Z</updated>
<content type="html"><![CDATA[<p>数据库的命令行函数使用总结</p>
<a id="more"></a>
<h2 id="MySql的函数"><a href="#MySql的函数" class="headerlink" title="MySql的函数"></a>MySql的函数</h2><ul>
<li>函数支持嵌套</li>
<li>METHOD(METHOD(KEY,…),…);</li>
<li>SET NAMES GBK;设置客户端字符集</li>
<li>SET PASSWORD=PASSWORD(‘password’); 设置mysql密码</li>
<li>DELIMITER // 修改结束符为//。可修改结束符号</li>
</ul>
<h3 id="字符函数"><a href="#字符函数" class="headerlink" title="字符函数"></a>字符函数</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">KEY:CONCAT() | CONCAT_WS()</div><div class="line">E.g. : SELECT CONCAT(<span class="string">'CHAR'</span>,<span class="string">'CHAR'</span>,...); //输出字符连接后的记录</div><div class="line">E.g. : SELECT CONCAT(colname,colname2,...) FROM table;//输出多个字段值连接后的记录</div><div class="line">E.g. : SELECT CONCAT_WS(<span class="string">'|'</span>,<span class="string">'CHAR'</span>,<span class="string">'CHAR'</span>,...);//输出使用第一个参数分隔符进行字符的连接</div><div class="line">E.g. : SELECT CONCAT_WS(<span class="string">'-'</span>,<span class="string">'colname'</span>,<span class="string">'colname2'</span>,...) FROM tablename;//colname-colname2 输出使用第一个参数分隔符进行字段值的连接</div></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">KEY:FORMAT()</div><div class="line">E.g. : SELECT FORMAT(key,parameter); //数字格式化 参数一是值，参数二是取整位数 RETURN </div><div class="line">SELECT FORMAT(12345.678,2) 12,345.68</div><div class="line">SELECT FORMAT(12345.678,1) 12,345.7 </div><div class="line">SELECT FORMAT(12345.678,0) 12,346</div></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">KEY:LOWER() | UPPER()</div><div class="line">E.g. : SELECT LOWER('CHAR'); //转换小写</div><div class="line">E.g. : SELECT UPPER('char'); //转换大写</div></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">KEY:LEFT() | RIGHT()</div><div class="line">E.g. : SELECT LEFT('CHAR',parameter);// 取值的左parameter位 </div><div class="line">E.g. : SELECT RIGHT('CHAR',parameter);// 取值的右parameter位</div></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div></pre></td><td class="code"><pre><div class="line">KEY: LENGTH() | LTRIM() | RTRIM() | (TRIM() | LEADING | TRAILING | BOTH) | REPLACE() | SUBSTRING() | (LIKE | ESCAPE)</div><div class="line"></div><div class="line">E.g. : SELECT LENGTH('CH AR');// 获取字符长度,包含空格。RETURN 5</div><div class="line">E.g. : SELECT LTRIM(' CHAR '); // 删除字符串前方的空格 RETURN ('CHAR ')</div><div class="line">E.g. : SELECT RTRIM(' CHAR '); // 删除字符串后方的空格 RETURN (' CHAR')</div><div class="line">E.g. : SELECT TRIM(' CHAR '); // 删除字符串前后方的空格 RETURN ('CHAR')</div><div class="line">E.g. : SELECT TRIM(LEADING'?' FROM '??CHAR????'); //删除字符串前方指定的字符 RETURN ('CHAR????')</div><div class="line">E.g. : SELECT TRIM(TRAILING'?' FROM '??CHAR????'); //删除字符串后方指定的字符 RETURN ('??CHAR')</div><div class="line">E.g. : SELECT TRIM(BOTH'?' FROM '??CHAR????'); //删除字符串前后方指定的字符 RETURN ('CHAR')</div><div class="line">E.g. : SELECT REPLACE('??CH??AR???','?|??','^'); //替换字符串中指定的字符为另外一个字符 RETURN ('^^CH^^AR^^^') | ('^CH^AR^?')</div><div class="line">E.g. : SELECT SUBSTRING('VARCHAR',3); //输出字符串指定位置开始的记录到结束，索引从1开始算起非0算起。 RETURN ('RCHAR')</div><div class="line">E.g. : SELECT SUBSTRING('VARCHAR',-2); //输出字符串从结尾往回算起到负数位置，索引从-1开始算起非0算起。 RETURN ('AR') 负数代表反向</div><div class="line">E.g. : SELECT SUBSTRING('VARCHAR',3,4); //输出字符串指定位置开始的记录到参数的个数，索引从1开始算起非0算起。 RETURN ('RCHA') ：显示4个字符</div><div class="line">E.g. : SELECT 'MySQL' LIKE '%yS%'; //返回布尔类型 ，值为1，代表true 。意思为字符串中有like后面包含的字符，</div><div class="line">E.g. : SELECT * FROM tablename WHERE colname LIKE '%?%'; //意思为查找表内字段中含有?的字符串，%、_为通配符， %为任意个字符 _为任意一个字符 </div><div class="line">E.g. : SELECT * FROM tablename WHERE colname LIKE '%1%%' ESCAPE '1'; //意思为查找表内字段中含有%的字符串，%为通配符的同时，用ESCAPE关键字告诉SQL'1'后面的字符为字符而不是通配符。</div></pre></td></tr></table></figure>
<h3 id="数值运算符函数"><a href="#数值运算符函数" class="headerlink" title="数值运算符函数"></a>数值运算符函数</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line">KEY: SEIL() | FLOOR() | DIV | MOD | POWER() | ROUND() | TRUNCATE()</div><div class="line"></div><div class="line">E.g. : SELECT SEIL(3.01); 向上取整 RETURN 4</div><div class="line">E.g. : SELECT FLOOR(3.99); 向下取整 RETURN 3</div><div class="line">E.g. : SELECT 3 DIV 4; //整除 RETURN 0 :答案3除以4等于0.75，而整除是舍弃小数</div><div class="line">E.g. : SELECT 5 MOD 4; //取余 （取模） RETURN 1 , 跟%取模相同</div><div class="line">E.g. : SELECT POWER(3,3); //次方运算 RETURN 27 ,3的3次方。</div><div class="line">E.g. : SELECT ROUND(32.652，2); // 四舍五入数值 RETURN 32.65 ,后方数值为小数位数。</div><div class="line">E.g. : SELECT TRUNCATE(125.898,2) // 数字截取 RETURN 125.89 ,不同于四舍五入，单纯减少小数点后位数，为0则没小数。负数可以去截取整数部分。(125.898,-1) RETURN 120</div></pre></td></tr></table></figure>
<h3 id="比较运算符函数"><a href="#比较运算符函数" class="headerlink" title="比较运算符函数"></a>比较运算符函数</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">KEY: [NOT] BETWEEN ... AND | IN() | IS NULL</div><div class="line"></div><div class="line">E.g. : SELECT 15 [NOT] BETWEEN 1 AND 22; //查询数字是否在后方所指值的范围内，返回布尔类型 。 RETURN 1,加上NOT则是取反;</div><div class="line">E.g. : SELECT 15 [NOT] IN(5,8,10,15,20,22); //查询值是否在后续指定的值里面，与枚举类似，返回布尔类型。 RETURN 1 ,加上NOT则是取反;</div><div class="line">E.g. : SELECT NULL IS NULL ; //查询一个值是否为空，返回布尔类型 RETURN 1，SELECT '' IS NULL;RETURN 0 ,加上NOT则是取反；</div><div class="line">E.g. : SELECT * FROM tablename WHERE colname IS NULL ; //可以用来查询表中字段为空或者非空的值记录</div></pre></td></tr></table></figure>
<h3 id="日期时间函数"><a href="#日期时间函数" class="headerlink" title="日期时间函数"></a>日期时间函数</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line">KEY: NOW() | CURDATE() | CURTIME() | DATE_ADD('DATE',INTERVAL 000 (YEAR|MONTH|WEEK|DAY) | DATEDIFF('DATE','DATE') | DATE_FORMAT('DATE','%m[]%d[]%Y')</div><div class="line"></div><div class="line">E.g. : SELECT NOW();</div><div class="line">E.g. : SELECT CURDATE(); // 输出日期 RETURN 0000-00-00</div><div class="line">E.g. : SELECT CURTIME(); // 输出时间 RETURN 00:00:00</div><div class="line">E.g. : SELECT DATE_ADD('2014-3-12',INTERVAL 365 DAY); //给当前值日期添加365天时间 RETURN 2015-03-12 ,也可以减少时间日期 ('2014-3-12',INTERVAL -365 DAY);RETURN 2013-03-12</div><div class="line">E.g. : SELECT DATEDIFF('2013-3-12','2014-3-12'); //求两个日期值的天数差值 RETURN -365 意思左边少于右边几天</div><div class="line">E.g. : SELECT DATE_FORMAT('2014-3-12','%m/%d/%Y'); //格式化日期并且输出查询结果，%为通配符转义字符 %Y年%m月%d日 H点:%i分:%s秒</div></pre></td></tr></table></figure>
<h3 id="信息函数"><a href="#信息函数" class="headerlink" title="信息函数"></a>信息函数</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">KEY: CONNECTION_ID() | DATEBASE() | LAST_INSERT_ID() | USER() | VERSION()</div><div class="line"></div><div class="line">E.g. : SELECT CONNECTION_ID(); //查询连接ID RETURN </div><div class="line">E.g. : SELECT DATEBASE(); //查询当前使用的数据库 RETURN databasename</div><div class="line">E.g. : SELECT LAST_INSERT_ID(); //查询最后插入记录的ID号 RETURN 最后操作的表中的ID号；多条操作的情况，以语句操作的第一条ID为准，后续ID忽略</div><div class="line">E.g. : SELECT USER(); //查询当前的用户 RETURN root@localhost</div><div class="line">E.g. : SELECT VERSION(); //查询当前版本信息 RETURN 5.7.11-log</div></pre></td></tr></table></figure>
<h3 id="聚合函数"><a href="#聚合函数" class="headerlink" title="聚合函数"></a>聚合函数</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">KEY: AVG() | COUNT() | MAX() | MIN() | SUM()</div><div class="line"></div><div class="line">E.g. : SELECT AVG(colname) AS ascolname FROM tablename;// 可用于查找计算出字段数值的平均值 RETURN keyavg</div><div class="line">E.g. : SELECT COUNT(colname) AS ascolname FROM tablename;// 可用于查找计算出字段数值的记录数 RETURN keycount</div><div class="line">E.g. : SELECT MAX(colname) AS ascolname FROM tablename;// 可用于查找计算出字段数值的最大值 RETURN keymax</div><div class="line">E.g. : SELECT MIN(colname) AS ascolname FROM tablename;// 可用于查找计算出字段数值的最小值 RETURN keymin</div><div class="line">E.g. : SELECT SUM(colname) AS ascolname FROM tablename;// 可用于查找计算出字段数值的和 RETURN keysum</div></pre></td></tr></table></figure>
<h3 id="加密函数"><a href="#加密函数" class="headerlink" title="加密函数"></a>加密函数</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">KEY: MD5() | PASSWORD()</div><div class="line"></div><div class="line">E.g. : SELECT MD5('VARCHAR'); //MD5加密，WEB应用建议MD5加密密码 </div><div class="line">E.g. : SELECT PASSWORD('VARCHAR'); //PASSWORD加密，可修改当前或者其他用户密码</div></pre></td></tr></table></figure>
<h3 id="自定义函数"><a href="#自定义函数" class="headerlink" title="自定义函数"></a>自定义函数</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line">KEY: CREATE | FUNCTION | RETURNS | {SYROMH|INTEGER|REAL|DECIMAL} RETURN |BEGIN END</div><div class="line"></div><div class="line">E.g. : CREATE FUNCTION NOWCHINA() RETURNS VARCHAR(30) RETURN DATE_FORMAT(NOW(),'%Y年%m月%d日 H点:%i分:%s秒'); //创建了一个封装了格式化过的现在日期时间函数</div><div class="line">E.g. : CREATE FUNCTION AVG1(num1 SMALLINT UNSIGNED,num2 SMALLINT UNSIGNED[,...]) RETURNS FLOAT(10,2) UNSIGNED RETURN (num1+num2)/2; //创建了一个计算num1和num2平均值的函数</div><div class="line">E.g. : DELIMITER //</div><div class="line"> CREATE FUNCTION ADDUSER(username VARCHAR(20)[,...]) RETURNS INT UNSIGNED BEGIN INSERT test(username) VALUES(username); //带复合结构BEGINEND的函数，复合函数用于包含拥有多条SQL语句的作用</div><div class="line"> RETURN LAST_INSERT_ID();</div><div class="line"> END// //可以使用ADDUSER(传参,...);来调用。并且返回了一个INT类型的id号</div></pre></td></tr></table></figure>
<h3 id="创建储存过程"><a href="#创建储存过程" class="headerlink" title="创建储存过程"></a>创建储存过程</h3><ul>
<li><p>存储过程是mysql语句和控制语句的预编译集合体</p>
</li>
<li><p>BEGINEND内属于局部变量</p>
</li>
<li><p>@属于用户变量 SET @i = 8; SELECT @i; RETURN 8;</p>
</li>
<li><p>SELECT ROW_COUNT() INTO colname; 查询处理的记录数</p>
</li>
<li><p>COUNT(colname) 查询处理后的记录数</p>
</li>
<li><p>储存过程可以有多个返回值，功能更复杂，独立运行 函数只能有一个返回值 针对性强 函数依靠其他函数组成 </p>
</li>
<li><p>储存过程不能修改过程体，只能修改参数属性值 如需要修改过程体需要删除后重建</p>
</li>
<li><p>创建储存过程或者自定义函数的时候都需要通过DELIMITER修改结束符（定界符），否则无法完成BEGIN内的SQL语句书写。如果函数体和过程体内有多个语句需要包含在BEGINEND内，存储过程需要通过CALL来调用，且函数名建议使用括号结尾</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">KEY: CREATE | DROP | ALTER | PROCEDURE | DEFINER | IN | OUT | INOUT CALL | @</div><div class="line"></div><div class="line">E.g. : CREATE [DEFINER = {user | CURRENT_USER }] PROCEDURE sp_name ([proc_parameter[,...]]) [characteristic ...] routine_body</div><div class="line">E.g. : CREATE PROCEDURE sp_name() SELECT NOW(); CALL sp_name;// 声明一个无参储存过程，通过CALL 过程名来输出当前时间。无参数的时候调用过程名字括号可加可不加</div><div class="line">E.g. : DROP PROCEDURE removeUserById; //删除储存过程方法;</div></pre></td></tr></table></figure>
<p></p>
<h4 id="E-g-DELIMITER"><a href="#E-g-DELIMITER" class="headerlink" title="E.g. : DELIMITER //"></a>E.g. : DELIMITER //</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">CREATE PROCEDURE removeUserById(IN id INT UNSIGNED) // IN 单参数传入 ，此关键字说明此方法只传入参数处理数据，而无需返回结果</div><div class="line">BEGIN</div><div class="line">DELETE FROM users WHERE id = id; //声明传参名时不可跟表单重名，建议使用表头字母_id来声明 x_id </div><div class="line">END// //创建一个封装了删除表指定字段的储存过程方法 ，传入值。 此处id定义重复，有出错，需修改id。从此看出，在写过程中不可重复声明</div><div class="line">DELIMITER ; //CALL removeUserById(4); 使用CALL来调用方法删除指定的ID行</div></pre></td></tr></table></figure>
<p></p>
<h4 id="E-g-DELIMITER-单参数传入-单参数返回"><a href="#E-g-DELIMITER-单参数传入-单参数返回" class="headerlink" title="E.g. : DELIMITER // 单参数传入 单参数返回"></a>E.g. : DELIMITER // 单参数传入 单参数返回</h4><pre><code>CREATE PROCEDURE removeUserById(IN p_id INT UNSIGNED，OUT userNums INT UNSIGNED) // IN 传入参数 ，OUT返回结果 ，此关键字说明此方法传入参数后并且规定返回指定类型结果
BEGIN
DELETE FROM users WHERE id = p_id; //声明传参名时不可跟表单重名，建议使用表头字母_id来声明 x_id .此语句为执行删除传入id的id行数据；
SELECT count(id) FROM users INTO userNums; //此语句为，上语句删除完毕后，查询删除后现id字段的计数，并且传输结果给userNums返回出值
END//
DELIMITER ; // 调用过程需要传入接受返回值的变量 CALL removeUserAndReturnUserNums(10,@nums); 此时数值被写入到 @nums变量，可通过SELECT @nums来查询 @是一种声明用户变量 BEGINEND内可声明局部变量
</code></pre><h4 id="E-e-DELIMITER-单参数传入-多参数返回"><a href="#E-e-DELIMITER-单参数传入-多参数返回" class="headerlink" title="E.e. : DELIMITER // 单参数传入 多参数返回"></a>E.e. : DELIMITER // 单参数传入 多参数返回</h4><pre><code>CREATE PROCEDURE removeUserByAgeAndReturnInfos(IN p_age SMALLINT UNSIGNED O,OUT deleteUser SMALLINT UNSIGNED,OUT userCounts SMALLINT UNSIGNED)
BEGIN
DELETE FROM users WHERE age = p_age; // 删除掉表内匹配p_age的一行数据 参数用了IN，所以不用返回值，只需处理传入值
SELECT ROU_COUNT() INTO deleteUsers; //查询更改的数量。并把数值返回给deleteUsers接收，以供后续传值到其他变量中查询
SELECT COUNT(id) FROM users INTO userCounts; //查询来自users表中更改后剩下的ID计数，并返回结果给userCounts接收
END//
DELIMITER ; //使用CALL removeUserByAgeAndReturnInfos(20,@a,@b); SELECT @a,@b; RETURN 处理数 处理后计数
</code></pre></li>
</ul>
]]></content>
<summary type="html">
<p>数据库的命令行函数使用总结</p>
</summary>
<category term="开发" scheme="http://bitamin.pw/categories/%E5%BC%80%E5%8F%91/"/>
<category term="MySQL" scheme="http://bitamin.pw/tags/MySQL/"/>
</entry>
<entry>
<title>MySQL的命令总结(一)</title>
<link href="http://bitamin.pw/2016/05/25/MySQL%E7%9A%84%E5%91%BD%E4%BB%A4%E6%80%BB%E7%BB%93-%E4%B8%80/"/>
<id>http://bitamin.pw/2016/05/25/MySQL的命令总结-一/</id>
<published>2016-05-25T08:55:42.000Z</published>
<updated>2016-05-26T10:33:04.000Z</updated>
<content type="html"><![CDATA[<p>数据库的命令行操作语句总结<br><a id="more"></a></p>
<h2 id="数据库登入"><a href="#数据库登入" class="headerlink" title="数据库登入"></a>数据库登入</h2><p>常用集成建站环境：XAMPP WAMP LAMP<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">$ mysql -uroot -proot</div><div class="line"> -P 端口</div><div class="line"> -h 主机名</div><div class="line">$ prompt \D 日期</div><div class="line"> \d 当前数据库</div><div class="line"> \u 用户名</div><div class="line"> \p 密码</div></pre></td></tr></table></figure></p>
<h2 id="数据库的变量"><a href="#数据库的变量" class="headerlink" title="数据库的变量"></a>数据库的变量</h2><h3 id="Integer"><a href="#Integer" class="headerlink" title="Integer :"></a>Integer :</h3><p>(n)n的数字不管是多少，储存范围始终是每个类型规定的长度；TINYINT(1)和TINYINT(3)没区别，都占用1个字节。而使用ZEROFILL TINYINT(3)插入值9会显示 009 ；<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line">TINYINT(<span class="string">'-2^7'</span>-128~<span class="string">'2^7-1'</span>127/8bit) </div><div class="line">无符号位数 0~255 1byte 默认TINYINT(4)</div><div class="line">SMALLINT(<span class="string">'-2^15'</span>-32768~<span class="string">'2^15-1'</span>32767/16bit) </div><div class="line">无符号位数 0~65535 2byte 默认SMALLINT(6)</div><div class="line">MEDIUMINT(<span class="string">'-2^23'</span>-8388608~<span class="string">'2^23-1'</span>8388607/24bit) </div><div class="line">无符号位数 0~16777215 3byte 默认MEDIUMINT(9)</div><div class="line">INT(<span class="string">'-2^31'</span>2147483648~<span class="string">'2^31-1'</span>2147483647/32bit) </div><div class="line">无符号位数 0~4294967295 4byte 默认INT(11)</div><div class="line">BIGINT(<span class="string">'-2^63'</span>9223372036854775808~<span class="string">'2^63-1'</span>9223372036854775807/64bit) </div><div class="line">无符号位数 0~18446744073709551616 8byte 默认BIGINT(20)</div></pre></td></tr></table></figure></p>
<h3 id="String"><a href="#String" class="headerlink" title="String :"></a>String :</h3><p>(n)n的数字代表字符的长度，如VARCHAR(3)只能插入3个(中文、英文、数字)，E.g. : ‘你好吗’ ‘HEL’ ‘123’ ‘你H1’<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">CHAR(n) 小于n则用空格补足</div><div class="line">VARCHAR(size) 占用刚好的字节，以及加上一个记录长度的字节,最大长度65535,8bit,去除2位长度记录位，65533.如有为空约束则65532位，空位占用1字节</div><div class="line">TEXT : 大文本</div><div class="line">FLOAT : DECIMAL FLOAT</div><div class="line">BLOB : BLOB 二进制字段类型</div></pre></td></tr></table></figure></p>
<h2 id="数据库的操作"><a href="#数据库的操作" class="headerlink" title="数据库的操作"></a>数据库的操作</h2><ul>
<li>可选</li>
<li>NOT NULL :非空，不能为空</li>
<li>UNSIGNED ：无符号位</li>
<li>ZEROFILL ： 左边自动补0，并且强制无符号位，负数强制为0；</li>
<li>DATABASE or SCHEMA </li>
<li>ENGINE=InnoDB ： 指定存储引擎 （mysql支持 ： MyISAM InnoDB Memory CSV Archive BlackHole ）</li>
<li>索引 ：普通索引、唯一索引、全文索引、btree索引、hash索引</li>
<li>DEFAULT ： 默认</li>
<li>CHARSET=utf8 ： 指定字符集</li>
</ul>
<table>
<thead>
<tr>
<th style="text-align:center">特点</th>
<th style="text-align:center">MySIAM</th>
<th style="text-align:center">InnoDB</th>
<th style="text-align:center">Memory</th>
<th style="text-align:center">Archive</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center">储存限制</td>
<td style="text-align:center">256TB</td>
<td style="text-align:center">64TB</td>
<td style="text-align:center">有</td>
<td style="text-align:center">无</td>
</tr>
<tr>
<td style="text-align:center">事务安全</td>
<td style="text-align:center"></td>
<td style="text-align:center">支持</td>
<td style="text-align:center"></td>
<td style="text-align:center"></td>
</tr>
<tr>
<td style="text-align:center">支持索引</td>
<td style="text-align:center">支持</td>
<td style="text-align:center">支持</td>
<td style="text-align:center">支持</td>
<td style="text-align:center"></td>
</tr>
<tr>
<td style="text-align:center">锁颗粒</td>
<td style="text-align:center">表锁</td>
<td style="text-align:center">行锁</td>
<td style="text-align:center">表锁</td>
<td style="text-align:center">行锁</td>
</tr>
<tr>
<td style="text-align:center">数据压缩</td>
<td style="text-align:center">支持</td>
<td style="text-align:center"></td>
<td style="text-align:center"></td>
<td style="text-align:center">支持</td>
</tr>
<tr>
<td style="text-align:center">支持外键</td>
<td style="text-align:center"></td>
<td style="text-align:center">支持</td>
<td style="text-align:center"></td>
</tr>
</tbody>
</table>
<h3 id="增"><a href="#增" class="headerlink" title="增"></a>增</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">KEY:CREATE</div><div class="line">E.g. : CREATE DATABASE dataname;//创建数据库</div><div class="line">E.g. : CREATE DATABASE IF NOT EXISTS dataname [DEFAULT];创建数据库，忽略是否存在</div><div class="line">E.g. : CREATE DATABASE IF NOT EXISTS dataname CHARACTER SET [=] utf-8/gbk;//创建时设定编码</div></pre></td></tr></table></figure>
<h3 id="删"><a href="#删" class="headerlink" title="删"></a>删</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">KEY:DROP</div><div class="line">E.g. : DROP DATABASE dataname;//删除数据库</div><div class="line">E.g. : DROP DATABASE IF EXISTS dataname;//删除数据库，忽略是否存在</div></pre></td></tr></table></figure>
<h3 id="改"><a href="#改" class="headerlink" title="改"></a>改</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">KEY:ALTER</div><div class="line">E.g. : ALTER DATABASE dataname CHARACTER SET [=] utf8;//更改数据库编码</div></pre></td></tr></table></figure>
<h3 id="查"><a href="#查" class="headerlink" title="查"></a>查</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">KEY:SHOW</div><div class="line">E.g. : SHOW DATABASES;//显示数据库</div><div class="line">E.g. : SHOW CREATE DATABASE dataname; //显示数据库结构</div><div class="line">E.g. : SHOW WARNINGS;//显示错误信息</div></pre></td></tr></table></figure>
<h2 id="数据表操作"><a href="#数据表操作" class="headerlink" title="数据表操作"></a>数据表操作</h2><ul>
<li>可选 约束</li>
<li>tablename AS tableasname //别名约束</li>
<li>UNIQUE //唯一约束</li>
<li>UNSIGNED //无符号位约束 无负数</li>
<li>NOT NULL //非空约束</li>
<li>DEFAULT value //默认值设定</li>
<li>PRIMARY KEY | PRIMARY KEY(colname)//主键约束</li>
<li>FOREIGN KEY (foreign_colname) REFERENCES PROVINCES (primary_colname); //外键约束</li>
<li>AUTO_INCREMENT //自动排序约束</li>
<li>FURSR|AFTER colname //插入字段顺序设定</li>
<li>/G 非表格显示记录</li>
</ul>
<h3 id="增-1"><a href="#增-1" class="headerlink" title="增"></a>增</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">KEY:CREATE</div><div class="line">E.g. : CREATE TABLE tablename(colname colproperty,...); //创建数据表，并指定至少一个字段</div><div class="line">E.g. : CREATE TABLE [IS NOT EXISTS] tablename(</div><div class="line"> colname colpeoperty constraints...,</div><div class="line"> colname colpeoperty constraints...,</div><div class="line"> )</div><div class="line">SELECT colname FROM tablename Condition;</div></pre></td></tr></table></figure>
<h3 id="删-1"><a href="#删-1" class="headerlink" title="删"></a>删</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">KEY:DROP</div><div class="line">E.g. : DROP TABLE tablename; //删除数据表</div></pre></td></tr></table></figure>
<h3 id="改-1"><a href="#改-1" class="headerlink" title="改"></a>改</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line">KEY:ALTER & RENAME</div><div class="line">E.g. : ALTER TABLE tablename ADD PRIMARY KEY(colname); //添加字段主键</div><div class="line">E.g. : ALTER TABLE tablename ADD colname colpeoperty; //添加字段约束</div><div class="line">E.g. : ALTER TABLE tablename ADD (colname colpeoperty,...); //添加多个字段的约束</div><div class="line">E.g. : ALTER TABLE tablename DROP colname,DROP ...; //删除一个或多个字段</div><div class="line">E.g. : ALTER TABLE tablename ALTER colname DROP DEFAULT; //删除字段默认值</div><div class="line">E.g. : ALTER TABLE tablename ALTER colname SET DEFAULT key; //设定字段默认值</div><div class="line">E.g. : RENAME TABLE old_tablename TO new_tablename; //更改表名</div><div class="line">E.g. : ALTER TABLE tablename MODIFY colname colproperty; //更改字段属性</div><div class="line">E.g. : ALTER TABLE tablename CHANGE old_colname new_colname colproperty; //更改字段名和属性，不更改属性写入一个原属性即可</div><div class="line">E.g. : ALTER TABLE tablename ADD colname colpeoperty ^,DROP colname,MODIFY colname colproperty;; //集添加删除更改字段的命令</div></pre></td></tr></table></figure>
<h3 id="查-1"><a href="#查-1" class="headerlink" title="查"></a>查</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">KEY:SHOW & DESC</div><div class="line">E.g. : DESC tablename; //查询表字段结构</div><div class="line">E.g. : SHOW COLUMNS FROM tablename; //查询表字段结构</div><div class="line">E.g. : SHOW CREATE TABLE tablename; //查询创建表字段结构</div></pre></td></tr></table></figure>
<h2 id="数据字段操作"><a href="#数据字段操作" class="headerlink" title="数据字段操作"></a>数据字段操作</h2><ul>
<li>INTO</li>
<li>var _SELECT; //定义一个查询变量</li>
<li>JOIN /CROSS JOIN/INNER JOIN 内连接 三个是等价的</li>
<li>LEFT [OUTER] 左外连接 内连接中左表数据</li>
<li>RIGHT [OUTER] JOIN 右外连接 内连接中右表数据</li>
<li>ON 关键字是设定连接条件，也可以使用WHERE替代 </li>
<li>WHERE 通常ON关键字用来设定连接条件，WHERE关键字用来进行结果集记录的过滤 </li>
</ul>
<h3 id="增-2"><a href="#增-2" class="headerlink" title="增"></a>增</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">KEY:INSERT</div><div class="line">E.g. : INSERT [INTO] tablename(colname,...) VALUE(field_key,...|DEFAULT);插入一行或多行数据到该表指定的多个字段，插入数据字段数目需与指定字段数目相同</div><div class="line">E.g. : INSERT tablename SET colname = field_key,...|DEFAULT; //插入一行或多行数据到该表指定字段，支持子查询；</div><div class="line">E.g. : INSERT tablename VALUES(field_key,...|DEFAULT),(....); //插入一行或多行数据到该表，插入数据字段数目需与表字段数目相同</div><div class="line">E.g. : INSERT tablename(colname,...) _SELECT ; //插入查询结果到该表</div></pre></td></tr></table></figure>
<h3 id="删-2"><a href="#删-2" class="headerlink" title="删"></a>删</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">KEY:DELETE </div><div class="line">E.g. : DELETE FROM tablename; //删除该表所有字段数据</div><div class="line">E.g. : DELETE FROM tablename WHERE <span class="built_in">where</span>_condition; //删除该表字段内达到表达式结果的数据</div><div class="line">E.g. : DELETE FROM tablename WHERE colname=colkey; //删除该表字段内的某一行数据</div><div class="line">E.g. : DELETE t1 FROM tablename AS t1 LEFT JOIN (SELECT colname,... FROM tablename GROUP BY colnametong HAVING COUNT(goods_name)>2) AS t2</div><div class="line"> ON t1.colname = t2.colname WHERE t1.colnameid >t2.colnameid;//多表删除，删除内表数据大于2重复的数据</div></pre></td></tr></table></figure>
<h3 id="改-2"><a href="#改-2" class="headerlink" title="改"></a>改</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">KEY:UPDATE\INNER JOIN</div><div class="line">E.g. : UPDATE tablename SET colname = field_key,[colname = field_key,...];//更改所有的字段值</div><div class="line">E.g. : UPDATE tablename SET colname = field_key,[colname = field_key,...] WHERE <span class="built_in">where</span>_condition; //更改指定条件判断记录的字段值</div><div class="line">E.g. : UPDATE tablename INNER JOIN othertablename ON colname = othercolname// 外键优化，真实外键多表连接 查询到两表中相同的值，如遇到相同字段名则用别名解决，ON后方是连接条件 </div><div class="line">SET colname = othercolname_id; //把相同的值替换成外键中的id号，达到索引,多表连接</div></pre></td></tr></table></figure>
<h3 id="查-2"><a href="#查-2" class="headerlink" title="查"></a>查</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div></pre></td><td class="code"><pre><div class="line">KEY:SELECT</div><div class="line">E.g. : SELECT USER(); //查询当前用户</div><div class="line">E.g. : SELECT VERSION(); //查询MYSQL版本</div><div class="line">E.g. : SELECT NOW(); //查询当前时间</div><div class="line">E.g. : SELECT condition; //查询表达式结果</div><div class="line">E.g. : SELECT username AS name FROM user;//给username起别名name </div><div class="line">E.g. : SELECT a.colname AS ascolname,u.colname,u.colname AS ascolname FROM tablename AS astablename, tablename2 AS astablename2 <span class="built_in">where</span> a.colname = u.colname;//多表别名查询</div><div class="line">E.g. : SELECT tablename.colname,... FROM tablename; //带表名的字段查找记录</div><div class="line">E.g. : SELECT tablename.colname,... FROM tablename WHERE <span class="built_in">where</span>_condition ><=! ANY (_SELECT) ; //子查询 ANY SOME最小值 ALL最大值 </div><div class="line">E.g. : SELECT colname [AS] temp_colname,... FROM tablename; //查找字段并且赋予字段别名后显示记录</div><div class="line">E.g. : SELECT colname,...|* FROM tablename; //普通查找字段或者所有字段的记录</div><div class="line">E.g. : SELECT t.colname,...,this.colname,... FROM tablename AS t //单表连接查询 左or右连接</div><div class="line"> LEFT JOIN this.tablename AS this ON t.colname = this.colname </div><div class="line">E.g. : SELECT colname,...,othercolname,... FROM tablename AS astablename //多表连接查询</div><div class="line"> INNER JOIN othertablename AS asothertablename ON astablename.colname = asothertablename.colname </div><div class="line"> INNER JOIN othertablename2 AS asothertablename2 ON astablename.colname2 = asothertablename.colname2 </div><div class="line"> ...;</div><div class="line">E.g. : _SELECT = SELECT colname,...|* FROM tablename WHERE <span class="built_in">where</span>_condition //对查询结果进行表达式条件判断后输出结果；</div><div class="line"> GROUP BY colname [(<span class="string">"Default"</span>ASC)|DESC] //对查询结果记录进行唯一分组</div><div class="line"> HAVING <span class="built_in">where</span>_condition //基于GROUP BY分组进行分组后的查询结果记录再进行一次表达式条件设定，输出达到条件后的记录</div><div class="line"> ORDER BY colname [(<span class="string">"Default"</span>ASC)|DESC],colname [(<span class="string">"Default"</span>ASC)|DESC] //对查询结果进行排序,如果有两个表达式，则在第一个表达式基础上再进行第二表达式的排序</div><div class="line"> LIMIT index_num|index_num,index_num2; //限制返回的记录数量，单参数以数值为索引，而双参数第一个参数是索引为0算起开始到数值处开始显示结果，第二个参数是显示数目的意思，跟ID号不冲突，以结果索引为主。</div><div class="line"> E.g. :LIMIT (2);//此时是从第一条记录到第二条记录 </div><div class="line"> E.g. :LIMIT (5,7);//此时是从第六条记录开始显示到十二条记录，也就是共显示7条记录</div></pre></td></tr></table></figure>]]></content>
<summary type="html">
<p>数据库的命令行操作语句总结<br>
</summary>
<category term="开发" scheme="http://bitamin.pw/categories/%E5%BC%80%E5%8F%91/"/>
<category term="MySQL" scheme="http://bitamin.pw/tags/MySQL/"/>
</entry>
<entry>
<title>新的开始</title>
<link href="http://bitamin.pw/2016/05/25/%E6%96%B0%E7%9A%84%E5%BC%80%E5%A7%8B/"/>
<id>http://bitamin.pw/2016/05/25/新的开始/</id>
<published>2016-05-25T05:33:59.000Z</published>
<updated>2016-05-25T12:57:20.000Z</updated>
<content type="html"><![CDATA[<p>全新的<strong>博客</strong>页面,第一篇测试文章。<excerpt in="" index="" |="" 博客=""><br><a id="more"></a></excerpt></p>
<p><the rest="" of="" contents="" |="" 余下全文=""><br>建立文章记录<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">hexo new 文章名</div></pre></td></tr></table></figure></the></p>
]]></content>
<summary type="html">
<p>全新的<strong>博客</strong>页面,第一篇测试文章。<excerpt in="" index="" |="" 博客=""><br>
</summary>
<category term="日志" scheme="http://bitamin.pw/categories/%E6%97%A5%E5%BF%97/"/>
<category term="开始" scheme="http://bitamin.pw/tags/%E5%BC%80%E5%A7%8B/"/>
</entry>
<entry>
<title>Hello World</title>
<link href="http://bitamin.pw/2016/01/01/hello-world/"/>
<id>http://bitamin.pw/2016/01/01/hello-world/</id>
<published>2016-01-01T07:04:49.000Z</published>
<updated>2016-12-23T09:48:05.000Z</updated>
<content type="html"><![CDATA[<p>Welcome to <a href="https://hexo.io/" target="_blank" rel="external">Hexo</a>! This is your very first post. Check <a href="https://hexo.io/docs/" target="_blank" rel="external">documentation</a> for more info. If you get any problems when using Hexo, you can find the answer in <a href="https://hexo.io/docs/troubleshooting.html" target="_blank" rel="external">troubleshooting</a> or you can ask me on <a href="https://github.com/hexojs/hexo/issues" target="_blank" rel="external">GitHub</a>.</p>
<h2 id="Quick-Start"><a href="#Quick-Start" class="headerlink" title="Quick Start"></a>Quick Start</h2><h3 id="Create-a-new-post"><a href="#Create-a-new-post" class="headerlink" title="Create a new post"></a>Create a new post</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ hexo new <span class="string">"My New Post"</span></div></pre></td></tr></table></figure>
<p>More info: <a href="https://hexo.io/docs/writing.html" target="_blank" rel="external">Writing</a></p>
<h3 id="Run-server"><a href="#Run-server" class="headerlink" title="Run server"></a>Run server</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ hexo server</div></pre></td></tr></table></figure>
<p>More info: <a href="https://hexo.io/docs/server.html" target="_blank" rel="external">Server</a></p>
<h3 id="Generate-static-files"><a href="#Generate-static-files" class="headerlink" title="Generate static files"></a>Generate static files</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ hexo generate</div></pre></td></tr></table></figure>
<p>More info: <a href="https://hexo.io/docs/generating.html" target="_blank" rel="external">Generating</a></p>
<h3 id="Deploy-to-remote-sites"><a href="#Deploy-to-remote-sites" class="headerlink" title="Deploy to remote sites"></a>Deploy to remote sites</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ hexo deploy</div></pre></td></tr></table></figure>
<p>More info: <a href="https://hexo.io/docs/deployment.html" target="_blank" rel="external">Deployment</a></p>
]]></content>
<summary type="html">
<p>Welcome to <a href="https://hexo.io/" target="_blank" rel="external">Hexo</a>! This is your very first post. Check <a href="https://hexo.
</summary>
</entry>
</feed>