博客决定取消使用pjax技术加载页面，简单分析 PHP

pjax是对ajax + pushState的封装，让你可以很方便的使用pushState技术。

同时支持了缓存和本地存储，下次访问的时候直接读取本地数据，无需在次访问。

并且展现方式支持动画技术，可以使用系统自带的动画方式，也可以自定义动画展现方式。

这是它的开源主页： https://github.com/welefen/pjax

我的博客也在前不久使用这项技术，具体的教程请前往Finlly博客查看：关于PJAX局部刷新；

但是使用之后，发现有如下几个问题：

1：我得服务器资源占用比不使用pjax之前多了30%，大神勿笑，也可能是我小菜不会优化；

2：加载之后会发现，会出现不能够加载其他的js，比如不能够加载第三方分享的js文件，或者是代码高亮插件的js，导致代码的高亮，复制，又或者是图片highslide插件等功能失效；

下面几点来至于互联网：

3：这个技术使用的场景很受限制，据我所知真正用这个技术的网站很少

因为html5的新api：pushState和replaceState的出现，让url脱离了#号。更重要的是支持了浏览器前进后退的事件触发onpopstate

4：不利于SEO，当然，你可以针对爬虫做处理，但那是自找麻烦

5：不同页面引用的资源很可能不同，切换页面需要动态加载新的js和css，容易和旧的CSS和JS产生冲突

6：不刷新页面，意味着页面占用的资源得不到释放，如果有内存泄露问题，页面会越来越卡

不知道各位有什么好的优化方案没，或者是在使用pjax过程中有哪些问题。

题外话：还是HTML5方便，赶紧学习html5，因为html5的新api：pushState和replaceState的出现，支持浏览器前进后退的事件触发onpopstate，pushState的功能具体来说就是修改url而页面无跳转，并且该url会被存放在历史记录中

当然为了满足某些需要你不需要存放在历史记录中就需要使用replaceState

而浏览器上前进和后退都会触发onpopstate能获取你设置的State对象

拿welefen的pjax说下原理:

1.在用户超链请求的时候拦截超链

2.拦截后同时发出两种行为 ajax请求以及 pushState

实际上他的设计是线性的，在超链被拦截后才会触发。

我更倾向于观察者模式，state被改变的时候触发。

如果你真的想用在项目中我推荐你直接使用 balupton/history.js · GitHub

在不支持html5的浏览器上采用了hash作为代替并且监听了statechange事件

标签: 编程 ajax pjax pushState html5

admin 发布于 2015-8-26 12:56

评论(12) 浏览(11341)

水平居中设置-行内元素

如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。如下代码：

html代码：

<body>
  <div class="txtCenter">我是文本，哈哈，我想要在父容器中水平居中显示。</div>
</body>

css代码：

<style>
  div.txtCenter{ text-align:center; }
</style>

水平居中设置-定宽块状元素

当被设置元素为块状元素时用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。这一小节我们先来讲一讲定宽块状元素。

满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。我们来看个例子就是设置 div 这个块状元素水平居中：

html代码：

<body>
  <div>我是定宽块状元素，哈哈，我要水平居中显示。</div>
</body>

css代码：

<style>
div{
    border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/

    width:500px;/*定宽*/ margin:20px auto;/* margin-left 与 margin-right 设置为 auto */ }

</style>

也可以写成：

margin-left:auto;
margin-right:auto;

注意：元素的“上下 margin” 是可以随意设置的。

水平居中总结-不定宽块状元素方法（一）

在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中，比如网页上的分页导航，因为分页的数量是不确定的，所以我们不能通过设置宽度来限制它的弹性。

不定宽度的块状元素有三种方法居中（这三种方法目前使用的都比多）：

加入 table 标签
设置 display;inline 方法
设置 position:relative 和 left:50%;

这一小节我们来讲一下第一种方法：

第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。

第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。

举例如下：

html代码：

<div> <table> <tbody>
    <tr><td> <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>  </td></tr>
  </tbody>
</table> </div>

css代码：

<style> table{
    margin:0 auto;
} ul{list-style:none;margin:0;padding:0;}
li{float:left;display:inline;margin-right:8px;}
</style>

水平居中总结-不定宽块状元素方法（二）

第二种方法：改变块级元素的 dispaly 为 inline 类型，然后使用 text-align:center 来实现居中效果。如下例子：

html代码：

<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
</body>

css代码：

<style>
.container{ text-align:center; }
.container ul{
    list-style:none;
    margin:0;
    padding:0; display:inline; }
