如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

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: 显示图标。可选值: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为按钮指定具体的行为。可以用value属性指定按钮显示的文字。

                    文件上传项 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.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的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.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的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对象的简便方法。