分享
是一种美德
        找回密码

首页 第4页

去分类设置中添加分类描述吧

javascript(window.onresize)事件获取窗口大小

wangtong阅读(45)

<!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>
    <title>请调整浏览器窗口</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body>
    <h2 align="center">请调整浏览器窗口大小</h2><hr>
    <form action="#" method="get" name="form1" id="form1">
        <!--显示浏览器窗口的实际尺寸-->
        浏览器窗口 的实际高度: <input type="text" name="availHeight" size="4"><br>
        浏览器窗口 的实际宽度: <input type="text" name="availWidth" size="4"><br>
    </form>
    <script type="text/javascript">
    <!--
        var winWidth = 0;
        var winHeight = 0;
        function findDimensions() //函数：获取尺寸
        {
             //获取窗口宽度
             if (window.innerWidth)
                   winWidth = window.innerWidth;
             else if ((document.body) && (document.body.clientWidth))
                   winWidth = document.body.clientWidth;
             //获取窗口高度
             if (window.innerHeight)
                   winHeight = window.innerHeight;
             else if ((document.body) && (document.body.clientHeight))
                   winHeight = document.body.clientHeight;
            
             //通过深入Document内部对body进行检测，获取窗口大小
             if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
             {
                 winHeight = document.documentElement.clientHeight;
                 winWidth = document.documentElement.clientWidth;
             }
              
             //结果输出至两个文本框
             document.form1.availHeight.value= winHeight;
             document.form1.availWidth.value= winWidth;
        }
        findDimensions();                  //调用函数，获取数值
        window.onresize=findDimensions;
    //-->
    </script>
</body>
</html>

SlipJs API详细

wangtong阅读(67)

refresh(core_width, width)：

当在滚动对象的大小发生改变时（如：当用户滚动到底部时你通过ajax加载新内容，这时元素的尺寸会改变）必须调用refresh方法。主要用处是让SlipJs及时感知尺寸的变化以便正常工作。 

// 参数说明:这两个参数都是可选的。
// core_width: 滑动元素的宽度或者高度，单位为px（横向滑动时传递宽度，纵向滑动时传递高度）
// width:      滑动元素的父级元素的宽度或者高度，单位为px（横向滑动时传递宽度，纵向滑动时传递高度）
// 例如：
var slipjs = slipjs('px',core);
 
// 当元素的尺寸改变时，我们需要将新的尺寸给refresh:
slipjs.refresh(1000,400);
// 也可以不传递参数，这时SlipJs将自己通过获取元素的实际尺寸。

toPage(num, time)：

page换屏状态下是用toPage可以滑动到指定屏数。 

// 参数说明：
// num  : 要到达的屏数
// time : 设定过程花费的时间,单位ms
// 例如 :
var slipjs = slip('page', core, {
    num: 3
});
 
// 这时我们想要用3秒的时间缓慢地轮换到第3屏就可以这样：
slipjs.toPage(3, 3000);

that.page

可在page换屏状态的startFun moveFun touchEndFun endFun 这4个函数中获取当前所在的页（屏）数。 

function end() {
    alert(this.page);// 在滑动结束后输出当前的页(屏)数
}
slip('page', bar_list_div, {
    num: 3,
    endFun: end
});

提示：该api在图片轮换中导航小点的变化需要用到该api。
注释：关于startFun moveFun touchEndFun endFun 这4个函数的用法详见：SlipJs快速使用教程
this.xy
当你想在 startFun moveFun touchEndFun endFun 这4个函数中获取滑动元素的坐标时可直接使用 this.xy 来获取，当状态为横向滑动时该值是滑动元素的x坐标，当状态为纵向滑动时该值是滑动元素的y坐标。
例如： 

function move() {
    console.log(this.xy);// 在滑动过程中输出滑动元素当前的y坐标
}
slip('px', bar_list_div, {
    moveFun: move
});

提示：该api在“下拉刷新”的例子中使用到，在加载数据时非常有用。
this.wide_high（3.0.1开始支持）
当你想在 startFun moveFun touchEndFun endFun 这4个函数中获取滑动元素的宽或者高（横向滑动的时候是宽，上下滑动时是高）可直接使用 this.wide_high来获取，当状态为横向滑动时该值是滑动元素的width，当状态为纵向滑动时该值是滑动元素的height。例如： 

function move() {
    console.log(this.wide_high);// 在滑动过程中输出滑动元素当前的y坐标
}
slip('px', bar_list_div, {
    moveFun: move
});

this.parent_wide_high（3.0.1开始支持）

当你想在 startFun moveFun touchEndFun endFun 这4个函数中获取滑动元素父级元素的宽或者高（横向滑动的时候是宽，上下滑动时是高）可直接使用 this.parent_wide_high来获取，当状态为横向滑动时该值是父级元素的width，当状态为纵向滑动时该值是父级元素的height。例如： 

function move() {
    console.log(this.parent_wide_high);// 在滑动过程中输出滑动元素当前的y坐标
}
slip('px', bar_list_div, {
    moveFun: move
});

backward和forward（3.5.0开始支持）
以图片轮换为例，现在你想要添加两个按钮，一个按钮为“上一张”，另一个为“下一张”，那么这是你就可以是使用backward和forward了，具体使用方法如下： 

var slip_img = slip('page',change_screen_ul,{
        change_time: 5000,
                      num: 3
});
document.getElementById("backward").onclick = function(){
    slip_img.backward(); // 上一张
}
document.getElementById("forward").onclick = function(){
    slip_img.forward(); // 下一张
}

