如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
一、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中多个连续的空白字符(制表符,空格,换行)默认会合并为一个空格来显示
如果非要输入空格,可以用转义字符来替代
如果非要输入换行,可以用 <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.转义字符 (掌握)
< <
> >
" "
' '
空格
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开发中，转发与重定向有很大的区别。
直观看来，转发不会发生URL址的变换，而重定向则会发生URL的改变。
这仅仅只是一种表象。HttpServlet中的request对象和response对象是在用户请求网页时由服务器根据浏览器传过来的参数封装生成的。一旦从浏览器请求过来，服务器响应回去那么request和response的也就到了生命的终点了。
当使用转发的时候，浏览器仅仅请求一次但是服务器端可能经历了多次的跳转。服务器端执行时发生了转发那么服务器就停止正在执行的任务，去指定转发给定地址的任务。
而使用重定向的话，浏览器则会项服务器发生多次请求。在服务器端执行代码的时候，发现发生了重定向，那么它就会通知浏览器，去访问另一个URL。浏览器就会向被发送的URL请求资源。
看一段代码：
这是一段jsp代码，当点击提交的时候，会把表单提交给myServlet。
界面长这样：
这是MySerlet，当用户点击提交表单，服务器就会调用MyServlet的doPost方法，在这个方法里面进行的是页面转发。
这是welcome.jsp的代码。
提交结果为：
可以发现浏览器只向服务器发送了一个请求。
接下来看一下重定向。
如果把MyServlet的代码改一下。
可以看到结果为：
而且浏览器项服务器发送了两次请求：
从上面的结果可以看出重定向后，因为是发起的另一个请求因此welcom页面中的内容都是null。而转发则由于是同一个request对象和response对象因此既能获得浏览器请求的参数，还能拿到request总放入的属性值。
其实从代码也可以看出来，sendRedirect()方法是HttpServletResponse对象的响应方法，既然调用了响应对象的方法，那么就表明整个请求结束了，服务器端项客户端返回执行结果。而getRequestDispatcher方法是request对象的方法，表明依旧在请求因此不会立即向浏览器返回结果，而是继续执行其转发的任务。
有一点需要说明的时，不论forward方法还是sendRedirect方法中传的URL需要注意，如果以“\”开头那么，就表示这个URL是现对于servlet容器根的请求，即localhost:8080,如果没有以“\”开头，那么表明这个请求地址是相对于当前的请求URL来寻址的。
当我再次点击提交的时候：
不以”\”开头的请求地址为：
转发模型为：
重定向模型为：
<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>
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);
}
}
<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>
当点击提交按钮后后我们可以看一下网络的请求过程。
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");
}
}
<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.JavaScript 简介：
JavaScript是互联网上最流行的脚本语言，所有现代的HTML都使用JavaScript。既然是脚本语言，那么它的特点就有一下三种：
（1）弱类型；
（2）解释型语言（不需要编译）；
（3）逐行执行，一行代码错误，其后的代码块都不会继续执行；
（4）<script>标签可直接嵌入到HTML文件中，位置是任意的，通常放在被修饰内容下面或者head标签中，但写成单独的js文件有利于结构和行为的分离
2.JavaScript 内容（附图）：
其中ECMAScript是JavaScript的核心；
DOM是文档对象模型（使用js操作网页）；
BOM是浏览器对象模型（使用js操作浏览器）
3.JavaScript 信息的输出：
（1）alert( )方法：以提示框的形式在页面输出 ，例;
（2）console.log( )方法：在控制台输出信息，例：
（3）document.write( )：将内容直接写在HTML页面中，例：
4.JavaScript 变量：
与 Java不同，ECMAScript 中的变量无特定的类型，定义变量时只用 var 运算符，可以将它初始化为任意值，变量的初始化格式：var 变量名 = 变量值；例：
如果要定义多个变量，那么可以用将多个变量写在一行，用逗号进行分隔；例：
变量名字的变量规则：
（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
字符串型数据：返回值为string
布尔型数据：返回值为boolean
Undefined：返回值为undefined
Null：返回值为Object（历史遗留问题，说明null也是一个对象）
NaN：返回值为number
6.JavaScript 数据类型的转换：
（1）在使用加法（+）运算符时，任何数据与字符串类型数据相加都为字符串类型数据；
注（简单理解）： 在JavaScript 中空字符串""转换为false，非空字符串转换为true（除“0”，“1”外）；
false转换为 0 或“0”，true转换为 1 或“1”；
做逻辑判断的时候，null，undefined，""(空字符串)，0，NaN都默认为false；
==在比较的时候可以转换数据类型，===是严格比较，只要类型不匹配就返回false；
其实
（2）parseInt：将字符串转换成整数（只识别字符串中的数值）：
注：会忽略字符串中的前后空格（当数值后的空格后面还有数值时，将不会再识别）；
能够正确识别正负号，即保留正负号；
在转换时，遇到非数值型的字符就会停止转换；
如果字符串的第一个字符是非数值型的，那么转换的结果为NaN；
（3）parseFloat：将字符串转换成小数（识别小数点，注意事项同上）
（4）Number：将其它类型的数据转换成数值型，注意被转换的数据必须是纯数值构成，否则无法转换，其它注意事项同上
（5）页面中的信息框：
alert（），弹出个提示框，只有确定；
confirm（），弹出个确认框，有确定和取消；
prompt（），弹出个输入框，可以输入内容；
[javascript] view plain copy
[javascript] view plain copy
[javascript] view plain copy
[javascript] view plain copy
[javascript] view plain copy
[javascript] view plain copy
[javascript] view plain copy
[javascript] view plain copy
[javascript] view plain copy
[javascript] view plain copy
[javascript] view plain copy
[javascript] view plain copy
== 的比较确实是转换成字符串来比较但，但是在布尔型转换为字符串之前，要先转换成 Number
[javascript] view plain copy
[javascript] view plain copy
[javascript] view plain copy
[javascript] view plain copy
[javascript] view plain copy
[javascript] view plain copy
[javascript] view plain copy
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
最近重在研究struts的源码，其中涉及到了request中的几个api，看了文档后还是觉得不清楚，所以在自己原来的工程中
测试了一下各个api的具体效果。在这里跟大家分享一下。
这是我具体测试的代码：
这是我servlet配置的路径：
以下是访问这个ProductServlet后控制台打印的结果：
从以上我们可以发现：
1.getRealPath(....)，这个方法是返回给定资源的磁盘绝对路径，简单来说，就是以盘符开头的路径
2.getRequestURI(....)与getRequestURL(....)这个两个方法，从名字上来说，一个是返回url（统一资源定位器）一个是返回
uri（统一资源标识符，用来唯一的标识一个资源），那么url跟uri有什么区别呢？比较结果后我们就知道，URL中包含URI，URL是
带协议，带端口号的。
3.getContextPath(....)这个方法，其实就是用来返回工程名，或者说工程路径，看结果我们一目了然
4.getServletPath(.....)这个方法，从结果中，我们可以分析得出，它其实就是在工程目录下，访问我们servlet的路径，或者说
servlet相对于我们工程的路径，在或者说，它就是我们在配置文件中配置的路径，但是不包括后面具体的请求资源名
5.getPathInfo(.....)，这个方法其实就是返回我们具体请求资源的名称，或者说，相对于我们的servlet而言的请求路径
‘==’和‘===’都是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中还有很多的隐式转换情况，以上只是针对于‘==’的隐式转换情况，对于这些问题，在实际开发过程中，需要作为开发者不断的学习和积累，这也是咱们作为开发者的一个要求之一。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
2、读取json文件的service层实现
3、controller对应的代码片段
4、html页面 将jsonarray转换成js对象
5、对js对象遍历 $.append动态添加到对应页面
6、效果如下图
[plain] view plain copy
[plain] view plain copy
[java] view plain copy
[java] view plain copy
[javascript] view plain copy
[javascript] view plain copy
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对象的简便方法。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
目前做的项目是ionic3和angular4.0的结合，所以用到了很多关于ionic3中封装好的标签，例如具有轮播效果的ion-slides和ion-slide等。那么这次就要总结一下另外一个标签ion-segment的用法了。
Segment 在头部使用
Segment 在内容里面使用
Segment 在表单里面使用
ion-segment这个标签以前用的很少，几乎没有用过。它主要是一组按钮，有时称为分段控件，之前都是用button按钮，现在知道了，开始用ion-segment，因为它有自带的样式，这样就可节省很多时间，同时呢允许用户与许多控件的紧凑组进行交互。 分段提供与标签相似的功能，选择一个将取消选择所有其他选项。 当您希望让用户在应用程序的不同页面之间来回移动时，应使用选项卡栏而不是分段控件。 您可以使用Angular的ngModel或FormBuilder API。
下面来看一段代码：
<ion-header> <ion-toolbar> <ion-segment [(ngModel)]="icons" color="secondary"> <ion-segment-button value="camera"> <ion-icon name="camera">带iocn</ion-icon> </ion-segment-button> <ion-segment-button value="bookmark"> 头部使用Segment <ion-icon name="bookmark"></ion-icon> </ion-segment-button> </ion-segment> </ion-toolbar> </ion-header>
<ion-segment [(ngModel)]="relationship" color="primary" (ionChange)="segmentChanged($event)"> <ion-segment-button value="friends"> Segment 在内容里面使用 </ion-segment-button> <ion-segment-button value="enemies"> 可以绑定一个事件(ionChange) </ion-segment-button> </ion-segment>
<form [formGroup]="myForm"> <ion-segment formControlName="mapStyle" color="danger"> <ion-segment-button value="standard"> Standard </ion-segment-button> <ion-segment-button value="hybrid"> 表单内使用 </ion-segment-button> <ion-segment-button value="sat"> Satellite </ion-segment-button> </ion-segment> </form>
Segment 配合ngSwitch使用
<ion-segment [(ngModel)]="change"> <ion-segment-button value="apple"> 苹果 </ion-segment-button> <ion-segment-button value="pie"> 梨 </ion-segment-button> </ion-segment> <div [ngSwitch]="change"> <div *ngSwitchCase="'apple'">
苹果显示，如果要默认显示一个就把默认的那个设置一个初始值比如要默认显示苹果就把苹果的value值设置成change也就是说，在定义change变量的时候，需要把哪个设置为默认显示就把哪个的value值赋值给change作为初始值 public change=”pie”;
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
在我们的页面布局的时候，经常会有这样的需求，超过指定行文本的时候会进行（省略号...）的处理，那么我们改怎么设置css呢？如下：
设置盒子的css为：
但是这样只能显示一行而不能实现指定行，所以还要其他的方法来实现指定行处理的。
WebKit浏览器或移动端的页面（大部分移动端都是webkit）
css 代码:
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
1：安装
2： 在main.js 主入口js里面引用store.js
3：在store.js里引用Vuex
4：在vue组件中使用
使用$store.commit(‘jia’)区触发mutations下面的加减方法
5：state访问状态对象
使用computed计算
npm install vuex --save
import Vue from 'vue' import App from './App' import router from './router' import store from './vuex/store' //引用store.js Vue.config.productionTip = false //阻止在启动时生成生产提示 //vue实例 new Vue({
el: '#app',
router,
store, //把store挂在到vue的实例下面 template: '<App/>',
components: { App }
})
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) //注册Vuex // 定义常量 如果访问他的话，就叫访问状态对象 const state = {
count: 1 } // mutations用来改变store状态, 如果访问他的话，就叫访问触发状态 const mutations = { //这里面的方法是用 this.$store.commit('jia') 来触发 jia(state){
state.count ++
},
jian(state){
state.count --
},
} //暴露到外面，让其他地方的引用 export default new Vuex.Store({
state,
mutations
})
<template> <p class="hello"> <h1>Hello Vuex</h1> <h5>{{$store.state.count}}</h5> <p> <button @click="$store.commit('jia')">+</button> <button @click="$store.commit('jian')">-</button> </p> </p> </template> <!-- 加上scoped是css只在这个组件里面生效，为了不影响全局样式 --> <style scoped> h5{ font-size: 20px; color: red; } </style>
<template> <p class="hello"> <h1>Hello Vuex</h1> <h5>{{count}}</h5> <p> <button @click="$store.commit('jia')">+</button> <button @click="$store.commit('jian')">-</button> </p> </p> </template> <script> import {mapState} from 'vuex' export default{
name:'hello', //写上name的作用是，如果你页面报错了，他会提示你是那个页面报的错，很实用 // 方法一 // computed: { // count(){ // return this.$store.state.count + 6 // } // } // 方法二 需要引入外部 mapState computed:mapState({
count:state => state.count + 10 }) // ECMA5用法 // computed:mapState({ // count:function(state){ // return state.count // } // }) //方法三 // computed: mapState([ // 'count' // ]) } </script>
蓝蓝 http://www.lanlanwork.com
