使用li+a构建网页导航栏

　　首先说一下建导航栏时使用li+a而不是直接使用li的原因：一般导航都是具有超链接功能，a标签具有这个功能，而lis标签只是罗列信息列表，不具备链接功能。
　　方法：一般我们在li中指定width，float;然后在a中使用display:block;再指定width和height，让它自动填充li即可。
　　具体小例子见代码：
HTML：

1
2
3
4
5
6
7
8
9
10
11
12

<div id="nav">
	<ul>
		<li><a href="javascript:;">站长之家</a></li>
		<li><a href="javascript:;">行业资讯</a></li>
		<li><a href="javascript:;">站长在线</a></li>
		<li><a href="javascript:;">网站运营</a></li>
		<li><a href="javascript:;">设计在线</a></li>
		<li><a href="javascript:;">网络编程</a></li>
		<li><a href="javascript:;">联盟资讯</a></li>
		<li><a href="javascript:;">服务器</a></li>
	</ul>
</div>

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
29
30
31
32

#nav{
	width: 730px;
	margin: 20px auto;
	border:1px solid blue;
	background: blue;
}
#nav ul{
	list-style-type: none;
	overflow: hidden;
	margin-left: 10px;
}
#nav ul li{
	width: 80px;
	float: left;
	margin-right: 10px;			
	background: cornflowerblue;
	cursor: pointer;
}
#nav ul li a{
	display: block;
	width: 80px;
	height: 30px;
	line-height: 30px;
	padding: 5px 0;
	text-align: center;
	text-decoration: none;
	color: #fff;
}
#nav ul li a:hover{
	font-weight: 700;
	background: #aaa;
}

　　麻雀虽小五脏俱全啊，涵盖了很多最近学到的知识点，算是在此纪念一下吧。

最上面放正则的优先级

①常用的元字符 (一些有特异功能的用来方便匹配的字符)

　　代码　　说明
　　. 　　匹配除换行符以外的任意字符
　　\w　　匹配字母或数字或下划线（等价于[A-Za-Z0-9_]）
　　\s　　匹配任意的空白符
　　\d　　匹配数字
　　\b　　匹配单词的开始或结束
　　^ 　　匹配字符串的开始
　　$ 　　匹配字符串的结束

　　^\d{5,12}$　　因为使用了^和$，所以检测的整个字符串都要用来和\d{5,12}来匹配，也就是说整个字符串必须是5到12个数字。

②常用的限定符 (表示它前面的字符重复的次数)

　　代码　　说明
　　* 　　重复零次或更多次
　　+ 　　重复一次或更多次
　　? 　　重复零次或一次（还有非贪婪模式的用法）
　　{n}　　重复n次
　　{n,}　　重复n次或更多次
　　{n,m} 　重复n到m次

　　(?0\d{2}[) -]?\d{8}　　首先是一个转义字符(,它能出现0次或1次(?),然后是一个0，后面跟着2个数字(\d{2})，然后是)或-或空格中的一个，它出现0次或1次(?)，最后是8个数字(\d{8})。

③字符范围

　　代码　　说明
　　[]　　　　匹配方括号中任意字符
　　[0-9]　　代表的含意与\d就是完全一致的：匹配任意一位数字

　　注意在字符范围中有很多元字符不需要转义，可以代表自身，如.?+等。常见在[]内需要转义的有\和]和-

　　注：如果想匹配任意汉字的话，可以使用：[\u4e00-\u9fa5]。

　　有时也会见到[^\x00-\xff]，即匹配不是ASCII代码中十六进制代码00到ff的字符，即不是ASCII代码十进制0到255的字符，所以汉字包括在里面。

④分枝条件

　　代码　　说明
　　|　　　　匹配分枝条件时，将会从左到右地测试每个条件，如果满足了某个分枝的话，就不会去再管其它的条件了。
　　
　　\d{5}-\d{4}|\d{5}　　这个表达式用于匹配美国的邮政编码。美国邮编的规则是5位数字，或者用连字号间隔的9位数字。之所以要给出这个例子是因为它能说明一个问题：使用分枝条件时，要注意各个条件的顺序。如果你把它改成\d{5}|\d{5}-\d{4}的话，那么就只会匹配5位的邮编(以及9位邮编的前5位)。

