月度归档:2013年05月

常用js正则表达式规则整理

一下仅为正则表达式规则,不包含js正则表达式用法,如果不会使用js正则表达式,请查看教程:

JS正则表达式教程

  • 中文字符:/[u4e00-u9fa5]/
  • 双字节字符(包括汉字):/[^x00-xff]/
  • 正整数: /^[1-9]d*$/
  • 负整数:/^-[1-9]d*$/
  • 整数 :/^-?[1-9]d*$/
  • 非负整数(正整数 + 0):/^[1-9]d*|0$/
  • 非正整数(负整数 + 0):/^-[1-9]d*|0$/
  • 由26个英文字母组成的字符串:/^[A-Za-z]+$/
  • 由26个英文字母的大写组成的字符串 :/^[A-Z]+$/
  • 由26个英文字母的小写组成的字符串 :/^[a-z]+$/  
  • 由数字和26个英文字母组成的字符串 :/^[A-Za-z0-9]+$/
  • 由数字、26个英文字母或者下划线组成的字符串:/^w+$/
  • 数字:/^d*$/ 
  • n位的数字:/^d{n}$/ 
  • 至少n位数字:/^d{n,}$/ 
  • m-n位的数字:/^d{m,n}$/
  • 零和非零开头的数字:/^(0|[1-9]d*)$/
  • 标准邮箱:/^[a-zA-Z0-9_]+@([a-zA-Z0-9-]+.)+[a-zA-A]{2,3}$/

JS正则表达式教程

本文仅介绍js正则表达式使用方法,不包含常用的正则表达式规则,如需查看js常用正则表达式规则,请查看:

常用js正则表达式规则整理

正则表达式中的特殊字符含义:

  • :做为转意,即通常在””后面的字符不按原来意义解释,如/b/匹配字符”b”,当b前面加了反斜杆后/b/,转意为匹配一个单词的边界。
  • ^ :匹配一个输入或一行的开头,/^a/匹配”an A”,而不匹配”An a”
  • $ :匹配一个输入或一行的结尾,/a$/匹配”An a”,而不匹配”an A”
  • * :匹配前面元字符0次或多次,/ba*/将匹配b,ba,baa,baaa
  • + :匹配前面元字符1次或多次,/ba*/将匹配ba,baa,baaa
  • ? :匹配前面元字符0次或1次,/ba*/将匹配b,ba
  • (x) :匹配x保存x在名为$1…$9的变量中
  • x|y :匹配x或y
  • {n} :精确匹配n次
  • {n,m} :匹配n-m次
  • {n,} :匹配n次以上
  • [xyz] :字符集(character set),匹配这个集合中的任一一个字符(或元字符)
  • [^xyz] :不匹配这个集合中的任何一个字符
  • b :匹配一个单词的边界
  • B :匹配一个单词的非边界
  • d :匹配一个字数字符,/d/ = /[0-9]/
  • D :匹配一个非字数字符,/D/ = /[^0-9]/
  • n :匹配一个换行符
  • r :匹配一个回车符
  • s :匹配一个空白字符,包括n,r,f,t,v等
  • S :匹配一个非空白字符,等于/[^nfrtv]/
  • t :匹配一个制表符
  • v :匹配一个重直制表符
  • w :匹配一个可以组成单词的字符(alphanumeric,这是我的意译,含数字),包括下划线,如[w]匹配”$5.98″中的5,等于[a-zA-Z0-9_]
  • W :匹配一个不可以组成单词的字符,如[W]匹配”$5.98″中的$,等于[^a-zA-Z0-9]。