SlipJs快速使用教程

wangtong阅读(79)

之前有一个拖动排序的jq插件，但是有弊端不能在移动端生效，今天找到一个slipjs，在移动端可以执行。
进入正题 如何使用SlipJs，很简单只要两步：
提示：具体如何使用SlipJs实现演示例子slipjs.com/demo中的效果，请下载并参考演示例子的源码，下载地址：www.slipjs.com
第一步： 载入slip.js，你只需下载并在你的页面中载入slip.js；
第二步： 使用函数slip(mode, core, para)；
该函数有三个参数:　　
第一个参数：mode ，可以为”px”或者”page”。
为”px” 时将实现惯性滚动的效果（类似slipjs.com/dome中的第一个例子），
为”page” 时将实现类似图片轮换的换屏效果（类似slipjs.com/dome中的第一个例子）。
例如： 

slip("px",  core,  para); 
// 或者
slip("page",  core,  para);

第二个参数：core ，这个参数传递的是运动的对象，例如： 

var core = document.getElementById("core");
slip('px', core, para);

第三个参数：para ，这个参数是一个对象子面量，该参数在px惯性滚动状态下和在page换屏状态下可传递的内容存在差别。
首先是这两种状态下均可传递的参数有： 

slip('px', core, {
        startFun: function,   // 触摸开始时执行的函数
         moveFun: function,   // 触摸过程中执行的函数
     touchEndFun: function,   // 触摸结束时执行的函数
          endFun: function    // 滑动结束时执行的函数
});

page换屏状态下独有的参数： 

slip('page', core, {
              num: 3,        // 屏数，例如轮换图片是图片的张数（必需）
      change_time: 3000,     // 图片自动轮换的时间
      lastPageFun: function, // 用户在滑动到最后一屏后仍然滑动下一屏时执行的函数（可用于图片浏览时使用）,更详细请看下文
     firstPageFun: function, // 用户在滑动到第一屏后仍然滑动上一屏时执行的函数（可用于图片浏览时使用），更详细请看下文
        no_follow: true      // 是否跟随手指移动来完成换屏，ture为不跟随，默认跟随，更详细请看下文
             loop: true      // slipjs3.5.0开始支持，可以实现无限滑动下一张（最后一张时继续滑可以回到第一张）
});

px惯性滚动状态下独有的参数： 

slip('px', core, {
       direction: 'x',   // 设置滑动方向,"x"为横向滑动，默认为纵向滑动。
         perfect: true,  // 是否启用完美模式，true为启用，何为完美模式，更详细请看下文
          no_bar: true,  // 是否启用模仿滚动条，true为不启用，默认启用
     bar_no_hide: true,  // 是否在滚动停止时隐藏滚动条，true为不隐藏，默认隐藏
      core_width: 1000,  // 滑动元素的宽度或者高度，单位为px（横向滑动时传递宽度，纵向滑动时传递高度），更详细请看下文
           width: 400,   // 滑动元素的父级元素的宽度或者高度，单位为px（横向滑动时传递宽度，纵向滑动时传递高度），更详细请看下文
         bar_css: "background-color: rgba(8, 97, 149, 0.5);"  // 自定义滚动条的样式
});

现在你就可以预览效果了。
更详细的参数说明
看到这里如果你存在疑问那我猜可能会集中在几个参数的用法上，这些参数包括
page换屏状态下的 

lastPageFun: function, // 用户在滑动到最后一屏后仍然滑动下一屏时执行的函数（可用于图片浏览时使用）,更详细请看下文
firstPageFun: function, // 用户在滑动到第一屏后仍然滑动上一屏时执行的函数（可用于图片浏览时使用），更详细请看下文
   no_follow: true      // 是否跟随手指移动来完成换屏，ture为不跟随，默认跟随，更详细请看下文

px惯性滚动状态下的 

perfect: true,  // 是否启用完美模式，true为启用，何为完美模式，更详细请看下文

接下来我将一个个详细讲解 

lastPageFun: function // 用户在滑动到最后一屏后仍然滑动下一屏时执行的函数。
//你想象一下：你现在是用px换屏模式来做一个图片放大并可滑动查看下一张的功能，这时你的用户滑动到了
最后一张还想继续查看下一张，你想提醒用户已经到最后一张了，那么这些提示的代码就可以放在这个函数中。
no_follow: true      // 是否跟随手指移动来完成换屏，ture为不跟随，默认跟随。以图片轮换为例，
你可能发现现在互联网上的手机网站图片轮换功能基本可以分为两类，一类是你手指在上面滑动的时候图片会跟随你手指移动，
另一类是你手指在上面滑动时没有反应，只有你手指离开的时候吹滑动到下一张。通过这个参数你可以任选一种适合你的方式。
perfect: true  // 是否启用完美模式，true为启用，何为完美模式。所谓完美模式是对应流畅模式而言的，
完美模式和流畅模式的区别表现在于滚动条的变化，完美模式下滚动条在滚动到底部或者顶部的时候大小会变化，
而流畅模式则没这个视觉效果。理论上流畅模式要比完美模式反应效率等各方面更快，其中的区别在表现上是滚
动条的区别，其实是实现形式的不同使得流畅模式的无法实现这一视觉效果。

JS限制textarea输入框输入字数

wangtong阅读(75)

最近工作遇到限制textarea输入框输入字数，自己在网上搜了搜，找到一些，特此分享一下！
第一种： 

<textarea onpropertychange="if(value.length>100) value=value.substr(0,100)" class="smallArea" cols="60" name="txta" rows="8"></textarea>