.container li{
    margin-right:8px;
    display:inline;
}
</style>

这种方法相比第一种方法的优势是不用增加无语义标签，简化了标签的嵌套深度，但也存在着一些问题：它将块状元素的 display 类型改为 inline，变成了行内元素，所以少了一些功能，比如设定长度值。

水平居中总结-不定宽块状元素方法（三）

方法三：通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:-50% 来实现水平居中。

代码如下：

<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
</body>

css代码：

<style>
.container{  float:left;
    position:relative;
    left:50% }

.container ul{
    list-style:none;
    margin:0;
    padding:0;  position:relative;
    left:-50%; }
.container li{float:left;display:inline;margin-right:8px;}
</style>

这种方法可以保留块状元素仍以 display:block 的形式显示，优点不添加无语议表标签，不增加嵌套深度，但它的缺点是设置了 position:relative，带来了一定的副作用。

这三种方法使用得都非常广泛，各有优缺点，具体选用哪种方法，可以视具体情况而定。

垂直居中-父元素高度确定的单行文本

父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。如下代码：

<div class="container">
    hi,Mrxn!
</div>

css代码：

<style>
.container{ height:100px;
    line-height:100px; background:#999;
}
</style>

垂直居中-父元素高度确定的多行文本（方法一）

父元素高度确定的多行文本、图片、块状元素的竖直居中的方法有两种：

方法一：使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。

说到竖直居中，css 中有一个用于竖直居中的属性 vertical-align，但这个样式只有在父元素为 td 或 th 时，才会生效。所以又要插入 table 标签了。下面看一下例子：

html代码：

<body> <table><tbody><tr><td class="wrap"> <div>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
</div> </td></tr></tbody></table> </body>

css代码：