⑤分组

　　代码　　说明
　　()　　重复单个字符,直接在字符后面加上限定符就行了；但如果想要重复多个字符又该怎么办？你可以用小括号来指定子表达式(也叫做分组)，然后你就可以指定这个子表达式的重复次数了

　　(\d{1,3}.){3}\d{1,3}　　是一个简单的IP地址匹配表达式。 \d{1,3}匹配1到3位的数字，(\d{1,3}.){3}匹配三位数字加上一个英文句号(这个整体也就是这个分组)重复3次，最后再加上一个一到三位的数字(\d{1,3})。

　　但使用小括号的时候，还有很多特定用途的语法。下面列出了最常用的一些：

常用分组语法

　　分类 　　代码/语法 　　说明
　　捕获 　　(exp) 　　　　匹配exp,并捕获文本到自动命名的组里
　　　　　　(?exp) 　　　　匹配exp,并捕获文本到名称为name的组里，也可以写成(?’name’exp)
　　　　　　(?:exp) 　　　匹配exp,不捕获匹配的文本，也不给此分组分配组号
　　零宽断言　(?=exp) 　　匹配exp前面的位置(断言：是真的才执行。所以在这里是exp才会匹配它前面的字符)
　　　　　　　(?<=exp) 　匹配exp后面的位置
　　　　　　　(?!exp) 　　匹配后面跟的不是exp的位置
　　　　　　　(?<!exp) 　　匹配前面不是exp的位置
　　注释 　　 (?#comment)　　这种类型的分组不对正则表达式的处理产生任何影响，用于提供注释让人阅读

⑥反义

　　代码/语法 说明
　　\W　　　　匹配任意不是字母，数字，下划线，汉字的字符
　　\S　　　　匹配任意不是空白符的字符
　　\D　　　　匹配任意非数字的字符
　　\B　　　　匹配不是单词开头或结束的位置
　　[^x]　　　　匹配除了x以外的任意字符
　　[^aeiou]　　匹配除了aeiou这几个字母以外的任意字符

　　<a[^>]+>　　匹配用尖括号括起来的以a开头的字符串。

⑦零宽断言(环视、断言)

　　环视，就是先从全局环顾一遍正则，（然后断定结果，）再做进一步匹配处理。
　　断言，就是先从全局环顾一遍正则，然后断定结果，再做进一步匹配处理。

　　两个虽然字面不一样，意思却是同一个，都是做全局观望，再做进一步处理。

　　环视的作用相当于对其所在位置加了一个附加条件，只有满足这个条件，环视子表达式才能匹配成功。

　　代码/语法 说明
　　(?=exp) 　　 先行断言：匹配后面是exp的数据(断言：是真的才执行。所以在这里是exp才会匹配它前面的字符)
　　(?!exp) 　　 先行否定断言：匹配后面不是exp的数据
　　(?<=exp)　　后行断言：匹配前面是exp的数据 （JS在ES6才支持后行断言）
　　(?<!exp)　　 后行否定断言：匹配前面不是exp的位置

eg:前端的一道笔试题：模拟数字的千位符

⑧贪婪与懒惰

　　当正则表达式中包含能接受重复的限定符时，通常的行为是（在使整个表达式能得到匹配的前提下）匹配尽可能多的字符。以这个表达式为例：a.*b，它将会匹配最长的以a开始，以b结束的字符串。如果用它来搜索aabab的话，它会匹配整个字符串aabab。这被称为贪婪匹配。

　　有时，我们更需要懒惰匹配，也就是匹配尽可能少的字符。前面给出的限定符都可以被转化为懒惰匹配模式，只要在它后面加上一个问号?。这样.*?就意味着匹配任意数量的重复，但是在能使整个匹配成功的前提下使用最少的重复。现在看看懒惰版的例子吧：

　　a.*?b匹配最短的，以a开始，以b结束的字符串。如果把它应用于aabab的话，它会匹配aab（第一到第三个字符）和ab（第四到第五个字符）。

JS中有两种方式创建正则表达式对象,eg:下面创建一个匹配字符串的正则表达式对象

1
2
3
4
5
6
7

//一、正则表达式字面量方法
var my_regexp1=/"(?:\\.|[^\\\"])*"/g;

//二、RegExp构造器方法(此时有两个阶段，先经过字符串的转义，后再经过正则表达式的转义，所以经常需要双反斜杠进行转义)
var my_regexp2=new RegExp("\"(?:\\\\.|[^\\\\\\\"])*","g";
document.writeln(my_regexp1.exec('"Daoma is 666"')[0]);
document.writeln(my_regexp2.exec('"Daoma "is 666"')[0]);

　　其它具体请参考：快速入门正则表达式

预加载图片的小技巧

　　　　在做ex5-5(跟随鼠标移动显示大图)作业的时候，想要实现一个功能：即图片不能显示的话，就给把该图片设置为一个替代的loading图片。

1.使用Image对象做图片预加载(preload)

　　我们还是先来看一下代码：

JS:

1
2
3
4
5
6
7
8
9
10
11
12
13

aLi[i].onmouseover = function ()
{
	var oImg = document.createElement("img");
	//图片预加载
	var img = new Image();			
	img.src = oImg.src = aLi[this.index].getElementsByTagName("img")[0].src.replace(".jpg","_big.jpg");
	//插入大图片
	oBig.appendChild(oImg);
	//显示big层
	oBig.style.display = oLoading.style.display = "block";
	//判断大图是否加载成功
	img.complete ? oLoading.style.display = "none" : (oImg.onload = function() {oLoading.style.display = "none";})		
};

　　其实像下面这样写就可以，功能还很清晰，不知道ex5-5的原作者多var出来一个oImg有什么用???等以后我明白了再回来补充。

1
2
3
4
5
6
7
8
9
10
11
12

aLi[i].onmouseover = function ()
{
	//图片预加载
	var img = new Image();			
	img.src = aLi[this.index].getElementsByTagName("img")[0].src.replace(".jpg","_big.jpg");
	//插入大图片
	oBig.appendChild(img);
	//显示big层
	oBig.style.display = oLoading.style.display = "block";
	//判断大图是否加载成功
	img.complete ? oLoading.style.display = "none" : (img.onload = function() {oLoading.style.display = "none";})		
};

　　下面是分析：
　　首先要明白一点：”“标签每出现一次，一个 Image 对象就会被创建。所以上面的oImg也是个Image对象。但是现在还不明白为何要多出来个它？？？

　　当定义Image对象的src属性时，整个文档的读取、JavaScript 的运行都暂停，让浏览器专心的读取图片,所以定义img.src和oImg.src就相当于给浏览器缓存(preload)了一张图片。然后到真正要把图片加载到浏览器中(即img.onload)的时候，就可以立刻使用缓存的图片了。

2.使用Image对象的complete属性来判断浏览器是否已完成对图像的加载

　　在该例子中，当我们第一次打开页面时，鼠标移入任意aLi[i]都是第一次，这时浏览器会缓存这张预加载的大图，但是还没有将它加载到浏览器中。所以第一次执行这段代码img.complete一定是返回false,则执行

1
2
3

img.onload=function(){
	loading.style.display="none";
}

　　这里oImg[0].onload的作用就是把图片加载(load)到浏览器中，然后当图片加载完成后再执行花括号的内容，即将oLoading图片所在层隐藏（这样就会出现第一次鼠标移入图片时的闪现loading图片的效果），若是图片出现错误，则会一直显示oLoading层的图片。

　　然后等我们鼠标第2、3…..n次移入该aLi[i]层的时候，因为图片已经加载过一次，如果再有对该图片的请求(即img.src)时，由于浏览器已经缓存住这张图片了，不会再发起一次新的请求，而是直接从缓存中加载过来,此时img.complete就会一直返回true，所以oLoading层的图片就会一直被隐藏。

　　详细用法请见
　　预加载的简便理解

IE中的CSS hack

　　比如一道题：用CSS分别定义IE6、7、8的width属性，使其在IE6下的值为10px，IE7为20px，IE8为30px？

1
2
3
4

//注意顺序不可颠倒，因为css从上往下解析，后面属性优先级略高于前面（同级的时候）
width:30px\9;	//IE8
*width:20px;	//IE7
_width:10px;	//IE6

CSS解析方式

　　从上往下，同选择器从右往左解析

　　至于为什么从右往左解析可以参考：为什么CSS选择器是从右往左解析

CSS的优先级

　　一般来讲优先级id>class>标签

　　最近遇到一个问题，就是：

1
2
3
4
5
6
7
8
9
10

#head p{
	background-color:white;
}
.change{
	background-color:red;
}

<div id="head">
	<p class="change">id优先级比.change高啊，所以我的背景是白色</p>
</div>

　　但是这样把类前面也加上#head p就可以提高优先级了

1
2
3
4
5
6
7
8
9
10

#head p{
	background-color:white;
}
#head p.change{
	background-color:red;
}

