如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

1. 此屬性列表請對照jQuery EasyUI 1.0.5.  
2.   
3. 屬性分為CSS片段和JS片段。  
4.   
5. CSS類定義：  
6. 1、div easyui-window        生成一個window窗口樣式。  
7.       屬性如下：  
8.                    1)modal:是否生成模態窗口。true[是] false[否]  
9.                    2)shadow:是否顯示窗口陰影。true[顯示] false[不顯示]  
10.   
11. 2、div easyui-panel           生成一個面板。  
12.        屬性如下:  
13.                  1)title:該標題文本顯示在面板頭部。  
14.                  2)iconCls:在面板上通過一個CSS類顯示16x16圖標。  
15.                  3)width:設置面板寬度。默認auto。  
16.                  4)height:設置面板高度。默認auto。  
17.                  5)left:設置面板左邊距。  
18.                  6)top:設置面板頂部位置。  
19.                  7)cls:在面板中增加一個Class類。  
20.                  8)headerCls:在面板頭部中增加一個Class類。  
21.                  9)bodyCls:在面板內容中增加一個Class類。  
22.                 10)style:在面板中增加一個指定樣式。  
23.                 11)fit:當True時設置該面板尺寸適合于它的父容器。默認false。  
24.                 12)border:當定義時顯示面板邊界。默認true。  
25.                 13)doSize:如果設置為True，該面板將重繪大小，并重建布局。默認true。  
26.                 14)collapsible:當定義時顯示可折疊面板的按鈕。默認false。  
27.                 15)minimizable:當定義時顯示最小化面板的按鈕。默認false。  
28.                 16)maximizable:當定義時顯示最大化面板的按鈕。默認false。  
29.                 17)closable:當定義時顯示關閉面板的按鈕。默認false。  
30.                 18)tools:自定義工具欄，每個工具都包含兩個屬性:iconCls、handler。  
31.                 19)collapsed:當定義時該面板初始化時處于收縮狀態。默認false。  
32.                 20)minimized:當定義時該面板初始化時處于最小化狀態。默認false。  
33.                 21)maximized:當定義時該面板初始化時處于最大化狀態。默認false。  
34.                 22)closed：當定義時該面板初始化時處于關閉狀態。默認false。  
35.                 23)href:一個url，加載遠程數據并顯示在面板中。  
36.                 24)loadingMessage:當加載遠程數據時，在面板中顯示一個消息。默認Loading…  
37.              事件如下:  
38.                  1)onLoad:當遠程數據加載完畢后激活。  
39.                  2)onBeforeOpen:當面板打開前激活。  
40.                  3)onOpen:當面板打開后激活。  
41.                  4)onBeforeClose:當面板關閉前激活。  
42.                  5)onClose:當面板關閉后激活。  
43.                  6)onBeforeDestroy:當面板銷毀前激活。  
44.                  7)onDestroy:當面板銷毀后激活。  
45.                  8)onBeforeCollpase:當面板收縮前激活。  
46.                  9)onCollapse:當面板收縮后激活。  
47.                 10)onBeforeExpand:當面板擴展前激活。  
48.                 11)onExpand:當面板擴展后激活。  
49.                 12)onResize:當面板重繪后激活。  
50.                       width:新建的外部寬度  
51.                       height:新建的外部高度  
52.                 13)onMove:當面板移動后激活。  
53.                      left:左側新位置。  
54.                      top:頂部新位置。  
55.                 14)onMaximize:當窗口最大化后激活。  
56.                 15)onRestore:當窗口恢復到原來大小時激活。  
57.                 16)onMinimize:當窗口最小化后激活。  
58.              方法如下：  
59.                  1)options:返回options屬性。  
60.                  2)panel:返回面板對象。  
61.                  3)header:返回面板頭部對象。  
62.                  4)body:返回面板主體對象。  
63.                  5)setTitle:設置頭部的標題文本。  
64.                  6)open:當forceOpen參數設置為true時，面板打開時繞過onBeforeOpen回調函數。  
65.                  7)close:當forceClose參數設置為true時，該面板關閉時繞過onBeforeClose回調函數。  
66.                  8)destroy:當forceDestroy參數設置為true時該面板銷毀時繞過onBeforeDestroy回調函數。  
67.                  9)refresh:當href屬性設置后刷新該面板以加載遠程數據。  
68.                 10)resize:設置面板的大小和布局。該options對象包含以下屬性:  
69.                      width：新的面板寬度。  
70.                      height：新的面板高度。  
71.                      left：新的面板左側位置。  
72.                      top：新的面板頂部位置。  
73.                 11)move:移動面板到一個新的位置。該options對象包含以下屬性：  
74.                      left：新的面板左側位置。  
75.                      top：新的面板頂部位置。  
76.   
77. 3、a  easyui-linkbutton                    生成鏈接類型的按鈕。  
78.   
79.        屬性如下：  
80.             1)disabled:當True時禁用該按鈕。默認false。  
81.             2)plain:當True時顯示一個普通效果。默認false。  
82.   
83. 4、input/textarea easyui-validatebox       生成字段驗證。  
84.               屬性如下：  
85.               1)required:true[必需] false[不必需] 默認false  
86.               2)validType:  
87.                  a、length[a,b] 字段長度控制在a至b之間。  
88.                  b、email       驗證Email。  
89.                  c、url      驗證網絡地址。  
90.               3)missingMessage：當文本時出現空時彈出該工具提示，系統有默認[英文]，自定義可覆蓋它。  
91.               4)invalidMessage：當文本內容無效后彈出該工具提示，系統有默認[英文]，自定義可覆蓋它。  
92.   
93. 5、ul easyui-tree         生成一個樹形結構。  
94.              屬性如下：  
95.               1)url:一個獲取遠程數據的地址。  
96.               2)animate:當展開或折疊節點時是否定義動畫效果。true[是] false[否] 默認false  
97.              節點屬性如下：  
98.              1)text:節點的顯示文本。  
99.              2)id:節點ID，對于加載遠程數據時非常重要。  
100.              3)state:節點狀態，'open'或'closed'，默認為'open'。當設置為'關閉'，該節點包含子節點，并將遠程站點加載它們(并非觸發再加載)。  
101.              4)attributes:為節點添加自定義屬性。  
102.              5)children:以數組節點的方式定義一些字節點。  
103.              事件如下：  
104.                  1)onClick:  
105.                     當用戶點擊一個節點時激活，該節點參數包含如下屬性：  
106.                     id：節點ID  
107.                     text:節點文本  
108.                     attributes:節點自定義屬性。  
109.                     target:目標點擊的DOM對象。  
110.               2)onLoadSuccess:  
111.                    當數據成功加載數據時激活，該參數跟jQuery.ajax的'success'函數效果相同。  
112.               3)onLoadError:  
113.                   當數據加載數據失敗時激活，該參數跟jQuery.ajax的'error'函數效果相同。  
114.              方法如下:  
115.                  1)reload:重新加載樹數據。  
116.                  2)getSelected:獲取選中的節點并返回它，如果沒有選擇節點將返回null。  
117.                  3)collapse:折疊一個節點，該目標參數是該節點的DOM對象。  
118.               4)expand:展開一個節點，該目標參數是該節點的DOM對象。    
119.               5)append:在一個父節點追加一些子節點。  
120.                     param有兩個屬性：  
121.                     parent:DOM對象，把它作為父節點追加(它們)。  
122.                     data:array，或者節點數據。  
123.               6)remove:刪除它以及它以下的子節點，該目標參數是該節點的DOM對象。   
124.   
125. 6、table easyui-datagrid                   生成一個表格。  
126.              屬性如下：  
127.                  1)title:該DataGrid面板的標題文本。  
128.                  2)iconCls:一個CSS類，將提供一個背景圖片作為標題圖標。  
129.                  3)border：當true時，顯示該datagrid面板的邊框。  
130.                  4)width:面板寬度，自動列寬。  
131.                  5)height:面板高度，自動列高。  
132.                  6)columns:該DataGrid列配置對象，查看column屬性可獲取更多信息。  
133.                  7)frozenColumns:跟Columns屬性相同，但是這些列將會被固定在左邊。  
134.                  8)striped:當true時，單元格顯示條紋。默認false。  
135.                  9)method:通過該方法類型請求遠程數據。默認post。  
136.                 10)nowrap:當true時，顯示數據在同一行上。默認true。  
137.                 11)idField:說明哪個字段是一個標識字段。  
138.                 12)url:一個URL，從遠程站點獲取數據。  
139.                 13)loadMsg:當從遠程站點加載數據時，顯示一個提示信息。默認"Processing,please wait …"。自定義覆蓋。  
140.                 14)pagination:當true時在DataGrid底部顯示一個分頁工具欄。默認false。  
141.                 15)rownumbers:當true時顯示行號。默認false。  
142.                 16)singleSelect:當true時只允許當前選擇一行。默認false。  
143.                 17)fit:當true時，設置大小以適應它的父容器。默認false。  
144.                 18)pageNumber:當設置分頁屬性時，初始化的頁碼編號。默認從1開始  
145.                 19)pageSize:當設置分頁屬性是，初始化的頁面大小。默認10行  
146.                 20)pageList:當設置分頁屬性時，初始化頁面的大小選擇清單。默認[10,20,30,40,50]  
147.                 21)queryParams:當請求遠程數據時，也可以發送額外的參數。  
148.                 22)sortName:定義哪列可以排序。  
149.                 23)sortOrder:定義列的排列順序，只能是'asc'或'desc'。默認asc。  
150.              Column屬性如下：  
151.                  1)title:該列標題文本。  
152.                  2)field:該列對應的字段名稱。  
153.                  3)width：列寬。  
154.                  4)rowspan:說明該單元格需要多少行數。  
155.                  5)colspan:說明該單元格需要多少列數。  
156.                  6)align:說明Column數據的對齊方式。'left'，'right'，'center' 都可以使用。  
157.                  7)sortable:當true時，允許該列進行排序。  
158.                  8)checkbox:當true時，允許該列出現checkbox。  
159.              事件如下：  
160.                  1)onLoadSuccess:當遠程數據加載成功是激活。  
161.                  2)onLoadError:當遠程數據加載發現一些錯誤時激活。  
162.                  3)onClickRow:當用戶點擊某行時激活，參數包含：  
163.                     rowIndex: 點擊的行索引，從0開始。  
164.                     rowData: 點擊行時對應的記錄。  
165.                 4)onDblClickRow:當用戶雙擊某行時激活，參數包含：  
166.                     rowIndex: 點擊的行索引，從0開始。  
167.                     rowData: 點擊行時對應的記錄。  
168.                 5)onSortColumn:當用戶對某列排序時激活，參數包含：  
169.                    sort:排序字段名稱。  
170.                    order:排序字段類型。  
171.                 6)onSelect:當用戶選擇某行時激活，參數包含:  
172.                    rowIndex: 點擊的行索引，從0開始。  
173.                    rowData: 點擊行時對應的記錄。  
174.                 7)onUnselect:當用戶取消選擇某行時激活，參數包含:  
175.                     rowIndex: 點擊的行索引，從0開始。  
176.                     rowData: 點擊行時對應的記錄。  
177.              方法如下：  
178.                  1)options:返回選擇對象。  
179.                  2)resize:重調大小，生成布局。  
180.                  3)reload:重新加載數據。  
181.                  4)fixColumnSize:固定列大小。  
182.                  5)loadData:加載本地數據，過去的行會被刪除。  
183.                  6)getSelected:返回第一個選中行的記錄，若未選返回null。  
184.                  7)getSelections:返回選中的所有行，當沒有選擇記錄時將返回空數組。  
185.                  8)clearSelections:清除所有選項的選擇狀態。  
186.                  9)selectRow:選擇一行，行索引從0開始。  
187.                 10)selectRecord:通過傳遞一個ID值參數，選擇一行。  
188.                 11)unselectRow:取消選擇一行。  
189.   
190. 7、div easyui-tabs                         生成一個tab容器。  
191.              屬性如下：  
192.                  1)width:容器寬度，自動列寬。  
193.                  2)height:容器高度，自動列高。  
194.                  3)idSeed:該根id衍生成標簽面板DOM id屬性。默認0  
195.                  4)plain：當true時，該Tab渲染不使用容器背景圖片。默認false  
196.                  5)fit:當true時，設置該Tab大小以適應它的父容器。默認false  
197.                  6)border:當true時，顯示該Tab邊框。  
198.                  7)scrollIncrement:  
199.                  8)scrollDuration:  
200.              事件如下：  
201.                  1)onLoad:當一個ajax Tab面板需要加載遠程數據時激活。該參數跟jQuery.ajax的'success'函數效果相同。  
202.                  2)onSelect:當用戶選擇一個Tab面板時激活。  
203.                  3)onClose:當用戶關閉一個Tab面板時激活。  
204.              方法如下:  
205.                  1)resize:重繪該Tab容器的布局。  
206.                  2)add:新增加一個Tab面板，該選項參數是一個配置對象，看Tab面板屬性可獲取更多信息。  
207.                  3)close：關閉該Tab面板，標題參數顯示你要關閉的對象。  
208.                  4)select:選擇一個Tab面板。  
209.                  5)exists:如果該Tab面板存在即顯示。  
210.              Tab面板屬性如下：  
211.                  1)id:該Tab面板DOM id屬性。  
212.                  2)text:該Tab面板標題文本。  
213.                  3)content:該Tab面板內容。  
214.                  4)href:一個URL，加載遠程內容以填充Tab面板。  
215.                  5)cache:當true時，緩存Tab面板，當href 屬性設置后有效。默認true  
216.                  6)icon:增加一個CSS class圖標以顯示在Tab面板的標題旁。  
217.                  7)closable:當true時，該Tab面板將顯示可關閉按鈕，點擊能關閉該Tab面板。默認false  
218.                  8)selected:當true時，該Tab面板將被選中。默認false  
219.                  9)width:面板寬度，自動列寬。  
220.                 10)height:面板高度，自動列高。  
221.   
222. 8、div menu-sep              生成一個菜單分隔線。  
223.   
224. 9、a easyui-splitbutton         生成一個菜單列。  
225.   
226. 10、div easyui-accordion        生成手風琴式下拉框。繼承自panel  
227.   
228. 11、select easyui-combobox       生成一個組合下拉框。  
229.              屬性如下：  
230.                  1)width:容器寬度，自動列寬。  
231.                  2)listWidth:該組合下拉框的寬度。  
232.                  3)listHeight:該組合下拉框的高度。  
233.                  4)valueField：把該基礎數據的值名稱綁定到組合下拉框中[value]。  
234.                  5)textField:把該基礎數據的字段名稱綁定到組合下拉框中[text]。  
235.                  6)editable:當True時，可直接在文字域中鍵入文本。默認true。  
236.                  7)url:一個URL，從遠程加載列表數據。  
237.              事件如下：  
238.                  1)onLoadSuccess:當遠程數據加載成功是激活。  
239.                  2)onLoadError:當遠程數據加載發現一些錯誤時激活。  
240.                  2)onSelect:當用戶選擇一個列表選項時激活。  
241.                  3)onChange:當該字段的值發生改變時激活。  
242.              方法如下:  
243.                  1)select: 在下拉列表中選擇一個值。  
244.                  2)setValue: 設置指定值到該字段。在'param' 參數可以是一個字符串或者一個JS對象。注:JS對象包含的屬性對應valueField和TextField兩個屬性。  
245.                  3)getValue: 獲取該字段的值。   
246.                  4)reload:   重新請求遠程列表數據。  
247.   
248. 12、select easyui-combotree      生成一個組合樹形框。  
249.             屬性如下：  
250.             1)width:容器寬度，自動列寬。  
251.             2)treeWidth:該樹形下拉框的寬度。  
252.             3)treeHeight:該樹形下拉框的高度。  
253.             4)url:一個URL，從遠程加載樹形數據。  
254.              事件如下：  
255.              1)onSelect:當用戶選擇一個樹形節點時激活。  
256.              2)onChange:當該字段的值發生改變時激活。  
257.              方法如下:  
258.              1)setValue: 設置指定值到該字段。在'param' 參數可以是一個樹形節點ID值或者一個JS對象。注:JS對象包含的屬性對應id和text兩個屬性。  
259.              2)getValue: 獲取該字段的值。   
260.              3)reload:   重新請求遠程列表數據。  
261.   
262. 13、body[div] easyui-layout      生成一個布局。  
263.             屬性如下：  
264.             1)title:該面板標題文本。  
265.             2)region:定義布局面板的位置，包含下列值:north,south, east, west, center。  
266.             3)border:當True時顯示布局面板的邊框。默認為True。  
267.             4)split: 當True時顯示一個分割符以使用戶改變面板的尺寸。默認false。  
268.             5)icon:一個圖標CSS類，在面板頭部顯示一個圖標。   
269.             6)href:一個URL,以從遠程站點加載數據。               
270.   
271. 14、div easyui-menu        生成一個菜單。  
272.             屬性如下：  
273.             1)zIndex: Menu z-index樣式。注釋：z-index 屬性設置元素的堆疊順序。   
274.             2)left:菜單左起位置。默認0。  
275.             3)top: 菜單頂部位置。默認0。  
276.             4)href:當點擊菜單項時能在當前瀏覽器窗口顯示不同的網址。  
277.             事件如下:  
278.             1)onShow:激活后顯示菜單。  
279.             2)onHide:激活后隱藏菜單。  
280.             方法如下:  
281.             1)show:在指定的位置顯示一個菜單。該位置上包含兩個參數：  
282.                 left:新的左起位置。  
283.                top:新的頂部位置。  
284.             2)hide:隱藏一個菜單。  
285.   
286. 15、a easyui-menubutton       生成一個菜單按鈕。   
287.             屬性如下：  
288.             1)disabled:當True時禁用該按鈕。默認false。  
289.             2)plain:當True時顯示一個普通效果。默認false。  
290.             3)menu:一個選擇器名稱，用來創建相應的菜單。  
291.             4)duration: 當懸停該按鈕時，定義菜單的持續顯示時間，單位為毫秒。默認100。  
292.   
293. 16、input easyui-numberbox      生成一個數字輸入框。  
294.             選項如下:  
295.             1)min:允許的最小值。當輸入值小于最小值時，顯示最小值。  
296.             2)max:允許的最大值。當輸入值大于最大值時，顯示最大值。  
297.             3)precision:分隔符后能的小數點位數。整數默認會追加小數點位數。   
298.   
299.   
300. JS定義：  
301. 1、 .window            生成一個window窗口。  
302.   
303. 2、 .tree                  生成一個樹形結構。  
304.   
305. 3、 .datagrid           生成一個表格。  
306.   
307. 4、 .combobox        生成一個組合下拉框。  
308.   
309. 5、 .combotree       生成一個組合樹形框。  
310.   
311. 6、 .dialog               生成一個對話框。它繼承自window  
312.       私有屬性如下：  
313.                  1)title:該對話框標題文本。默認"New Dialog"。  
314.                  2)collapsible:當True時可顯示折疊按鈕。默認false。  
315.                  3)minimizable:當True時可顯示最小化按鈕。默認false。  
316.                  4)maximizable:當True時可顯示最大化按鈕。默認false。  
317.                  5)resizable:當True時能重繪對話框大小。默認false。  
318.                  6)toolbar:該工具欄置于對話框的頂部，每個工具欄包含:text, iconCls, disabled, handler等屬性。  
319.                  7)buttons:這個按鈕置于對話框的底部，每個按鈕包含:text, iconCls, handler等屬性。  
320.   
321. 7、 .draggable          生成一個可自由拖動的塊。  
322.       屬性如下:  
323.               1)handle:選擇"#id"進行拖動。  
324.               2)disabled:當True時停止自由拖動。默認false。  
325.               3)edge:開始拖動拖動塊時的寬度。默認0。  
326.               4)axis:當拖動塊移動時定義軸，可選值是'v'或者'h',當超出'v'和'h'的方位時將設置為null。  
327.      事件如下：  
328.                  1)onStartDrag:當目標對象開始拖動時激活。  
329.                  2)onDrag:在拖動期間激活。返回false將不會實際拖動它(的位置)。  
330.                  3)onStopDrag:當目標對象停止拖動時激活。  
331.   
332. 8、 .linkbutton          生成一個鏈式按鈕。  
333.   
334. 9、 .messager           生成一個消息框。  
335.              選項如下：  
336.                  1)ok:顯示確定按鈕文本。  
337.                  2)cancel:顯示取消按鈕文本。   
338.              方法如下:  
339.              1)show:在屏幕的右下角出現一個消息框。該選項參數是一個配置對象，它包括：  
340.                 showType:定義消息框顯示的模式，可選值包括:null,slide,fade,show.默認slide.  
341.                 showSpeed: 定義消息框完成顯示的時間。默認600毫秒。  
342.                 width: 定義消息框的寬度。默認250。  
343.                 height:定義消息框的高度。默認100。  
344.                 msg:定義消息框顯示的文本。  
345.                 title: 在消息框面板頭部顯示標題文本。  
346.                 timeout: 如果定義為0,消息框將不會自動關閉，除非用戶手動關閉它。如果定義為非0值，消息框會在超時結束時自動關閉它。單位毫秒。  
347.              2)alert:顯示一個打印窗口。它的參數如下:  
348.                 title: 在頭部顯示標題文本。  
349.                 msg:顯示文本內容。  
350.                 icon: 顯示圖標?？蛇x值:error,question,info,warning。  
351.                 fn: 當窗口關閉后觸發回調函數。  
352.              3)confirm:顯示一個包含確定和取消按鈕的確認消息框。參數包括:  
353.                 title:在頭部顯示標題文本。  
354.                 msg: 顯示文本內容。  
355.                 fn(b):回調函數，當用戶點擊OK按鈕，返回True,才會處理該函數，其它按鈕返回false,不處理。  
356.              4)prompt:顯示一個消息框，包含OK和Cancel按鈕并提示用戶輸入一些文本。參數包括:  
357.                 title:在頭部顯示標題文本。  
358.                 msg:顯示文本內容。  
359.                 fn(val):該回調函數處理用戶輸入的參數值。   
360.   
361. 10、 .pagination         生成一個頁碼工具條。  
362.            屬性如下：  
363.             1)total:當分頁條創建后設置的記錄數。默認1。  
364.             2)pageSize:頁面大小。默認10。  
365.             3)pageNumber:當分頁創建后顯示的頁碼。默認1。  
366.             4)pageList:用戶能更改頁面的大小。您也可以改變該屬性定義的默認大小。默認[10,20,30,50]。  
367.             5)loading:定義是否正在加載。默認false。  
368.             6)buttons:定義自定義按鈕，每個按鈕都包含兩個屬性:  
369.                iconCls: 該CSS類將顯示一個背景圖標。  
370.                handler: 當按鈕點擊時觸發一個處理函數。  
371.             7)beforePageText:當輸入組件前顯示一個標簽文本。  
372.             8)afterPageText:當輸入組件后顯示一個標簽文本。  
373.             9)displayMsg:顯示一個頁面信息。  
374.            方法如下:  
375.             1)onSelectPage:當用戶選擇一個新頁面時激活。該回調函數包括兩個參數:  
376.                pageNumber: 該新頁面的頁碼。  
377.                pageSize:該新頁面的大小。  

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