第二种： 

<textarea onkeyup="checkLen(this)"></textarea> 
<div>您还可以输入 <span id="count">200</span> 个文字</div> 
 
<script type="text/javascript"> 
function checkLen(obj) 
{ 
    var maxChars = 200;//最多字符数 
    if (obj.value.length > maxChars) 
    obj.value = obj.value.substring(0,maxChars); 
    var curr = maxChars - obj.value.length; 
    document.getElementById_x("count").innerHTML = curr.toString(); 
} 
</script>

第三种：

<!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=gb2312" />
<meta name="robots" content="all" />
<meta name="author" content=",混蛋鱼" />
<meta name="Copyright" content="混蛋鱼VS男人猫 CopyRight 2007" />
<meta name="keywords" content="JS,Blog,ASP,designing,with,web,standards,xhtml,css,graphic,design,layout,usability,accessibility,w3c,w3,w3cn" />
<meta name="description" content="JS限制textarea输入框输入字数" />
<title>JS限制textarea输入框输入字数</title>
<SCRIPT language="javascript">
<!--
function checktext(text)
{
   allValid = true;
   for (i = 0; i < text.length; i++)
   {
    if (text.charAt(i) != " ")
    {
     allValid = false;
     break;
    }
   }
return allValid;
}
function gbcount(message,total,used,remain)
{
var max;
max = total.value;
if (message.value.length > max) {
message.value = message.value.substring(0,max);
used.value = max;
remain.value = 0;
alert("留言不能超过 200 个字!");
}
else {
used.value = message.value.length;
remain.value = max - used.value;
}
}
-->
</script>
<style type="text/css">
<!--
* {padding:0; margin:0;}
body, html {text-align:left; font-size:12px; line-height:150%; margin:0 auto; background:#fff; padding-top:20px;}
fieldset {padding:10px; width:550px; margin:0 auto;}
legend {font-size:14px; font-weight:bold;}
.inputtext {border:none; background:#fff;}
-->
</style>
</head>
<body>
<form action="SaveData.asp" method="post" onSubmit="return datacheck();">
<fieldset><legend>请输入内容</legend>
<textarea name="Memo" rows="10" wrap=PHYSICAL cols="75" onKeyDown="gbcount(this.form.Memo,this.form.total,this.form.used,this.form.remain);" onKeyUp="gbcount(this.form.Memo,this.form.total,this.form.used,this.form.remain);"></textarea>
<p>最多字数：
<input disabled maxLength="4" name="total" size="3" value="200" class="inputtext">
已用字数：
<input disabled maxLength="4" name="used" size="3" value="0" class="inputtext">
剩余字数：
<input disabled maxLength="4" name="remain" size="3" value="200" class="inputtext"></td>
</p>
</fieldset>
</form>
</body>

python 正则表达式

wangtong阅读(81)

  1. 正则表达式基础1.1. 简单介绍
    正则表达式并不是Python的一部分。正则表达式是用于处 理字符串的强大工具，拥有自己独特的语法以及一个独立的处理引擎，效率上可能不如str自带的方法，但功能十分强大。得益于这一点，在提供了正则表达式的 语言里，正则表达式的语法都是一样的，区别只在于不同的编程语言实现支持的语法数量不同；但不用担心，不被支持的语法通常是不常用的部分。如果已经在其他 语言里使用过正则表达式，只需要简单看一看就可以上手了。
    下图展示了使用正则表达式进行匹配的流程：

正则表达式的大致匹配过程是：依次拿出表达式和文本中的字符比较，如果每一个字符都能匹配，则匹配成功；一旦有匹配不成功的字符则匹配失败。如果表达式中有量词或边界，这个过程会稍微有一些不同，但也是很好理解的，看下图中的示例以及自己多使用几次就能明白。
下图列出了Python支持的正则表达式元字符和语法：

1.2. 数量词的贪婪模式与非贪婪模式
正 则表达式通常用于在文本中查找匹配的字符串。Python里数量词默认是贪婪的（在少数语言里也可能是默认非贪婪），总是尝试匹配尽可能多的字符；非贪婪 的则相反，总是尝试匹配尽可能少的字符。例如：正则表达式”ab“如果用于查找”abbbc”，将找到”abbb”。而如果使用非贪婪的数量 词”ab?”，将找到”a”。
1.3. 反斜杠的困扰
与大多数编程语言相同，正则表达式里使用””作为转义 字符，这就可能造成反斜杠困扰。假如你需要匹配文本中的字符””，那么使用编程语言表示的正则表达式里将需要4个反斜杠”\“：前两个和后两个分 别用于在编程语言里转义成反斜杠，转换成两个反斜杠后再在正则表达式里转义成一个反斜杠。Python里的原生字符串很好地解决了这个问题，这个例子中的 正则表达式可以使用r”\”表示。同样，匹配一个数字的”\d”可以写成r”d”。有了原生字符串，你再也不用担心是不是漏写了反斜杠，写出来的表 达式也更直观。
1.4. 匹配模式
正则表达式提供了一些可用的匹配模式，比如忽略大小写、多行匹配等，这部分内容将在Pattern类的工厂方法re.compile(pattern[, flags])中一起介绍。

  1. re模块2.1. 开始使用re
    Python通过re模块提供对正则表达式的支持。使用re的一般步骤是先将正则表达式的字符串形式编译为Pattern实例，然后使用Pattern实例处理文本并获得匹配结果（一个Match实例），最后使用Match实例获得信息，进行其他的操作。
# encoding: UTF-8
import re
# 将正则表达式编译成Pattern对象
pattern = re.compile(r'hello')
# 使用Pattern匹配文本，获得匹配结果，无法匹配时将返回None
match = pattern.match('hello world!')
if match:
    # 使用Match获得分组信息
    print match.group()
### 输出 ###
# hello

re.compile(strPattern[, flag]):
这个方法是Pattern类的工厂方法，用于将字符串形式的正则表达式编译为Pattern对象。 第二个参数flag是匹配模式，取值可以使用按位或运算符’|’表示同时生效，比如re.I | re.M。另外，你也可以在regex字符串中指定模式，比如re.compile(‘pattern’, re.I | re.M)与re.compile(‘(?im)pattern’)是等价的。
可选值有：
re.I(re.IGNORECASE): 忽略大小写（括号内是完整写法，下同）
M(MULTILINE): 多行模式，改变’^’和’$’的行为（参见上图）
S(DOTALL): 点任意匹配模式，改变’.’的行为
L(LOCALE): 使预定字符类 w W b B s S 取决于当前区域设定
U(UNICODE): 使预定字符类 w W b B s S d D 取决于unicode定义的字符属性
X(VERBOSE): 详细模式。这个模式下正则表达式可以是多行，忽略空白字符，并可以加入注释。以下两个正则表达式是等价的： 

a = re.compile(r"""d +  # the integral part
                   .    # the decimal point
                   d *  # some fractional digits""", re.X)
b = re.compile(r"d+.d*")

re提供了众多模块方法用于完成正则表达式的功能。这些方法可以使用Pattern实例的相应方法替代，唯一的好处是少写一行 re.compile()代码，但同时也无法复用编译后的Pattern对象。这些方法将在Pattern类的实例方法部分一起介绍。如上面这个例子可以 简写为： 

m = re.match(r'hello', 'hello world!')
print m.group()

re模块还提供了一个方法escape(string)，用于将string中的正则表达式元字符如*/+/?等之前加上转义符再返回，在需要大量匹配元字符时有那么一点用。
2.2. Match
Match对象是一次匹配的结果，包含了很多关于此次匹配的信息，可以使用Match提供的可读属性或方法来获取这些信息。
属性：
string: 匹配时使用的文本。
re: 匹配时使用的Pattern对象。
pos: 文本中正则表达式开始搜索的索引。值与Pattern.match()和Pattern.seach()方法的同名参数相同。
endpos: 文本中正则表达式结束搜索的索引。值与Pattern.match()和Pattern.seach()方法的同名参数相同。
lastindex: 最后一个被捕获的分组在文本中的索引。如果没有被捕获的分组，将为None。
lastgroup: 最后一个被捕获的分组的别名。如果这个分组没有别名或者没有被捕获的分组，将为None。
方法：
group([group1, …]):
获得一个或多个分组截获的字符串；指定多个参数时将以元组形式返回。group1可以使用编号也可以使用别名；编号0代表整个匹配的子串；不填写参数时，返回group(0)；没有截获字符串的组返回None；截获了多次的组返回最后一次截获的子串。
groups([default]):
以元组形式返回全部分组截获的字符串。相当于调用group(1,2,…last)。default表示没有截获字符串的组以这个值替代，默认为None。
groupdict([default]):
返回以有别名的组的别名为键、以该组截获的子串为值的字典，没有别名的组不包含在内。default含义同上。
start([group]):
返回指定的组截获的子串在string中的起始索引（子串第一个字符的索引）。group默认值为0。
end([group]):
返回指定的组截获的子串在string中的结束索引（子串最后一个字符的索引+1）。group默认值为0。
span([group]):
返回(start(group), end(group))。
expand(template):
将匹配到的分组代入template中然后返回。template中可以使用id或g、 g引用分组，但不能使用编号0。id与g是等价的；但10将被认为是第10个分组，如果你想表达 1之后是字符’0’，只能使用g<1>0。 

import re
m = re.match(r'(w+) (w+)(?P.*)', 'hello world!')
print "m.string:", m.string
print "m.re:", m.re
print "m.pos:", m.pos
print "m.endpos:", m.endpos
print "m.lastindex:", m.lastindex
print "m.lastgroup:", m.lastgroup
print "m.group(1,2):", m.group(1, 2)
print "m.groups():", m.groups()
print "m.groupdict():", m.groupdict()
print "m.start(2):", m.start(2)
print "m.end(2):", m.end(2)
print "m.span(2):", m.span(2)
print r"m.expand(r'2 13'):", m.expand(r'2 13')
### output ###
# m.string: hello world!
# m.re: <_sre.SRE_Pattern object at 0x016E1A38>
# m.pos: 0
# m.endpos: 12
# m.lastindex: 3
# m.lastgroup: sign
# m.group(1,2): ('hello', 'world')
# m.groups(): ('hello', 'world', '!')
# m.groupdict(): {'sign': '!'}
# m.start(2): 6
# m.end(2): 11
# m.span(2): (6, 11)
# m.expand(r'2 13'): world hello!

2.3. Pattern
Pattern对象是一个编译好的正则表达式，通过Pattern提供的一系列方法可以对文本进行匹配查找。
Pattern不能直接实例化，必须使用re.compile()进行构造。
Pattern提供了几个可读属性用于获取表达式的相关信息：
pattern: 编译时用的表达式字符串。
flags: 编译时用的匹配模式。数字形式。
groups: 表达式中分组的数量。
groupindex: 以表达式中有别名的组的别名为键、以该组对应的编号为值的字典，没有别名的组不包含在内。 

import re
p = re.compile(r'(w+) (w+)(?P.*)', re.DOTALL)
print "p.pattern:", p.pattern
print "p.flags:", p.flags
print "p.groups:", p.groups
print "p.groupindex:", p.groupindex
### output ###
# p.pattern: (w+) (w+)(?P.*)
# p.flags: 16
# p.groups: 3
# p.groupindex: {'sign': 3}

实例方法[ | re模块方法]：
match(string[, pos[, endpos]]) | re.match(pattern, string[, flags]):
这个方法将从string的pos下标处起尝试匹配pattern；如果pattern结束时仍可匹配，则返回一个Match对象；如果匹配过程中pattern无法匹配，或者匹配未结束就已到达endpos，则返回None。
pos和endpos的默认值分别为0和len(string)；re.match()无法指定这两个参数，参数flags用于编译pattern时指定匹配模式。
注意：这个方法并不是完全匹配。当pattern结束时若string还有剩余字符，仍然视为成功。想要完全匹配，可以在表达式末尾加上边界匹配符’$’。
示例参见2.1小节。
search(string[, pos[, endpos]]) | re.search(pattern, string[, flags]):
这个方法用于查找字符串中可以匹配成功的子串。从string的pos下标处起尝试匹配pattern，如果pattern结束时仍可匹配，则返回一个Match对象；若无法匹配，则将pos加1后重新尝试匹配；直到pos=endpos时仍无法匹配则返回None。
pos和endpos的默认值分别为0和len(string))；re.search()无法指定这两个参数，参数flags用于编译pattern时指定匹配模式。 

# encoding: UTF-8
import re
# 将正则表达式编译成Pattern对象
pattern = re.compile(r'world')
# 使用search()查找匹配的子串，不存在能匹配的子串时将返回None
# 这个例子中使用match()无法成功匹配
match = pattern.search('hello world!')
if match:
    # 使用Match获得分组信息
    print match.group()
### 输出 ###
# world

split(string[, maxsplit]) | re.split(pattern, string[, maxsplit]):
按照能够匹配的子串将string分割后返回列表。maxsplit用于指定最大分割次数，不指定将全部分割。 

import re
p = re.compile(r'd+')
print p.split('one1two2three3four4')
### output ###
# ['one', 'two', 'three', 'four', '']

findall(string[, pos[, endpos]]) | re.findall(pattern, string[, flags]):
搜索string，以列表形式返回全部能匹配的子串。 

import re
p = re.compile(r'd+')
print p.findall('one1two2three3four4')
### output ###
# ['1', '2', '3', '4']

finditer(string[, pos[, endpos]]) | re.finditer(pattern, string[, flags]):
搜索string，返回一个顺序访问每一个匹配结果（Match对象）的迭代器。 

import re
p = re.compile(r'd+')
for m in p.finditer('one1two2three3four4'):
    print m.group(),
### output ###
# 1 2 3 4

sub(repl, string[, count]) | re.sub(pattern, repl, string[, count]):
使用repl替换string中每一个匹配的子串后返回替换后的字符串。
当repl是一个字符串时，可以使用id或g、g引用分组，但不能使用编号0。
当repl是一个方法时，这个方法应当只接受一个参数（Match对象），并返回一个字符串用于替换（返回的字符串中不能再引用分组）。
count用于指定最多替换次数，不指定时全部替换。 

import re
p = re.compile(r'(w+) (w+)')
s = 'i say, hello world!'
print p.sub(r'2 1', s)
def func(m):
    return m.group(1).title() + ' ' + m.group(2).title()
print p.sub(func, s)
### output ###
# say i, world hello!
# I Say, Hello World!

subn(repl, string[, count]) |re.sub(pattern, repl, string[, count]):
返回 (sub(repl, string[, count]), 替换次数)。 

import re
p = re.compile(r'(w+) (w+)')
s = 'i say, hello world!'
print p.subn(r'2 1', s)
def func(m):
    return m.group(1).title() + ' ' + m.group(2).title()
print p.subn(func, s)
### output ###
# ('say i, world hello!', 2)
# ('I Say, Hello World!', 2)

JavaScript数组去重的几种方法

wangtong阅读(72)

数组去重复是一个常见的需求，我们暂时考虑同类型的数组去重复。主要是理清思路和考虑下性能。以下方法，网上基本都有，这里只是简单地总结一下。
思路：

遍历数组，一一比较，比较到相同的就删除后面的
遍历数组，一一比较，比较到相同的，跳过前面重复的，不相同的放入新数组
任取一个数组元素放入新数组，遍历剩下的数组元素任取一个，与新数组的元素一一比较，如果有不同的，放入新数组。
遍历数组，取一个元素，作为对象的属性，判断属性是否存在

删除后面重复的：

function ov1(arr){
    //var a1=((new Date).getTime())
    for(var i=0;i<arr.length;i++)
        for(var j=i+1;j<arr.length;j++)
            if(arr===arr[j]){arr.splice(j,1);j--;}            
    //console.info((new Date).getTime()-a1)                
    return arr.sort(function(a,b){return a-b});
}

这个是常规的方法，比较好理解，如果相同则跳出循环 

function ov2(a) {
    //var a1=((new Date).getTime())
    var b = [], n = a.length, i, j;
    for (i = 0; i < n; i++) {
        for (j = i + 1; j < n; j++)
            if (a === a[j]){j=false;break;}
        if(j)b.push(a);
        }
    //console.info((new Date).getTime()-a1)    
    return b.sort(function(a,b){return a-b});
}

这个我花了好长时间明白的，这里j循环虽然继续了，但是i值已经改变了。就等于是一个新的i循环： 

function ov3(a) {
    //var a1=((new Date).getTime())
    var b = [], n = a.length, i, j;
    for (i = 0; i < n; i++) {
        for (j = i + 1; j < n; j++)
        if (a === a[j])j=++i
    b.push(a);}
    //console.info((new Date).getTime()-a1)    
    return b.sort(function(a,b){return a-b});
}

保证新数组中的都是唯一 

function ov4(ar){
//var a1=((new Date).getTime())
    var m=[],f;
    for(var i=0;i<ar.length;i++){
    f=true; 
    for(var j=0;j<m.length;j++)
    if(ar===m[j]){f=false;break;};
    if(f)m.push(ar)}
//console.info((new Date).getTime()-a1)    
    return m.sort(function(a,b){return a-b});
}

用对象属性 

function ov5(ar){
//    var a1=(new Date).getTime()
                var m,n=[],o= {};
                for (var i=0;(m= ar)!==undefined;i++)
                if (!o[m]){n.push(m);o[m]=true;}
//    console.info((new Date).getTime()-a1)    
        return n.sort(function(a,b){return a-b});;
        }

本文经过网上查找，如果有问题希望大家能够帮忙指正！

屏蔽双击选中文字的解决办法，兼容ie，google，firefox

wangtong阅读(56)

IE及Chrome下的方法一样，对相应的元素添加onselectstart=”return false;”但是，这个在火狐下不起作用，但是火狐下可以用css样式来达到这个效果，即添加-moz-user-select:none;就可以兼容ie，google，firefox了，即代码如下所示： 

<div class="picBox" onselectstart="return false;" style="-moz-user-select:none;">屏蔽双击选中文字的区域</div>

这样这个区域的文字都不能选中了，就也不会出现在双击左右箭头快速切换图片滚动时会选择附近区域文字的情况了
如果把 

<body onselectstart="return false">

和

body{-moz-user-select:   none;}

添加到body中，就实现了禁止用户选中页面上内容的效果

js兼容问题注意事项

mrnaas阅读(64)

//window.event
IE：有window.event对象
FF：没有window.event对象。可以通过给函数的参数传递event对象。如onmousemove=doMouseMove(event)

//鼠标当前坐标
IE：event.x和event.y。
FF：event.pageX和event.pageY。
通用：两者都有event.clientX和event.clientY属性。

//鼠标当前坐标(加上滚动条滚过的距离)
IE：event.offsetX和event.offsetY。
FF：event.layerX和event.layerY。

//event.srcElement问题
说明:IE下,event对象有srcElement属性,但是没有target属性;Firefox下,event对象有target属性,但是没有srcElement属性.
解决方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)来代替IE下的event.srcElement或者Firefox下的event.target. 请同时注意event的兼容性问题。