<div id="head">
	<p class="change">现在的.change的优先级最高了，背景就是红色了</p>
</div>

li标签中的a标签改变字体颜色color需要注意的地方

　　最近遇到了想鼠标移到li上，但里面的a字体变色不成功的问题。查了一下因为默认就有样式，所以不会继承父级的color等样式，这时候就需要显式让a继承li的color才行，即：

1
2
3
4
5
6

li{
	color: #fff;
}
li>a{
	color: inherit;
}

CSS想实现一个元素发生变动，改变另外元素的样式

　　原先我一直以为CSS只能改变自身元素的样式，如果想自身变动又想要别的元素变动，必须借助JS才行，但发现并不是这样。

HTML:

1
2
3

<div id="box"></div>
<p>就会发现你可以hover第一个层的时候，改变第二个层的样式。</p>
<div></div>

CSS:

1
2
3
4
5
6
7
8
9

div{
	width: 100px;
	height: 100px;
	background: red;
	border: 3px double #000;
}
#box:hover ~ div{
	background: blue;
}

结构伪类选择器:nth-child(n)需要注意的地方

　　:nth-child选择的是某父元素的子元素，这个子元素并没有指定确切的类型，必须同时满足两个条件时方能有效果：

　　1.是子元素
　　2.该子元素刚好处在n那个位置