table td{height:500px;background:#ccc}

因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。

垂直居中-父元素高度确定的多行文本（方法二）

在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell，激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式。

html代码：

<div class="container">
    <div>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
    </div>
</div>

css代码：

<style>
.container{
    height:300px;
    background:#ccc;  display:table-cell;/*IE8以上及Chrome、Firefox*/ vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style>

这种方法的好处是不用添加多余的无意义的标签，但缺点也很明显，它的兼容性不是很好，不兼容 IE6、7。

隐性改变display类型

有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：

position : absolute
float : left 或 float:right

元素会自动变为以 display:inline-block 的方式显示，当然就可以设置元素的 width 和 height 了且默认宽度不占满父元素。

如下面的代码，小伙伴们都知道 a 标签是行内元素，所以设置它的 width 是没有效果的，但是设置为 position:absolute 以后，就可以了。

<div class="container">
    <a href="#" title="">请单击这里</a>
</div>

css代码

<style>
.container a{ position:absolute; width:200px;
    background:#ccc;
}
</style>

标签: 编程代码 html css

admin 发布于 2015-8-19 19:09

评论(0) 浏览(5603)

自动压缩、加密 CSS/JavaScript 优化网站性能 PHP

关于压缩

压缩 CSS 的方法, 无外乎缩写代码和清除多余字符来实现, 平时只要养成使用缩写的技巧就可以明显减少最终代码的整体大小. 在此我就不做过多的描述, 后文也会有简单的压缩代码.

相比于前者, JavaScript 的压缩方式就比较丰富工具也很多, 常用的有: Packer/YUI-compressor/Dojo Compressor 等, 本人比较喜欢用 Packer 来压缩, 压缩比例可以达到 50% 上下.

我不知道读者是如何对 CSS/JavaScript 进行处理的, 但在此之前我都是线下压缩然后在上传, 但还是有些麻烦且不便于管理. 于是最近正好找到一个 Packer 的后端类, 在不改动原 CSS/JavaScript 的前提下实时压缩文件并输出, 可以更好的解决我目前的困扰.

实现过程

首先在下载：packer.php-1.1.zip 并解压 class.JavaScriptPacker.php 到你的当前主题目录, 然后在相同位置创建compress.php 文件, 内容如下:

<?php

'javascript', 'css' => 'css');

if (file_exists($path)) { // 判断文件存在的情况下在执行压缩工作
  Header('Content-Type: text/' . $head[$info] . '; charset=utf-8'); // 必需定义相应的文件头
  $script = file_get_contents($path); //读取文件

  if ($info != 'css') { // 判断不同的文件类型做处理
    require 'class.JavaScriptPacker.php'; // 引用 Packer 类
    $packer = new JavaScriptPacker($script, 'Normal', true, false); // 设置压缩参数
    $packed = $packer->pack(); // 压缩并写入变量
  } else { // 处理 CSS 文件
    $packer = preg_replace("!/\*[^*]*\*+([^/][^*]*\*+)*/!", "", $script); // 清除多余注释
    $packed = str_replace(array("\r\n", "\r", "\n", "\t", "  ", "    ", "    "), null, $packer); // 清除多余换行、空格、缩进符
  }

  echo $packed; // 输出所压缩的内容
}
;?>

然后在相同的位置创建一个 .htaccess 文件, 内容如下：

RewriteEngine On
RewriteRule (.*.(js|css))$ /compress.php?name=$1

后记

该方法在自己的vps+Apache 环境下通过, 直接访问相应文件的绝对路径就会自动压缩并输出, 但是如果你的主机不支持 Rewrite 功能的话, 可以跳过创建 .htaccess 然后通过 http://youdomain.com/content/templates/主题目录/compress.php?name=文件名称.css/js 来调用文件.

标签: 编程代码 php html css 性能优化

admin 发布于 2015-8-1 13:17

评论(0) 浏览(8829)

css自适应宽度滑动门菜单 PHP

html css width 自适应

什么是CSS自适应宽度滑动门菜单？

CSS自适应宽度菜单指菜单的宽度可以随着内容的增加而变宽，就拿下边的实例来说，是按4个字的宽度来设计的，如果其中一项为5个字或更多，就放不下了。那么我们就需要让它的宽度可以随着内容的增减而变化，这就是css自适应宽度菜单。

自适应宽度按钮的效果是怎样的呢？

那么，自适应宽度按钮，是怎么实现的呢？

要想实现自适应宽度，需要在文字上增加一个辅助标签，如span，分别在a上和span上设置背景，一个左侧对齐，一个右侧对齐

绿色部分为span，然后定义它的背景图片靠右侧对齐，而左侧的部分为a的背景图片，定义靠左侧对齐。当文字多时，会把span撑开，这实现了自适应宽度的按钮了。这里需要一张如下的图片，它的宽度要宽于你所应用的最宽宽度，这样才能显示正常，同时根据以前学习的css Sprites技术，把背景图片和鼠标经过图片放到一张图片上。

标签: 编程代码 php html css

admin 发布于 2015-7-23 15:42

评论(0) 浏览(6646)

在 WampServer 上手工安装 PHP 的多个版本 PHP

手工安装新版本的PHP，只需以下步骤：

下载要安装的PHP版本。既然是用WampServer，那当然是下载Window版本的ZIP包啦：http://windows.php.net。解压到 Wamp的安装目录in\php\php5.2.17。这里以5.2.17为例。

进入 Wamp的安装目录in\php\php5.2.17 目录，从 php.ini-dist 或者 php.ini-recommended 复制一份，重命名为php.ini，适应修改php.ini配置（如extension_dir），再从php.ini复制一分，重命名为 phpForApache.ini。

从已有的版本目录中复制一份 wampserver.conf。比如我安装WampServer的时候已经有php5.3.0，在 Wamp的安装目录in\php\php5.3.0 目录下复制 wampserver.conf 到 Wamp的安装目录in\php\php5.2.17。

修改Wamp配置文件：进入 Wamp的安装目录，用IDE或记事本（最好使用行号定位的记事本，如EditPlus等）打开 wampmanager.ini，定位到 335 行，通常在这一行就是[phpVersion]，如果不是，则在附近找找。复制下面一行：

Type: item; Caption: "5.3.0"; Action: multi; Actions:switchPhp5.3.0

插入到这一行前面，并修改为

Type: item; Caption: "5.2.17"; Action: multi; Actions:switchPhp5.2.17

再复制

[switchPhp5.3.0]

Action: service; Service: wampapache; ServiceAction: stop; Flags: ignoreerrors waituntilterminated

Action: run; FileName: "Wamp的安装目录/bin/php/php5.3.0/php-win.exe";Parameters: "switchPhpVersion.php 5.3.0";WorkingDir: "Wamp的安装目录/scripts"; Flags: waituntilterminated

Action: run; FileName: "Wamp的安装目录/bin/php/php5.3.0/php-win.exe";Parameters: "-c . refresh.php";WorkingDir: "Wamp的安装目录/scripts"; Flags: waituntilterminated

Action: run; FileName: "net"; Parameters: "start wampapache"; ShowCmd: hidden; Flags: waituntilterminated

Action: resetservices

Action: readconfig;

插入这一段之前，并修改为

[switchPhp5.2.17]

Action: service; Service: wampapache; ServiceAction: stop; Flags: ignoreerrors waituntilterminated

Action: run; FileName: "Wamp的安装目录/bin/php/php5.3.0/php-win.exe";Parameters: "switchPhpVersion.php 5.2.17";WorkingDir: "Wamp的安装目录/scripts"; Flags: waituntilterminated

Action: run; FileName: "Wamp的安装目录/bin/php/php5.3.0/php-win.exe";Parameters: "-c . refresh.php";WorkingDir: "Wamp的安装目录/scripts"; Flags: waituntilterminated

Action: run; FileName: "net"; Parameters: "start wampapache"; ShowCmd: hidden; Flags: waituntilterminated

Action: resetservices

Action: readconfig;

退出WampServer，再重启。完成。

通过这5步，即可完成PHP任意版本的安装。

标签: 编程分享 php

admin 发布于 2015-7-22 21:28

评论(0) 浏览(8490)

php学习小计处理几个常见的错误 PHP

Deprecated: Function ereg_replace() is deprecated

在php5.3.0后的版本，取消了对ereg函数的支持，惹得若干程序需要改动，譬如我安装的zen-card1.3.8，颇不方便。
错误：Deprecated: Function ereg() is deprecated in ……
解决方法一：退回去用php5.2。（众人皆赞道：果是好法子！）

解决方法二：继续用php5.3，但是修改devel/devel.modul的460行：if ($errno & (E_ALL ^ E_NOTICE)) {改为if ($errno & (E_ALL & ~E_NOTICE & ~E_DEPRECATED)) {把丫deprecated错误给忽略掉。（众人皆又赞道：果……果……果是好法子！）

解决方法三：动程序鸟，把ereg换成preg_match，ereg_replace也需得换成preg_replace。只得注意的是ereg("^[0-9]") 需修改成 preg_match("/^[0-9]/") 无敌//必须加，哈哈。（众人皆俯首赞道：王道也！）

PHP之短标签开启设置

//php.ini中

short_open_tag = On

//除<?php ?>，可使用更灵活的调用方法

<? /*程序操作*/ ?>

<?=/*函数*/?>

这样可以解决很多错误.比如提示错误在某代码最后一行.

Deprecated: Function set_magic_quotes_runtime() is deprecated in
原因高版本的php把set_magic_quotes_runtime去了,解决办法:

//把
set_magic_quotes_runtime(0);
//替代成
ini_set("magic_quotes_runtime",0);

即可解析了.

标签: 编程代码 php

admin 发布于 2015-7-21 20:21

评论(0) 浏览(5960)

PHP面试题遇到的几个坑。...面壁ing PHP

1.指针悬挂问题

$array = [1, 2, 3];

echo implode(',', $array), "\n";

foreach ($array as &$value) {} // by reference

echo implode(',', $array), "\n";

foreach ($array as $value) {} // by value (i.e., copy)

echo implode(',', $array), "\n";

正确答案应该是：

1,2,3

1,2,2

解释：

我们来分析下。第一个循环过后，$value是数组中最后一个元素的引用。第二个循环开始：

第一步：复制$arr[0]到$value（注意此时$value是$arr[2]的引用），这时数组变成[1,2,1]

第二步：复制$arr[1]到$value，这时数组变成[1,2,2]

第三步：复制$arr[2]到$value，这时数组变成[1,2,2]

2.以下结果输出：

<?php

$test=null;

if(isset($test)){

echo "true";

}else{

echo "false";

}

正确答案：false

解释：对于 isset() 函数，变量不存在时会返回false，变量值为null时也会返回false。

判断一个变量是否真正被设置（区分未设置和设置值为null），array_key_exists()函数或许更好。

3.以下结果能否打印出来，为什么？

class Config{

private $values = [];

public function getValues() {

return $this->values;

}

$config = new Config();

$config->getValues()['test'] = 'test';

echo $config->getValues()['test'];

正确答案:

不行，因为在PHP中，除非你显示的指定返回引用，否则对于数组PHP是值返回，也就是数组的拷贝。因此上面代码对返回数组赋值，实际是对拷贝数组进行赋值，非原数组赋值。如果把代码改成：

class Config{

private $values = [];

// return a REFERENCE to the actual $values array

public function &getValues() {

return $this->values;

}

$config = new Config();

$config->getValues()['test'] = 'test';

echo $config->getValues()['test'];

就可以了。

知识要点：PHP中对于对象，默认是引用返回，数组和内置基本类型默认均按值返回。这个要与其它语言区别开来（很多语言对于数组是引用传递）。

4.以下代码运行后服务器输出什么？

$.ajax({

url: 'http://my.site/ndex.php',

method: 'post',

data: JSON.stringify({a: 'a', b: 'b'}),

contentType: 'application/json'

});

var_dump($_POST);

答案：array(0){}

解释：PHP仅仅解析Content-Type为 application/x-www-form-urlencoded 或 multipart/form-data的Http请求。之所以这样是因为历史原因，PHP最初实现$_POST时，最流行的就是上面两种类型。因此虽说现在有些类型（比如application/json）很流行，但PHP中还是没有去实现自动处理。因为$_POST是全局变量，所以更改$_POST会全局有效。因此对于Content-Type为 application/json 的请求，我们需要手工去解析json数据，然后修改$_POST变量。

$_POST = json_decode(file_get_contents('php://input'), true);

这就解释了为什么微信公众平台开发时也要用这个方式获取微信服务器post的数据

6.以下代码输出的结果是：

for ($c = 'a'; $c <= 'z'; $c++) {

echo $c . "\n";

}

正确答案：a.......z,aa.....yz

解释：在PHP中不存在char数据类型，只有string类型。明白这点，那么对'z'进行递增操作，结果则为'aa'。对于字符串比较大小，学过C的应该都知道，'aa'是小于'z'的。这也就解释了为何会有上面的输出结果。

但是PHP中如果比较的是两个纯数字的字符串时，首先尝试将其当成数字来比较的。

标签: 代码 php

admin 发布于 2015-7-5 23:21

评论(0) 浏览(6355)

css控制不溢出,不换行,溢出部分省略号显示 PHP

css控制不溢出,不换行,溢出部分省略号显示：white-space:nowrap;text-overflow:ellipsis;overflow:hidden;

ext-overflow 取值：
clip : 默认值。不显示省略标记(...)，而是简单的裁切
ellipsis : 当对象内文本溢出时显示省略标记(...)

white-space : normal | pre | nowrap 取值：
normal : 默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行
pre : 换行和其他空白字符都将受到保护。这个值需要IE6+或者 !DOCTYPE 声明为 standards-compliant mode 支持。如果 !DOCTYPE 声明没有指定为 standards-compliant mode ，此属性可以使用，但是不会发生作用。结果等同于 normal 。参阅 pre 对象
nowrap : 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象。参阅 noWrap 属性

overflow : visible | auto | hidden | scroll 取值：
visible : 默认值。不剪切内容也不添加滚动条。假如显式声明此默认值，对象将以包含对象的 window 或 frame 的尺寸裁切。并且 clip 属性设置将失效
auto : 在必需时对象内容才会被裁切或显示滚动条
hidden : 不显示超过对象尺寸的内容
scroll : 总是显示滚动条

标签: 编程代码 css

admin 发布于 2015-6-8 23:41

评论(0) 浏览(6242)

css 书写顺序、命名规则的指南 PHP

这里总结了一些国外一些文章以及我的个人经验总结出来，我想对写CSS的前端用户来说是值得学习的。

CSS书写顺序

位置属性(position, top, right, z-index, display, float等)
大小(width, height, padding, margin)
文字系列(font, line-height, letter-spacing, color- text-align等)
背景(background, border等)
其他(animation, transition等)

CSS书写规范

使用CSS缩写属性

CSS有些属性是可以缩写的，比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验。

去掉小数点前的“0”

简写命名

很多用户都喜欢简写类名，但前提是要让人看懂你的命名才能简写哦！

16进制颜色代码缩写

有些颜色代码是可以缩写的，我们就尽量缩写吧，提高用户体验为主。

连字符CSS选择器命名规范

长名称或词组可以使用中横线来为选择器命名。
不建议使用“_”下划线来命名CSS选择器，为什么呢？
- 输入的时候少按一个shift键；
- 浏览器兼容问题（比如使用_tips的选择器命名，在IE6是无效的）
- 能良好区分JavaScript变量命名（JS变量命名是用“_”）
- 这里有一篇破折号与下划线的详细讨论，英文：：点击查看中文篇：点击查看
  
  不要随意使用Id
  
  id在JS是唯一的，不能多次使用，而使用class类选择器却可以重复使用，另外id的优先级优先与class，所以id应该按需使用，而不能滥用。
  
  为选择器添加状态前缀
  
  有时候可以给选择器添加一个表示状态的前缀，让语义更明了，比如下图是添加了“.is-”前缀。
  
  CSS命名规范（规则）
  
  常用的CSS命名规则
  - 头：header
  - 内容：content/container
  - 尾：footer
  - 导航：nav
  - 侧栏：sidebar
  - 栏目：column
  - 页面外围控制整体佈局宽度：wrapper
  - 左右中：left right center
  - 登录条：loginbar
  - 标志：logo
  - 广告：banner
  - 页面主体：main
  - 热点：hot
  - 新闻：news
  - 下载：download
  - 子导航：subnav
  - 菜单：menu
  - 子菜单：submenu
  - 搜索：search
  - 友情链接：friendlink
  - 页脚：footer
  - 版权：copyright
  - 滚动：scroll
  - 内容：content
  - 标签：tags
  - 文章列表：list
  - 提示信息：msg
  - 小技巧：tips
  - 栏目标题：title
  - 加入：joinus
  - 指南：guide
  - 服务：service
  - 注册：regsiter
  - 状态：status
  - 投票：vote
  - 合作伙伴：partner
  注释的写法:
```
/* Header */ 内容区 /* End Header */
```
  Id的命名:
  
  1)页面结构
  - 容器: container
  - 页头：header
  - 内容：content/container
  - 页面主体：main
  - 页尾：footer
  - 导航：nav
  - 侧栏：sidebar
  - 栏目：column
  - 页面外围控制整体佈局宽度：wrapper
  - 左右中：left right center
  (2)导航
  - 导航：nav
  - 主导航：mainnav
  - 子导航：subnav
  - 顶导航：topnav
  - 边导航：sidebar
  - 左导航：leftsidebar
  - 右导航：rightsidebar
  - 菜单：menu
  - 子菜单：submenu
  - 标题: title
  - 摘要: summary
  (3)功能
  - 标志：logo
  - 广告：banner
  - 登陆：login
  - 登录条：loginbar
  - 注册：register
  - 搜索：search
  - 功能区：shop
  - 标题：title
  - 加入：joinus
  - 状态：status
  - 按钮：btn
  - 滚动：scroll
  - 标籤页：tab
  - 文章列表：list
  - 提示信息：msg
  - 当前的: current
  - 小技巧：tips
  - 图标: icon
  - 注释：note
  - 指南：guild
  - 服务：service
  - 热点：hot
  - 新闻：news
  - 下载：download
  - 投票：vote
  - 合作伙伴：partner
  - 友情链接：link
  - 版权：copyright
  注意事项::
  - 1.一律小写;
  - 2.尽量用英文;
  - 3.不加中槓和下划线;
  - 4.尽量不缩写，除非一看就明白的单词。
  CSS样式表文件命名
  - 主要的 master.css
  - 模块 module.css
  - 基本共用 base.css
  - 布局、版面 layout.css
  - 主题 themes.css
  - 专栏 columns.css
  - 文字 font.css
  - 表单 forms.css
  - 补丁 mend.css
  - 打印 print.css

标签: 编程代码 css

admin 发布于 2015-6-4 23:55

评论(8) 浏览(7180)

JS常用的正则表达式大全 PHP

JS常用的正则表达式大全

"^\d+$"　　//非负整数（正整数 + 0）

"^[0-9]*[1-9][0-9]*$"　　//正整数

"^((-\d+)|(0+))$"　　//非正整数（负整数 + 0）

"^-[0-9]*[1-9][0-9]*$"　　//负整数

"^-?\d+$"　　　　//整数

"^\d+(\.\d+)?$"　　//非负浮点数（正浮点数 + 0）

"^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$"　　//正浮点数

"^((-\d+(\.\d+)?)|(0+(\.0+)?))$"　　//非正浮点数（负浮点数 + 0）

"^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$"　　//负浮点数

"^(-?\d+)(\.\d+)?$"　　//浮点数

"^[A-Za-z]+$"　　//由26个英文字母组成的字符串

"^[A-Z]+$"　　//由26个英文字母的大写组成的字符串

"^[a-z]+$"　　//由26个英文字母的小写组成的字符串

"^[A-Za-z0-9]+$"　　//由数字和26个英文字母组成的字符串

"^\w+$"　　//由数字、26个英文字母或者下划线组成的字符串

"^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$"　　　　//email地址

"^[a-zA-z]+://(\w+(-\w+)*)(\.(\w+(-\w+)*))*(\?\S*)?$"

java script验证表单时常用：

"^-[0-9]*[1-9][0-9]*$"　　//负整数

"^-?\\d+$"　　　　//整数

"^\\d+(\\.\\d+)?$"　　//非负浮点数（正浮点数 + 0）

"^(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*))$"　　//正浮点数

"^((-\\d+(\\.\\d+)?)|(0+(\\.0+)?))$"　　//非正浮点数（负浮点数 + 0）

"^(-(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*)))$"　　//负浮点数

"^(-?\\d+)(\\.\\d+)?$"　　//浮点数

"^[A-Za-z]+$"　　//由26个英文字母组成的字符串

"^[A-Z]+$"　　//由26个英文字母的大写组成的字符串

"^[a-z]+$"　　//由26个英文字母的小写组成的字符串

"^[A-Za-z0-9]+$"　　//由数字和26个英文字母组成的字符串

"^\\w+$"　　//由数字、26个英文字母或者下划线组成的字符串

"^[\\w-]+(\\.[\\w-]+)*@[\\w-]+(\\.[\\w-]+)+$"　　　　//email地址

"^[a-zA-z]+://(\\w+(-\\w+)*)(\\.(\\w+(-\\w+)*))*(\\?\\S*)?$"　　//url

应用实例

用户名：
/^[a-zA-Z]{1}([a-zA-Z0-9]|[_]){4,19}$/

无符号字符串：
/^[^\s]{1}[^-_\~!@#\$%\^&\*\.\[\]\{\}<>\?\\\/\'\"]*$/

Email：
/^\w+([-+.]\w+)*@\w+([-.]\\w+)*\.\w+([-.]\w+)*$/

电话号码：
/^(($\d{3}$)|(\d{3}\-))?($0\d{2,3}$|0\d{2,3}-)?[1-9]\d{6,7}$/

手机号码：
/^(($\d{3}$)|(\d{3}\-))?13\d{9}$/

URL：
/^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/

身份证：
/^\d{15}(\d{2}[A-Za-z0-9])?$/

货币：
/^\d+(\.\d+)?$/

数字：
/^\d+$/

邮政编码：
/^[1-9]\d{5}$/

QQ：
/^[1-9]\d{4,8}$/

整数：
/^[-\+]?\d+$/

实数：
/^[-\+]?\d+(\.\d+)?$/

英文：
/^[A-Za-z]+$/

中文
/^[\u0391-\uFFE5]+$/

密码（必须含有大写字母、小写字母、标点、数字中的至少两种。呵呵，这个比较变态吧～）
/^(([A-Z]*|[a-z]*|\d*|[-_\~!@#\$%\^&\*\.\[\]\{\}<>\?\\\/\'\"]*)|.{0,5})$|\s/

利用正则表达式限制网页表单里的文本框输入内容：

用正则表达式限制只能输入中文：onkeyup="value="/value.replace(/["^\u4E00-\u9FA5]/g,’’)" onbeforepaste="clipboardData.setData(’text’,clipboardData.getData(’text’).replace(/[^\u4E00-\u9FA5]/g,’’))"

用正则表达式限制只能输入全角字符： onkeyup="value="/value.replace(/["^\uFF00-\uFFFF]/g,’’)" onbeforepaste="clipboardData.setData(’text’,clipboardData.getData(’text’).replace(/[^\uFF00-\uFFFF]/g,’’))"

用正则表达式限制只能输入数字：onkeyup="value="/value.replace(/["^\d]/g,’’) "onbeforepaste="clipboardData.setData(’text’,clipboardData.getData(’text’).replace(/[^\d]/g,’’))"

用正则表达式限制只能输入数字和英文：onkeyup="value="/value.replace(/[\W]/g,"’’) "onbeforepaste="clipboardData.setData(’text’,clipboardData.getData(’text’).replace(/[^\d]/g,’’))"

//去左空格;
function ltrim(s){
return s.replace( /^\\s*/, "");
}
//去右空格;
function rtrim(s){
return s.replace( /\\s*$/, "");
}
//去左右空格;
function trim(s){
return rtrim(ltrim(s));
}
//是否为空值;
function IsEmpty(_str){
var tmp_str = trim(_str);
return tmp_str.length == 0;
}
//是否有效的Email;
function IsMail(_str){
var tmp_str = trim(_str);
var pattern = /^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+(.[a-z0-9-]+)*$/;
return pattern.test(tmp_str);
}
//是否有效的数字;
function IsNumber(_str){
var tmp_str = trim(_str);
var pattern = /^[0-9]/;
return pattern.test(tmp_str);
}
//是否有效的颜色值;
function IsColor(color){
var temp=color;
if (temp=="") return true;
if (temp.length!=7) return false;
return (temp.search(/\\#[a-fA-F0-9]{6}/) != -1);
}
//是否有效的链接;
function IsURL(url){
var sTemp;
var b=true;
sTemp=url.substring(0,7);
sTemp=sTemp.toUpperCase();
if ((sTemp!="http://") target="_blank" ... #124;|(url.length<10)){
b=false;
}
return b;
}
//是否有效的手机号码;
function IsMobile(_str){
var tmp_str = trim(_str);
var pattern = /13\\d{9}/;
return pattern.test(tmp_str);
}

</script>

正则表达式用于字符串处理、表单验证等场合，实用高效。现将一些常用的表达式收集于此，以备不时之需。

匹配中文字符的正则表达式： [u4e00-u9fa5]
评注：匹配中文还真是个头疼的事，有了这个表达式就好办了

匹配双字节字符(包括汉字在内)：[^x00-xff]
评注：可以用来计算字符串的长度（一个双字节字符长度计2，ASCII字符计1）

匹配空白行的正则表达式： s*
评注：可以用来删除空白行

匹配HTML标记的正则表达式：<(S*?)[^>]*>.*?</1>|<.*? />
评注：网上流传的版本太糟糕，上面这个也仅仅能匹配部分，对于复杂的嵌套标记依旧无能为力

匹配首尾空白字符的正则表达式：^s*|s*$
评注：可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式

匹配Email地址的正则表达式：w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*
评注：表单验证时很实用

匹配网址URL的正则表达式：[a-zA-z]+://[^s]*
评注：网上流传的版本功能很有限，上面这个基本可以满足需求

匹配帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$
评注：表单验证时很实用

匹配国内电话号码：d{3}-d{8}|d{4}-d{7}
评注：匹配形式如 0511-4405222 或 021-87888822

匹配腾讯QQ号：[1-9][0-9]{4,}
评注：腾讯QQ号从10000开始

匹配中国邮政编码：[1-9]d{5}(?!d)
评注：中国邮政编码为6位数字

匹配身份证：d{15}|d{18}
评注：中国的身份证为15位或18位

匹配ip地址：d+.d+.d+.d+
评注：提取ip地址时有用

匹配特定数字：
^[1-9]d*$　　 //匹配正整数
^-[1-9]d*$ 　 //匹配负整数
^-?[1-9]d*$　　 //匹配整数
^[1-9]d*|0$　 //匹配非负整数（正整数 + 0）
^-[1-9]d*|0$　　 //匹配非正整数（负整数 + 0）
^[1-9]d*.d*|0.d*[1-9]d*$　　 //匹配正浮点数
^-([1-9]d*.d*|0.d*[1-9]d*)$　 //匹配负浮点数
^-?([1-9]d*.d*|0.d*[1-9]d*|0?.0+|0)$　 //匹配浮点数
^[1-9]d*.d*|0.d*[1-9]d*|0?.0+|0$　　 //匹配非负浮点数（正浮点数 + 0）
^(-([1-9]d*.d*|0.d*[1-9]d*))|0?.0+|0$　　//匹配非正浮点数（负浮点数 + 0）
评注：处理大量数据时有用，具体应用时注意修正

匹配特定字符串：
^[A-Za-z]+$　　//匹配由26个英文字母组成的字符串
^[A-Z]+$　　//匹配由26个英文字母的大写组成的字符串
^[a-z]+$　　//匹配由26个英文字母的小写组成的字符串
^[A-Za-z0-9]+$　　//匹配由数字和26个英文字母组成的字符串
^w+$　　//匹配由数字、26个英文字母或者下划线组成的字符串

标签: 编程代码 JS

admin 发布于 2015-5-11 06:40

评论(0) 浏览(11389)

1 2 3

水平居中设置-行内元素

水平居中设置-定宽块状元素

水平居中总结-不定宽块状元素方法（一）

水平居中总结-不定宽块状元素方法（二）

水平居中总结-不定宽块状元素方法（三）

垂直居中-父元素高度确定的单行文本

垂直居中-父元素高度确定的多行文本（方法一）

垂直居中-父元素高度确定的多行文本（方法二）

隐性改变display类型

关于压缩

实现过程

后记

CSS书写顺序

CSS书写规范

使用CSS缩写属性

去掉小数点前的“0”

简写命名

16进制颜色代码缩写

连字符CSS选择器命名规范

不要随意使用Id

为选择器添加状态前缀

CSS命名规范（规则）

常用的CSS命名规则

注释的写法:

Id的命名:

1)页面结构

(2)导航

(3)功能

注意事项::

CSS样式表文件命名

搜索

日历

最新文章

最新评论

分类

标签

存档

链接