直接量字符:

  • f : 换页符
  • n :换行符
  • r : 回车
  • t : 制表符
  • v : 垂直制表符
  • / : 一个 / 直接量
  • \ : 一个 直接量
  • . : 一个 . 直接量
  • * : 一个 * 直接量
  • + : 一个 + 直接量
  • ? : 一个 ? 直接量
  • | : 一个 | 直接量
  • ( : 一个 ( 直接量
  • ) : 一个 ) 直接量
  • [ : 一个 [ 直接量
  • ] : 一个 ] 直接量
  • { : 一个 { 直接量
  • } : 一个 } 直接量
  • XXX : 由十进制数 XXX 指 定的ASCII码字符
  • Xnn : 由十六进制数 nn 指定的ASCII码字符
  • uxxxx :查找以十六进制数 xxxx 规定的 Unicode 字符。

修饰符:

  • i :执行对大小写不敏感的匹配。
  • g :执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。
  • m :执行多行匹配

执行方法:

stringObject.search(regexp),例如:

'0101后花园'.search(/0101/); //返回值为匹配到的字符串的位置索引,此例返回值为0

stringObject.match(regexp),例如:

'0101后花园'.match(/0101/g); //返回值为匹配到的字符串数组

regexp.exec(stringObject),例如:

/0101/g.exec('0101后花园'); //返回值为匹配到的字符串数组

stringObject.replace(regexp, ‘replacement’),例如

'0101后虎园'.replace(/0101/g, 'abab'); //返回值为替换之后的字符串,源字符串不更改

regexp.test(stringObject),例如:

/0101/g.test('0101后花园'); //返回值为布尔值true or false,常用于表单验证

stringObject.split(regexp),例如:

'0101后花园'.split(/0101/); //返回值为按regexp分割之后的数组

什么是CSS3 Media Queries?如何利用Media queries开发响应式页面?最详解!

Media Queries 介绍:

Media Queries 是CSS3属性,它可以让你针对不同的终端(例如不同分辨率的屏幕)应用不同的css样式,例如通过Media Queries你可以为移动端设置特有的样式,也可以设置打印版特有的样式。

基本用法介绍:

// 常规样式
#header-image {
    background-repeat: no-repeat;
    background-image:url('image.gif');
}

// 针对大号屏幕设置大号背景图
@media screen and (min-width: 1200px) {
    #header-image {
        background-image:url('large-image.gif');
    }
}

// 针对打印版隐藏头部的图片
@media print {
    #header-image {
        display: none;
    }
}

同样你也可以这样使用:

<link rel='stylesheet' media='all' href='normal.css' />
<link rel='stylesheet' media='print' href='print.css' />
<link rel='stylesheet' media='screen and (min-width: 701px)' href='medium.css' />

这种用法的优势是浏览器只会加载用到的css样式表,所以print.css只会在打印预览页面被加载

因为这种方式采用串联的方式,所以没有被重写的样式依然生效。

举例如下:

#block1, #block2 { 
    float: left; 
    width: 100%; 
} 

@media (min-width: 1000px) { 
    #block1, #block2 { 
        width: 50%; 
    } 
}

例子展示的是在大屏幕的时候block1和block2是并列摆放的,而在小于1000px的屏幕时会改为上下摆放,因为float:left;一直保持生效

浏览器支持情况:

所有的现代浏览器都支持 Media Queries,ie9往上支持,所有现代移动端浏览器都支持包括Blackberry 7.0和10.0

Media Queries特性:

Media Queries有个最大的优点就是可以实时监听屏幕变化,好处就是开发响应式页面的时候不用准备各种各样的终端,只需要拉动浏览器改变可视区域大小即可,页面会实时响应!

注:0101后花园就采用了响应式模板,你可以改变浏览器大小试试看,很神奇哦~

支持的媒体类型:

all:All devices listen to this
braille:Used for braille tactile feedback devices.
embossed:Used for paged braille printers.
handheld:Used for handheld devices (Smartphones and tablets do NOT listen to this!).
print:Used for paged material and for documents viewed on screen in print preview mode.
projection:Used for projected presentations, for example projectors.
screen:Used primarily for color computer screens and smartphones.
speech:Used for speech synthesizers.. (Whatever that may be)
tty:Used for media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities).
tv:Used for television-type devices (low resolution, color, limited-scrollability screens, sound available).