　　但有时候经常会出现问题，比如在body下加

JS for-in语句的使用

js中for循环一般用于遍历数组

for-in一般用于循环遍历对象的属性

　　
　　因为JavaScript的数组其实就是对象，它把数组的下标转变成字符串，用其作为属性。所以下面两个对象类似：

1
2
3
4
5
6

//数组字面量
var numbers=["zero","one","two","three","four","five"];
//它很类似对象字面量
var numbers_object={
	"0":"zero","1":"one","2":"two",3:"three",4:"four","5":"five"
}

　　因为JavaScript的数组其实就是对象,所以for in语句可以用来遍历一个对象的所有属性，即：

1
2
3
4
5
6
7
8
9

var numbers=["zero","one","two","three","four","five"];
//num只是该数组对象的属性
for(var num in numbers){
	console.log(num);//0,1,2,3,4,5 
}
//这样才能得到数组中的每一项
for(var num in numbers){
	console.log(numbers[num]);//"zero","one","two","three","four","five"
}

　　但要注意for-in无法保证属性的顺序。

CSS 使用overflow:hidden清除浮动

　　今天做了一道网页换肤的练习，但发现了其中的两个小问题，详情如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<div id="outer">
	<ul id="skin">
		<li id="red" title="红色"></li>
		<li id="green" title="绿色"></li>
		<li id="blue" title="蓝色"></li>
	</ul>
	<ul id="nav">
			<!--
               	javascript: 是一个伪协议javascript:是表示在触发<a>默认动作时，执行一段JavaScript代码，
               	而 javascript:;表示什么都不执行，这样点击<a>时就没有任何反应。
               -->
			<li><a href="javascript:;">新闻</a></li>
			<li><a href="javascript:;">娱乐</a></li>
			<li><a href="javascript:;">体育</a></li>
			<li><a href="javascript:;">电影</a></li>
			<li><a href="javascript:;">音乐</a></li>
			<li><a href="javascript:;">旅游</a></li>
	</ul>