//event.toElement问题
问题：
IE下，event对象有srcElement属性，但是没有target属性；Firefox下，event对象有target属性，但是没有srcElement属性
解决方法：
var target = e.relatedTarget || e.toElement;

//标签的x和y的坐标位置：style.posLeft 和 style.posTop
IE：有。
FF：没有。
通用：object.offsetLeft 和 object.offsetTop。

//窗体的高度和宽度
IE：document.body.offsetWidth和document.body.offsetHeight。注意：此时页面一定要有body标签。
FF：window.innerWidth和window.innerHegiht，以及document.documentElement.clientWidth和document.documentElement.clientHeight。
通用：document.body.clientWidth和document.body.clientHeight。

//添加事件
IE：element.attachEvent(“onclick”, function);。
FF：element.addEventListener(“click”, function, true)。
通 用：element.onclick=function。虽然都可以使用onclick事件，但是onclick和上面两种方法的效果是不一样的，onclick 只有执行一个过程，而attachEvent和addEventListener执行的是一个过程列表，也就是多个过程。例如：element.attachEvent(“onclick”, func1);element.attachEvent(“onclick”, func2)这样func1和func2都会被执行。

//标签的自定义属性
IE：如果给标签div1定义了一个属性value，可以div1.value和div1[“value”]取得该值。
FF：不能用div1.value和div1[“value”]取。
通用：div1.getAttribute(“value”)。