1.總結

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

#@author Q群542110741 # -*- coding:utf-8 -*- import requests from lxml import etree

header = { 'User-Agent':'Mozilla/5.0 (Windows NT 6.1; WOW64; rv:60.0) Gecko/20100101 Firefox/60.0', 'Host':'soccer.hupu.com', 'Referer':'https://soccer.hupu.com/'}
i = 0 while 1: #構建循環頁面翻頁 url = 'https://soccer.hupu.com/home/latest-news?league=世界杯&page=' i += 1 #獲取json數據，一頁20個 html = requests.get(url+str(i),headers=header).json()['result'] for info in html:
        time_r = info['time']#發布時間 title = info['title']#標題 url_r = info['url']#新聞鏈接 origin = info['origin']#來源 print(title)
        print('發布時間:',time_r,' '*5,'來自：',origin)
        head = header
        head['Host'] = 'voice.hupu.com'#更改header中Host參數 html_r = requests.get(url_r,headers=head)#獲取新聞詳情 html_r.encoding = 'utf-8'#編碼格式指定 #獲取div下的所有文本 datas = etree.HTML(html_r.text).xpath('//div[@class="artical-content-read"]')[0].xpath('string(.)').strip()
        print('\n'+'內容：'+'\n'*2,datas,'\n') #可由用戶手動退出循環 if input('任意鍵繼續，“q”退出') in ['q', 'Q']:
            exit()
    


        

            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
        

    

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

