??xml version="1.0" encoding="utf-8" standalone="yes"?> 1Q正则表辑ּQ可以说是Q何一U编E语a都提供的机制Q它主要是提供了对字W串的处理能力?br>2Q正则表辑ּ在页面处理中的用场景: 二,语法与?/font> 1Q定义正则表辑ּ 1Q定义正则表辑ּ有两UŞ式,一U是普通方式,一U是构造函数方式?br>2Q普通方式:var reg=/表达?附加参数 2Q表辑ּ模式 1Q表辑ּ模式Q是指表辑ּ的表达方式与样式Q??var reg=/表达?附加参数 中的“表达?#8221;怎样Lqͼ 1>\Q在许多~程语言里面被用作{义符Q一般来?br>\W号后面如果跟的是普通字WcQ那么\c׃表特D的含义Q例如n本来代表字符nQ但\n׃表换行?br>\W号后面如果跟的是特D字WcQ那么\c׃表普通字WcQ例如\一般用作{义符Q但\\则调表普通字W\?br>Javascript的正?/strong>表达式中\的用法与上面相同Q只是不同的~程语言Q特D字W表可能不太一LŞ了?/p>
2>^Q匹配输入字W串的v始端Q如果是多行匚wQ即表达式的附加参数中含有mQ则也在一个换行符后匹配?br>例子Q?^B/匚w “Bab Bc ”中的W一个B 4>*Q匹配前一个字W?ơ或多次?br>例子Q?ab*/匚w“dddabbbbc”中的“abbbb”Q也匚w“ddda”中的“a” 5>+Q匹配前一个字W?ơ或多次?br>例子Q?ab+/匚w“dddabbbbc”中的“abbbb”Q但不匹?#8220;ddda” 6>?Q?的用法比较特D,一般来说它用来对前一个字W做0ơ或1ơ匹配,但是它有另外两种Ҏ的用法: 7>.Q小数点中的“.”P匚wM一个单独的字符Q但是换行符除外?br>标准中d有哪些字W?请参考:字符?br>例如Q?a.b/匚w“acbaa”中的“acb”Q但是不匚w“abbb”?/p>
8>(x)Q表C匹配x(qҎ字符x或者特指一个字W,x表示一个字W串)Q而且匚w会被CQ在语法中这U?)被称?#8220;capturing parentheses ”Q即捕捉用的括受?br>匚w会被CQ是因ؓ在表辑ּ提供的函CQ有些函数返回一个数l,该数l会保存所匚w的所有字W串Q例如exec()函数?br>另外q要注意()中的x被记住的前提是匹配x?br>例子1Q?br>var regx=/a(b)c/; 10>X(?=y)Q匹配xQ仅当后面紧跟着y时。如果符合匹配,则只有x会被CQy不会被记住?br>例子Q?br>var regx=/user(?=name)/; 11>X(?!y)Q匹配xQ仅当后面不紧跟着y时。如果符合匹配,则只有x会被CQy不会被记住?br>例子Q?br>var regx=/user(?!name)/; 12>x|yQ匹配x或y。注意如果x和y都匹配上了,那么只记住x?br>例子Q?br>var regx=/beijing|shanghai/; 13>{n}Q匹配前一个字W的nơ出现?br>n必须是一个非负数Q当然如果是一个负数或数也不会报语法错误?br>例子Q?br>var regx=/ab{2}c/; 14>{n,}Q匹配前一个字W的臛_nơ出现?br>例子Q?br>var regx=/ab{2,}c/; 15>{n,m}Q匹配前一个字W的臛_nơ最多mơ的出现?br>只要n与m为数字,而且m>=n׃会报语法错误?br>例子Q?br>var regx=/ab{2,5}c/; 16>[xyz]Qxyz表示一个字W串Q该模式表示匚w[]中的一个字W,形式上[xyz]{同于[x-z]?br>例子Q?br>var regx=/a[bc]d/; 17>[^xyz]Q该模式表示匚w非[]中的一个字W,形式上[^xyz]{同于[^x-z]?br>例子Q?br>var regx=/a[^bc]d/; 18>[\b]Q匹配退格键?/p>
19>\bQ匹配一个词的边界符Q例如空格和换行W等{,当然匚w换行W时Q表辑ּ应该附加参数m?br>例子Q?br>var regx=/\bc./; 20>\BQ代表一个非单词边界?br>例子Q?br>var regx=/\Bi./; 21>\cXQ匹配一个控制字W。例如, \cM 匚w一?Control-M ? 21>\dQ匹配一个数字字W,{同于[0-9]?br>例子Q?br>var regx=/user\d/; 22>\DQ匹配一个非数字字符Q等同于[^0-9]?br>例子Q?br>var regx=/user\D/; 23>\fQ匹配一个换늬?/p>
24>\nQ匹配一个换行符。因为是换行W,所以在表达式中要加入m参数?br>例子Q?br>var regx=/a\nbc/m; 26>\sQ匹配一个空格符Q等同于[ \f\n\r\t\v\u00A0\u2028\u2029]. 27>\SQ匹配一个非I格W,{同于[ ^\f\n\r\t\v\u00A0\u2028\u2029]. 28>\tQ匹配一个tab 29>\vQ匹配一个竖向的tab 30>\wQ匹配一个数字、_或字母表字符Q即[A-Za-z0-9_ ]?br>例子Q?br>var regx=/\w/; 31>\WQ匹配一个非数字、_或字母表字符Q即[^A-Za-z0-9_ ]?br>例子Q?br>var regx=/\w/; 32>\nQ注意不是\nQ这里n是一个正整数Q表C匹配第n?)中的字符?br>例子Q?br>var regx=/user([,-])group\1role/; 33>\0Q匹配一个NUL字符?/p>
34>\xhhQ匹配一个由两位16q制数字所表达的字W?/p>
35>\uhhhhQ匹配一个由四位16q制数字所表达的字W?/p>
1Q表辑ּ操作Q在q里是指和表辑ּ相关的方法,我们介l六个方法?br>2Q表辑ּ对象QRegExpQ方法: 1>exec(str)Q返回str中与表达式相匚w的第一个字W串Q而且以数l的形式表现Q当然如果表辑ּ中含有捕捉用的小括号Q则q回的数l中也可能含?)中的匚w字符Ԍ例如Q?br>var regx=/\d+/; 2>test(str)Q判断字W串str是否匚w表达式,q回一个布倹{例如: 3QString对象Ҏ 1>match(expr)Q返回与expr相匹配的一个字W串数组Q如果没有加参数gQ则q回W一个匹配,加入参数g则返回所有的匚w 2>search(expr)Q返回字W串中与expr相匹配的W一个匹配的index倹{?br>例子Q?br>var regx=/user\d/g; 3>replace(expr,str)Q将字符串中匚wexpr的部分替换ؓstr。另外在replaceҎ中,str中可以含有一U变量符?Q格式ؓ$nQ代表匹配中被记住的Wn的匹配字W串Q注意小括号可以记忆匚wQ?br>例子Q?br>var regx=/user\d/g; 4>split(expr)Q将字符串以匚wexpr的部分做分割Q返回一个数l,而且表达式是否附加参数g都没有关p,l果是一L?br>例子Q?br>var regx=/user\d/g; 4Q表辑ּ相关属?/strong> 1Q表辑ּ相关属性,是指和表辑ּ相关的属性,如下面的形式Q?br>var regx=/myexpr/; 1>lastIndexQ返回开始下一个匹配的位置Q注意必L全局匚wQ表辑ּ中带有g参数Q时QlastIndex才会有不断返回下一个匹配|否则该gؓLq回W一个下一个匹配位|,例如Q?br>var regx=/user\d/; 2>sourceQ返回表辑ּ字符串自w。例如: 1>indexQ返回当前匹配的位置。例如: 2>inputQ用于匹配的字符丌Ӏ例如: 3>[0]Q返回匹配结果中的第一个匹配|对于match而言可能q回一个多值的数字Q则除了[0]外,q可以取[1]、[2]{等。例如: 5Q实际应?/strong> 1Q实际应用一 三,结 1QJavascript正则表达式,我想在一般的E序员之中,使用者应该不是很多,因ؓ我们处理的页面一般都不是很复杂,而复杂的逻辑一般我们都在后台处理完成了。但是目前趋势已l出C扭{Q富客户端已l被来多的h接受Q而Javascript是其中的关键技术,对于复杂的客L逻辑而言Q正则表辑ּ的作用也是很关键的,同时它也是Javascript高手必须要掌握的重要技术之一?nbsp; 2Qؓ了能够便于大家对前面讲述的内Ҏ一个更为综合和深刻的认识,我将前面的一些关键点和容易犯p涂的地方再pȝȝ一下,q部分很关键Q?br>ȝ1Q附件参数g的用?/strong> 四,应用案例 1Q正则表辑ּ使用场景Q?/strong> 解决的方法是hack 列等高技?
1Q表单验证。验证某些域W合某种规则Q例如邮件输入框必须输入的是邮g、联pȝ话输入框输入的必L数字{等
2Q处理DOM模型。例如通过表达式定位DOM中的一个对象或一pd对象Q一个例子就是定位id属性中含有某个Ҏ字符的div对象?br>3Q纯~程逻辑。直接用于编E的逻辑之中?br>3Q说明:本部分所丄正则表达式的代码片断Q都是经q测试的Q但有一炚w要注意,对于换行的字W串的定义,我们在表q时使用的是cM如下的Ş式:
var str=“It’s is
a beautiful city”Q?br>q种形式直接写在JS代码中是错误的,那如何获取具有换行的字符串呢Q简单的办法Q在textarea中输入文本ƈ换行Q然后将该DlJS变量卛_。例如:
var str=document.forms[0].mytextarea.value;
表达式:一个字W串Q代表了某种规则Q其中可以用某些特D字W,来代表特D的规则Q后面会详细说明?br>附加参数Q用来扩展表辑ּ的含义,目前主要有三个参敎ͼ
gQ代表可以进行全局匚w?br>iQ代表不区分大小写匹配?br>mQ代表可以进行多行匹配?br>上面三个参数Q可以Q意组合,代表复合含义Q当然也可以不加参数?br>例子Q?br>var reg=/a*b/;
var reg=/abc+f/g;
3Q构造函数方式:var reg=new RegExp(“表达?#8221;,”附加参数”);
其中“表达?#8221;?#8220;附加参数”的含义与上面那种定义方式中的含义相同?br>例子Q?br>var reg=new RegExp(“a*b”);
var reg=new RegExp(“abc+f”,”g”);
4Q普通方式与构造函数方式的区别
普通方式中的表辑ּ必须是一个常量字W串Q而构造函C的表辑ּ可以是常量字W串Q也可以是一个js变量Q例如根据用L输入来作辑ּ参数{等Q?br>var reg=new RegExp(document.forms[0].exprfiled.value,”g”);
2Q从规范上讲Q表辑ּ模式分ؓ单模式和复合模式?br>3Q简单模式:是指通过普通字W的l合来表辄模式Q例?br>var reg=/abc0d/;
可见单模式只能表C具体的匚w?br>4Q复合模式:是指含有通配W来表达的模式,例如Q?br>var reg=/a+b?\w/;
其中??和\w都属于通配W,代表着Ҏ的含义。因此复合模式可以表达更为抽象化的逻辑?br>下面我们着重说一下复合模式中各个通配W的含义及其使用?br>5)复合模式中特D字W的讲解Q?/p>
例子2Q?^B/gm匚w
“Badd B
cdaf
B dsfB”
中的W一行第一个BQ第三行中的W一个B
3>$Q匹配输入字W创的尾端,如果是多行匹配,卌辑ּ的附加参C含有mQ则也在一个换行符前匹配?br>与^的用法相反?br>例子Q?t$/匚w“bat”中的tQ但是不匚w“hate”中的t
例子2Q?t$/匚w
“tag at
bat”
中第一行的最后一个t和第二行的t?/p>
与后面的{1,}Q原型:{n,}Q的用法cM
如果紧跟???和{ }之后Q则表示原始匚w的最次数匹配,例如Q?br>/ba*/本来匚w“bbbaaaa”中的“baaaa”Q但?ba*?/则匹?#8220;bbbaaaa”中的“b”Q因?表示0ơ或多次匚wQ而加?应该表示最次数匹配,?ơ匹配)?br>同理Q?ba+?/则匹?#8220;baaaa”中的“ba”?br>作ؓ语法l构W号Q用于前置断言中,卛_面要说到的x(?=y)和x(?!=y)
var rs=regx.exec(“abcddd”);
从上面可以看?/a(b)c/匚w“abcddd”中的“abc”Q因?)的原因,b也会记录下来Q因此rsq回的数字内容ؓQ?br>{abc,b}
例子2Q?br> var regx=/a(b)c/;
var rs=regx.exec(“acbcddd”);
rsq回nullQ因?a(b)c/不匹?#8220;acbcddd”Q所?)中的b不会被记录下来(管字符串中含有bQ?br>
9>(?:x)Q匹配xQ但不会CxQ这U格式中?)被称?#8220;non-capturing parentheses ”Q即非捕捉用的小括号?br>例子Q?br>var regx=/a(?:b)c/;
var rs=regx.exec(“abcddd”);
从上面可以看?/a(?:b)c/匚w“abcddd”中的“abc”Q因??:)的原因,b不会记录下来Q因此rsq回的数字内容ؓQ?br>{abc}
var rs=regx.exec(“The username is Mary”);
l果Q匹配成功,而且rs的gؓ{user}
var rs=regx.exec(“The user name is Mary”);
l果Q匹配成功,而且rs的gؓ{user}
例子2Q?br>var regx=/\d+(?!\.)/;
var rs=regx.exec(“54.235”);
l果Q匹配成果,rs的gؓ{5}Q不匚w54是因?4后面跟着“.”P当然235也匹配,但是׃execҎ的行为,235不会被返?/p>
var rs=regx.exec(“I love beijing and shanghai”);
l果Q匹配成功,rs的gؓ{beijing}Q虽然shanghai也匹配,但不会被C?/p>
var rs=regx.exec(“abbcd”);
l果Q匹配成功,rs的gؓQ{abbc}?/p>
var rs=regx.exec(“abbcdabbbc”);
l果Q匹配成功,rs的gؓQ{abbc}。注意ؓ什么abbbc也符合条件ؓ什么没有被CQ这与execҎ的行为有养I后面会统一讲解?/p>
var rs=regx.exec(“abbbcd”);
l果Q匹配成功,rs的gؓQ{abbbc}?br>例子2Q?br>var regx=/ab{2,2}c/;
var rs=regx.exec(“abbcd”);
l果Q匹配成功,rs的gؓQ{abbc}?br>例子3Q?br>var regx=/ab(2,5)/;
var rs=regx.exec(“abbbbbbbbbb”);
l果Q匹配成功,rs的gؓQ{abbbbb}Q这说明Q如果前一个字W出现多于mơ,则只匚wmơ。另外:
var regx=/ab(2,5)c/;
var rs=regx.exec(“abbbbbbbbbbc”);
l果Q匹配失败,rs的gؓQnullQؓ什么匹配失败,因ؓb多于5个则b(2,5)会匹配前5个bQ,而表辑ּ/ab(2,5)c/中b后面是cQ但字符串中5个b之后q是b所以会报错?/p>
var rs=regx.exec(“abddgg”);
l果Q匹配成功,rs的gؓQ{abd}
例子2Q?br>var regx=/a[bc]d/;
var rs=regx.exec(“abcd”);
l果Q匹配失败,rs的gؓQnullQ之所以失败,是因为[bc]表示匚wb或c中的一个,但不会同时匹配?/p>
var rs=regx.exec(“afddgg”);
l果Q匹配成功,rs的gؓQ{afd}
例子2Q?br>var regx=/a[^bc]d/;
var rs=regx.exec(“abd”);
l果Q匹配失败,rs的gؓQ?/p>
var rs=regx.exec(“Beijing is a beautiful city”);
l果Q匹配成功,rs的gؓQ{ci}Q注意c前边的空g会匹配到l果中,即{ ci}是不正确的?/p>
var rs=regx.exec(“Beijing is a beautiful city”);
l果Q匹配成功,rs的gؓQ{ij}Q即匚w了Beijing中的ij?/p>
回RW?x 的值必Mؓ A-Z ?a-z 之一。否则,?c 视ؓ一
个原义的 ’c’ 字符。(实际的例子还需补充Q?
var rs=regx.exec(“user1”);
l果Q匹配成功,rs的gؓQ{user1}
var rs=regx.exec(“userA”);
l果Q匹配成功,rs的gؓQ{userA}
var str=“a
bc”;
var rs=regx.exec(str);
l果Q匹配成功,rs的gؓQ{ }Q如果表辑ּ?a\n\rbc/Q则不会被匹配,因此在一般的~辑器中一?#8221;Enter”键代表着“回R换行”Q而非“换行回R”Q至在textarea域中是这L?nbsp;
25>\rQ匹配一个回车符
例子Q?br>var regx=/\si/;
var rs=regx.exec(“Beijing is a city”);
l果Q匹配成功,rs的gؓQ{ i}
例子Q?br>var regx=/\Si/;
var rs=regx.exec(“Beijing is a city”);
l果Q匹配成功,rs的gؓQ{ei}
例子Q?br>var regx=/a\tb/;
var rs=regx.exec(“a bc”);
l果Q匹配成功,rs的gؓQ?{a bc}
var rs=regx.exec(“$25.23”);
l果Q匹配成功,rs的gؓQ{2}
var rs=regx.exec(“$25.23”);
l果Q匹配成功,rs的gؓQ{$}
var rs=regx.exec(“user-group-role”);
l果Q匹配成功,rs的gؓQ{user-group-role,-}Q同样对user,group,role的匹配也是成功的Q但像user-group,role{就不对了?/p>
3Q表辑ּ操作
var rs=regx.exec(“3432ddf53”);
q回的rsgؓQ{3432}
var regx2=new RegExp(“ab(\d+)c”);
var rs2=regx2.exec(“ab234c44”);
q回的rsgؓQ{ab234c,234}
另外Q如果有多个合适的匚wQ则W一ơ执行execq回一个第一个匹配,此时l箋执行execQ则依次q回W二个第三个匚w。例如:
var regx=/user\d/g;
var rs=regx.exec(“ddduser1dsfuser2dd”);
var rs1=regx.exec(“ddduser1dsfuser2dd”);
则rs的gؓ{user1}Qrs的gؓ{rs2}Q当然注意regx中的g参数是必ȝQ否则无论exec执行多少ơ,都返回第一个匹配。后面还有相兛_Ҏ及到Ҏ惌的解释?/p>
var regx=/user\d+/g;
var flag=regx.test(“user12dd”);
flag的gؓtrue?/p>
例子Q?br>var regx=/user\d/g;
var str=“user13userddduser345”;
var rs=str.match(regx);
rs的gؓQ{user1,user3}
var str=“user13userddduser345”;
var rs=str.search(regx);
rs的gؓQ?
var str=“user13userddduser345”;
var rs=str.replace(regx,”00”);
rs的gؓQ?03userddd0045
例子2Q?br>var regx=/u(se)r\d/g;
var str=“user13userddduser345”;
var rs=str.replace(regx,”$1”);
rs的gؓQse3userdddse45
对于replace(expr,str)Ҏq要特别注意一点,如果expr是一个表辑ּ对象则会q行全局替换Q此时表辑ּ必须附加参数gQ否则也只是替换W一个匹配)Q如果expr是一个字W串对象Q则只会替换W一个匹配的部分Q例如:
var regx=“user”
var str=“user13userddduser345”;
var rs=str.replace(regx,”00”);
rs的gؓQ?0013userddduser345
var str=“user13userddduser345”;
var rs=str.split(regx);
rs的gؓQ{3userddd,45}
var rs=regx.exec(str);
其中Q和表达式自wregx相关的属性有两个Q和表达式匹配结果rs相关的属性有三个Q下面将逐一介绍?br>2Q和表达式自w相关的两个属性:
var rs=regx.exec(“sdsfuser1dfsfuser2”);
var lastIndex1=regx.lastIndex;
rs=regx.exec(“sdsfuser1dfsfuser2”);
var lastIndex2=regx.lastIndex;
rs=regx.exec(“sdsfuser1dfsfuser2”);
var lastIndex3=regx.lastIndex;
上面lastIndex1?Q第二个lastIndex2也ؓ9Q第三个也是9Q如果regx=/user\d/gQ则W一个ؓ9Q第二个?8Q第三个??/p>
var regx=/user\d/;
var rs=regx.exec(“sdsfuser1dfsfuser2”);
var source=regx.source;
source的gؓuser\d
3Q和匚wl果相关的三个属性:
var regx=/user\d/;
var rs=regx.exec(“sdsfuser1dfsfuser2”);
var index1=rs.index;
rs=regx.exec(“sdsfuser1dfsfuser2”);
var index2=rs.index;
rs=regx.exec(“sdsfuser1dfsfuser2”);
var index3=rs.index;
index1?Qindex2?Qindex3?Q如果表辑ּ加入参数gQ则index1?Qindex2?3Qindex3会报错(index为空或不是对象)?/p>
var regx=/user\d/;
var rs=regx.exec(“sdsfuser1dfsfuser2”);
var input=rs.input;
input的gؓsdsfuser1dfsfuser2?/p>
var regx=/user\d/;
var rs=regx.exec(“sdsfuser1dfsfuser2”);
var value1=rs[0];
rs=regx.exec(“sdsfuser1dfsfuser2”);
var value2=rs[0];
value1的gؓuser1,value2的gؓuser2
描述Q有一表单Q其中有一?#8220;用户?#8221;input?br>要求Q汉字,而且不能于2个汉字,不能多于4个汉字?br>实现Q?br><script>
function checkForm(obj){
var username=obj.username.value;
var regx=/^[\u4e00-\u9fa5]{2,4}$/g
if(!regx.test(username)){
alert(“Invalid username!”);
return false;
}
return true;
}
</script>
<form name=“myForm”onSubmit=“return checkForm(this)”>
<input type=“text” name=“username”/>
<input type=“submit” vlaue=“submit”/>
</form>
2Q实际应用二
描述Q给定一个含有html标记的字W串Q要求将其中的html标记L?br>实现Q?br><script>
function toPlainText(htmlStr){
var regx=/<[^>]*>|<\/[^>]*>/gm;
var str=htmlStr.replace(regx,"");
return str;
}
</script>
<form name=“myForm”>
<textarea id=“htmlInput”></textarea>
<input type=“button” value=“submit” onclick=“toPlainText(document.getElementById(‘htmlInput’).value”/>
</form>
表达式加上参数g之后Q表明可以进行全局匚wQ注意这?#8220;可以”的含义。我们详l叙qͼ
1Q对于表辑ּ对象的execҎQ不加入gQ则只返回第一个匹配,无论执行多少ơ均是如此,如果加入gQ则W一ơ执行也q回W一个匹配,再执行返回第二个匚wQ依ơ类推。例?br>var regx=/user\d/;
var str=“user18dsdfuser2dsfsd”;
var rs=regx.exec(str);//此时rs的gؓ{user1}
var rs2=regx.exec(str);//此时rs的g然ؓ{user1}
如果regx=/user\d/gQ则rs的gؓ{user1}Qrs2的gؓ{user2}
通过q个例子说明Q对于execҎQ表辑ּ加入了gQƈ不是说执行execҎ可以返回所有的匚wQ而是说加入了g之后Q我可以通过某种方式得到所有的匚wQ这里的“方式”对于exec而言Q就是依ơ执行这个方法即可?br>2Q对于表辑ּ对象的testҎQ加入g于不加上g没有什么区别?br>3Q对于String对象的matchҎQ不加入gQ也只是q回W一个匹配,一直执行matchҎ也Lq回W一个匹配,加入gQ则一ơ返回所有的匚wQ注意这与表辑ּ对象的execҎ不同Q对于exec而言Q表辑ּ即加上了gQ也不会一ơ返回所有的匚wQ。例如:
var regx=/user\d/;
var str=“user1sdfsffuser2dfsdf”;
var rs=str.match(regx);//此时rs的gؓ{user1}
var rs2=str.match(regx);//此时rs的g然ؓ{user1}
如果regx=/user\d/gQ则rs的gؓ{user1,user2}Qrs2的g为{user1,user2}
4Q对于String对象的replaceҎQ表辑ּ不加入gQ则只替换第一个匹配,如果加入gQ则替换所有匹配。(开头的三道试题能很好的说明这一点)
5Q对于String对象的splitҎQ加上g与不加g是一LQ即Q?br>var sep=/user\d/;
var array=“user1dfsfuser2dfsf”.split(sep);
则array的gؓ{dfsf, dfsf}
此时sep=/user\d/gQ返回值是一L?br>6Q对于String对象的searchҎQ加不加g也是一L?br>ȝ2Q附加参数m的用?/strong>
附加参数mQ表明可以进行多行匹配,但是q个只有当用^?模式时才会v作用Q在其他的模式中Q加不加入m都可以进行多行匹配(其实说多行的字符串也是一个普通字W串Q,我们举例说明q一?br>1Q用^的例?br>var regx=/^b./g;
var str=“bd76 dfsdf
sdfsdfs dffs
b76dsf sdfsdf”;
var rs=str.match(regx);
此时加入g和不加入gQ都只返回第一个匹配{bd}Q如果regx=/^b./gmQ则q回所有的匚w{bd,b7}Q注意如果regx=/^b./mQ则也只q回W一个匹配。所以,加入m表明可以q行多行匚wQ加入g表明可以q行全局匚wQ综合到一起就是可以进行多行全局匚w
2Q用其他模式的例子Q例?br>var regx=/user\d/;
var str=“sdfsfsdfsdf
sdfsuser3 dffs
b76dsf user6”;
var rs=str.match(regx);
此时不加参数gQ则q回{user3}Q加入参数gq回{user3,user6}Q加不加入mҎ没有影响?br>3Q因此对于m我们要清楚它的用,C它只对^?模式起作用,在这两种模式中,m的作用ؓQ如果不加入mQ则只能在第一行进行匹配,如果加入m则可以在所有的行进行匹配。我们再看一个^的例?br>var regx=/^b./;
var str=“ret76 dfsdf
bjfsdfs dffs
b76dsf sdfsdf”;
var rs=str.match(regx);
此时rs的gؓnullQ如果加入gQrs的g然ؓnullQ如果加入mQ则rs的gؓ{bj}Q也是_在第一行没有找到匹配,因ؓ有参数mQ所以可以l去下面的行L是否有匹配)Q如果m和g都加上,则返回{bj,b7}Q只加m不加g说明Q可以去多行q行匚wQ但是找C个匹配后p回,加入g 表明多行中所有的匚wq回Q当然对于matchҎ是如此,对于exec呢,则需要执行多ơ才能依ơ返回)
ȝ3Q在HTML的textarea输入域中Q按一个Enter键,对应的控制字Wؓ“\r\n”Q即“回R换行”Q而不?#8220;\n\r”Q即“换行回R”Q我们看一个前面我们Dq的例子Q?br>var regx=/a\r\nbc/;
var str=“a
bc”;
var rs=regx.exec(str);
l果Q匹配成功,rs的gؓQ{ }Q如果表辑ּ?a\n\rbc/Q则不会被匹配,因此在一般的~辑器中一?#8221;Enter”键代表着“回R换行”Q而非“换行回R”Q至在textarea域中是这L?/p>
1Q登录场景,查用戯入的用户名,要求Q?br>字符长度??8之间
字符必须为字母、数字或者下划线的组?br>2Q购物场景,对于商品列表的描qͼ标签、条形码、单P{有些用户可能会提出下面需求:
希望可以对商品列表的某一列描q进行字L自定义,而且下次d仍然保持用户的修?br>2Q下面看一下在上述两个场景中,正则表达式的使用方式和具体实现?br>1Q登录场景部分正则表辑ּ实现
2Q购物场景部分正则表辑ּ实现
1>需求分析:用户希望可以对商品列表的某一列描q进行字L自定义,而且下次d仍然保持用户的修?br>
2>E序设计
cdQ?br>
3>代码实现
PageSettingc?br>
PageSettingParserc?br>
]]>
/********************************************************************/
Array.prototype.sortҎ是对数组q行排序, 该方法带一个函数参?用来指定排序的规?
我们先来看看sort 的简单应?
var arr=[2,1,3,4];
alert(arr.sort()) // [1,2,3,4] 从小到大排列
//现在由大到小排列 得到 [4,3,2,1]
alert(arr.sort(function(left,right){return left>right?-1:1}))
//q里,sortҎ通过参数函数的返回? 1或?1来决定是排q是倒排
q记得我以前和大家说q的 利用 Function.apply Ҏ来获取数l中的最大元素的Ҏ?
文中用了两种不同的方法来获取数组中的最大?
现在 sort也可以来U一下了.
var arr=[2,1,3,4];
var minValue=arr.sort()[0];
var maxValue=arr.sort()[arr.length-1] // arr.sort().pop()
怎么?q也是一U另cd现方法吧,q不用写循环遍历.
不过,我必要指出的是,q种Ҏ的效率是最低的,对于几十个百来个元素的数l?你还是可以用这U技?
但是,如果数组很大,? sort()Ҏ可以慢得让你x?
q一步讨? sort 对复杂数据结构的排序.
1. 对多l数l的排序
var arr=[
[2,1,55,4],
[5,3,22,3],
[1,2,77,2],
[9,4,33,5],
];
alert("默认按第一列排\n"+arr.sort().join("\n"))
alert("现在按第三列排\n"+arr.sort(function(left,right){return left[2]>right[2]?1:-1}).join("\n"))
alert("现在按第三列倒排\n"+arr.sort(function(left,right){return left[2]>right[2]?-1:1}).join("\n"))
2.对复杂数据结构的排序
Array.prototype.each=function(f){for(var i=0;i<this.length;i++) f(this[i],i,this)}
function showName(item){alert(item.name)}; //打印名字
var arr=[
{name:"bill",money:500},
{name:"go_rush",money:400},
{name:"dudu",money:9000}
];
//依次昄 dudu,bill,go_rush 看来dudu是最有钱?而我是最IL
arr.sort(function(left,right){return left.money>right.money?-1:1}).each(showName)
3.对表格的排序,q个话题我昨天和大家聊过?
参见:
http://www.cnblogs.com/ashun/archive/2006/11/30/appendChild_table_sort.html
更复杂的表格排序(也是用Array的sort函数):
http://community.csdn.net/expert/Topicview2.asp?id=5174915
4. Protype.js 中对 sort有一个构思非常y妙的扩展,先看他的代码
1 sortBy: function(iterator) {
2 return this.collect(function(value, index) {
3 return {value: value, criteria: iterator(value, index)};
4 }).sort(function(left, right) {
5 var a = left.criteria, b = right.criteria;
6 return a < b ? -1 : a > b ? 1 : 0;
7 }).pluck('value');
8 },
q个 sortBy 允许传入一个函? q把数组的每一个元素作为参数执行该函数,最后对函数q回的结果排?
下面我来分解他的q个函数.
collectҎ实际是 mapҎ.相当?
Array.prototype.map=function(f){
for(var i=0;ret=[];i<this.length;i++) ret[i]=f(this[i],i,this)
return ret
}
比如,现在
arr=[2,1,4,3]
iterator=function(x){return x*x}
1-3行代码就得到了这样一个数l?
[
{value:2,criteria:4},
{value:1,criteria:1},
{value:4,criteria:16},
{value:3,criteria:9}
]
4-6行代码就Ҏl按 criteria:q行排序,由小到大.排完得到
[
{value:1,criteria:1},
{value:2,criteria:4},
{value:3,criteria:9},
{value:4,criteria:16}
]
W?行代码最单了,取每个元素的value属?最l得? [1,2,3,4] 实现对arr的sortBy(function...)排序
]]>
float : none | left | right
取|
none :?默认倹{对象不飘Q
left :?文本向对象的右?
right :?文本向对象的左?
它是怎样工作的,看个一行两列的例子
xhtml:
<div id="warp">
<div id="column1">q里是第一?lt;/div>
<div id="column2">q里是第二列</div>
<div class="clear"></div>/*q是q背web标准意图的,只是惌明在它下面的元素需要清除Q?/
</div>
CSS:
#wrap{ width:100%; height:auto;}
#column1{ float:left; width:40%;}
#column2{ float:right; width:60%;}
.clear{ clear:both;}
position : static | absolute | fixed | relative
取|
static :?默认倹{无Ҏ定位Q对象遵循HTML定位规则
absolute :?对象从文档中拖出Q?left Q?right Q?top Q?bottom {属性相对于其最接近的一个最有定位设|的父对象进行绝对定位。如果不存在q样的父对象Q则依据 body 对象。而其层叠通过 z-index 属性定?
fixed :?IE未支持。对象定位遵从绝?absolute)方式。但是要遵守一些规?
relative :?对象不可层叠Q但依?left Q?right Q?top Q?bottom {属性在正常文档中偏移位置
它来实现一行两列的例子
xhtml:
<div id="warp">
<div id="column1">q里是第一?lt;/div>
<div id="column2">q里是第二列</div>
</div>
CSS:
#wrap{ position:relative;/*相对定位*/width:770px;}
#column1{ position:absolute; top:0; left:0; width:300px;}
#column2{position:absolute; top:0; right:0; width:470px;}
他们的区别在?
昄Qfloat是相对定位的Q会随着览器的大小和分辨率的变化而改变,而position׃行了Q所以一般情况下q是float布局Q?
2.CSS常用布局实例
一?居中)
单行一?
body { margin: 0px; padding: 0px; text-align: center; }
#content { margin-left:auto; margin-right:auto; width: 400px; }
两行一?
body { margin: 0px; padding: 0px; text-align: center;}
#content-top { margin-left:auto; margin-right:auto; width: 400px; }
#content-end {margin-left:auto; margin-right:auto; width: 400px; }
三行一?
body { margin: 0px; padding: 0px; text-align: center; }
#content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }
#content-mid { margin-left:auto; margin-right:auto; width: 400px; }
#content-end { margin-left:auto; margin-right:auto; width: 400px; }
两列
单行两列
#bodycenter { width: 700px;margin-right: auto; margin-left: auto;overflow: auto; }
#bodycenter #dv1 {float: left;width: 280px;}
#bodycenter #dv2 {float: right;width: 420px;}
两行两列
#header{ width: 700px; margin-right: auto;margin-left: auto; overflow: auto;}
#bodycenter { width: 700px; margin-right: auto; margin-left: auto; overflow: auto; }
#bodycenter #dv1 { float: left; width: 280px;}
#bodycenter #dv2 { float: right;width: 420px;}
三行两列
#header{ width: 700px;margin-right: auto; margin-left: auto; }
#bodycenter {width: 700px; margin-right: auto; margin-left: auto; }
#bodycenter #dv1 { float: left;width: 280px;}
#bodycenter #dv2 { float: right; width: 420px;}
#footer{ width: 700px; margin-right: auto; margin-left: auto; overflow: auto; clear:both; }
三列
单行三列
l对定位
#left { position: absolute; top: 0px; left: 0px; width: 120px; }
#middle {margin: 0px 190px 0px 190px; }
#right {position: absolute;top: 0px; right: 0px; width: 120px;}
float定位
xhtml:
<div id="warp">
<div id="column">
<div id="column1">q里是第一?lt;/div>
<div id="column2">q里是第二列</div>
<div class="clear"></div>/*用法web标准不徏议,但是C下面元素需要清除Q?/
</div>
<div id="column3">q里是第三列</div>
<div class="clear"></div>/*用法web标准不徏议,但是C下面元素需要清除Q?/
</div>
CSS:
#wrap{ width:100%; height:auto;}
#column{ float:left; width:60%;}
#column1{ float:left; width:30%;}
#column2{ float:right; width:30%;}
#column3{ float:right; width:40%;}
.clear{ clear:both;}
float定位?
xhtml
<div id="center" class="column">
<h1>This is the main content.</h1>
</div>
<div id="left" class="column">
<h2>This is the left sidebar.</h2>
</div>
<div id="right" class="column">
<h2>This is the right sidebar.</h2>
</div>
CSS
body {
margin: 0;
padding-left: 200px; /* LC fullwidth */
padding-right: 190px; /* RC fullwidth + CC padding */
min-width: 200px; /* LC fullwidth + CC padding */
}
.column {
position: relative;
float: left;
}
#center {
width: 100%;
}
#left {
width: 200px; /* LC width */
right: 200px; /* LC fullwidth */
margin-left: -100%;
}
#right {
width: 190px; /* RC width */
margin-right: -100%;
}
/*** IE Fix ***/
* html #left {
left: 190px; /* RC fullwidth */
}
两行三列
xhtml:
<div id="header">q里是顶?lt;/div>
<div id="warp">
<div id="column">
<div id="column1">q里是第一?lt;/div>
<div id="column2">q里是第二列</div>
<div class="clear"></div>
</div>
<div id="column3">q里是第三列</div>
<div class="clear"></div>
</div>
CSS:
#header{width:100%; height:auto;}
#wrap{ width:100%; height:auto;}
#column{ float:left; width:60%;}
#column1{ float:left; width:30%;}
#column2{ float:right; width:30%;}
#column3{ float:right; width:40%;}
.clear{ clear:both;}
三行三列
xhtml:
<div id="header">q里是顶?lt;/div>
<div id="warp">
<div id="column">
<div id="column1">q里是第一?lt;/div>
<div id="column2">q里是第二列</div>
<div class="clear"></div>
</div>
<div id="column3">q里是第三列</div>
<div class="clear"></div>
</div>
<div id="footer">q里是底部一?lt;/div>
CSS:
#header{width:100%; height:auto;}
#wrap{ width:100%; height:auto;}
#column{ float:left; width:60%;}
#column1{ float:left; width:30%;}
#column2{ float:right; width:30%;}
#column3{ float:right; width:40%;}
.clear{ clear:both;}
#footer{width:100%; height:auto;}
PS:q里列出的是常用的例子,而非研究之用Q对一每个盒子Q我都没有设|margin,padding,boeder{属性,是因为我个h觉得Q含有宽度定位的时候,最好不好用C们,除非必不得已Q因为如果不是这L话,解决览器兼定w题,会让你头|而且产生一pdCSS代码Q我觉得q样的效率和效果都不好!
3.CSS布局高技?
margin和paddingL有可能要用到Q而生的问题如何解决呢?׃览器解释容器宽度的Ҏ不同Q?
IE 6.0 Firefox Opera{是
真实宽度=width+padding+border+margin
IE5.X/Win
真实宽度=width
IE中有动对象的双倍距MBUGQIE Doubled Float-Margin Bug Q? q里q需要具体问题具体解冟?/p>
div.content {
width:400px; //q个是错误的widthQ所有浏览器都读CQ包括IE5.x/Win
voice-family: "\"}\""; //IE5.X/win忽略?\"}\""后的内容
voice-family:inherit;
width:300px; //包括IE6/win在内的部分浏览器dq句Q新的数?300px)覆盖掉了旧的
}
html>body .content { //html>body是CSS2的写?
width:300px; //支持CSS2该写法的览?非IE5)有幸d了这一?
}
div.content {
width:300px !important; //q个是正的widthQ大部分支持!important标记的浏览器使用q里的数?
width(I格)/**/:400px; //IE6/win不解析这句,所以IE6/win仍然认ؓwidth的值是300pxQ而IE5.X/windq句Q新的数?400px)覆盖掉了旧的Q因?important标记的优先对IE不v作用
}
html>body .content { //html>body是CSS2的写?
width:300px; //支持CSS2该写法的览器有q读Cq一?
}
n行n列布局Q每列高度(事先q不能确定哪列的高度Q的相同Q是每个设计师追求的目标Q做法有Q背景图填充、加JS脚本?
Ҏ和容器溢出部分隐藏和列的负底边界和正的内补丁相结合的Ҏ?
背景囑֡充法Q?
xhtml:
<div id="wrap">
<div id="column1">q是W一?lt;/div>
<div id="column1">q是W二?lt;/div>
<div class="clear"></div>
</div>
css:
#wrap{ width:776px; background:url(bg.gif) repeat-y 300px;}
#column1{ float:left; width:300px;}
#column2{ float:right; width:476px;}
.clear{ clear:both;}
是一个npx宽的一张图片在外部容器U向重复Q定位到两列交错的位|纵向重复,在视觉上产生了两列高度一L错觉
JS脚本法:
代码的原理基本就是这Pd高度Q判断高度,高度相等Q下面有个左中右{高的例?
<script language="javascript">
document.getElementById("left").style.height=document.getElementById("middle").scrollHeight+"px"
document.getElementById("right").style.height=document.getElementById("middle").scrollHeight+"px"
</script>
]]>
匚w中文字符的正则表辑ּQ?[\u4e00-\u9fa5]
匚w双字节字W?包括汉字在内)Q[^\x00-\xff]
应用Q计字W串的长度(一个双字节字符长度?QASCII字符?Q?
String.prototype.len=function(){return this.replace([^\x00-\xff]/g,"aa").length;}
匚wI的正则表辑ּQ\n[\s| ]*\r
匚wHTML标记的正则表辑ּQ?<(.*)>.*<\/\1>|<(.*) \/>/
匚w首尾I格的正则表辑ּQ?^\s*)|(\s*$)
应用Qjavascript中没有像vbscript那样的trim函数Q我们就可以利用q个表达式来实现Q如下:
String.prototype.trim = function()
{
?return this.replace(/(^\s*)|(\s*$)/g, "");
}
利用正则表达式分解和转换IP地址Q?
下面是利用正则表辑ּ匚wIP地址QƈIP地址转换成对应数值的JavascriptE序Q?
function IP2V(ip)
{
re=/(\d+)\.(\d+)\.(\d+)\.(\d+)/g?/匚wIP地址的正则表辑ּ
if(re.test(ip))
{
return RegExp.$1*Math.pow(255,3))+RegExp.$2*Math.pow(255,2))+RegExp.$3*255+RegExp.$4*1
}
else
{
throw new Error("Not a valid IP address!")
}
}
不过上面的程序如果不用正则表辑ּQ而直接用split函数来分解可能更单,E序如下Q?
var ip="10.100.20.168"
ip=ip.split(".")
alert("IP值是Q?+(ip[0]*255*255*255+ip[1]*255*255+ip[2]*255+ip[3]*1))
匚wEmail地址的正则表辑ּQ\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*
匚w|址URL的正则表辑ּQ?a href="http://([/w-]+/.)+[/w-]+(/[/w">http://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?
利用正则表达式去除字串中重复的字W的法E序Q[注:此程序不正确Q原因见本脓回复]
var s="abacabefgeeii"
var s1=s.replace(/(.).*\1/g,"$1")
var re=new RegExp("["+s1+]","g")
var s2=s.replace(re,"")
alert(s1+s2)?/l果为:abcefgi
我原来在CSDN上发贴寻求一个表辑ּ来实现去除重复字W的ҎQ最l没有找刎ͼq是我能惛_的最单的实现Ҏ。思\是用后向引用取出包括重复的字符Q再以重复的字符建立W二个表辑ּQ取C重复的字W,两者串q。这个方法对于字W顺序有要求的字W串可能不适用?
得用正则表达式从URL地址中提取文件名的javascriptE序Q如下结果ؓpage1
s="s=s.replace(/(.*\/){0,}([^\.]+).*/ig,"$2")
alert(s)
利用正则表达式限制网表单里的文本框输入内容Q?
用正则表辑ּ限制只能输入中文Qonkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,’’)" onbeforepaste="clipboardData.setData(’text’,clipboardData.getData(’text’).replace(/[^\u4E00-\u9FA5]/g,’’))"
用正则表辑ּ限制只能输入全角字符Q?onkeyup="value=value.replace(/[^\uFF00-\uFFFF]/g,’’)" onbeforepaste="clipboardData.setData(’text’,clipboardData.getData(’text’).replace(/[^\uFF00-\uFFFF]/g,’’))"
用正则表辑ּ限制只能输入数字Qonkeyup="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,’’))"
正则表达?regular expression
正则表达?RegExp
模式 pattern
匚w Match
.NET命名I间Q?System.Text.RegularExpression
补充Q?
^\d+$ //匚w非负整数Q正整数 + 0Q?
^[0-9]*[1-9][0-9]*$ //匚w正整?
^((-\d+)|(0+))$ //匚w非正整数Q负整数 + 0Q?
^-[0-9]*[1-9][0-9]*$ //匚w负整?
^-?\d+$ //匚w整数
^\d+(\.\d+)?$ //匚w非负点敎ͼ正QҎ + 0Q?
^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$ //匚w正QҎ
^((-\d+(\.\d+)?)|(0+(\.0+)?))$ //匚w非正点敎ͼ负QҎ + 0Q?
^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$ //匚w负QҎ
^(-?\d+)(\.\d+)?$ //匚w点?
^[A-Za-z]+$ //匚w?6个英文字母组成的字符?
^[A-Z]+$ //匚w?6个英文字母的大写l成的字W串
^[a-z]+$ //匚w?6个英文字母的写l成的字W串
^[A-Za-z0-9]+$ //匚w由数字和26个英文字母组成的字符?
^\w+$ //匚w由数字?6个英文字母或者下划线l成的字W串
^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$ //匚wemail地址
^[a-zA-z]+://匚w(\w+(-\w+)*)(\.(\w+(-\w+)*))*(\?\S*)?$ //匚wurl
利用正则表达式去除字串中重复的字W的法E序Q?
var s="abacabefgeeii"
var s1=s.replace(/(.).*\1/g,"$1")
var re=new RegExp("["+s1+]","g")
var s2=s.replace(re,"")
alert(s1+s2) //l果为:abcefgi
===============================
如果var s = "abacabefggeeii"
l果׃对了Q结果ؓQabeicfgg
正则表达式的能力有限
RE: totoro
谢谢你的指点Q这个javascript正则表达式程序算法确实有问题Q我会试着找更好的办法!!!
1.认有效电子邮g格式
下面的代码示例用静?Regex.IsMatch Ҏ验证一个字W串是否为有效电子邮件格式。如果字W串包含一个有效的电子邮g地址Q则 IsValidEmail Ҏq回 trueQ否则返?falseQ但不采取其他Q何操作。您可以使用 IsValidEmailQ在应用E序地址存储在数据库中或昄?ASP.NET 中之前Q筛选出包含无效字符的电子邮件地址?
[Visual Basic]
Function IsValidEmail(strIn As String) As Boolean
’ Return true if strIn is in valid e-mail format.
Return Regex.IsMatch(strIn, ("^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$")
End Function
[C#]
bool IsValidEmail(string strIn)
{
// Return true if strIn is in valid e-mail format.
return Regex.IsMatch(strIn, @"^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$");
}
2.清理输入字符?
下面的代码示例用静?Regex.Replace Ҏ从字W串中抽出无效字W。您可以使用q里定义?CleanInput ҎQ清除掉在接受用戯入的H体的文本字D中输入的可能有害的字符。CleanInput 在清除掉?@?Q连字符Q和 .Q句点)以外的所有非字母数字字符后返回一个字W串?
[Visual Basic]
Function CleanInput(strIn As String) As String
’ Replace invalid characters with empty strings.
Return Regex.Replace(strIn, "[^\w\.@-]", "")
End Function
[C#]
String CleanInput(string strIn)
{
// Replace invalid characters with empty strings.
return Regex.Replace(strIn, @"[^\w\.@-]", "");
}
3.更改日期格式
以下代码CZ使用 Regex.Replace Ҏ来用 dd-mm-yy 的日期Ş式代?mm/dd/yy 的日期Ş式?
[Visual Basic]
Function MDYToDMY(input As String) As String
Return Regex.Replace(input, _
"\b(?<month>\d{1,2})/(?<day>\d{1,2})/(?<year>\d{2,4})\b", _
"${day}-${month}-${year}")
End Function
[C#]
String MDYToDMY(String input)
{
return Regex.Replace(input,
"\\b(?<month>\\d{1,2})/(?<day>\\d{1,2})/(?<year>\\d{2,4})\\b",
"${day}-${month}-${year}");
}
Regex 替换模式
本示例说明如何在 Regex.Replace 的替换模式中使用命名的反向引用。其中,替换表达?${day} 插入?(?<day>...) l捕L子字W串?
有几U静态函C您可以在使用正则表达式操作时无需创徏昑ּ正则表达式对象,?Regex.Replace 函数正是其中之一。如果您不想保留~译的正则表辑ּQ这给您带来方?
4.提取 URL 信息
以下代码CZ使用 Match.Result 来从 URL 提取协议和端口号。例如,“http://www.contoso.com:8080/letters/readme.html”返?#8220;http:8080”?
[Visual Basic]
Function Extension(url As String) As String
Dim r As New Regex("^(?<proto>\w+)://[^/]+?(?<port>:\d+)?/", _
RegexOptions.Compiled)
Return r.Match(url).Result("${proto}${port}")
End Function
[C#]
String Extension(String url)
{
Regex r = new Regex(@"^(?<proto>\w+)://[^/]+?(?<port>:\d+)?/",
RegexOptions.Compiled);
return r.Match(url).Result("${proto}${port}");
}
如何用正则表辑ּ表示要么是数字要么是字母 是字母的话只能是一个字?数字则无所谓?
^[a-zA-Z]$|^\d+$
我要回复
断u 2007-5-9 17:14:00 删除 JavaScript中的正则表达式解?
2005-10-20 16:30:46
正则表达?regular expression)对象包含一个正则表辑ּ模式(pattern)。它h用正则表辑ּ模式d配或代替一个字W串(string)中特定字W?或字W集?的属?properties)和方?methods)?要ؓ一个单独的正则表达式添加属?可以使用正则表达式构造函?constructor function)Q无Z时被调用的预讄的正则表辑ּ拥有静态的属?the predefined RegExp object has static properties that are set whenever any regular expression is used, 我不知道我翻得对不对Q将原文列出Q请自行译)?
创徏Q?
一个文本格式或正则表达式构造函?
文本格式Q?/pattern/flags
正则表达式构造函敎ͼ new RegExp("pattern"[,"flags"]);
参数说明Q?
pattern -- 一个正则表辑ּ文本
flags -- 如果存在Q将是以下|
g: 全局匚w
i: 忽略大小?
gi: 以上l合
[注意] 文本格式的参C用引P而在用构造函数时的参数需要引受如Q?ab+c/i new RegExp("ab+c","i")是实CL功能?br>在构造函CQ一些特D字W需要进行{?在特D字W前?\")。如Qre = new RegExp("\\w+")
正则表达式中的特D字W?
字符 含意
\ 做ؓ转意Q即通常?\"后面的字W不按原来意义解释,?b/匚w字符"b"Q当b前面加了反斜杆后/\b/Q{意ؓ匚w一个单词的边界?
-?
Ҏ则表辑ּ功能字符的还原,?*"匚w它前面元字符0ơ或多次Q?a*/匹配a,aa,aaaQ加?\"后,/a\*/只匚w"a*"?
^ 匚w一个输入或一行的开_/^a/匚w"an A"Q而不匚w"An a"
$ 匚w一个输入或一行的l尾Q?a$/匚w"An a"Q而不匚w"an A"
* 匚w前面元字W?ơ或多次Q?ba*/匹配b,ba,baa,baaa
+ 匚w前面元字W?ơ或多次Q?ba*/匹配ba,baa,baaa
? 匚w前面元字W?ơ或1ơ,/ba*/匹配b,ba
(x) 匚wx保存x在名?1...$9的变量中
x|y 匚wx或y
{n} _匚wn?
{n,} 匚wnơ以?
{n,m} 匚wn-m?
[xyz] 字符?character set)Q匹配这个集合中的Q一一个字W?或元字符)
[^xyz] 不匹配这个集合中的Q何一个字W?
[\b] 匚w一个退格符
\b 匚w一个单词的边界
\B 匚w一个单词的非边?
\cX q儿QX是一个控制符Q?\cM/匚wCtrl-M
\d 匚w一个字数字W,/\d/ = /[0-9]/
\D 匚w一个非字数字符Q?\D/ = /[^0-9]/
\n 匚w一个换行符
\r 匚w一个回车符
\s 匚w一个空白字W,包括\n,\r,\f,\t,\v{?
\S 匚w一个非I白字符Q等?[^\n\f\r\t\v]/
\t 匚w一个制表符
\v 匚w一个重直制表符
\w 匚w一个可以组成单词的字符(alphanumericQ这是我的意译,含数?Q包括下划线Q如[\w]匚w"$5.98"中的5Q等于[a-zA-Z0-9]
\W 匚w一个不可以l成单词的字W,如[\W]匚w"$5.98"中的$Q等于[^a-zA-Z0-9]?
说了q么多了Q我们来看一些正则表辑ּ的实际应用的例子Q?
E-mail地址验证:
function test_email(strEmail) {
var myReg = /^[_a-z0-9]+@([_a-z0-9]+\.)+[a-z0-9]{2,3}$/;
if(myReg.test(strEmail)) return true;
return false;
}
HTML代码的屏?
function mask_HTMLCode(strInput) {
var myReg = /<(\w+)>/;
return strInput.replace(myReg, "<$1>");
}
正则表达式对象的属性及Ҏ
预定义的正则表达式拥有有以下静态属性:input, multiline, lastMatch, lastParen, leftContext, rightContext?1?9?br>其中input和multiline可以预设|。其他属性的值在执行qexec或testҎ后被Ҏ不同条g赋以不同的倹{?br>许多属性同时拥有长和短(perl风格)的两个名字,q且Q这两个名字指向同一个倹{?JavaScript模拟perl的正则表辑ּ)
正则表达式对象的属?属?含义
$1...$9 如果??存在Q是匚w到的子串
$_ 参见input
$* 参见multiline
$& 参见lastMatch
$+ 参见lastParen
$` 参见leftContext
$’ 参见rightContext
constructor 创徏一个对象的一个特D的函数原型
global 是否在整个串中匹?bool?
ignoreCase 匚w时是否忽略大写(bool?
input 被匹配的?
lastIndex 最后一ơ匹配的索引
lastParen 最后一个括hh的子?
leftContext 最q一ơ匹配以左的子串
multiline 是否q行多行匚w(bool?
prototype 允许附加属性给对象
rightContext 最q一ơ匹配以右的子串
source 正则表达式模?
lastIndex 最后一ơ匹配的索引
正则表达式对象的Ҏ
Ҏ 含义
compile 正则表达式比?
exec 执行查找
test q行匚w
toSource q回特定对象的定?literal representing)Q其值可用来创徏一个新的对象。重载Object.toSourceҎ得到的?
toString q回特定对象的串。重载Object.toStringҎ得到的?
valueOf q回特定对象的原始倹{重载Object.valueOfҎ得到
例子
Smith, John
输?Smith, John"
posted by yxs
断u 2007-5-9 17:15:00 删除 《正则表辑ּ在UQ论坛中的应用?/p>
一、读者指?/p>
读者指引帮助你掌握本文的梗概。以免你看了大半才明白这~文章不适合你,l你造成视觉污染?br> 如果你正在用QSQ写E序Q或者你正在写一些诸如QS、留a溥或表单数据查之cȝ东东那就值得一看?/p>
如果你对正则表达式已l了如指掌,那么你不必一行行的看Q只要看看我写的模板Q再比较一下,取其_֍p了?br> 如果你还是第一ơ接触正则表辑ּQ那么你最好一行行的看Qƈ逐条试验
当你熟练的掌握了正则表达式的用法Q你׃发现其乐无穷?/p>
二、正则表辑ּ的概?/p>
什么是QQ代码?什么是正则表达式?
QQ代码是HTML的一个变U。一般情况下QUQ论坛不允怽使用QTQL代码Q而只能用QQ代码替代ᅢQ_Q代码?br> QQ代码是一套由行的UQ标签l成了固定代码,代码有统一的格式。用户只要遵循代码规则就可以实现用户惌的功能。如Q?br> 惌昄_体的how are you 字样Q就应该输入 how are you而不是输?lt;b>how are you</b>
你也怼问:QSQ是怎样?how are you转换?lt;b>how are you</b>的呢Q?br> 回答q个问题是Q用正则表达式?/p>
三、正则表辑ּ的用?/p>
有时我们在制作网站表单数据处理的时候(其是UQ论坛Q?都需要进行数据验证和字符串替代,特别是UQ论坛要进行大量的数据安全性和字符串替?/p>
邮于一般的论坛不支持HTML语法q就使得用户不能修改字体Q不能脓囄{一些功能。这样得论坛失M吸引用户的一个强有力的途径。可能说一个强大的论坛在吸引用h量上q是很重要的。这样就出现了一个UQ解决ҎQ即在论坛不支持HTML语法的情况下用户仍然可以定制自已贴子的样式,贴图Q增加链接,转脓|页{等诸多的功能,可能辑ֈ支持HTML语法同样的效果,而且q样可以使得论坛相对于HTML的论坛安全性大大提高。用户基本不能对论坛q行M恶意d?/p>
四、正则表辑ּ的语法规则和标记
现在我们正式q入则表辑ּ的学习,我会Ҏ实例l合讲解正则表达式的用法Q看完后你就会觉得写QQ代码如此简单了Q只要你一步一步的跟着我学 看完本文章后你就成ؓQQ高手了。激动h心的是你能写出自已的UQ标签来了Q再也不用到别h那里L贝现成的代码和模板了?q好VBScritp5.0l我们提供了“正则表达?#8221;对象Q只要你的服务器安装了IE5.xQ就可以q行?
字符描述Q?/p>
^W号匚w字符串的开头。例如:
^abc ?#8220;abc xyz”匚wQ而不?#8220;xyz abc”匚w
$W号匚w字符串的l尾。例如:
abc$ ?#8220;xyz abc”匚wQ而不?#8220;abc xyz”匚w?br> 注意Q如果同时用^W号?W号Q将q行_匚w。例如:
^abc$ 只与“abc”匚w
*W号匚wQ个或多个前面的字符。例如:
ab* 可以匚w“ab”?#8220;abb”?#8220;abbb”{?/p>
+W号匚w臛_一个前面的字符。例如:
ab+ 可以匚w“abb”?#8220;abbb”{,但不匚w“ab”?
?W号匚wQ个或1个前面的字符。例如:
ab?c? 可以且只能匹?#8220;abc”?#8220;abbc”?#8220;abcc”?#8220;abbcc”
.W号匚w除换行符以外的Q何字W。例如:
(.)+ 匚w除换行符以外的所有字W串
x|y匚w“x”?#8220;y”。例如:
abc|xyz 可匹?“abc”?“xyz”Q?#8220;ab(c|x)yz”匚w “abcyz”?#8220;abxyz”
{n}匚w恰好nơ(n为非负整敎ͼ前面的字W。例如:
a{2} 可以匚w“aa“Q但不匹?#8220;a”
{n,}匚w臛_nơ(n为非负整敎ͼ前面的字W。例如:
a{3,} 匚w“aaa”?#8220;aaaa”{,但不匚w“a”?#8220;aa”?br> 注意Qa{1,}{h于a+
a{0,}{h于a*
{m,n}匚w臛_m个,臛_n个前面的字符。例如:
a{1,3} 只匹?#8220;a”?#8220;aa”?#8220;aaa”?br> 注意Qa{0,1}{h于a?
[xyz]表示一个字W集Q匹配括号中字符的其中之一。例如:
[abc] 匚w“a”?#8220;b”?#8220;c”
[^xyz]表示一个否定的字符集。匹配不在此括号中的M字符。例如:
[^abc] 可以匚w?#8220;a”?#8220;b”?#8220;c”之外的Q何字W?/p>
[a-z]表示某个范围内的字符Q匹配指定区间内的Q何字W。例如:
[a-z] 匚w?#8220;a”?#8220;z”之间的Q何一个小写字母字W?/p>
[^m-n]表示某个范围之外的字W,匚w不在指定范围内的字符。例如:
[m-n] 匚w除从“m”?#8220;n”之间的Q何字W?/p>
\W号是{义操作符。例如:
\n 换行W?br> \f 分页W?br> \r 回R
\t 制表W?br> \v 垂直制表W?/p>
\\ 匚w“\”
\/ 匚w“/”
\s M白字W,包括I格、制表符、分늬{。等价于“[ \f\n\r\t\v]”
\S M非空白的字符。等价于“^\f\n\r\t\v]”
\w M单词字符Q包括字母和下划Uѝ等价于“[A-Za-z0-9_]”
\W M非单词字W。等价于“[^A-Za-z0-9_]”
\b匚w单词的结。例如:
ve\b 匚w单词“love”{,但不匚w“very”?#8220;even”{?/p>
\B匚w单词的开头。例如:
ve\B 匚w单词“very”{,但不匚w“love”{?/p>
\d匚w一个数字字W,{h于[0-9]。例如:
abc\dxyz 匚w“abc2xyz”?#8220;abc4xyz”{,但不匚w“abcaxyz”?#8220;abc-xyz”{?/p>
\D匚w一个非数字字符Q等价于[^0-9]。例如:
abc\Dxyz 匚w“abcaxyz”?#8220;abc-xyz”{,但不匚w“abc2xyz”?#8220;abc4xyz”{?/p>
\NUM匚wNUM个(其中NUMZ个正整数Q,引用回到C的匹配。例如:
(.)\1 匚w两个q箋相同的字W?
\oNUM匚wnQ其中nZ个小于2Q6的八q制换码|。例如:
\o011 匚w制表W?/p>
\xNUM匚wNUMQ其中NUMZ个小于2Q6的十六进制换码|。例如:
\x41 匚w字符“A”
五、实例分?/p>
1Q在字符串中_查找链接地址
((http|https|ftp):(\/\/|\\\\)((\w)+[.]){1,}(net|com|cn|org|cc|tv|[0-9]{1,3})(((\/[\~]*|\\[\~]*)
(\w)+)|[.](\w)+)*(((([?](\w)+){1}[=]*))*((\w)+){1}([\&](\w)+[\=](\w)+)*)*)
我们知道Q链接地址一般以http或者https或者ftp{Ş式出现。初步ȝ一下就是,链接地址必须W合如下条gQ?/p>
条gQ?br> 以http://或者https://或者ftp://{开_当然q有其它形式Q这里只列出主要的)
条gQ?br> http://后面必须跟一个单词字W,紧接着单词字符后面的是"."Q这Ll合必须出现一ơ或多次Q。紧跟着“.”后面的是域名后缀Q如net或者com或者cn{,如果是以IP地址的Ş式出现就可以是数字)
条gQ?br> 出现完整的链接地址后,q可以出C一U或者更多的目录(q要注意个h主页的地址有可能出?~"W号Q?/p>
条gQ?br> 链接地址末尾可以带参数。如典型的页?PageNo=2&action=display{?/p>
现在我们用下面的代码来逐个匚w上面的条件—?/p>
1?(http|https|ftp):(\/\/|\\\\) 满条gQ?br>表示http:// http:\\ https:// https:\\ ftp:// ftp:\\都匹配(在这里考虑了某些用户可能把"http://"输成“\\”的易发性错误)
注意Q?|"表示“或?#8221;Q?\"是{义字W?#8220;\/\/”表示"http://"Q?#8220;\\\\”表示"\\"
2?(\w)+[.]){1,}(net|com|cn|org|cc|tv|[0-9]{1,3}) 满条gQ?br>“((\w)+[.]){1,}”表示一个单词字W加一个点号可以出?ơ或者多ơ(q里考虑了某些用户喜Ƣ省略www而将http://www.w3c.com写成http://w3c.comQ?br>“(net|com|cn|org|cc|tv|[0-9]{1,3})”表示必须要以net或者com或者cn或者org或者cc或者tv或者三位以下的数字l束
[0-9]{1,3}表示三位以下的数字,因ؓip地址的Q何段不能过255
3?((\/[\~]*|\\[\~]*)(\w)+)|[.](\w)+)* 满条gQ?br>“(\/[\~]*|\\[\~]*)”表示可以出现"/~"或者是"\~"Q(其中“[\~]*”表示 ~ 可以出现也可以不出现Q,因ؓ不是每个链接地址都有下一U目?br>“(\w)+)|[.](\w)+)”表示必须出现一个单词字W(即目录或者是一个带有扩展名的文Ӟ
注意Q最后还有一?#8220;*”表示上面括号内的可以出现也可以不出现Q否则就只能匚w有下一U目录的链接地址了?/p>
4?((([?](\w)+){1}[=]*))*((\w)+){1}([\&](\w)+[\=](\w)+)*)*)满条gQ?br>“((([?](\w)+){1}[=]*))*((\w)+){1}”表示形如"?PageNo=2"的字W串可以出现也可以不出现Q如果出现则只能出现一ơ(因ؓ不可能有两个“Q?#8221;号出玎ͼ?/p>
“([\&](\w)+[\=](\w)+)*)”表示形如“&action=display”的字W串可以出现也可以不出现Q因为ƈ不是每个|页都带有两个以上的参数?/p>
整个“((([?](\w)+){1}[=]*))*((\w)+){1}([\&](\w)+[\=](\w)+)*)*”表示形如“?PageNo=2&action=display”的字W串可以出现也可以不出现Q即链接地址可以有参C可以没有参数Q?/p>
把上面的l合hQ我们就可以匚w一个比较全面的链接地址了。比用简单的“(http:\/\/\S+)”来匹配一个链接地址要好Q读者可以自行行试比较。当Ӟq段代码q有很多不之处Q希望大家能够l改q?/p>
2Q替代典型的UBB标签:[/b]
我们的目的就是要把[b]成对的替换成<b></b>下面来看我们实现它的模板
(\[b\])(.+)(\[\/b\])
q里用了"(.+)"来配匹到之间的整个字W串Q在替代的时候我们要写成q样
str=checkexp(re,str,"<b>$2</b>")
Q注意:checkexp是我自定义的函数Q将在后面给出。这个函数将把[/b]按照我们提供的模板进行替代。)
也许你会问这里出C?$2"是什么东?呉|意了q个$2可是很重要的Q它代表?(.+)"所配匹的整个字W串?br>Z么是$2而不?1?3呢?因ؓ$1代表(\[b\])所匚w?[b]"字符Ԍ$3代表(\[\/b\])所匚w?"字符Ԍ昄q里我们需要的?2而不?1$3?/p>
六)QQ正则表达模板实?br>下面是我写的一个UQ函数Q这个函数基本上能你的论坛成ؓ一个优U的UQ代码论坛了。当Ӟ通过改进后,你可以得C个更强大的UQ论坛?/p>
Function ReThestr(face,str)
dim re,str
re="\>"
str=checkexp(re,str,">")
re="\<"
str=checkexp(re,str,"<")
re="\n\r\n/"
str=checkexp(re,str,"<P>")
re=chr(32)
str=checkexp(re,str," ")
re="\r"
str=checkexp(re,str," ")
re="\[img\]((http:(\/\/|\\\\)){1}((\w)+[.]){1,3}(net|com|cn|org|cc|tv)(((\/[\~]*|\\[\~]*)
(\w)+)|[.](\w)+)*(\w)+[.]{1}(gif|jpg|png))\[\/img\]" ’查找囄地址
str=checkexp(re,str," <img src=’$1’> ")
re="\[w\](http:(\/\/|\\\\)((\w)+[.]){1,}(net|com|cn|org|cc|tv)(((\/[\~]*|\\[\~]*)(\w)+)|[.](\w)+)*
(((([?](\w)+){1}[=]*))*((\w)+){1}([\&](\w)+[\=](\w)+)*)*)\[\/w\]" ’查找帧地址
str=checkexp(re,str,"<iframe width=’300’ height=’300’ src=’$1’></iframe>")
re="([^(’>)])(<br>)*((http|https|ftp):(\/\/|\\\\)((\w)+[.]){1,}(net|com|cn|org|cc|tv|([0-9]{1,3}))(((\/[\~]*|\\[\~]*)(\w)+)|[.](\w)+)*(((([?](\w)+){1}[=]*))*((\w)+){1}([\&](\w)+[\=](\w)+)*)*)" ’查找链接地址
str=checkexp(re,str,"$1$2 <a href=’$3’ target=_blank>$3</a> ")
re="([^(http://|http:\\)])((www|cn)[.](\w)+[.]{1,}(net|com|cn|org|cc)(((\/[\~]*|\\[\~]*)(\w)+)|[.](\w)+)*
(((([?](\w)+){1}[=]*))*((\w)+){1}([\&](\w)+[\=](\w)+)*)*)" ’查找不以http://开头的地址
str=checkexp(re,str,"$1 <a href=’http://$2’ target=_blank>$2</a> ")
re="([^(=)])((\w)+[@]{1}((\w)+[.]){1,3}(\w)+)" ’查找邮g地址
str=checkexp(re,str," <a href=’mailto:$2’>$2</a> ")
re="\[0-F]{6})\]((.)+)\[\/color\]" ’替换字体色彩
str=checkexp(re,str,"<font color=’$1’>$4</font>")
re="\[size=([0-9]{1})\]((.)+)\[\/size\]" ’替换字体大小
str=checkexp(re,str,"<font size=’$1’>$2</font>")
re="\((.)+)\[\/font\]" ’替换字体
str=checkexp(re,str,"<font face=’$1’>$3</font>")
re="(\[b\])(.+)(\[\/b\])" ’加粗字体
str=checkexp(re,str,"<b>$2</b>")
re="(\[u\])(.+)(\[\/u\])" ’下画U?br> str=checkexp(re,str,"<u>$2</u>")
re="(\[li\])(.+)(\[\/li\])" ’列表
str=checkexp(re,str,"<li>$2</li>")
re="(\[QUOTE\])(.+)(\[\/QUOTE\])" ’引用
str=checkexp(re,str,"<BLOCKQUOTE>引用:<HR SIZE=1>$2<HR SIZE=1></BLOCKQUOTE>")
re="\[email=((\w)+[@]{1}((\w)+[.]){1,3}(\w)+)\](.+)(\[\/email\])" ’邮g
str=checkexp(re,str,"<a href=mailto:$1>$6</a>")
re="(\[center\])(.+)(\[\/center\])" ’居中
str=checkexp(re,str,"<center>$2</center>")
re="fuck"
str=checkexp(re,str,"***")
re="?
str=checkexp(re,str,"***")
re="sex"
str=checkexp(re,str,"***")
re="TMD"
str=checkexp(re,str,"***")
re="shit"
str=checkexp(re,str,"***")
ReThestr=str
end function
QQ代码如下:
[i] [/i] [u] [/u]
[url] [/url] [email=] [/email] [img] [/img]
引用:
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
[li] [/li] [font=impact] [color=Yellow]
试代码如下Q?br> [img] [/img]http://cn.yahoo.com
aol.com 192.168.0.1
www.yahoo.com how are you[/b]
page2000.xiloo.com/~page2000?PageNo=2&action=del
lucaihui@cmmail.com 大家好http:\\page2000.shit
<font color=red>http://test.com</font>http://test
全部W合预想l果
七)QSQ正则表辑ּ对像函数如下Q?br>Function CheckExp(patrn,strng,tagstr)
Dim regEx,Matches
Set regEx=New RegExp’建立一个新对像
regEx.Pattern=patrn’讄模板
regEx.IgnoreCase=true’搜烦是否区分大小写的 true表是不区?flase表示区分
regEx.Global=True’搜烦是否应用于整个字W串
Matches=regEx.replace(strng,tagstr)’匚wq替代字W串
CheckExp=Matchesq回函数l果
end function
把上面的两个函数存ؓ一个页面(如ubbcode.aspQ,q样q成一个完整的QQ函C?br>在你的论坛上加上q个函数Q就成了支持QQ代码的论坛了。只要在用时调用q个函数p了。调用Ş式如
text=ReThestr(text)
很久以前写的文章了不知现在还实不实用
嘻~~有错误的?br>问我我也不清楚了q么久不看都忘了
:)
倒这文章看不了了止W脸转换了还q样
看来ubb和ubb冲突?/p>
哈~~~~~
IE | Mozilla | 说明 |
document.body.clientHeight(clientWidth)ҎHTML?/strong>DTD而定方能得到准确倹{?/td>
window.innerHeight(innerWidth)ҎHTML?/strong>DTD而定方能得到准确倹{?/td>
| |
|
opacity(aplha=20) | MozOpacity="0.2" | |
event.clientY(clientX) | event.pageY(pageX) | |
event.keyCode | event.which | |
event.srcElement | event.target | |
window.external.AddFavorite('never-online.net', "never-online'website"); | window.sidebar.addPanel('never-online.net', "never-online'website", ""); | 此ؓd到收藏夹代码Q要兼容更多?/strong>览器,Lq里?/strong>代码 |
(DHTML事g-滚轮事g)onmousewheel | DOMMouseScroll | 可参看我?/strong>blogq篇文章 |
window.showModalDialog | window.open(url, "name", "modal=yes") | |
createPopup() | xul | |
htc控g | xbll定 | |
filter滤镜 | 只支持alphaQ透明度,部分可通过clip来模拟) | |
obj.setCapture() | window.captureEvents(Event.eventType) | |
obj.attachEvent(type, listener) | obj.addEventListener(type, listener, useCapture) | d事g?/strong>ҎQ如果要兼容Q有几种ҎQ如用Mozilla?/strong>d器来模拟IE?/strong>ҎQ或者用一个全局函数addEvent(type, listener, useCapture)来统一事g处理Q或者写一个Event Manager更好一些,也可以在q里l一避免内存泄露 |
obj.detachEvent(type, listener) | obj.removeEventListener(type, listener, useCapture) | 一般情况下Q用了attachEvent(addEventListener)ҎQ最好在beforeunload事g里用detachҎ释放掉,q是个好习惯Q偷?strong style="COLOR: black; BACKGROUND-COLOR: #99ff99">?/strong>话就不说?DQ?/td> |
支持Webdings字体 | 不支持Webdings字体 | |
insertAdjacentHTML, insertAdjacentElementҎ | 本n不支持,但可通过insertBefore或通过Range实现 | |
不支?/td> | d器__defineSetter(Getter)__ | |
不支?/td> | 支持对ElementQEVENT{对?strong style="COLOR: black; BACKGROUND-COLOR: #99ff99">?/strong>prototype模式支持 | |
不支?/td> | 对节ҎnodeType帔R属?/td> | |
new ActiveXObject("MSXML2.XMLHTTP")或更高版?strong style="COLOR: black; BACKGROUND-COLOR: #99ff99">?/strong>ProgId | XMLHttpRequest对象 | |
讄cMstyle.top=20q样?/strong>高度Ӟ可不使用单位 | 讄cMstyle.top=20+'px'q样?/strong>高度Ӟ必须使用单位Q否则无?/td>
|
|
CSS?/strong>cdQ不区分大小写(大小写不敏感Q?/td>
CSS?/strong>cdQ区分大写Q大写敏感Q如Q?myCss?mycsscd是不相?strong style="COLOR: black; BACKGROUND-COLOR: #99ff99">?/strong> |
|
|
冒事gevent.cancelBubble=true | event.stopPropagation()Q需要传递event事gQ?/td> | |
CSS padding宽度q不在offset偏移坐标之内 | CSS padding宽度默认是在offset偏移坐标之内Q可?moz-box-sizing:border-box来设|即可基本与IE相同 | 可参见我q篇文章?/strong>代码 |
js动态加载xslt文gxml转化成HTMLQIE可用xmldoc.transformNode(xslDocument)Ҏ | Mozilla?/strong>相对ȝ一些,要经q几道工序XSLTProcessor对象,transformToFragment或其它方?/td>
可参见我q篇文章?/strong>CZ教程和代?/font> |
|
持客L存储数据-userData | 不支?/td> |
function ClassA()
{
this.a=[9,8,7];
}
ClassB.extend(ClassA);//ClassBl承ClassA
function ClassB()
{
this.Super();//昄调用父类的构造函?br> this.b=function(){alert();};
}
var objB1=new ClassB();
var objB2=new ClassB();
objB1.a.push(1,2,3);
alert(objB1.a);
alert(objB2.a);
</script>
// caller demo {function callerDemo() { if (callerDemo.caller) { var a= callerDemo.caller.toString(); alert(a); } else { alert("this is a top function"); }}function handleCaller() { callerDemo();}
function calleeDemo() { alert(arguments.callee);}function calleeLengthDemo(arg1, arg2) { if (arguments.length==arguments.callee.length) { window.alert("验证形参和实参长度正!"); return; } else { alert("实参长度Q? +arguments.length); alert("形参长度Q?" +arguments.callee.length); }}
// simple call demofunction simpleCallDemo(arg) { window.alert(arg);}function handleSPC(arg) { simpleCallDemo.call(this, arg);}// simple apply demofunction simpleApplyDemo(arg) { window.alert(arg);}function handleSPA(arg) { simpleApplyDemo.apply(this, arguments);}
// inheritfunction base() { this.member = "never-online"; this.method = function() { window.alert(this.member); }}function extend() { base.call(this); window.alert(member); window.alert(this.method);}
// advanced apply demofunction adApplyDemo(x) { return ("this is never-online, BlueDestiny '" + x + "' demo");}function handleAdApplyDemo(obj, fname, before) { var oldFunc = obj[fname]; obj[fname] = function() { return oldFunc.apply(this, before(arguments)); };}function hellowordFunc(args) { args[0] = "hello " + args[0]; return args;}function applyBefore() { alert(adApplyDemo("world"));}function applyAfter() { handleAdApplyDemo(this, "adApplyDemo", hellowordFunc); alert(adApplyDemo("world")); // Hello world!}
function B(){
this.func1=function(){
delete this.func1;
this.func1();
this.func1=arguments.callee;
alert("B");
}
}
B.prototype=new A;
var o=new B;
o.func1();
</script>
javascript已经用了有三q多了,但是对一些细节的东西q是一知半解,比如对象和数l,一直都在用一些最基本的操作。这是我学习的一个坏习惯--懒,很多东西都是了解而已Q看到稍微复杂点的逻辑没有耐心。就像学asp时不知道asp跟脚本的关系Q学html不知道什么是DOM...l果是学得慢且不扎实Q碰到稍复杂的问题就歇菜Q扯q了Q?br>今天l箋优化脚本Q尝试着合ƈ一些数l时到问题Q才去仔细看了手册Q做了一些测试?/p>
javascript1.2之后允许使用[]创徏数组Q?br>
var firstArray = [];
var secondArray = ["red", "green", "blue"];
var thirdArray = [,,,,];
secondArray[4] = 28;
var arrArray = [[]];
删除一个数l元素:delete
var myColors = ["red", "green", "blue"];
delete myColors[1];
alert("The value of myColors[1] is: " + myColors[1]);
替换或绝对删除数l元素用slice():
var myArray = [1, 2, 3, 4, 5];
myArray.slice(2); // returns [3, 4, 5]
myArray.slice(1, 3); // returns [2, 3]
myArray.slice(-3); // returns [3, 4, 5]
myArray.slice(-3, -1); // returns [3, 4]
myArray.slice(-4, 3); // returns [2, 3]
myArray.slice(3, 1); // returns []var myArray = [1, 2, 3, 4, 5];
myArray.splice(3,2,''a'',''b'');
// returns 4,5 [1,2,3,''a'',''b'']
myArray.splice(1,1,"in","the","middle");
// returns 2 [1,"in","the","middle",3,''a'',''b'']
看了文档才知道,数组是传递引用的Q?br>
var x = [10, 9, 8];
var y = x;
x[0] = 2;
alert("The value of y's first element is: " + y[0]);
// Declare a reference type (array)
var refType = ["first ", " second", " third"];// Declare a primitive type (number)
var primType = 10;
// Declare a function taking two arguments, which it will modify
function modifyValues(ref, prim)
{
ref[0] = "changed"; // modify the first argument, an array
prim = prim - 8; // modify the second, a number
}// Invoke the function
modifyValues(refType, primType);
// Print the value of the reference type
document.writeln("The value of refType is: ", refType+"<
>");
// Print the value of the primitive type
document.writeln("The value of primType is: ", primType);
试时发C个问题:
var arr=[];
arr['a']=1;
arr['b']=2;
alert(arr.length);
var arr=[];
arr=[1,2,3];
arr.test='test';
alert(arr);
alert(arr[1]);
alert(arr['test']);
var arr={}; arr=[2,3,4]; alert(arr[0]);var arr={};和var arr=[]都可以写成var arr=function(){};
从上面的代码可以看出Q下标数l跟联合数组分别独立Q下标只作用于下标数l,不能讉K联合数组Q相应的Q联合数l不对length属性生媄响。联合数l的标签是属性,但是下标数组的下标ƈ不是属性,arr[0]!=arr.0Q访问arr.0会出错?/p>
在某些时候,用arr['a']代替arr.a作ؓҎ调用会更有效Q因为arr['a']中的'a'可以用变量传入,比如方法赋l变量:
var d=document,l=links;
alert(d.l);//脚本错误
alert(d[l]);//昄object
既然数组是由lenght属性的对象Q那么是不是所有具有length属性的对象都是数组呢?比如String。测试之后发玎ͼfirefox是可以把String当作数组处理的,但是ie不行Q?br>
var myString = "Hello world";
alert(myString.length);
alert(myString[0]);
数组的对象应该比较独特,用户对象不能完全模拟Q?br>
function myarray(size){
this.length=size;
var x=0;
}
var arr=new myarray(5);
arr[9]=1;
alert(arr);
alert(arr[9]);
alert(arr.length);
本以为Array的length属性就是普通的对象属性,l果l过上面的例子发玎ͼarr的length不再是数llengthQarr的结构也不是普通数l结构?/p>
定义一个函?cȝҎ有好几种Q?br>
function fName(arguments){
//function body
};var fName = function(arguments){
//function body
}var fName = new Function("arguments","/*function body*/");
var arr=new Function("var total=0; for (var i=0; i用这个方法可以解析ajaxq回的JSONQ这样就不用低效的eval了(没有试是否比eval快)Q?br>假设{b:{c:2}}回的json字符Ԍ
var arr=new Function("this.a={b:{c:2}};");
var aa =new arr();
alert(aa.a.b.c);
for(var p in obj){
if(typeof(obj[p])=="function"){
obj[p](); //对象的function
}else{
alert(obj[p]); //对象的property
}
}
如何定某个对象是否存在某属性prop? : if(obj.prop)
如何定某个对象是否存在某函数func? : if(obj.func && typeof(obj.func)=="function"){}
Pseudo-Classes 伪类 |
CSS Version 版本 |
Compatibility 兼容?/font> |
Description ?/font> |
---|---|---|---|
:link | CSS1 | IE4+ , NS4+ | 讄a对象在未被访问前的样式表属?/font> |
:hover | CSS1/CSS2 | IE4+ , NS4+ | 讄对象在其鼠标悬停时的样式表属?/font> |
:active | CSS1/CSS2 | IE4+ | 讄对象在被用户Ȁz(在鼠标点M释放之间发生的事Ӟ时的样式表属?/font> |
:visited | CSS1 | IE4+ , NS4+ | 讄a对象在其链接地址已被讉Kq时的样式表属?/font> |
:focus | CSS2 | NONE | 讄对象在成入焦点(该对象的onfocus事g发生Q时的样式表属?/font> |
:first-child | CSS2 | NONE | 讄对象QSelector1Q的W一个子对象QSelector2Q的样式表属?/font> |
:first | CSS2 | IE4+ | 讄面容器W一用的样式表属性。仅用于@page规则 |
:left | CSS2 | IE4+ | 讄面容器位于装订U左边的所有页面用的样式表属性。仅用于@page规则 |
:right | CSS2 | IE4+ | 讄面容器位于装订U右边的所有页面用的样式表属性。仅用于@page规则 |
:lang | CSS2 | NONE | 讄对象使用Ҏ语言的内Ҏ式表属?/font> |
解决Ҏ之一是给透明PNG囄加一个o镜:
<div style="width:100%;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='透明PNG囄路径',sizingMethod='image')></div>
或是用CSS的方式控Ӟ把style写在CSS文g中,׃用每贴一张图都要写这么长的代码了?/p>
PSQ因为IE5.0以下不支持AlphaImageLoader滤镜Q所以IE5.0以下׃能显C透明PNG效果了,不过现在q用IE5.0以下的恐怕是没h了吧?/p>
关于AlphaImageLoader滤镜
语法Q?br>filter: progid: DXImageTransform.Microsoft.AlphaImageLoader( enabled=bEnabled, sizingMethod=sSize, src=sURL)
属性:
enabled :?可选项。布?Boolean)。设|或索o镜是否激zRtrue | false
true :?默认倹{o镜激zR?br> false :?滤镜被禁止?/p>
sizingMethod :?可选项。字W串(String)。设|或索o镜作用的对象的图片在对象容器边界内的昄方式?crop :?剪切囄以适应对象寸?br> image :?默认倹{增大或减小对象的尺寸边界以适应囄的尺寸?br> scale :?~放囄以适应对象的尺寸边界?
src :?必选项。字W串(String)。用绝Ҏ相对 url 地址指定背景囑փ。假如忽略此参数Qo镜将不会作用?/p>
说明Q?br>在对象容器边界内Q在对象的背景和内容之间昄一张图片,q提供对此图片的剪切和改变尺寸的操作。如果蝲入的是PNG(Portable Network Graphics)格式Q则0%-100%的透明度也被提供?br>PNG(Portable Network Graphics)格式的图片的透明度不妨碍你选择文本。也是_你可以选择昄在PNG(Portable Network Graphics)格式的图片完全透明区域后面的内宏V?/p>
2. <body onselectstart="return false"> 取消选取、防止复?/p>
3. onpaste="return false" 不准_脓
4. oncopy="return false;" oncut="return false;" 防止复制
5. <link rel="Shortcut Icon" href="favicon.ico"> IE地址栏前换成自己的图?/p>
6. <link rel="Bookmark" href="favicon.ico"> 可以在收藏夹中显C出你的图标
7. <input style="ime-mode:-Disabled"> 关闭输入?/p>
8. 永远都会带着框架
<script language="javascript"><!--
if (window == top)top.location.href = "frames.htm"; //frames.htm为框架网?br>// --></script>
9. 防止被hframe
<SCRIPT LANGUAGE=javascript><!--
if (top.location != self.location)top.location=self.location;
// --></SCRIPT>
10. |页不能被另存?br><noscript><iframe src=*.html></iframe></noscript>
11. <input type=button value=查看|页源代? 12.删除时确?br><a href=`if(confirm("实要删除吗?"location="boos.asp?&areyou=删除&page=1"`>?/p>
?lt;/a> 13. 取得控g的绝对位|?br>//javascript //VBScript 14. 光标是停在文本框文字的最?br><script language="javascript"> 15. 判断上一늚来源 document.referrer 16. 最化、最大化、关闭窗?br><object id=hh1 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11"> <input type=button value=最化 onclick=hh1.Click()> 17.屏蔽功能键Shift,Alt,Ctrl 18. |页不会被缓?br><META HTTP-EQUIV="pragma" CONTENT="no-cache"> 19.怎样让表单没有凹凸感Q?br><input type=text style="border:1 solid #000000"> 1 solid #000000"></textarea> 20.<div><span>&<layer>的区别? 21.让弹出窗口L在最上面: 22.不要滚动? 23.怎样L囄链接点击后,囄周围的虚U? 24.电子邮g处理提交表单 25.在打开的子H口h父窗口的代码里如何写Q?br>window.opener.location.reload() 26.如何讑֮打开面的大?br><body "top.resizeTo(300,200);"> 27.在页面中如何加入不是满铺的背景图?拉动面时背景图不动 background-position:center;background-attachment: fixed} 28. 查一D字W串是否全由数字l成 29. 获得一个窗口的大小 30. 怎么判断是否是字W?br>if (/[^/x00-/xff]/g.test(s)) alert("含有汉字"; 31.TEXTAREA自适应文字行数的多?br><textarea rows=1 name=s1 cols=27 onpropertychange="this.style.posHeight=this.scrollHeight"> 32. 日期减去天数{于W二个日?br><script language=javascript> 33. 选择了哪一个Radio 34.脚本怸出错 35.ENTER键可以让光标Ud下一个输入框 36. 某个网站的链接速度Q?br>把如下代码加?lt;body>区域? var autourl=new Array() function butt(){ name=url"+i+" size=40> =?lt;input type=button value=GO onclick=window.open(this.form.url"+i+".value)><br>" src=http://"+autourl+"/"+Math.random()+" width=1 height=1 onerror=auto(http://";+autourl+"`)>"} 37. 各种样式的光?br>auto Q标准光?br>default Q标准箭?br>hand Q手形光?br>wait Q等待光?br>text QI形光?br>vertical-text Q水qI形光?br>no-drop Q不可拖动光?br>not-allowed Q无效光?br>help Q?帮助光标 38.面q入和退出的Ҏ 用哪U特效,取gؓ1-23: 39.在规定时间内跌{ 40.|页是否被检?br><meta name="ROBOTS" content="属性?> 41.变换|页的鼠标光?br><BODY style="CURSOR: url(
42.怎样实现在Q务栏昄图标的效果Q?(要用绝对地址) 2Q怎么改变滚动条的颜色Q只有ie5.5版本以上才能支持? 3,如何l图片抖动怎做? 4Q在DW如何l水q线加颜艌Ӏ? 6,Z么我在DW中插入的Flash动画~看不找Q? 7Q在Flash中,如果屏蔽鼠标右键?FS命o都是什么意? 8QFlash中什么是隐Ş按钮? 9Q如何给Flash动画做链接? 10QDW中的层的技巧? 11Q如何改变鼠标的形状Q? 12Q用CSS做邮,看看吧! 13Q经怸|的朋友可能会到q这样一些网站,一q入首页立刻会弹Z个窗口,怎么做呢Q? 14Q没有用表格写的Q让大家随便看看Q没什么? 15,IE6已支持自定义cursor! 16,用marquee做的滚动字幕.q也我刚看到论坛的朋友在问? 17Q在FLASH5中也存在一些字体,打散后变成一团的事是Z么?有解决的办法吗? 18Qflash的网里“加入收藏?#8221;功能怎么实现Q? 19Q在Flash中,文本的动态属性和输入属性的区别? 20,怎样在IE中调用Dreamweaverq行~辑. 21Q设|表DUѝ? 22,看看在网中调用HHCtrl控g效果? 22Q如何让一张图片有到q渐变? 23,双击鼠标左键来滚动背景,单击停止? 24,如何在同一面讄不同文字链接效果的样? 25, 用CSSl文字加入阴影效果和文字描边效果? 26,如何l做带颜色的下拉菜单? 27,关于DW4的表g的亮Ҏ和暗Ҏ问题? 28,自动昄主页最后更新日? 29,如何让滚动条出现在左边? 30,如何加入|址前面的小图标Q? 31,?00*600昄器中Q如何不让网|q_现滚动条Q? 32,关于<!DOTYPE>的说明解释? 33, 用图片来关闭H体. 34,止鼠标右键查看|页源代码? 35,通过按钮来查看网|代码? 36,怎么用文字联l实现按钮的SUBMIT功能Q? 37,如何做一个空链接Q? 38,利用<IFRAME>来给|页中插入网c? 39,请问QtbodyQ的用法Q? 40,Alt和Title都是提示性语a标签Q请注意它们之间的区别? 41, 用javascript代码来实现闪烁按钮? 42,CSSl图片定义颜色边框? 43,在DW中如何插入的FLASH透明? 44,在DW~辑文本中,如何输入一个空格呢Q? 45,Z我的DW中图形显CZ正常? 46,如何在本地机器上试flashq的loadingQ? 47,在网中做出一根竖的线有几U办? 48, 关于鼠标拖动,改变层大。──看看微Y的做?
onclick="window.location = `view-source:`+
<script language="javascript">
function getIE(E){
var t=e.offsetTop;
var l=e.offsetLeft;
while(e=e.offsetParent){
t+=e.offsetTop;
l+=e.offsetLeft;
}
alert("top="+t+"/nleft="+l);
}
</script>
<script language="VBScript"><!--
function getIE()
dim t,l,a,b
set a=document.all.img1
t=document.all.img1.offsetTop
l=document.all.img1.offsetLeft
while a.tagName<>"BODY"
set a = a.offsetParent
t=t+a.offsetTop
l=l+a.offsetLeft
wend
msgbox "top="&t&chr(13)&"left="&l,64,"得到控g的位|?
end function
--></script>
function cc()
{
var e = event.srcElement;
var r =e.createTextRange();
r.moveStart(`character`,e.value.length);
r.collapse(true);
r.select();
}
</script>
<input type=text name=text1 value="123" onfocus="cc()">
<param name="Command" value="Minimize"></object>
<object id=hh2 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">
<param name="Command" value="Maximize"></object>
<OBJECT id=hh3 classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<PARAM NAME="Command" value="Close"></OBJECT>
<input type=button value=最大化 onclick=hh2.Click()>
<input type=button value=关闭 onclick=hh3.Click()>
本例适用于IE
<script>
function look(){
if(event.shiftKey)
alert("止按Shift?"; //可以换成ALT CTRL
}
document.onkeydown=look;
</script>
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
或?lt;META HTTP-EQUIV="expires" CONTENT="0">
?br><input type=text style="border-left:none; border-right:none; border-top:none; border-bottom:
<div>(division)用来定义大段的页面元素,会生{?
<span>用来定义同一行内的元素,?lt;div>的唯一区别是不产生转行
<layer>是ns的标讎ͼie不支持,相当?lt;div>
<body onblur="this.focus();">
让竖条没?
<body style=`overflow:-Scroll;overflow-y:hidden`>
</body>
让横条没?
<body style=`overflow:-Scroll;overflow-x:hidden`>
</body>
两个都去掉?更简单了
<body scroll="no">
</body>
<a href="#" onFocus="this.blur()"><img src="logo.jpg" border=0></a>
<form name="form1" method="post" action="mailto:****@***.com" enctype="text/plain">
<input type=submit>
</form>
打开面的位|?lt;body "top.moveBy(300,200);">
<style>
body
{background-image:url(logo.gif); background-repeat:no-repeat;
</style>
<script language="javascript"><!--
function checkNum(str){return str.match(//D/)==null}
alert(checkNum("1232142141"
alert(checkNum("123214214a1"
// --></script>
document.body.clientWidth; document.body.clientHeight
else alert("全是字符";
</textarea>
function cc(dd,dadd)
{
//可以加上错误处理
var a = new Date(dd)
a = a.valueOf()
a = a - dadd * 24 * 60 * 60 * 1000
a = new Date(A)
alert(a.getFullYear() + "q? + (a.getMonth() + 1) + "? + a.getDate() + "?
}
cc("12/23/2002",2)
</script>
<HTML><script language="vbscript">
function checkme()
for each ob in radio1
if ob.checked then window.alert ob.value
next
end function
</script><BODY>
<INPUT name="radio1" type="radio" value="style" checked>style
<INPUT name="radio1" type="radio" value="barcode">Barcode
<INPUT type="button" value="check" onclick="checkme()">
</BODY></HTML>
<SCRIPT LANGUAGE="javascript">
<!-- Hide
function killErrors() {
return true;
}
window.onerror = killErrors;
// -->
</SCRIPT>
<input onkeydown="if(event.keyCode==13)event.keyCode=9">
<script language=javascript>
tim=1
setInterval("tim++",100)
b=1
autourl[1]="
document.write("<form name=autof>"
for(var i=1;i<autourl.length;i++)
document.write("<input type=text name=txt"+i+" size=10 value=试?#8230;…> =?lt;input type=text
document.write("<input type=submit value=h></form>"
}
butt()
function auto(url){
document.forms[0]["url"+b].value=url
if(tim>200)
{document.forms[0]["txt"+b].value="链接时"}
else
{document.forms[0]["txt"+b].value="旉"+tim/10+"U?}
b++
}
function run(){for(var i=1;i<autourl.length;i++)document.write("<img
run()</script>
all-scroll Q三角方向标
move Q移动标
crosshair Q十字标
e-resize
n-resize
nw-resize
w-resize
s-resize
se-resize
sw-resize
q入面<meta http-equiv="Page-Enter" content="revealTrans(duration=x, transition=y)">
推出面<meta http-equiv="Page-Exit" content="revealTrans(duration=x, transition=y)">
q个是页面被载入和调出时的一些特效。Duration表示Ҏ的持l时_以秒为单位。Transition表示?/p>
0 矩Ş~小
1 矩Ş扩大
2 圆Ş~小
3 圆Ş扩大
4 下到上刷?
5 上到下刷?br> 6 左到叛_?
7 叛_左刷?
8 竖百叶窗
9 横百叶窗
10 错位横百叶窗
11 错位竖百叶窗
12 Ҏ?
13 左右C间刷?
14 中间到左叛_?br> 15 中间C?br> 16 上下C?
17 右下到左?br> 18 右上到左?
19 左上到右?
20 左下到右?br> 21 横条
22 竖条
23 以上22U随机选择一U?/p>
<META http-equiv=V="REFRESH" content="5;URL=http://www.51js.com">
其中属性值有以下一?
属性gؓ"all": 文g被索,且页上链接可被查询;
属性gؓ"none": 文g不被索,而且不查询页上的链接Q?br> 属性gؓ"index": 文g被索;
属性gؓ"follow": 查询上的链接;
属性gؓ"noindex": 文g不检索,但可被查询链接;
属性gؓ"nofollow": 文g不被索,但可查询上的链接?
有些站点Q访问时会在地址栏地址前显出小图标Q添加到收藏夹后也在收藏栏中昄图标Q?br>q样很好的与其它站点有了区别?
要达到这个效果,先需做出q个图标文gQ图像ؓ16*16像素Q不要超q?6艌Ӏ文件格式ؓicoQ然后上传至你的|站?br>然后Q在需要的面中,加上以下html语句到文件的<head>?lt;/head>之间Q假设以上ico文g的地址http://happyisland.126.com/icon.icoQ?br><link REL="SHORTCUT ICON"href="http:///happyisland.126.com/icon.ico";>
如果讉K者的览器是IE5.0Q就不需加Q何代码,只要图标文件上传到|站的根目录下即可?br>1,META标签里的代码是什么意思?
<META>是放?lt;HEAD>?lt;/HEAD>之间的标?以下是我ȝ它在|页中最常见的几U?
<meta name="Keywords" content="囄, 新闻, 音乐, 软g">
该网늚关键字,作用于搜索引擎的dQ事实上它在现在的网站中q没什么用?
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
讑֮q是 HTML 文g及其~码语系Q简体中文网用charset=gb2312Q繁体中文用charset=big5Q或者不讄码也可,U英文网徏议?iso-8859-1?
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
q只表示该网는什么编辑器写的?
<meta http-equiv="refresh" content="10; url=http://www.hkiwc.com">
q行较ؓ实用Q能于预定秒数内自动转到指定|址。原代码?10 表示 10U?
q是使用CSS语言Q在ơ说明一下,它和我的览器版本有一定的关系?
scrollbar-arrow-colorQ上下按钮上三角头的颜艌Ӏ?
scrollbar-base-colorQ滚动条的基本颜艌Ӏ?
scrollbar-dark-shadow-colorQ立体滚动条强阴q颜色
scrollbar-face-colorQ立体滚动条凸出部分的颜?
scrollbar-highlight-colorQ滚动条I白部分的颜?
scrollbar-shadow-color立体滚动条阴q颜色?br>scrollbar-track-color:#99CC33;
scrollbar-3dlight-color:#A8CBF1;
代码如下Q?
<style>
<!--
BODY {
scrollbar-face-color:#99CC33;//(立体滚动条凸出部分的颜色)
scrollbar-highlight-color:#A8CBF1;//(滚动条空白部分的颜色)
scrollbar-shadow-color:#A8CBF1;//(立体滚动条阴q颜色)
scrollbar-arrow-color:#FF9966;//(上下按钮上三角箭头的颜色)
scrollbar-base-color:#A8CBF1; //(滚动条的基本颜色)
scrollbar-darkshadow-color:#A8CBF1; //(立体滚动条强阴媄的颜?
scrollbar-track-color:#99CC33;
scrollbar-3dlight-color:#A8CBF1;
}
-->
</style>
在这我补充几点:
1.让浏览器H口永远都不出现滚动条?
<body style="overflow-x:hidden;overflow-y:hidden">?lt;body style="overflow:hidden"> ?lt;body scroll=no>
2Q没有水qx动条
<body style="overflow-x:hidden">
3Q没有垂直滚动条
<body style="overflow-y:hidden">
<SCRIPT language=javascript1.2>
<!--
var rector=2
var stopit=0
var a=1
var count=0
function init(which){
stopit=0
shake=which
shake.style.left=0
shake.style.top=0
}
function rattleimage(){
if ((!document.all&&!document.getElementById)||stopit==1||count==100)
return
count++
if (a==1){
shake.style.top=parseInt(shake.style.top)+rector
}
else if (a==2){
shake.style.left=parseInt(shake.style.left)+rector
}
else if (a==3){
shake.style.top=parseInt(shake.style.top)-rector
}
else{
shake.style.left=parseInt(shake.style.left)-rector
}
if (a<4)
a++
else
a=1
setTimeout("rattleimage()",50)
}
function stoprattle(which){
stopit=1
count=0
which.style.left=0
which.style.top=0
}
//-->
</SCRIPT>
<style>.shakeimage {POSITION: relative}
</style>
<img src="囄的\? onmouseout=stoprattle(this) onmouseover=init(this);rattleimage() class=shakeimage>
在DW中没有此设|,你只能在HTML中加入代码:<hr color=red noshade>按F12的预览在能看到。由于在NC中不支持<hr>的COLOR属性,所以在DW中没有此设|?
5Q如何在|页中实现flash的全屏播放?
只要在调用swf文g的HTML中将WIDTH和HEIGHT的参数设?00Q即可,当然也可以在Flash导出HTML文g的设|中q行讄Q方法是Q打开File菜单Q选Publish Settings弹出导出讄对话框;在HTML标签下的Dimensions选项,下拉后选中PercentQ百分比Q?q在WIDTH 和HEIGHT框中?00.p了?
如果你没有正地安装Dreamweaver和FlashQ那么在你预览的时候,Dreamweaver会提CZ~少播放的插Ӟ请你按装InstallAXFlash.exe q从新启动计机。现在IE6已经捆绑q个E序?
fscommand ("fullscreen", "true/false";Q全屏设|,TRUE开QFALSE养I
fscommand ("showmenu", "true/false";Q右键菜单设|,TRUE昄QFALSE不显C)
fscommand ("allowscale", "true/false";Q羃放设|,TRUE自由~放QFALSE调整画面不媄响媄片本w的寸Q?
fscommand ("trapallkeys", "true/false";Q快捷键讄QTRUE快捷键开QFALSE快捷键关Q?
fscommand ("exec";QEXEE序调用Q?
fscommand ("quit";Q退出关闭窗口)
利用button中的hit帧来制作只有感应区域而完全透明的按钮?
Dreamweaver是不能给Flash制作链接的,只能在Flash中用geturl()加链接,然后再插入Dreamweaver中?
层是可以嵌套的,我个人给大家一个技巧,在层面板中按住CTRL再拖攑ֱC惛_成ؓ其子层的地方p了,我认是最单直观的Ҏ了?
在Dreamweaver4中CSS样式面板Q?
按CTR+SHIFT+E--出现样式表对话框,点击NEWQ出现编辑对话框,在左Ҏ后一extensions-cursor 选择你要改的指针形式可以了Q然后把你要x变的地方q用样式表,如果整页都有?lt;body bgcolor="#003063" text="#ffffff" id=all>中加入就行了?
<span style="cursor:X`>样例</span>
q里选择Q文本)作ؓ对象Q还可以自己改ؓ其他的,如link{?
x可以{于=handQ手形)、crosshairQ十字)、textQ文本光标)、waitQ顾名思义啦)、defaultQ默认效果)、helpQ问P、e-sizeQ向右箭_、ne-resizeQ向右上的箭_、nw-resizeQ向左上的箭_、w-resizeQ向左的头Q、sw-resizeQ左下箭_、s-resizeQ向下箭_、se-resizeQ向右下头Q、autoQ系l自动给出效果)?
<input type=button value=我象不象邮票Q?style="height:80px;border:2px dashed #cccccc">
qjavascript代码卛_实现Q摘录蓝色论坛?
?、最基本的弹出窗口代码?
其实代码非常单:
<SCRIPT LANGUAGE="javascript">
<!--
window.open (`page.html`)
-->
</SCRIPT>
因ؓ着是一Djavascripts代码Q所以它们应该放?lt;SCRIPT LANGUAGE="javascript">标签?lt;/script>之间?lt;!-- ?-->是对一些版本低的浏览器起作用,在这些老浏览器中不会将标签中的代码作ؓ文本昄出来。要Lq个好习惯啊?
window.open (`page.html`) 用于控制弹出新的H口page.htmlQ如果page.html不与ȝ口在同一路径下,前面应写明\径,l对路径(http://)和相对\?../)均可。用单引号和双引号都可以Q只是不要用?
q一D代码可以加入HTML的Q意位|,<head>?lt;/head>之间可以Q?lt;body bgcolor="#003063" text="#ffffff" id=all>?lt;/body>也可以,前早执行Q尤其是面代码长,又想佉K面早点弹出就量往前放?
?、经q设|后的弹出窗口?
下面再说一说弹出窗口的讄。只要再往上面的代码中加一点东西就可以了?
我们来定制这个弹出的H口的外观,寸大小Q弹出的位置以适应该页面的具体情况?
<SCRIPT LANGUAGE="javascript">
<!--
window.open (`page.html`, `newwindow`, `height=100, width=400, top=0,left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no`)
//写成一?
-->
</SCRIPT>
参数解释Q?
<SCRIPT LANGUAGE="javascript"> js脚本开始;
window.open 弹出新窗口的命oQ?
`page.html` 弹出H口的文件名Q?
`newwindow` 弹出H口的名字(不是文g名)Q非必须Q可用空``代替Q?
height=100 H口高度Q?
width=400 H口宽度Q?
top=0 H口距离屏幕上方的象素|
left=0 H口距离屏幕左侧的象素|
toolbar=no 是否昄工具栏,yes为显C;
menubarQscrollbars 表示菜单栏和滚动栏?
resizable=no 是否允许改变H口大小Qyes为允许;
location=no 是否昄地址栏,yes为允许;
status=no 是否昄状态栏内的信息Q通常是文件已l打开Q,yes为允许;
</SCRIPT> js脚本l束
?、用函数控制弹出H口?
下面是一个完整的代码?
<html>
<head>
<script LANGUAGE="javascript">
<!--
function openwin() { window.open ("page.html", "newwindow", "height=100, width=400, toolbar=
no, menubar=no, scrollbars=no, resizable=no, location=no, status=no"
//写成一?
}
//-->
</script>
</head>
<body "openwin()">
…L的页面内?#8230;
</body>
</html>
q里定义了一个函数openwin(),函数内容是打开一个窗口。在调用它之前没有Q何用途?
怎么调用呢?
Ҏ一Q?lt;body "openwin()"> 览器读面时弹出窗口;
Ҏ二:<body onunload="openwin()"> 览器离开面时弹出窗口;
Ҏ三:用一个连接调用:
<a href="#" onclick="openwin()">打开一个窗?lt;/a>
注意Q用的“#”是虚q接?
Ҏ四:用一个按钮调用:
<input type="button" onclick="openwin()" value="打开H口">
<html>
<head>
<title>江南药扇面</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
<!--
.font1 { font-size: 12px; color: #999999; text-decoration: none}
a { font-size: 12px; color: #999999; text-decoration: none}
a:hover { font-size: 12px; color: #000000; text-decoration: none}
-->
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<div class="font1" style="writing-mode=tb-rl;height:200px" width=300>
<p>盛夏 涛
<p><a href="index.htm">一夜露痕黄_香 袁运?</a>
<p>瑶池昨夜新凉 王金?
<p>一늙莲随意开 吴冠?
<p>新雨q秋Ʋ满塘 齐辛?
<p>十里荷香 齐辛?
<p>ȯ清莲而不妖 卢世?
</div>
</body>
</html>
语法格式 cursor:url(图标) //cur或是ani文g.
cur是WINDOWS中的光标(cursor)文gQ光标文件与图标QICON)文g除了文g头有一个位|的g同外Q实际是一L?
ani是WINDOWS中的动画光标Q图标)文g?
<style type="text/css">
<!--
.unnamed1 { cursor:url(arrow2c.cur)}
-->
</style>
语法Q?
align=# | top | middle| bottom //寚w方式)
BEHAVIOR=AlterNATE | SCROLL | SLIDE //Ud的方?
BGCOLOR=color//底色区域颜色
DIRECTION=DOWN | LEFT | RIGHT | UP //Ud的方?
Loop=n //循环ơ数Q默认是循环不止Q?
Scrolldelay=milliseconds//延时
height=# width=# //区域面积
hspace=# vspace=# //I白区域
scrollamount=# //Ud的速度
<marquee align=top behavior=AlterNATE BGCOLOR=#000000 height=60 width=433 scrollamount=5></marquee>
q是大家很常见的问题Q可能是对字库支持的不好Q我个是做成透明的gif囄格式Q然后倒入?
在as中加getUrl("java script:window.external.addFavorite(
input text在运行时可被用户或程序改变其倹{?
ynamic text仅允许被E序修改?
怿很多在用WinME或Window2000的朋友,会遇见是个问题。很单,把我们笔记本E序打开Q保存ؓ一?*.reg 文g。双d信息添加到注册表即可?
REGEDIT4
[HKEY_CLASSES_ROOT\.htm\OpenWithList\Dreamweaver]
[HKEY_CLASSES_ROOT\.htm\OpenWithList\Dreamweaver\shell]
[HKEY_CLASSES_ROOT\.htm\OpenWithList\Dreamweaver\shell\edit]
[HKEY_CLASSES_ROOT\.htm\OpenWithList\Dreamweaver\shell\edit\command]
@="\"c:\\Program Files\\Macromedia\\Dreamweaver 4\\dreamweaver.exe\" \"%1\""
Ҏ一Q作一?X2的图。半黑半白,再利用表g成线?
Ҏ二:在css里面设,要IE5?才支持这U效果?
style="BORDER-LEFT: #000000 1PX DASHED; BORDER-RIGHT: #000000 1PX DASHED; BORDER-TOP: #000000 1PX DASHED; BORDER-BOTTOM: #000000 1PX DASHED"
代码如下Q?
<object id="HHC" type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11"></object><script>HHC.TextPopup("哈哈,大家?我是闪梦!","",50,5,128255,346751);</script>
<SCRIPT language=javascript1.2>
<!--
function high(which2){
theobject=which2
highlighting=setInterval("highlightit(theobject)",50)
}
function low(which2){
clearInterval(highlighting)
which2.filters.alpha.opacity=40
}
function highlightit(cur2){
if (cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=10
else if (window.highlighting)
clearInterval(highlighting)
}
</script>
<img onmouseout=low(this) onmouseover=high(this) style="FILTER: alpha(opacity=40)"src="logo.gif" >
<SCRIPT language=javascript>
var currentpos,timer;
function initialize()
{
timer=setInterval("scrollwindow()",16);
}
function sc(){
clearInterval(timer);
}
function scrollwindow()
{
currentpos=document.body.scrollTop;
window.scroll(0,++currentpos);
if (currentpos != document.body.scrollTop)
sc();
}
document.onmousedown=sc
document.ondblclick=initialize
</SCRIPT>
代码如下Q?
<HTML><HEAD><TITLE>如何在同一面讄不同文字链接效果的样?lt;/TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
<!--
a:hover { font-size: 9pt; color: #FF0000; text-decoration: underline}
a:link { font-size: 9pt; color: #006699; text-decoration: underline}
a:visited { font-size: 9pt; color: #006699; text-decoration: underline}
a:active { font-size: 9pt; color: #FF0000; text-decoration: none}
a.r1:hover { font-size: 9pt; color: #FF0000; text-decoration: underline overline}
a.r1:link { font-size: 9pt; color: #000000; text-decoration: underline overline}
a.r1:visited { font-size: 9pt; color: #99CC00; text-decoration: underline overline}
a.r1:active { font-size: 9pt; color: #000000; text-decoration: underline overline}
-->
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<a href="#">下划UK?</a>
<p></p>
<a href="#" class="r1">双下划线链接</a>
</BODY>
</HTML>
补充说明Q?
a:hover 表示鼠标划过时的样式.
a:link 表示链接的样?
a:active 表示当前zdq接的样?
a:visited 表示已经讉Kq的q接的样?
.glow{FONT-SIZE: 9pt; FILTER: Glow(Color=#000000, Strength=1)}
//文字描边效果
.shadow {FONT-SIZE: 9pt; FILTER: DropShadow(OffX=1, OffY=1, DropShadow(OffX=1, OffY=1, color:#111111); COLOR: #ffffff; FONT-FAMILY: "宋体"}
//加入阴媄效果
补充说明Q?
q两Uo镜要惛_现效果,必须加在如:<td class=glow或shadow ><div>xxxxxxxxx</div></td>?
Qƈ且要留有_的空间能够显C阴影或描边Q否则会出现半截的阴影或描边现象?
<select style="FONT-SIZE: 10px; COLOR: #ffffff; FONT-FAMILY: Verdana;BACKGROUND-COLOR: #ff6600;" size=1 >
<option selected>:: Dreamweaver4 ::</option>
<option>::Flash5::</option>
<option>::Firewoks4::</option>
</select>
在DW4的表格面板中q没有亮Ҏ和暗Ҏ的属性设|,因ؓNC不支?只有你在代码中添加了?
bordercolorlight="#999999" bordercolordark="#000000"
你也可以用Css定义一个class。例如:
<style>
.bordercolor { bordercolorlight: #999999; bordercolordark: #000000 }
</style>
然后在要加效果的表格里加?lt;table class="bordercolor">
<script>
document.write("最后更新日期:"+document.lastModified+""
</script>
我想居然在论坛中有h发表了这D代码,很有意思,它的照一些左撇子Q呵呵!
<html dir="rtl">
<body bgcolor="#000000" text="#FFFFFF">
<table height=18 width=212 align=center bgcolor=#FFFFFF dir="ltr" cellspacing="1" cellpadding="0">
<tr>
<td bgcolor="#FF0000" >是不是你的滚动条在左边啊</td>
</tr>
</table>
</body>
</html>
首先,您必M解所谓的图标QIconQ是一U特D的囑Ş文g格式Q它是以 .ico 作ؓ扩展名。你可用在网上找一个制作图标YӞ它具有特有的规格Q图标的大小?16 * 16Q以像素为单位)Q颜色不得超q?16 艌Ӏ?在该|页文g?HEAD 部分加入下面的内容:<LINK REL="SHORTCUT ICON" HREF=" http://skydesigner.51.net/图标文g?>,q放在该|页的根目录下?
设至<body leftmargin="0" topmargin="0">Q网中的表格宽度ؓ778?
在网中Q经怼看到?DOCTYPE HTML PUBLIC`-//W3C//DTD HTML 4.01//EN`>Q是声明HTML文g的版本信息?
<A href="java script:window.close()"><IMG height=20 width=20 alt="关闭H口" src="close.gif" border=0></A>
补充说明Q如何用了ACTIVEXQ?不再警告H口Q?
<html>
<head>
<object id=closes type="application/x-oleobject"
classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<param name="Command" value="Close"></object>
</head>
<body bgcolor="#003063" text="#ffffff" id=all> <a href="#" onclick="closes.Click();">关闭H口无提C?lt;/a>
</body>
</html>
<SCRIPT language=javascript>
function click()
{if (event.button==2) {alert(`你好,Ƣ迎光Q`) }}
document.onmousedown=click
</SCRIPT>
补充说明Q?
鼠标完全被封?可以屏蔽鼠标右键和网|字?
< body oncontextmenu="return false" ondragstart="return false" onselectstart="return false">
<input type="BUTTON" value="查看源代? onClick= `window.location = "view-source:" + window.location.href` name="BUTTON">
<a href="#" onclick="formname.submit()">OK</a>
q段文字要放在form里。formname是这里要写在form中的name,<form name=form111>那么应该是form111.submit()
?
l常我看到很多网中又有一个网,q以为是用了框架Q其实不Ӟ是用?lt;IFRAME>,它只适用于IEQNS可是不支?lt;IFRAME>的,但围着的字句只有在览器不支援 iframe 标记时才会显C,?lt;noframes>一P可以放些提醒字句之类的话?
你注意啊Q下面请和我学习它的用法?
分析代码Q?lt;iframe src="iframe.html" name="test" align="MIDDLE" width="300" height="100" marginwidth="1" marginheight="1" frameborder="1" scrolling="Yes"> </iframe>
src="iframe.html"
用来昄<IFRAME>中的|页来源Q必要加上相Ҏl对路径?
name="test"
q是q结标记?target 参数所需要的?
align="MIDDLE"
可选gؓ left, right, top, middle, bottomQ作用不??
width="300" height="100"
框窗的宽及长Q以 pixels 为单位?
marginwidth="1" marginheight="1"
该插入的文g与框Ҏ保留的空间?
frameborder="1"
使用 1 表示昄ҎQ?0 则不昄。(可以?yes ?noQ?
scrolling="Yes"
使用 Yes 表示容许卷动Q内定)Q?No 则不容许卷动?
tbody用法据说是加强对表格的控制能力的.例如Q?
<table><tbody>……..</tbody></table>
tbody代码如果不是你用手写的话,只有在你用IE5打开一个网늚时候, 把它另存?
一下,你的另存为的文g在表g׃生成tbody代码?即便你的表格Ҏ没?
tbody代码QIE5另存为的时候也会给你生??
在我们浏览网|Q当鼠标停留在图片对象或文字链接上时Q在鼠标的右下角有时会出C个提CZ息框。对目标q行一定的注释说明。在一些场合,它的作用是很重要的?
alt 用来l图片来提示的。Title用来l链接文字或普通文字提C的?
用法如下Q?
<p Title="l链接文字提C?>文字</p>
<a href="#" Title="l链接文字提C?>文字</a>
<img src="囄.gif" alt="l图片提C?>
补充知识Q?lt;TITLE><ALT>里面如何多行换行Q在源代码里Enter回R?
<a href="#" Title="个h?
姓名Q张?
|名Q我是闪?
性别Q男的,不是女的?
爱好Q网制作,软g开?>个h?lt;/a>
例如Q个人简?
<body>
<form method="POST" action="--WEBBOT-SELF--">
<input type="button" name=SUB value="闪烁" id=flashit style="BORDER: 1px solid ;BACKGROUND-COLOR: #FFFFFF">
</form>
<script>
if (document.all&&document.all.flashit)
{
var flashelement=document.all.flashit
if (flashelement.length==null)
flashelement[0]=document.all.flashit
function changecolor(which)
{
if (flashelement[which].style.color==`#800000`)
flashelement[which].style.color="#0063A4"
else
flashelement[which].style.color="#800000"
}
if (flashelement.length==null)
setInterval("changecolor(0)",1000)
else
for (i=0;i<flashelement.length;i++)
{
var tempvariable=`setInterval("changecolor(`+i+`)",`+`1000)`
eval(tempvariable)
}
}
</script>
</body>
img { border: 1px solid red}
Ҏ一Q选中swf,打开原代码窗口,?lt;/object>前输?<param name="wmode" value="transparent">
Ҏ二:在Flash中的Flie→Publist Settings→HTML→Window Mode选择transparent
输入I格的问题,在DWg已成了一个老生常谈的问题。通过输入法调整到全角模式就可以避免了。本以h工智能ABCZ.按Shift+Space切换到全角状态?
W一U:可能是因Z定义q正在用一个siteQ而你的HTML文g或者图片不在这个site包含的区域之内,因此dreamweaver使用file协议?
描述图象的绝对\径,可惜IE不支持src中用file协议Q所以图象就昄不出来了?
W二U:可能是放囄的文件夹或图片名Z文,也显CZ到网中厅R?
我想q可能是很多人在问的题了Q其实很单,在TestӞ选选View->Show Streaming可以看C?
W一U方法:用一个像素图的办法!
如果你用Dreamwever的Edit→Preferences…→Layout View中的Spacer Imagel你创徏了一个缺省名为:spacer.gif的一个像素图文g ?
代码中:
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#FF0000" height="200" ><img src="spacer.gif" width="1" height="1"></td>
</tr>
</table>
W二U方法:用表格填颜色的办法!?lt;td> </td>中的 删掉 .
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#FF0000" height="200" width="1"></td>
</tr>
</table>
W三U方法:用水qx?
<hr color="red" width="1" size="100%">
<script>
document.execCommand("2D-position",false,true);
</script>
<DIV contentEditable=true>
<DIV style="WIDTH: 300px; POSITION: absolute; HEIGHT: 100px; BACKGROUND-COLOR: red">Ud?lt;/DIV>
</DIV>
]]>
在引入命名空间之前,一个o开发h员头疼的问题是如何防止函数?cd和其他h的冲H,在一个公司内部项目组之间可以通过命名预定Q比如加前缀{)解决q个问题Q但是把视线攑ֈ整个软g开发领域,在当今协作开发相当盛行的时代Q这个问题却依然存在。在使用多个W三Ҏ架或cd的时候,你唯一能作的就是祈它们的命名不要冲突Q如果真正发生这U灾隄话,你唯一能作的就是放弃其中一个(注:可能是我孤陋寡闻Q呵呵)。命名空间的引入相当E度上解决了q个问题Q当Ӟ如果你用的命名I间和其他公怸q怸P而对方又是微软、SUN{大佬,那恭喜你Q呵呵@_@!
从事Web开发不可避免要接触JavaScriptQ目前最新版本的JavaScriptq是不支持命名空_所以命名冲H的问题凸显无疑Q想象一下你引用了两个js文gQ却发现׃命名问题D你不得不攑ּ其中一个,从而导致多写了许多代码Q无疑是十分令h沮的。在JavaScript新版本引入命名空间概念之前,发扬自立更生_和创造性是我们E序员的基本义务;-)
实现前提Q与Delphi、C#{语a不同QJavaScript中的cdƈ不是对象的定义,事实上JavaScript中ƈ不存在真正的c,q里的类实际上是用函数模拟实现的Q而JavaScript中的函数实际上是一个对象,因此在JavaScript中:一个类是一个对象。这和传l概忉|忉|Z同,在JavaScript中,创徏某个cȝ实例实际上就是将c(=对象Q记住)复制了一份。看到这里,有点设计模式概念的应该就可以看出来了Q在JavaScript中,cL制用了原型QprototypeQ模式?/p>
实现原理Q既然看清楚了类的本质,那么问题q单了Q如果将GEA目l所有JScd函数作ؓ属性放在名为GEA的对象里面,然后GEA对象以属性的方式攑֜名ؓGrandsoft对象里面不就可以辑ֈ我们的目的,比如Grandsoft.GEA.Person实际上是在Grandsoft对象的属性GEAQ也是一个对象)中的cPersonQ还是一个对象)?/p>
实现非常单,整个命名I间机制的实C过20行代码,分析如下Q?/p>
// 声明一个全局对象NamespaceQ用来注册命名空?br>Namespace = new Object();
// 全局对象仅仅存在register函数Q参Cؓ名称I间全\径,?Grandsoft.GEA"
Namespace.register = function(fullNS)
{
// 命名空间切成N部分, 比如Grandsoft、GEA{?br> var nsArray = fullNS.split('.');
var sEval = "";
var sNS = "";
for (var i = 0; i < nsArray.length; i++)
{
if (i != 0) sNS += ".";
sNS += nsArray[i];
// 依次创徏构造命名空间对象(假如不存在的话)的语?br> // 比如先创建GrandsoftQ然后创建Grandsoft.GEAQ依ơ下?br> sEval += "if (typeof(" + sNS + ") == 'undefined') " + sNS + " = new Object();"
}
if (sEval != "") eval(sEval);
}
上面是在JavaScript中模拟命名空间机制的完整实现Q用方式如下:
// 注册命名I间Grandsoft.GEA, Grandsoft.GCM
Namespace.register("Grandsoft.GEA");
Namespace.register("Grandsoft.GCM");
// 在Grandsoft.GEA命名I间里面声明cPerson
Grandsoft.GEA.Person = function(name, age)
{
this.name = name;
this.age = age;
}
// l类Persond一个公共方法show()
Grandsoft.GEA.Person.prototype.show = function()
{
alert(this.name + " is " + this.age + " years old!");
}
// 演示如何使用cPerson
var p = new Grandsoft.GEA.Person("yanglf", 25);
p.show();
哈哈Q简单吧Q这么简单的代码我就不多说了Q大家自q着玩吧Q其实我有点懒,呵呵@_@!!!