//document.form.item 问题
IE:现有问题：现有代码中存在许多 document.formName.item(“itemName”) 这样的语句，不能在 MF 下运行
FF/IE: document.formName.elements[“elementName”]

//集合/数组类对象问题
(1)现有问题：
现有代码中许多集合类对象取用时使用 ()，IE 能接受，MF 不能。
(2)解决方法：
改用 [] 作为下标运算。如：document.forms(“formName”) 改为 document.forms[“formName”]。
又如：document.getElementsByName(“inputName”)(1) 改为 document.getElementsByName(“inputName”)[1]

//HTML 对象的 id 作为对象名的问题
(1)现有问题
在 IE 中，HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在 MF 中不能。
(2)解决方法
用 getElementById(“idName”) 代替 idName 作为对象变量使用

//用idName字符串取得对象的问题
(1)现有问题
在IE中，利用 eval(idName) 可以取得 id 为 idName 的 HTML 对象，在MF 中不能。
(2)解决方法
用 getElementById(idName) 代替 eval(idName)。

//变量名与某 HTML 对象 id 相同的问题
(1)现有问题
在 MF 中，因为对象 id 不作为 HTML 对象的名称，所以可以使用与 HTML 对象 id 相同的变量名，IE 中不能。
(2)解决方法
在声明变量时，一律加上 var ，以避免歧义，这样在 IE 中亦可正常运行。
此外，最好不要取与 HTML 对象 id 相同的变量名，以减少错误。