一、WEB概述 (!!掌握web發展過程圖、B/S和C/S架構的特點)
    B/S: Browser-Server 瀏覽器服務器模型 WEBQQ 網頁游戲
        優點: 不需要下載客戶端程序, 使用瀏覽器可以直接訪問. 程序的升級操作是在服務器端進行的. 瀏覽器只需要刷新頁面就可以看到升級后的效果
        缺點: 瀏覽器具有一定的局限性, 頁面的展示能力仍然是很差. 所有的頁面數據都需要從服務器實時的獲取, 所以對網速的依賴很高
    C/S: Client-Server 客戶端服務器模型 QQ LOL
        優點: 客戶端可以任意的設計, 頁面的展示能力就可以很強. 由于大量的資源都已經保存在了客戶端, 和服務器交互的僅僅是一些變化的數據, 所以對網速的依賴很低
        缺點: 第一次使用時需要下載客戶端程序, 一旦程序需要升級操作, 所有的客戶端程序都需要升級. 在有些場景中是不能被接受的.
        
二、HTML 
    1.HTML是什么
        超文本標記語言 最基礎的網頁語言 W3C
        HTML不是一門編程語言 而是一門標記語言
        HTML是用標記(標簽/元素)來描述網頁內容的
        HTML是文檔的一種
        
    2.html的結構 (掌握)
        <!DOCTYPE HTML>
        <HTML>
            <HEAD></HEAD>
            <BODY></BODY>
        </HTML>
        <!DOCTYPE HTML>用來指定當前頁面所遵循的html的版本
        頭部分用來存放html頁面的基本屬性信息 優先被加載
        體部分用來存放頁面數據,是可見的頁面內容
        
        <title></title>指定網頁的標題
        <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />其中的charset的值用來指定瀏覽器用什么編碼解析當前頁面
        
    3.html語法 (掌握)
        html標簽分為開始標簽和結束標簽,如果標簽內沒有修飾的內容, 開始標簽和結束標簽可以合并為一個自閉標簽
        如:    <br/> <hr/>
        
        標簽通常都可以具有屬性 屬性與屬性值用"="連接,屬性的值可以用雙引號、單引號引起來或者不用引號 一般會用雙引號引起來
                        
        <!-- html的注釋 -->
        
        html中多個連續的空白字符(制表符,空格,換行)默認會合并為一個空格來顯示
        如果非要輸入空格,可以用轉義字符來替代 &nbsp;
        如果非要輸入換行,可以用 <br/> 來替代
        
    4.font標簽 -- 用來指定文本的字體/大小/顏色 (了解)
        size:指定字體大小 范圍是 1~7 默認值為3
        color:指定字體顏色 
            值可以指定為顏色名 如red 
            或 十六進制的顏色值 如#000000 
            或 rgb三原色值 如rgb(255,255,255)
        face:指定字體 中文默認是宋體
        
    5.標題標簽 -- 指定特定樣式字體的一組標簽 (掌握)
        <h1>一級標簽</h1>
        <h2>二級標簽</h2>
        <h3>三級標簽</h3>
        <h4>四級標簽</h4>
        <h5>五級標簽</h5>
        <h6>六級標簽</h6>
        屬性:
            align:指定文本的排列
                left 
                center 
                right 
                justify
                
    6.轉義字符 (掌握)
        <    &lt;
        >    &gt;
        "    &quot;
        '    &apos;
        空格 &nbsp;
        
    7.列表標簽
        (1)定義列表 (了解)
            <dl> 定義一個定義列表
            <dt> 定義定義列表中的標題
            <dd> 定義定義列表中的項
                
        (2)有序列表 (了解)
            <ol> 定義一個有序列表
            <li> 定義列表中的項
            屬性:
                type:定義項目符號的類型
                    A a I i 1(默認)
                start:定義項目符號的起始值
                
        (3)無序列表 (掌握)
            <ul> 定義一個無序列表
            <li> 定義列表中的項
            屬性:
                type:定義項目符號的類型
                    disc square circle
            
    8.img標簽 -- 圖像標簽 (!!掌握)
        <img src="圖片的路徑" alt="圖像的替代文本"/>
        必選屬性:
            src:圖片的路徑
            alt:圖像的替代文本
        可選屬性:
            width:寬度 px %
            height:高度 px %
            border:邊框的寬度 px
    9.map標簽 (了解)
        為圖像綁定可點擊區域的圖像映射
        <map name="" id="">
            <area shape="circle" coords="640,410,64" href="#" />
        </map>
        屬性:
            shape: 指定區域的形狀
            coords: 指定區域的坐標
            href: 點擊區域后跳轉資源的URL
            
    10.超鏈接 -- <a> 錨 (!!掌握)
        用于指向當前位置以外的資源
        (1) 用于創建指向另外一個文檔的超鏈接
        (2) 用于在當前頁面的不同位置之間進行跳轉
        重要屬性:
            href: 所指向資源的URL
            name: 指定錨的名字
            target: 指定瀏覽器打開目標URL的方式。
                _blank    在新窗口中打開目標url
                _self    在當前窗口中打開目標url

    11.表格標簽 -- <table> (!!!掌握)
        <table> 定義一個HTML表格
        <tr>    定義表格中的行
        <td>    定義表格中的單元格
        <th>    定義表格中的表頭
        table的重要屬性:
            border 邊框寬度
            cellspacing 單元格之間的空白
            cellpadding 邊框與單元格內容之間的距離
            bgcolor 背景顏色
            bordercolor 邊框顏色
            width 寬度
            align 對齊方式
        tr重要屬性:
            align 對齊方式
            bgcolor 背景顏色
        th/td重要屬性:
            align 對齊方式
            bgcolor 背景顏色
            width 寬度
            height 高度
            colspan 可橫跨的列數
            rowspan 可豎跨的行數
        <caption> 定義表格的標題
        <thead>
        <tfoot>
        <tbody>(可以出現多次).
            
        三個標簽要么都沒有,要么就必須一起使用,并且出現的順序必須是thead,tfoot,tbody 
        如果沒有使用這三個標簽, 那么<table>里面所有的內容都會隱含在一個隱藏的<tbody>標簽內
        
    12.框架標簽 (了解)
        <frameset>
        <frame>
        框架標簽需要寫在head和body的中間
        
        <frameset>屬性:
            rows 定義框架集中行的數目和尺寸
            cols 定義框架集中列的數目和尺寸
        <frame>屬性:
            src 定義目標文檔的URL
            noresize 規定無法調整框架的大小
            frameborder 是否顯示框架周圍的邊框
            name 框架的名字
            target 打開目標URL的方式
                _blank 在新窗口中打開目標url
                _self 在當前窗口打開目標URL
                _parent 在父窗口中打開目標URL
                _top 打開時忽略所有框架在當前頁面打開url
                framename
        <iframe>
            創建包含另一個文檔的行內框架
            <iframe>標簽永遠不要自閉!! 可以在標簽內部存放提示文本 如果瀏覽器不支持iframe 該文本會顯示
            屬性:
                src
                width
                height
        
    13.表單 (!!!掌握)
        (1)瀏覽器向服務器發送數據的方式, 有兩種
            a)利用超鏈接向服務器發送數據 -- 請求參數
                在超鏈接的后面拼接上要發送的請求參數, 鏈接和請求參數之間用?分割, 參數名和參數值用 = 連接, 多個參數之間用 & 分割, 可以存在多個同名的參數

            b)利用表單向服務器發送數據
                利用HTML中的<form>標簽以及一些表單項標簽, 用戶可以輸入數據, 通過提交表單發送數據給服務器

        (2)form
            必須存在的屬性:
                action: 指定表單發送的目標URL地址

            可選的屬性:
                method: 指定以何種方式發送表單

            http協議指定了7種提交方式, 其中5種不用, 只用GET提交和POST提交

            只有使用表單并且明確的指定提交方式為post時(也就是設置method="POST")才是POST提交，其他提交都是GET提交．

            GET提交和POST提交的區別：
                主要區別體現在數據傳輸方式的不相同
                a)GET提交: 請求參數會賦在地址欄后進行傳輸
                    這種方式發送的數據量有限, 最大不超過1kb(4kb)
                    數據顯示在地址欄, 安全性差
                    
                b)POST提交: 請求參數在底層流中傳輸
                    這種方式發送的數據量無限制
                    地址欄上看不到數據, 比較安全
                        
    14.表單中的項 (!!!掌握)
        表單中可以有多個輸入項，輸入項必須有name屬性才可以被提交，如果輸入項沒有name屬性，則表單在提交時會忽略它
        (1)<input> 輸入框
            重要屬性:
                type屬性
                    文本框 text 輸入的文本信息直接顯示在框中

                    密碼框 password 輸入的文本以圓點或者星號的形式顯示

                    單選框 radio 進行單項的選擇 如性別選擇  多個radio的name屬性相同會被當作一組來使用  必須用value為選項指定提交的值

                    復選框 checkbox 進行多項選擇，愛好的選擇。 多個checkbox具有相同的name屬性時會被當作一組來使用 必須用value為選項指定提交的值

                    隱藏字段 hidden 如果有一些信息，不希望用戶看見，又希望表單能夠提交，就可以用隱藏字段隱含在表單中 

                    提交按鈕 submit 實現表單提交操作的按鈕 可以通過value屬性指定按鈕顯示的文字 

                    重置按鈕 reset 重置表單到初始狀態 

                    按鈕 button 普通按鈕, 沒有任何功能 需要配合JavaScript為按鈕指定具體的行為?？梢杂胿alue屬性指定按鈕顯示的文字。

                    文件上傳項 file 提供選擇文件進行上傳的功能。

                    圖像 image 利用一張圖片替代提交按鈕的功能, 不常用 
                    
                name屬性
                    表單中可以有多個輸入項，輸入項必須有name屬性才可以被提交，如果輸入項沒有name屬性，則表單在提交時會忽略它. 另外name屬性的值是可以重復的
                    
                value屬性 可以給input輸入框設置一個初始值

                readonly屬性
                    使當前輸入項變為只讀,不能修改,但是提交時仍會被提交
                    
                disabled
                    使當前輸入項不可用,不能修改值,也不會被提交 

                size屬性
                    指定當前輸入框的寬度

                checked屬性
                    指定單選框/復選框被選中

        (2)<textarea> 文本域
            屬性:
                rows 指定文本域的行數(高度)
                cols 指定文本域的列數(寬度)
                readonly 只讀
                disabled 禁用
    
        (3)<select> <option>
            select 提供下拉選擇功能
            option 下拉選框中的選項 可以用value屬性指定提交的值,如果不指定,將會提交標簽內的文本
            重要屬性:
                name: 下拉列表的名稱
                size: 設置下拉選項中可見選項的個數
                disabled 禁用下拉選框
                multiple 是否支持多選
        
        (4)<fieldset><legend> (了解 可以不練習)
            <fieldset> 對表單中的表單項進行分組
            <legend> 為分組設置標題
    
    15.其他標簽 (了解 可以不練習)
        <marquee> 
            屬性:
                scrollAmount 設置文字滾動速度 默認值是6
                direction 滾動方向 left right down up
                behavior 滾動行為 scroll alternate slide

        <pre>
            可以將文本內容按照代碼區的樣子顯示在頁面上

        <b> 加粗
        <i> 斜體
        <u> 下劃線 
        <s> 刪除線 

        <em> 強調
        <strong> 更加強烈的強調
        <sub> 下標
        <sup> 上標
        
    16.注冊表單練習 (!!!掌握 自己能夠獨立的做出來)
        略

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

