🌓

border:none与border:0的深入分析比较

2015-07-12

如果你要用CSS去表达元素没有边框，你会怎么表达？
是border:0呢？
还是border:none呢？
我听过很多人推荐使用border:none，因为其理由是客户端的渲染。
乍听之下会觉得：嗯，有道理，又学到东西了呵……
其实，很多时候，代码是死的，没有绝对的好与坏！
在相对论面前，神马都是浮云……
要想明白哪种写法最适合你当前的环境，那么就必须先了解这两种写法的含义及优缺点：

阅读全文

CSS控制div宽度最大宽度/高度和最小宽度/高度

2015-07-12
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
/* 最小宽度 */
.min_width{min-width:300px;
/* sets max-width for IE */
_width:expression(document.body.clientWidth 600 ? "600px" : "auto");
}

/* 最小高度 */
.min_height{
min-height:200px;
/* sets min-height for IE */
_height:expression(this.scrollHeight 400 ? "400px" : "auto");
}

/* 最大最小宽度 */
.min_and_max_width{
min-width:300px;
max-width:600px;
/* sets min-width & max-width for IE */
_width: expression(
document.body.clientWidth 600 ? "600px" : "auto")
);
}

/* 最大最小高度 */
.min_and_max_height{
min-height:200px;
max-height:400px;
/* sets min-height & max-height for IE */
_height: expression(
this.scrollHeight 400 ? "400px" : "auto")
);

阅读全文

重置（修改）checkbox样式

2015-07-12
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1">
<title >123</title>

<link rel="stylesheet" type="text/css" href="css.css" />
<style>

.li1{display: none;}
.li1_lab{width: 31px;height: 31px;border: 1px solid #ccc;display: block;
-moz-box-shadow:0px 0px 2px #999 inset; /* For Firefox3.6+ */
-webkit-box-shadow:0px 0px 2px #999 inset; /* For Chrome5+, Safari5+ */
box-shadow:0px 0px 2px #999 inset;
}
.li1:checked~.li1_lab{
background: url(checkbox.jpg); /* 选中后的图标 */
-moz-box-shadow:0px 0px 2px green inset; /* For Firefox3.6+ */
-webkit-box-shadow:0px 0px 2px green inset; /* For Chrome5+, Safari5+ */
box-shadow:0px 0px 2px green inset;
}
</style>

</head>
<body>

<input type="checkbox" id="li1" class="li1" value="1" name="li1">
<label for="li1" class="li1_lab"></label>

</body>
</html>

阅读全文

expires用于网页缓存过期时间

2015-07-12

  • expires用于网页缓存过期时间

  • expires出现在http-equiv属性中，使用content属性表示页面缓存的过期时间

阅读全文

media对各种设备的判断

2015-07-12
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Smartphones (portrait and landscape) */
}

@media only screen and (min-width : 321px) {
/* Smartphones (landscape) */
}

@media only screen and (max-width : 320px) {
/* Smartphones (portrait) */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* iPads (portrait and landscape) */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* iPads (landscape) */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* iPads (portrait) */
}

@media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {
/* iPhone 4 */
}

@media screen and (max-width : 640px) {
/*640px */
}

@media screen and (max-width : 800px) {
/* 800px */
}

@media screen and (max-width : 1024px) {
/* 1024px */
}

@media only screen and (min-width : 1224px) {
/* Desktops and laptops */
}

@media only screen and (min-width : 1824px) {
/* Large screens */
}

@media only screen and (min-width: 320px) {

/* Small screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 320px),
only screen and ( min-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( min-resolution: 192dpi) and (min-width: 320px),
only screen and ( min-resolution: 2dppx) and (min-width: 320px) {

/* Small screen, retina, stuff to override above media query */

}

@media only screen and (min-width: 700px) {

/* Medium screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 700px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 700px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 700px),
only screen and ( min-device-pixel-ratio: 2) and (min-width: 700px),
only screen and ( min-resolution: 192dpi) and (min-width: 700px),
only screen and ( min-resolution: 2dppx) and (min-width: 700px) {

/* Medium screen, retina, stuff to override above media query */

}

@media only screen and (min-width: 1300px) {

/* Large screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1300px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 1300px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 1300px),
only screen and ( min-device-pixel-ratio: 2) and (min-width: 1300px),
only screen and ( min-resolution: 192dpi) and (min-width: 1300px),
only screen and ( min-resolution: 2dppx) and (min-width: 1300px) {

/* Large screen, retina, stuff to override above media query */

}

阅读全文

不足一屏时，页面底部位于浏览器底部（用CSS解决）

2015-07-12