//document.getElementsByName() 和 document.all[name] 的问题
现有问题：在 IE 中，getElementsByName()、document.all[name] 均不能用来取得 div 元素（是否还有其它不能取的元素还不知道）。
//document.all
Firefox可以兼容document.all， 但会生成一条警告。可以用getElementById(““) 或者 getElementByTagName(““)来代替
不过对于document.all.length等属性，则完全不兼容

//input.type属性问题
说明:IE下input.type属性为只读;但是Firefox下input.type属性为读写

//window.location.href问题
说明:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;Firefox1.5.x下,只能使用window.location
解决方法:使用window.location来代替window.location.href

//模态和非模态窗口问题
说明:IE下,可以通过showModalDialog和showModelessDialog打开模态和非模态窗口;Firefox下则不能
解决方法:直接使用window.open(pageURL,name,parameters)方式打开新窗口。
如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口. 例如：var parWin = window.opener; parWin.document.getElementById(“Aqing”).value = “Aqing”;

//frame问题
以下面的frame为例：


(1)访问frame对象:
IE:使用window.frameId或者window.frameName来访问这个frame对象. frameId和frameName可以同名。
FF:只能使用window.frameName来访问这个frame对象.
另外，在IE和Firefox中都可以使用window.document.getElementById(“frameId”)来访问这个frame对象.
(2)切换frame内容:
在IE和Firefox中都可以使用window.document.getElementById(“testFrame”).src = “xxx.html”或window.frameName.location = “xxx.html”来切换frame的内容.
如果需要将frame中的参数传回父窗口(注意不是opener,而是parent frame)，可以在frme中使用parent来访问父窗口。例如：window.parent.document.form1.filename.value=”Aqing”;