在web開發中，轉發與重定向有很大的區別。

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>login</title> </head> <body> <form action="myServlet" method="post"> name :<input type="text" name="username"/><br/> <input type="submit" value="submit"/> </form> </body> </html>
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

    

public class MyServlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username = (String)request.getParameter("username");
        request.setAttribute("welcome", "welcome!!!");
        RequestDispatcher rd = request.getRequestDispatcher("welcome.jsp");
        rd.forward(request,response);
    }
}
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

    

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>welcome</title> </head> <body> <%=request.getParameter("username")%> <br/> <%=request.getAttribute("welcome") %> </body> </html>
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

    

public class MyServlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username = (String)request.getParameter("username");
        request.setAttribute("welcome", "welcome!!!"); //      RequestDispatcher rd = request.getRequestDispatcher("welcome.jsp"); //      rd.forward(request,response); response.sendRedirect("welcome.jsp");
    }
}
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

    

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>login</title> </head> <body> <!--這里改成了絕對地址  --> <form action="/myServlet" method="post"> name :<input type="text" name="username"/><br/> <input type="submit" value="submit"/> </form> </body> </html>
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

        

            13
        

    

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

1.JavaScript 簡介：

JavaScript是互聯網上最流行的腳本語言，所有現代的HTML都使用JavaScript。既然是腳本語言，那么它的特點就有一下三種：

    （1）弱類型；

    （2）解釋型語言（不需要編譯）；

    （3）逐行執行，一行代碼錯誤，其后的代碼塊都不會繼續執行；

    （4）<script>標簽可直接嵌入到HTML文件中，位置是任意的，通常放在被修飾內容下面或者head標簽中，但寫成單獨的js文件有利于結構和行為的分離