写一些系统后台的页面时，时长用需要做到 “不足一屏时，页面底部位于浏览器底部”；在网上看了很多办法，有些兼容性不好，有些需要用到JS ，最后找到这个办法纯CSS的觉得非常不错，随后自己完善了下。将代码贴出来与大家一起探讨！

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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>不足一屏时，页面底部位于浏览器底部</title>
<style type="text/css">
*{margin:0; padding:0;}
html,body{height:100%;}
.wrap{position:relative;min-height:100%;}
.header{height:50px;background-color:#6CF;}
.content{padding-bottom:50px;/*height:2000px; 做超过一屏时使用*/}
.footer{
position:absolute;bottom:0;left:0;
width:100%;/*绝对定位使后宽度100%*/height:50px;
background-color:green;
}
</style>
</head>

<body>
<div class="wrap">
<div class="header">header</div>
<div class="content"></div>
<div class="footer">footer</div>
</div>

</body>
</html>

阅读全文

CSS最核心的概念解析

2015-07-12

本文将讲述 CSS 中最核心的几个概念，包括：盒模型、position、float等。这些是CSS的基础，也是最常用的几个属性，它们之间看似独立却又相辅相成。为了掌握它们，有必要写出来探讨一下，如有错误欢迎指正。
元素类型
HTML 的元素可以分为两种：

阅读全文

HTML+CSS：让IE渲染方式默认为最高

2015-07-12

现在有很多人的IE浏览器都升级到IE9以上了，所以这个时候就有又很多诡异的事情发生了，例如现在是IE9的浏览器，但是浏览器的文档模式却是IE8:

为了防止这种情况，我们需要下面这段代码来让IE的文档模式永远都是最新的：<meta http-equiv="X-UA-Compatible" content="IE=edge">

阅读全文

未知高度的图片垂直居中

2015-07-12
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>未知高度的图片垂直居中</title>
<style type="text/css">
*{ margin:0; padding:0;}
#box{
width:500px;height:400px;
text-align:center;
border:1px solid #d3d3d3;background:#fff;

display: table;
*display:block;
*font-size:349px; // 字体大小约为容器高度的0.873倍 400*0.873 = 349
*font-family:Arial; // 防止非utf-8引起的hack失效问题，如gbk编码
}

#box span{
display: table-cell; vertical-align:middle;
}
#box img{
*vertical-align:middle;
}
</style>
</head>

<body>
<div id="box">
<span><img src="http://www.xxx.com/resource/images/extend/logo/logo_hd.png" width="420" height="300" alt="" /></span>
</div>
</body>
</html>

阅读全文

html+css操作技巧

2015-07-12

1. 文字强制不换行,多余部分用省略号代替

1
white-space:nowrap;text-overflow:ellipsis;overflow:hidden;

阅读全文

CSS 图像透明度

2015-07-12

定义透明效果的 CSS3 属性是 opacity

1
2
3
4
5
6
7
.transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
    
}

阅读全文

div宽度自适应问题

2015-07-12

1.宽度自适应的条件 自适应宽度的层不要指定宽度和float属性 自适应宽度的层物理的位置放在最下面

自适应的div中不能出现“width=100%”，否则在ie6中会出现错位现象，ie7，ie8，ff3，chrome都正常。

2.div的默认（不写）宽度是100%，但不撑大父框架，写出width=100%是如果再使用了margin或padding就会将父框架撑大。

阅读全文

网站性能工具Yslow的使用方法

2015-07-12

Yslow是雅虎开发的基于网页性能分析浏览器插件，从年初我使用了YSlow后，改变了博客模板大量冗余代码，不仅提升了网页的打开速度，这款插件还帮助我分析了不少其他网站的代码，之前我还特意写了提高网站速度的秘籍，就是通过这款插件分析得出的。网络上已经有不少Yslow使用说明了，本文我想介绍下我使用Yslow的方法和一些别人没提到的小技巧。

阅读全文

Web前端开发规范文档

2015-07-12

规范目的

为提高团队协作效率,

便于后台人员添加功能及前端后期优化维护,

输出高质量的文档, 特制订此文档.

阅读全文

瀑布流布局实例

2015-07-12
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<style>
* {
padding:0;
margin:0;
}/*好孩子别用这个*/
html {
height:100%;
}
body {
height:100%;
}
img {
border:0;
}
div.wrap {
width:100%;
margin:0 auto;
overflow:hidden;
position:relative;
background:#DDD;
}
div.wrap div {
width:220px;
padding:4px;
border:1px solid #000;
float:left;
}
div.wrap div h3 {
line-height:35px;
}
div.wrap div img {
width:220px;
}
div.wrap div p {
padding:5px;
line-height:20px;
}
div.wrap div span {
color:#F00;
}
</style>
<script>
window.onload = function() {
waterFall("wrap")
}//
window.onresize = function() {
waterFall("wrap")
}