支持的CSS表达式:

width:The width of the current window
height:The height of the current window
device-width:The width of the device
device-height:The height of the device
orientation:Either landscape or portrait
aspect-ratio:The aspect ratio of the current window
device-aspect-ratio:The aspect ratio of the device
color:The number of color bits per color component
color-index:The number of available colors on the device
monochrome:The number of bits per pixel in a monochrome frame buffer
resolution:The resolution of the device
scan:Eiter progressive or interlace
grid:Is the device grid-based?

附上:CSS3在线手册

附上:响应式页面演示站

js正则表达式实现trim函数–去除字符串两端空格

1.js正则表达式去除字符串左端空格的正则表达式为:/(^\s*)/g

function trim_left(str) {
    return str.replace(/(^\s)/g, '');
}

2.js正则表达式去除字符串右端空格的正则表达式为:/(s\*$)/g

function trim_right(str) {
    return str.replace(/(\s*$)/g, '');
}

3.js正则表达式去除字符串两端空格的正则表达式:/(^\s*)|(\s*$)/g

function trim_all(str) {
    retrun str.replace(/(^\s*)|(\s*$)/g, '');
}

 

div+css自适应3列布局,两侧列定宽,中间宽度自适应

本文讲解的是两侧列定宽,中间宽度自适应布局

这种布局有以下几个难点:

  1. 如题,左侧一列定宽200px,右侧一列定宽300px,中间主体区块宽度自适应
  2. 处于页面优化考虑,应先加载中间主体区块再依次加载左右侧两列列,所以中间主体区块div要写在左右侧两列区块div前面
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.main,.left,.right {
    height: 300px;
    font: bolder 20px/300px '微软雅黑';
    color: #fff;
    text-align: center;
}
.main {
    width: 100%;
    float: left;
}
.main .content {
    margin: 0 300px 0 200px;
    background-color: black;
}
.left {
    width: 200px;
    float: left;
    margin-left: -100%;
    background-color: red;
}
.right {
    width: 300px;
    float: left;
    margin-left: -300px;
    background-color: blue;
}
</style>
</head>
<body>
<div class="main">
    <div class="content">中间主体区块宽度自适应</div>
</div>
<div class="left">左列定宽200px</div>
<div class="right">右侧定宽300px</div>
</body>
</html>

最终效果图:

div+css自适应3列布局,两侧列定宽,中间宽度自适应

相关链接:

div+css自适应两列布局,一列定宽,一列自适应

 

div+css自适应两列布局,一列定宽,一列自适应

本文讲解的是左侧一列定宽,右侧主体宽度自适应布局

这种布局有以下几个难点:

  1. 如题,左侧一列定宽200px,右侧主体区块宽度自适应
  2. 处于页面优化考虑,应先加载右侧主体区块再加载左侧定宽列,所以右侧主体区块div要写在左侧定宽区块div前面
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.main,.sitebar {
    height: 300px;
    font: bolder 20px/300px '微软雅黑';
    color: #fff;
    text-align: center;
}
.main {
    width: 100%;
    float: left;
}
.main .content {
    margin-left: 200px;
    background-color: red;
}
.sitebar {
    width: 200px;
    float: left;
    margin-left: -100%;
    background-color: green;
}
</style>
</head>
<body>
<div class="main">
    <div class="content">右侧主体自适应区块</div>
</div>
<div class="sitebar">左侧定宽200px区块</div>
</body>
</html>

最终效果图:

div+css自适应两列布局,一列定宽,一列自适应

 

相关链接:

div+css自适应3列布局,两侧列定宽,中间宽度自适应

 

详细讲解css单位px,em和rem的含义以及它们之间的区别

一.首先介绍一下px

px就是css中最基本的长度单位了,用px做单位基本上没什么问题,可以做到让页面按套路精确的展现!