2.JavaScript 內容（附圖）：

    

       其中ECMAScript是JavaScript的核心；

       DOM是文檔對象模型（使用js操作網頁）；

       BOM是瀏覽器對象模型（使用js操作瀏覽器）

3.JavaScript 信息的輸出：

    （1）alert( )方法：以提示框的形式在頁面輸出 ，例;

[javascript] view plain copy

1. <script>  
2.     alert("hello,javascript")  
3. </script>  

    （2）console.log( )方法：在控制臺輸出信息，例：

[javascript] view plain copy

1. console.log("hello,javascript")  

    （3）document.write( )：將內容直接寫在HTML頁面中，例：

[javascript] view plain copy

1. document.write("hello,javascript")  

4.JavaScript 變量：

    與 Java不同，ECMAScript 中的變量無特定的類型，定義變量時只用 var 運算符，可以將它初始化為任意值，變量的初始化格式：var 變量名 = 變量值；例：

[javascript] view plain copy

1. var a = "hello";  
2. var b = 123;  

    如果要定義多個變量，那么可以用將多個變量寫在一行，用逗號進行分隔；例：

[javascript] view plain copy

1. var a = "你好",  
2.     b = 123,  
3.     c = "hello";  

    變量名字的變量規則：    

    （1）由字母、數字、下劃線、$符號構成

    （2）不可以以數字開頭，不建議以下劃線開頭；

    （3） 嚴格區分大小寫；

    （4）不可以是關鍵字和保留字