function waterFall(element,space,children) {
if(!element) return ;
space = space || 20 ;
children = children || "div" ; //前三行默认设置，分别为外框元素id，上下留白，子元素标签名(子元素标签名使用太多或出错)
var wrap = document.getElementById(element) ;
var water = wrap.getElementsByTagName(children) ;
var spaceWidth = water[0].offsetWidth ; //获取子元素宽度(offsetWidth会获取块级元素的padding和border)
var wrapWidth = wrap.offsetWidth ; //获取外框元素宽度
var colNum = Math.floor(wrapWidth/spaceWidth) ; //计算获取外框元素所能承受列数
var padding = Math.floor((wrapWidth - colNum*spaceWidth)/(colNum+1)) ; //计算外框元素剩余宽度并计算左右留白
var column = new Array() ;
var length = water.length ;
var maxHeight = 0 ;
for(var i=0;i<colNum;i++) { //初始化数组来计算各列初始top值和left值
column[i] = new Array() ;
column[i].top = space ;
column[i].left = (spaceWidth * i)+padding*(i+1) ; //计算各列距离左侧距离
}
for(var i=0;i<length;i++) { //遍历所有子元素及瀑布流布局
var index = i+1 ; //计算该子元素属于第几列
if(index%colNum==0) {
sub = colNum ;
} else {
sub = index%colNum ;
}
_this = water ;
_this[i].style.position = "absolute" ;
_this[i].style.top = column[sub-1].top + "px" ;
_this[i].style.left = column[sub-1].left + "px" ;
column[sub-1].top += _this[i].offsetHeight + space ; //计算各列最新高度以便赋值
}

for(var i=0;i<colNum;i++) { //获取瀑布流整体布局高度
if(column[i].top > maxHeight) maxHeight = column[i].top ;
}
wrap.style.height = maxHeight+"px" ; //给外框元素赋值以防止出现子元素溢出外框元素
}

//希望能帮助到大家哈，我一开始使用的事Jquery，但是考虑瀑布流比较消耗浏览器内存，就改成原生javascript了，滚动到浏览器底部ajax取值做瀑布流也灭做，等到项目到了再说吧
</script>
</head>
<body>
<div class="wrap" id="wrap">
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="01.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流瀑布流</span> </div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="01.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流瀑布流</span> </div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="01.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流瀑布流</span> </div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="01.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流瀑布流</span> </div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="01.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流瀑布流</span> </div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="01.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流瀑布流</span> </div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="01.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流瀑布流</span> </div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="01.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流瀑布流</span> </div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="01.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流瀑布流</span> </div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="01.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流瀑布流</span> </div>
</div>
</body>
</html>

阅读全文

ajax、json与jsonp详解：什么是json、jsonp，和ajax的区别

2015-07-12

现在前后端跨域传输比较流行的技术就是jsonp了，传递格式那就是json，至于ajax，历史比较久了吧，05年的时候虽然才开始高调登台，但从技术利用历史上看，98年的时候就已经在使用了。

由于现在很多人（当然我们团队也是）都在使用jquery、ext等各种库，而且使用这些库来调用jsonp非常容易，但这里有很多误解。因为这些库均把jsonp归入了ajax范畴（可能是为了方便整个库的结构开发，毕竟两者或多或少还是有一些关系的）。一直想写一下ajax、json、jsonp三者之间的区别，但苦于没时间。今日突然发现有篇博文不错，转过来，作为资料保存。

阅读全文

z-index最大值是多少（css z-index的最大值，最小值问题）

2015-07-12

本文属于CSS基础知识，DIV+CSS基础知识，主要讲的是css里z-index的最大值和z-index的最小值问题。

写这篇帖子，主要是因为今天在处理公司某业务时，对已有页面增加效果，期间发现有个问题，右侧广告区的wrap浮动之后做了一个相对定位，这是很可怕的，只要涉及到定位，那必然是有特权的啊，于是，没办法，看看吧，下面更可怕的，z-index：100000000，说实话，如果没有电脑，没有计算器，我自己根本就数不到这个数。当时觉得就很崩溃，莫非是CEO或者CTO写的？特权这么高？如果是他们的话，直接2147483647不得了嘛。

阅读全文

JS/jQuery实现默认显示部分文字点击按钮显示全部内容

2015-07-12