//body问题
Firefox的body在body标签没有被浏览器完全读入之前就存在；而IE的body则必须在body标签被浏览器完全读入之后才存在

//事件委托方法
IE：document.body.onload = inject; //Function inject()在这之前已被实现
FF：document.body.onload = inject();

//firefox与IE的父元素(parentElement)的区别
IE：obj.parentElement
FF：obj.parentNode
解决方法: 因为FF与IE都支持DOM,因此使用obj.parentNode是不错选择

//innerText在IE中能正常工作，但是innerText在FireFox中却不行. 需用textContent

//FireFox中设置HTML标签的style时，所有位置性和字体尺寸的值必须后跟px。这个ie也是支持的

//父节点、子节点和删除节点
IE：parentElement、parement.children，element.romoveNode(true)。
FF：parentNode、parentNode.childNodes，node.parentNode.removeChild(node)。

//对select的options集合操作
枚举元素除了[]外，SelectName.options.item()也是可以的, 另外SelectName.options.length, SelectName.options.add/remove都可以在两种浏览器上使用。
注意在add后赋值元素，否则会失败
动态删除select中的所有options：
document.getElementById(“ddlResourceType”).options.length=0;
动态删除select中的某一项option：
document.getElementById(“ddlResourceType”).options.remove(indx);
动态添加select中的项option:
document.getElementById(“ddlResourceType”).options.add(new Option(text,value));
IE FF 动态删除通用方法：
document.getElementById(“ddlResourceType”).options[indx] = null;

//捕获事件
问题：
FF没有setCapture()、releaseCapture()方法
解决方法：
IE:
obj.setCapture();
obj.releaseCapture();
FF:
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
if (!window.captureEvents) {
o.setCapture();
}else {
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
if (!window.captureEvents) {
o.releaseCapture();
}else {
window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}

//禁止选取网页内容
问题：
FF需要用CSS禁止，IE用JS禁止
解决方法：
IE: obj.onselectstart = function() {return false;}
FF: -moz-user-select:none;

//画图
IE：VML。
FF：SVG。

//CSS：透明
IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF：opacity:0.6。

//CSS：圆角
IE：不支持圆角。
FF：-moz-border-radius:4px，或者-moz-border-radius-topleft:4px;-moz-border-radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border-radius- bottomright:4px;。

//CSS：双线凹凸边框
IE：border:2px outset;。
FF：-moz- border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080;。

多多支持！！！！

js优化

mrnaas阅读(62)

方法一：把不重要的JS放在页面最底部
这是最简单，也是效果最好的优化方法，把不重要的JS通通放到页面的最下面body的上面，实现异步加载，也就是等网页都加载完了，最后在加载这些不重要的JS，这样就不影响网页速度了。
方法二：合并JS文件
合并JS，也就是减少HTTP请求，少给服务器请求一次就加快一点速度，而合并两个原本独立的JS就需要点技术了，但这难不倒我们，告诉大家一个最简单的方法：
不管三七二十一，先把A文件直接粘贴到B文件中，合并后删除网页中的A文件，如果网页运行正常，就OK；如果一些特效失效，那就还原，换C文件合并。总会有两个不冲突的JS文件的。
方法三：给JS文件减肥
咱不讨论什么三目运算符、减少对象查找、如何让JS简洁，咱就用“JS减肥工具”。通常这类工具会把JS文件中几百行的代码压缩成一行，使体积变小。推荐工具：http://javascriptcompressor.com/
因为空行等问题，有时候使用这类工具会使JS功能失效，而最简单的办法是用Dreamweaver，把压缩后的JS放入DW中，DW会自动提示你那里有误，把错误的地方另起一行，或还原回去即可。

mongoDB分享

mrnaas阅读(81)

1 ) . 大于，小于，大于或等于，小于或等于