5.JavaScript 數據類型：

    JavaScript可以分為原始數據類型，引用數據類型兩種：

    （1）原始數據類型：Number，String，Boolean，undefined，null

    Number：數值型，就是數字，包含正數、負數、整數、小數、0、NaN、Infinity（正無窮）、-Infinity（負無窮）；

    注意：NaN：not  a  number的縮寫，表示該值不是一個數值（也屬于Number）

    String：字符串：用雙引號""或單引號''包起來的0個或多個字符，如果引號中什么也沒有，那么這個字符串被稱為空字符串

    Boolean：布爾型：包含true：表示真（成立）和false：表示假（不成立）兩個值

    undefined：表示變量未定義，或變量被定義出來，但是沒有被賦值

    null：表示一個變量沒有指向任何一片存儲空間，即變量存在，但是里面是空的，類似于Undefined

    （小提示：在Chrome瀏覽器控制臺輸出時，會發現Number類型為深藍色，String為黑色，Boolean為淺藍色，undefined和null都為淺灰色）

    （2）引用數據類型：

    Object（對象），Array（數組），Date（日期），RegExp（正則）。。等等

    （3）如何查看一個變量的數據類型（typeof 運算符）：        

             數值型數據：返回值為number   

[javascript] view plain copy

1. console.log(typeof 123)   //輸出number  

             字符串型數據：返回值為string