默认显示部分文字，点击按钮显示全部，类似这样的功能在一些特殊的地方会见到吧，下面与大家分享下JS、jQuery如何实现，感兴趣的朋友可以参考下哈，希望对你有所帮助

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS实现默认显示部分文字，点击按钮显示全部</title>
</head>
<body>
<div id="box">
<h2>民间机构提前3天预报大理地震 地震局称违法</h2>
<p>17日大理州5.0级地震发生之后，在微博上一条曾在3天前就预测大理将发生5.0级地震的微博受到了很多网友的关注。</p>
<p>记者联系上了微博博主，该博主表示，他是通过分析云南省地震局官方网站的数据得出的预报信息。对此，省地震局回应表示，地震局欢迎民间机构与地震局进行一些学术上的探讨和交流，但民间机构对外公开发布地震预报信息是违法的。</p>
<p><strong>民间机构预报地震受网友追捧</strong></p>
<p>“预计72小时内黑色圈圈内的地区都将有一次较强震感，初步锁定为5级地震，浅源，发生的位置主要是云南东北昭通（余震）、大理西南部和腾冲交界区域、和缅甸交界区域一线（地壳运动所致）云南巧家县和四川宁南县交界区域。”早在4月14日凌晨时分，微博名为“预报中心”的网民就在微博上发布了云南地震预报信息。该微博被网友转发了377次。在大理5.0级地震发生后，“小丛”等知名网友都转发了该微博。“跪了。”知名网友“小丛”在微博上表示。</p>
<p>在大理5.0级地震发生之前，“预报中心”还陆续发布了3条地震预报的微博，并附有预报将发生地震的地图，及一张昆明地震监测点的原始数据图。</p>
<p>这一微博得到了一些网友的转发及称赞。“顶，预报高手在民间，持续关注中。”网民“orfila2011”在评论中表示；“陕西蓝天救援队”官方微博也表示，民间在地震预测工作中有价值的经验方法，有关部门应给予足够的重视。</p>
<p><strong>预报根据省地震局数据分析得出</strong></p>
<p>该民间地震预报微博的资料显示，所在地位于湖北。“很久以前，该微博就已经在微博上播报地震预测信息，但一直很神秘。”有网友表示。昨日，记者通过微博联系上这一神秘民间地震预报机构。</p>
<p>该民间机构是怎样获得地震预报信息的？该微博博主向记者表示，他们是根据云南省地震局官网云南地震数据共享中心查询到了云南省内的一些地震监测数据，分析得出的预报信息。记者发现，确实可以通过该网站查到云南各地震监测点的预处理数据。</p>
<p>>该微博博主还透露，分析这些相关数据需要很多专业知识，但并不需要仪器。对于民间机构预报地震的动力，该博主表示“物质和精神都有”。对于其他信息，该博主不愿意更多透露。</p>
<p><strong>省地震局：民间仅限于学术交流</strong></p>
<p>“地震预测预报必须遵守相应的法律法规。”省地震局科学技术处处长、新闻发言人张俊伟在接受记者采访时表示，根据我国法律，任何个人或民间机构对外发布地震预报信息都是违法行为。</p>
<p>国家《地震预报管理条例》规定，省、自治区、直辖市的地震长期预报、地震中期预报、地震短期预报和临震预报，由省、自治区、直辖市人民政府发布。</p>
<p>对于这些民间的地震预报机构，张俊伟表示，云南省地震局一直都有所关注和了解。除了本次发布预报信息的“预报中心”外，这样的民间地震预报机构及人士还有很多。对于有网友提出能否加强官与民的合作交流。张俊伟表示，目前他个人并没有与这些民间机构取得过联系，但地震局对这些民间机构一直抱着包容与开放的态度，欢迎其与地震局进行学术探讨和交流。</p>
<p>“但另一方面，对外公开发布地震预报信息始终是违法的。我们对这些公开发布地震预报信息的民间机构也很头痛，担心给社会带来不良的影响。”张俊伟认为，市民、网友不应采信民间机构发布的地震预报消息。</p>
</div>
<script>
function show(){
var box = document.getElementById("box");
var text = box.innerHTML;
var newBox = document.createElement("div");
var btn = document.createElement("a");
newBox.innerHTML = text.substring(0,200);
btn.innerHTML = text.length > 200 ? "...显示全部" : "";
btn.href = "###";
btn.onclick = function(){
if (btn.innerHTML == "...显示全部"){
btn.innerHTML = "收起";
newBox.innerHTML = text;
}else{
btn.innerHTML = "...显示全部";
newBox.innerHTML = text.substring(0,200);
}
}
box.innerHTML = "";
box.appendChild(newBox);
box.appendChild(btn);
}
show();
</script>
</body>
</html>

阅读全文

jquery城市搜索自动补全特效

2015-07-12

给大家推荐一款APP：掘金，在这个APP上有很多的技术干货。

此作品是一款非常棒的Jquery特效，实现城市搜索自动补全功能，文本获得焦点的时候就会弹出层让你选择城市，默认情况下是热门城市选择，跟着是按字母检索的选项卡，还可以输入城市的首字母自动补全检索，可用键盘的上下左右控制列表的上下选择和左右分页控制。。。

阅读全文

js获取url参数值

2015-07-12

今天碰到要在一个页面获取另外一个页面url传过来的参数，一开始很本能的想到了用 split(“?”)这样一步步的分解出需要的参数。

后来想了一下，肯定会有更加简单的方法的！所以在网上找到了两个很又简单实用的方法，mark下

方法一：正则分析法

阅读全文