可但是!但可是!如果全篇用px布局会暗藏一个蛋疼的问题,就是当用户和Ctrl滚页面的时候(说白了就是ctrl+,ctrl-),你会发现页面结构产生了不可预知的错乱,因此有砖家倡导使用em替代px。。。。。

二.接下来介绍一下em

如果你从上到下阅读此文,你应该已经知道了em出现的原因,下面说说em的特性,简单的讲px是绝对单位,1px就是1px,2px就是2px,以此类推,而em是相对单位,em相对的基准点就是浏览器的字体大小,浏览器默认字体大小是16px,也就是1em默认等于16px,如果你想给某个文字设定为14px,就这样写 font-size:0.875em; 公式是14/16=0.875em,如果想要15px,那么就是15/16=0.938em, 例如margin:0.938em; 依次类推,样式表都用em来写的话,就可以解决ctrl+,ctrl-时造成的页面错乱问题,常用em对照表如下

em对照表

这时候有人和我一样就会抱怨了,我的数学是体育老师教的,除以16我怎么可能算明白,那好办你可以在根节点<html>上重定义基准字号 html {font-size:62.5%} ,此时页面基准字号就是 16px * 62.5% = 10px , 那么此时 1em = 10px,那么此时14px = 1.4em,15px=1.5em,依次类推,就算你数学是要饭的教的应该也会算了吧-。-!

可但是!但可是!问题又来了,em准确的说是相对于父节点的字号来计算的,如果自身定义了字号那么就相对自身字号来计算,举例如下:

html { font-size: 100%; }
.box-0 {
    height: 1em; /* 此时height等于16px */
}
.box-1 { 
    font-size: 0.625em; /* 此时基准字号以变更为16*0.625=10px */ 
    height: 1em; /* 此时实际height等于10px */
}

看明白了吧,在整个页面内1em并不是一个固定不变的值,1em不停的变换,再加上数学是体育老师教的,这不是自作孽吗。。。没关系,css3为我们引入一个新的单位就是rem可以解决这个问题

三.最后介绍一下主角rem

rem和em一样也是一个相对单位,为了方便理解,我们就理解rem为root em,顾名思义rem只相对跟节点<html>计算,这就是说只要在根节点设定好参考值,那么全篇的1rem都相等,计算方式同em,默认1rem=16px; 同理你可以设定html { font-size:62.5% } 那么1rem就等于10px,以此类推。。。

声明一下:rem是css3属性,没错!这就是说屌丝ie678不支持rem属性,只有chrome、firefox等高富帅支持!那么我们就在ie678中用px做兼容处理,例如:

.box {
    font-size: 14px; /* 用来兼容ie678 */
    font-size: 0.875em; 
}

 0101后花园使用的WordPress 3.5.1所引用的style.css正是使用的这种方式。

由于作者的语文也是体育老师教的,所以有言语不通之处敬请见谅,还请指正!3Q!

-webkit-text-size-adjust:none;解决Chrome下字号不能小于12px的问题

出于人道主义先放出解决方案:

给html添加css样式:html { -webkit-text-size-adjust:none; }

Google Chrome出于好意在中文版中默认强制字体最小为12px,无论设置10px还是11px都按照12px显示,因为当汉字小于12px的时候形状扭曲,已经不适合淫类阅读。

可但是!但可是!这阻挡不了那些奇葩设计湿必须要你把一个8px的“繁”字摆在页面上,所以Chrome提供此方案以救你于水火之中!

可但是!但可是!这样设置之后会有一个问题,就是当你和Ctrl滚页面的时候,正常情况下字体应该会随着变大变下,而设置 -webkit-text-size-adjust:none;后,字体只会显示你当前设置的字体大小,不会随着网页放大而变大了,这样对有需要放大网页观看的用户造成了不好的用户体验,所以不建议全局应用该属性,而是在需要的情况单独使用就好了。