[javascript] view plain copy

1. console.log(typeof "你好")  //輸出string  

             布爾型數據：返回值為boolean

[javascript] view plain copy

1. console.log(typeof true/false)    //輸出boolean  

             Undefined：返回值為undefined

[javascript] view plain copy

1. console.log(typeof undefined)   //輸出undefined  

             Null：返回值為Object（歷史遺留問題，說明null也是一個對象）

[javascript] view plain copy

1. console.log(typeof null)     //輸出object  

             NaN：返回值為number

[javascript] view plain copy

1. console.log(typeof NaN)    //輸出number  

6.JavaScript 數據類型的轉換：

    （1）在使用加法（+）運算符時，任何數據與字符串類型數據相加都為字符串類型數據；

[javascript] view plain copy

1. console.log("你好" + 123)    //輸出"你好123"  

        注（簡單理解）： 在JavaScript 中空字符串""轉換為false，非空字符串轉換為true（除“0”，“1”外）；

                false轉換為 0 或“0”，true轉換為 1 或“1”；

                做邏輯判斷的時候，null，undefined，""(空字符串)，0，NaN都默認為false；

                ==在比較的時候可以轉換數據類型，===是嚴格比較，只要類型不匹配就返回false；

                    其實 == 的比較確實是轉換成字符串來比較但，但是在布爾型轉換為字符串之前，要先轉換成 Number

[javascript] view plain copy

1. console.log("123" == true)    //輸出false  
2. console.log("1" == true)     //輸出true  
3. console.log("" == true)     //輸出false  
4. console.log(1 == true)     //輸出true  
5.   
6. console.log("" == false)    //輸出true  
7. console.log('123' == false)   //輸出fasle  
8. console.log('0' == false)    //輸出true  
9. console.log(0 == false)    //輸出true  
10.   
11. console.log('1' == 1)     //輸出true  
12. console.log('0' == 0)     //輸出true  
13. console.log(-true)     //輸出-1  

（2）parseInt：將字符串轉換成整數（只識別字符串中的數值）：

        注：會忽略字符串中的前后空格（當數值后的空格后面還有數值時，將不會再識別）；

               能夠正確識別正負號，即保留正負號；

               在轉換時，遇到非數值型的字符就會停止轉換；

               如果字符串的第一個字符是非數值型的，那么轉換的結果為NaN；

[javascript] view plain copy

1. console.log(parseInt("123"))    //輸出123  
2. console.log(parseInt(" 1 2"))    //只會輸出1  
3. console.log(parseInt(-123))     //輸出-123  
4. console.log(parseInt("hello"))    //輸出NaN  
5. console.log(parseInt(true))       //輸出NaN  
6. console.log(parseInt("123hello"))    //輸出123，后面非數值型不會識別  
7. console.log(parseInt(" 1 "))     //輸出1，忽略空格  

（3）parseFloat：將字符串轉換成小數（識別小數點，注意事項同上）

[javascript] view plain copy

1. console.log(parseFloat("123.55"))    //輸出123.55  
2. console.log(parseFloat(".1hello"))    //輸出0.1  

（4）Number：將其它類型的數據轉換成數值型，注意被轉換的數據必須是純數值構成，否則無法轉換，其它注意事項同上

[javascript] view plain copy

1. console.log(Number(true))   //1  
2. console.log(Number(false))    //0  
3. console.log(Number(null))    //0  
4. console.log(Number("123hello"))    //NaN  
5. console.log(Number("12.22"))    //12.22  
6. console.log(Number(undefined))    //NaN  

（5）頁面中的信息框：

        alert（），彈出個提示框，只有確定；

[javascript] view plain copy

1. window.alert("今天天氣很好")  

        confirm（），彈出個確認框，有確定和取消；

[javascript] view plain copy

1. window.confirm("今天心情也很好")  

        prompt（），彈出個輸入框，可以輸入內容；

[javascript] view plain copy

1. window.prompt("password","請輸入密碼")  

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

           最近重在研究struts的源碼，其中涉及到了request中的幾個api，看了文檔后還是覺得不清楚，所以在自己原來的工程中

‘==’和‘===’都是Javascript中的比較運算符，都是比較運算符兩邊是否相等。對于‘==’和‘===’的區別，大家也都知道：

  ‘==’僅僅是比較運算符兩邊的數值是否相等，如果數值相等則返回true；‘===’不僅會判斷運算符兩邊的數值是否相等，并且還會判斷兩邊的類型是否相等，只有數值和類型都相等才會返回true。雖然知道以上的判斷依據已經能解決絕大數此類問題，但是如果往其中深究來說，會有同學問：在比較的時候‘===’先判斷類型，如果類型不同就直接返回false，這個沒什么問題。但是如果是‘==’比較兩個不同類型的數據時，具體是怎么進行計算判斷的呢？

 既然是不同類型進行比較，肯定最終參與比較的結果必須是同一個類型的，因此JS會存在一個隱式轉換的問題，并且很多JS的隱式轉換很難通過console.log()等方法直觀的觀察到，因此很多初學者會對JS的隱式轉換感到疑惑。

 首先讓我們回憶一下，咱們的JS中一共有哪些數據類型？

       六大數據類型
       基本數據類型（簡單數據類型）
       number 數值型(NaN)
       string 字符串
       boolean 布爾型
       undefined 未定義
       null 空引用
       引用數據類型（復雜數據類型）
       object

       JS基礎中，我們學習到咱們的JS中一共有六種數據類型，分為基本數據類型（簡單數據類型）和引用數據類型（復雜數據類型），不同類型的值進行比較的時候，存在隱式轉換的問題，咱們通過‘==’來驗證一下JS隱式轉換的情況。

       1.我們首先來看看下列的語句計算結果：

console.log(NaN==true);//false
console.log(NaN==false);//false
console.log(NaN==0);//false
console.log(NaN==1);//false
console.log(NaN==NaN);//false

       由上面的例子可以看出，NaN屬于Number數據類型中一個特殊情況，如果‘==’兩邊同為Number數據類型的數字，很直觀的可以看出值是否相同一眼就可以看出結果，但是作為Number類型的特殊情況，NaN在進行比較的時候，也會有特殊的結果：如果 x 或 y 中有一個為 NaN，則返回 false；

       2.我們繼續看看下列的語句計算結果：