$gt:大于
$lt:小于
$gte:大于或等于
$lte:小于或等于

例子：

db.collection.find({ “field” : { $gt: value } } ); // greater than : field > value
db.collection.find({ “field” : { $lt: value } } ); // less than : field < value
db.collection.find({ “field” : { $gte: value } } ); // greater than or equal to : field >= value
db.collection.find({ “field” : { $lte: value } } ); // less than or equal to : field <= value如查询j大于3,小于4:
db.things.find({j : {$lt: 3}});
db.things.find({j : {$gte: 4}});也可以合并在一条语句内:
db.collection.find({ “field” : { $gt: value1, $lt: value2 } } ); // value1 < field < value

2) 不等于 $ne
例子：

db.things.find( { x : { $ne : 3 } } );

3) in 和 not in ($in $nin)

语法：

db.collection.find( { “field” : { $in : array } } );例子：
db.things.find({j:{$in: [2,4,6]}});
db.things.find({j:{$nin: [2,4,6]}});

4) 取模运算$mod

如下面的运算：

db.things.find( “this.a % 10 == 1”)可用$mod代替：
db.things.find( { a : { $mod : [ 10 , 1 ] } } )

5) $all

$all和$in类似，但是他需要匹配条件内所有的值：

如有一个对象：

{ a: [ 1, 2, 3 ] }下面这个条件是可以匹配的：

db.things.find( { a: { $all: [ 2, 3 ] } } );但是下面这个条件就不行了：
db.things.find( { a: { $all: [ 2, 3, 4 ] } } );

6) $size

$size是匹配数组内的元素数量的，如有一个对象：{a:[“foo”]}，他只有一个元素：

下面的语句就可以匹配：

db.things.find( { a : { $size: 1 } } );

官网上说不能用来匹配一个范围内的元素，如果想找$size<5之类的，他们建议创建一个字段来保存元素的数量。
You cannot use $size to find a range of sizes (for example: arrays with more than 1 element). If you need to query for a range, create an extra size field that you increment when you add elements.

7）$exists
$exists用来判断一个元素是否存在：
如：

db.things.find( { a : { $exists : true } } ); // 如果存在元素a,就返回
db.things.find( { a : { $exists : false } } ); // 如果不存在元素a，就返回

8) $type

$type 基于 bson type来匹配一个元素的类型，像是按照类型ID来匹配，不过我没找到bson类型和id对照表。

db.things.find( { a : { $type : 2 } } ); // matches if a is a string
db.things.find( { a : { $type : 16 } } ); // matches if a is an int

9）正则表达式

mongo支持正则表达式，如：

db.customers.find( { name : /acme.*corp/i } ); // 后面的i的意思是区分大小写

10) 查询数据内的值

下面的查询是查询colors内red的记录，如果colors元素是一个数据,数据库将遍历这个数组的元素来查询。

db.things.find( { colors : “red” } );

11) $elemMatch

如果对象有一个元素是数组，那么$elemMatch可以匹配内数组内的元素：

t.find( { x : { $elemMatch : { a : 1, b : { $gt : 1 } } } } )
{ “_id” : ObjectId(“4b5783300334000000000aa9”),
“x” : [ { “a” : 1, “b” : 3 }, 7, { “b” : 99 }, { “a” : 11 } ]
}$elemMatch : { a : 1, b : { $gt : 1 } } 所有的条件都要匹配上才行。注意，上面的语句和下面是不一样的。
t.find( { “x.a” : 1, “x.b” : { $gt : 1 } } )
$elemMatch是匹配{ “a” : 1, “b” : 3 }，而后面一句是匹配{ “b” : 99 }, { “a” : 11 }

12) 查询嵌入对象的值

db.postings.find( { “author.name” : “joe” } );

注意用法是author.name，用一个点就行了。更详细的可以看这个链接： dot notation
举个例子：

db.blog.save({ title : “My First Post”, author: {name : “Jane”, id : 1}})如果我们要查询 authors name 是Jane的, 我们可以这样：
db.blog.findOne({“author.name” : “Jane”})如果不用点，那就需要用下面这句才能匹配：
db.blog.findOne({“author” : {“name” : “Jane”, “id” : 1}})下面这句：
db.blog.findOne({“author” : {“name” : “Jane”}})是不能匹配的，因为mongodb对于子对象，他是精确匹配。

13) 元操作符 $not 取反
如：

db.customers.find( { name : { $not : /acme.*corp/i } } );db.things.find( { a : { $not : { $mod : [ 10 , 1 ] } } } );
吐血推荐

【阿里云】多款主流产品低至3折

【阿里云】全网云主机爆款特惠，新用户限时享低至3折优惠

热门文章

置顶推荐

热门标签

WEB (42)前端 (41)js (34)CSS (31)jQuery (16)HTML (11)javascript (8)插件 (7)Python (3)后端 (2)Java (2)美文欣赏 (2)前端框架 (2)框架 (2)测试 (1)自适应 (1)元素点击事件 (1)屏蔽点击 (1)时间获取 (1)获取当前时间 (1)常见问题 (1)遍历 (1)map遍历 (1)后端语言 (1)前端路线 (1)路线思路 (1)经典语录 (1)励志名言 (1)ES6 (1)mongodb (1)