</div>

　　在div里有两个ul，对它们的li分别都设置了float: left后发现：
　　1. 这两个ul中的li都脱离了文档流，跑到一行上去了
　　2. 为ul设置过黑色背景，但都消失了
　　于是我使用了br来换行，但发现原作者并没有这样做，这不由得让我产生了疑问。在反复查看源码后，我发现是overflow: hidden;在起作用，遂到网上一查发现，它并不只有隐藏溢出的功能，还有清除浮动和解除坍塌的功能。原理如下：
　　浮动的元素(两个ul中的li)脱离文档元素， 不占据空间，所以跑到了一行上。 不浮动的元素(ul,div)会直接无视掉这个元素。因为我们没有设置父ul的高度，父ul无视了自己的两个孩子，其高度变为0，所以父ul没有显现。 解决方法就是：
　　1. 如果只想换行，给ul添加overflow:hidden属性即可，清除浮动，恢复它原先占据的ul的位置
　　2. 为父ul添加overflow:hidden属性用以清除浮动，使得父ul显现

　　若想更细致的查看该属性的用法：详细链接

JS中&&和||的奇怪用法

　　最近正在学 JS，找了点练习来做，然后看到如下的代码：

1
2
3
4
5
6
7
8
9

for (var i = 0; i < oBtn.length; i++)
{
	oBtn[i].index = i;
	oBtn[i].onclick = function ()
	{
	this.index == oBtn.length - 1 && (oDiv.style.cssText = "");
	changeStyle(oDiv, oAtt[this.index], oVal[this.index]);
	}
}

　　然后我上网搜了一下明白了 var c=a||b;或var c=a&&b;这种情况时
a && b :如果执行 a 后返回 true，则执行 b 并返回 b 的值；如果执行 a 后返回 false，则整个表达式返回 a 的值，b 不执行
a || b :如果执行 a 后返回 true，则整个表达式返回 a 的值，b 不执行；如果执行 a 后返回 false，则执行 b 并返回 b 的值

　　所以这句就好理解了this.index == oBtn.length - 1 && (oDiv.style.cssText = “”);
　　这可以算是一种炫技代码⊙﹏⊙，相当于：

1
2
3

if(this.index == oBtn.length - 1){
	oDiv.style.cssText = "";
}

新手上路啦

　　忙活了三天搭起了个人的博客，虽然只是开了一个框架，但看到属于自己的页面那一刻，心情是很激动的.作为一只准备投身前端领域的小菜鸟，这一个月越发的感受到了前端的魅力，也见识了前端的深邃，自己目前的水平也就是刚对JS和CSS入了门，上论坛看大家讨论的一堆名词连听都没听说过，所以革命还需努力啦！
　　鉴于目前已大三下学期，马上就要找实习了，故在文章最后分享一下最近看到一句话：“你第一个月的工资=你之前看过的所有技术性书籍价值的总和”，我感觉这是非常有道理的，小时候读书少，现在有动力读相关技术的书了，也算是一个好兆头。
　　最后分享一下搭建博客的过程中用到的教程：
　　1. GitHub搭建博客 具体教程
　　2. Hexo完善博客 具体教程
　　3. 使用markdown来写博客(ps:要是想要段首缩进可以切换到输入法全角模式打两个空格) 语法参考
　　那今天就先到这里啦，我们下篇博客再会！

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1

$ hexo new "My New Post"

More info: Writing

Generate static files

1

$ hexo generate or $ hexo g

More info: Generating

Debug

1

$ hexo s --debug

More info: Server

Deploy to remote sites

1

$ hexo deploy or $ hexo d

More info: Deployment