console.log(null == undefined); //true(特殊情況)---------------------------------
console.log(null == ''); //false
console.log(undefined == ''); //false

      在上述例子中，引出了一個null，null是一個簡單數據類型，它的意義就是一個空應用，但是你如果通過console.log(typeof null) 來打印結果的時候卻發現，結果竟然是object？此時你可能會懷疑人生，然后瘋狂的翻閱之前學習的資料，因為object明明是一個復雜數據類型，怎么會在判斷null這個簡單數據類型的類型時打印出來呢？其實，這個問題屬于一個歷史問題。咱們學習的JS在發展過程中是通過ECMAScript來確定規范的，每年都會有新的規定和規范提出，在JS的發展過程中，null一開始的作用就是用來指向一個空地址，讓開發者在創建數據的時候，先用null賦值給還未給值的對象用于標準初始化。但是其實咱們開發過程中很少用到，但是這個仍作為規范留了下來。又因為typeof是根據數據的前幾位判斷數據類型的，null相當于空指針，前幾位是地址的格式，所以判斷結果就為object。又因為undefined值是派生自null值的，因此ECMA-262規定對他們的相等測試要返回true。所以這一情況判斷的條件為：如果 x 與 y 皆為 null 或 undefined 中的一種類型，則返回 true（null == undefined // true）；否則返回 false（null == 0 // false）；

       3.請看下列例子：

console.log(true == '123'); //false
console.log(true == '1'); //true
console.log(false == '0'); //true
 
console.log(true == !0); //true
 
console.log([] == []); //false
console.log([] == ![]); //true 比較地址 ------------------------------------------------
var a = c = [];
var b = [];
console.log(a == b); //false
console.log(a == !b); //true
console.log(a == c); //true
 
console.log(Boolean([]) == true); //true
console.log(Number([]) == 0); //true
console.log(Number(false) == 0); //true

       其實比較的邏輯為：如果 x,y 類型不一致，且 x,y 為 String、Number、Boolean 中的某一類型，則將 x,y 使用 Number 函數轉化為 Number 類型再進行比較；

      使用Number函數可以將其他的數據類型轉變為Number類型，這一同為Number類型的數據，對比起來就會變得十分簡單。值得注意的是在上述的例子中，兩個空數組進行比較，結果返回的結果仍然為false，這個是怎么回事呢？其實這個很好理解，因為數組也是對象的一種，是復雜數據類型，所以用變量儲存對象時儲存的其實是地址。對象的內容相同，但是儲存在堆區的位置不同，所以地址也是不同的，所以在判斷的時候返回的是false。

      其實在JS中還有很多的隱式轉換情況，以上只是針對于‘==’的隱式轉換情況，對于這些問題，在實際開發過程中，需要作為開發者不斷的學習和積累，這也是咱們作為開發者的一個要求之一。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

       jquery是一個輕量級的JS框架，這點相信大部分人都聽過，而jquery之所以有這樣一個稱呼，就是因為它悄悄披了一件外衣，將自己給隱藏了起來。

      /以下截取自jquery源碼片段
      (function( window, undefined ) {
      /*    源碼內容    */
       })( window );

      上面這一小段代碼來自于1.9.0當中jquery的源碼，它是一個無污染的JS插件的標準寫法，專業名詞叫閉包?？梢园阉唵蔚目醋鍪且粋€函數，與普通函數不同的是，這個函數沒有名字，而且會立即執行，就像下面這樣，會直接彈出字符串。

      (function( window, undefined ) {
         alert("Hello World!");
       })( window );

       可以看出來這樣寫的直接效果，就相當于我們直接彈出一個字符串。但是不同的是，我們將里面的變量變成了局域變量，這不僅可以提高運行速度，更重要的是我們在引用jquery的JS文件時，不會因為jquery當中的變量太多，而與其它的JS框架的變量命名產生沖突。對于這一點，我們拿以下這一小段代碼來說明。

     var temp = "Hello World!";
        (function( window, undefined ) {
         var temp = "ByeBye World!";
        })( window );
        alert(temp);

       這段代碼的運行結果是Hello而不是ByeBye，也就是說閉包中的變量聲明沒有污染到外面的全局變量，倘若我們去掉閉包，則最終的結果會是ByeBye，就像下面這樣。

      var temp = "Hello World!";
        //    (function( window, undefined ) {
         var temp = "ByeBye World!";
      //    })( window );
       alert(temp);

       由此就可以看出來，jquery的外衣就是這一層閉包，它是很重要的一個內容，是編寫JS框架必須知道的知識，它可以幫助我們隱藏我們的臨時變量，降低污染。

       剛才我們說了，jquery將自己聲明的變量全部都用外衣遮蓋起來了，而我們平時使用的Jquery和$，卻是真真實實的全局變量，這個是從何而來，謎底就在jquery的某一行代碼，一般是在文件的末尾。

window.jQuery = window.$ = jQuery;
       這一句話將我們在閉包當中定義的jQuery對象導出為全局變量jQuery和$，因此我們才可以在外部直接使用jQuery和$。window是默認的JS上下文環境，因此將對象綁定到window上面，就相當于變成了傳統意義上的全局變量，就像下面這一小段代碼的效果一樣。

      var temp = "Hello World!";
      (function( window, undefined ) {
         var temp = "ByeBye World!";
         window.temp = temp;
       })( window );
       alert(temp);

       很明顯，它的結果應該是ByeBye，而不是Hello。因為我們在閉包中導出了temp局部變量為全局變量，從而覆蓋了第一行聲明的全局變量temp。

        jquery最核心的功能，就是選擇器。而選擇器簡單理解的話，其實就是在DOM文檔中，尋找一個DOM對象的工具。

        首先我們進入jquery源碼中，可以很容易的找到jquery對象的聲明，看過以后會發現，原來我們的jquery對象就是init對象。

         jQuery = function( selector, context ) {
          return new jQuery.fn.init( selector, context, rootjQuery );
         }

         jQuery.fn = jQuery.prototype;

         jQuery.fn.init.prototype = jQuery.fn;
        這兩句話，第一句把jQuery對象的原型賦給了fn屬性，第二句把jQuery對象的原型又賦給了init對象的原型。也就是說，init對象和jQuery具有相同的原型，因此我們在上面返回的init對象，就與jQuery對象有一樣的屬性和方法。
很多時候，我們在jQuery和DOM對象之間切換時需要用到[0]這個屬性。從截圖也可以看出，jQuery對象其實主要就是把原生的DOM對象存在了[0]的位置，并給它加了一系列簡便的方法。這個索引0的屬性我們可以從一小段代碼簡單的看一下它的由來，下面是init方法中的一小段對DOMElement對象作為選擇器的源碼。

      // Handle $(DOMElement)
       if ( selector.nodeType ) {
            /*     可以看到，這里將DOM對象賦給了jQuery對象的[0]這個位置  */
            this.context = this[0] = selector;
            this.length = 1;
           return this;
        }

       這一小段代碼可以在jquery源碼中找到，它是處理傳入的選擇參數是一個DOM對象的情況?？梢钥吹剑锩婧苊黠@的將jQuery對象索引0的位置以及context屬性，都賦予了DOM對象。代碼不僅說明了這一點，也同時說明了，我們使用$(DOMElement)可以將一個DOM對象轉換為jQuery對象，從而通過轉換獲得jQuery對象的簡便方法。