分享
是一种美德

JS限制textarea输入框输入字数

wangtong阅读(124)

最近工作遇到限制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阅读(126)

  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阅读(131)

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

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

删除后面重复的:

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阅读(100)

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阅读(104)

//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阅读(112)

方法一:把不重要的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阅读(142)

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 ] } } } );

jq validate 验证优化

mrnaas阅读(114)

之前使用validate比较简单,并没有做非常大的优化,现在整理了一下

<!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>jquery表单验证</title>
    <script src="js/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script src="js/jquery.validate.js" type="text/javascript"></script>
    <link href="css/index.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        $(function () {
            $("#FormTo").validate({
                rules: {
                    uname: "required",
                    pwd: {
                        required: true,
                        rangelength: [4, 20]
                    }
                },
                messages: {
                    uname: "用户名不能为空",
                    pwd: {
                        required: "密码不能为空!",
                        rangelength: "密码最少4个字符,最多20个字符!"
                    }
                },
                submitHandler: function (form) {
                    $(form).ajaxSubmit({
                        url: $(form).attr("action"),
                        type: 'post',
                        dataType: 'json',
                        success: function (data) {
                            if (data.success) {
                                alert(data.msg);
                              window.location.href = "Default.aspx";
                            } else {
                                alert("出现未知错误");
                            }
                        }
                    });
                },
                highlight: function (element, errorClass, validClass) { //element出错时触发
                    $(element).addClass("inputerror").next().next().show();
                },
                unhighlight: function (element, errorClass, validClass) { //通过的元素加样式  
                    $(element).removeClass("inputerror").next().html("通过").next().hide()
                },
                debug: true,
                errorClass: "error",
                errorElement: "span",
                success: "correct"
            });
        });
    </script>
</head>
<body>
<div class="wrapper">
<div class="titleUI"> <h3>用户注册资料</h3></div>
 
<form id="FormTo" class="democss" action="FormRequest.ashx" method="post">
  <fieldset><legend>用户注册表单</legend>
<div class="formUI">
<p>
<label for="name">用户名:</label><input type="text" class="inputclass w100" id="uname" name="uname" /><span class="msg">用户名必须填写</span>
</p>
 
<p>
<label for="name">密码:</label><input type="password" class="inputclass w200" name="pwd" /><span class="msg">密码4-20个字符之间</span>
</p>
 
<p>
<label for="name">确认密码:</label><input type="password" class="inputclass w200" name="pwdTo"  /><span class="msg">密码4-20个字符之dfsafdasdfasdfsaf间</span>
</p>
 
<p>
<label for="name">真实姓名:</label><input type="text" class="inputclass w200" name="realname"  /><span class="msg">真实姓名必须为字母或汉字 可空</span>
</p>
<p>
<label for="name">新闻内容:</label><textarea rows="5" cols="5" name="content" class="textareaclass w500"></textarea>
</p>
<p>
<label for="name">是否推荐:</label>推荐:<input type="checkbox" name="Top" value="0" /> 特价:<input type="checkbox" name="Top" value="1" /> 新品:<input type="checkbox" name="Top" value="2" />
</p>
<p>
<label for="name">产品分类:</label><select name="category" class="selectUI" >
<option value="1">我们的产品</option>
<option  value="3">客户的产品</option>
<option  value="2">他们的产品</option>
</select>
</p>
 
<p>
<label for="name"> </label><input type="submit" class="submitClass" value="添加" />
</p>
 
<div class="clear"></div>
</div>
</fieldset>
  </form>
<div id="messageBox"> </div>
 
</div>
</body>
</html>

项目详细介绍地址

flexslider插件

mrnaas阅读(116)

FlexSlider插件的详细设置参数

$(window).load(function() {
    $('.flexslider').flexslider({
        namespace: 'flex-',    //控件的命名空间,会影响样式前缀 
        animation: "slide", //String: Select your animation type, "fade" or "slide"图片变换方式:淡入淡出或者滑动
        slideDirection: "horizontal", //String: Select the sliding direction, "horizontal" or "vertical"图片设置为滑动式时的滑动方向:左右或者上下
        selector: '.thumbnails .thumbnail',
        slideshowSpeed: 5000, // 自动播放速度毫秒
        animationSpeed: 600, //滚动效果播放时长
        pausePlay: false,//是否显示播放暂停按钮
        minItems: common.globals.SCREEN.ITEM,//最少显示多少项
        itemWidth: 220,//一个滚动项目的宽度
        itemMargin: 20,//滚动项目之间的间距
        slideshow: true, //Boolean: Animate slider automatically 载入页面时,是否自动播放
        animationDuration: 600, //Integer: S动画淡入淡出效果延时
        directionNav: true, //Boolean:  (true/false)是否显示左右控制按钮
        controlNav: true, //Boolean:  usage是否显示控制菜单//什么是控制菜单?
        keyboardNav: true, //Boolean:left/right keys键盘左右方向键控制图片滑动
        mousewheel: false, //Boolean: mousewheel鼠标滚轮控制制图片滑动
        prevText: "Previous", //String: 上一项的文字
        nextText: "Next", //String: 下一项的文字
        pauseText: 'Pause', //String: 暂停文字
        playText: 'Play', //String: 播放文字
        randomize: false, //Boolean: Randomize slide order 是否随机幻灯片
        slideToStart: 0, //Integer:  (0 = first slide)初始化第一次显示图片位置
        animationLoop: true, //  "disable" classes at either end 是否循环滚动 循环播放
        pauseOnAction: true, //Boolean:  highly recommended.
        pauseOnHover: false, //Boolean: ng
        controlsContainer: "", //Selector:  be taken.
        manualControls: ".js-slidernav i", //Selector: .自定义控制导航// 小圆点活数字标示 css 选择器        
        manualControlEvent: "", //String:自定义导航控制触发事件:默认是click,可以设定hover
        start: function() {}, //Callback: function(slider) - Fires when the slider loads the first slide
        before: function() {}, //Callback: function(slider) - Fires asynchronously with each slider animation
        after: function() {}, //Callback: function(slider) - Fires after each slider animation completes
        end: function() {} //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)
    });
});

具体项目查看代码