BlogJava-一江春水向东流-文章分类-Javascript,css,AJAX等浏览器前台效果

各种分割线Html代码

allic — Mon, 10 Jan 2011 09:50:00 GMT

1、

2、

align 线条位置（可选left、right、center）；width 线条长度；color 颜色；size 厚度二、特效（效果并不是孤立的，可相互组合） 1、两头渐变透明：

2、纺锤形：

3、右边渐变透明：

4、左边渐变透明：

5、虚线：

6、双线：

7、立体效果：

8、钢针效果：

９．垂直分割线

allic 2011-01-10 17:50 发表评论

js 验证

allic — Fri, 24 Apr 2009 07:16:00 GMT

allic 2009-04-24 15:16 发表评论

apache 配置gzip压缩

allic — Thu, 30 Oct 2008 09:33:00 GMT

1、下载

到http://www.remotecommunications.com/apache/mod_gzip 下载mod_gzip.c 还有它的补丁。

2、安装, 配置

　　把mod_gzip放到你的apache的源代码目录下，新建一个mod_gzip目录如果需要补丁(针对1.3.17.la版) 还需运行:
patch mod_gizp.c
　　按你需要，在配置中选择动态DSO或静态编译进apache系统。如何处理在README中讲得很清楚，如-add-module=mod_gzip.c, make,make install等等。这里不多讲。

把下列配置加入httpd.conf尾部。

# MOD_GZIP configuration
mod_gzip_on Yes
mod_gzip_minimum_file_size 1002
mod_gzip_maximum_file_size 0
mod_gzip_maximum_inmem_size 60000
mod_gzip_item_include mime "application/x-httpd-php"
mod_gzip_item_include mime text/*
mod_gzip_item_include mime "httpd/unix-directory"
mod_gzip_dechunk Yes
mod_gzip_temp_dir "/tmp"
mod_gzip_keep_workfiles No
mod_gzip_item_include file ".php3$"
mod_gzip_item_include file ".txt$"
mod_gzip_item_include file ".html$"
mod_gzip_item_exclude file ".css$"
mod_gzip_item_exclude file ".js$"

在保存修改后运行
…/bin/apachectl configtest确保配置修改无误。
然后用 apachectl restart 指令重起服务。

3、修改，测试

　　在宣布做好了之前在测试一下是优秀程序员的习惯。为了尽量不影响你的用户的浏览，我们可以用把新的apache驱动在8080端口上或者用指令控制mod_gzip起作用的目录,而不是一下子全用mod_gzip.
用法如下：

MOD_GZIP configuration

　　你再用IE4或netscape认真的全面测试一遍，没有问题后你就可以让你的用户很开心的发现'XX网站现在好快哦。'

　　Mod_gzip真的很神奇，100K的HTML大文档只要12K就可以传到用户端了。越先采用这个技术你的用户对你的网站的高速度印象就越深。不过有所得必有所失，由于解压是在客户端进行的，效果和用户的浏览器有一定关系。笔者测试了MSIE4,5,5.5,netscape 4.5 , 6都运行得很好. 不过java,jpg,gif等等是没法压缩的。

allic 2008-10-30 17:33 发表评论

网页常用js特效，转自csdn

allic — Mon, 20 Oct 2008 08:35:00 GMT

网页常用Javascript

1 ．让文字不停地滚动

　　＜MARQUEE＞滚动文字＜ / MARQUEE＞

2 ．记录并显示网页的最后修改时间

　　＜script language = Javascript＞
　　document.write( " 最后更新时间: " + document.lastModified + "" )
　　＜ / script＞

3 ．关闭当前窗口

　　＜a href = " / " onClick = " javascript:window.close();return false; " ＞关闭窗口＜ / a＞

4 ．5秒后关闭当前页

　　＜script language = " Javascript " ＞
　　＜ !--
　　setTimeout( ' window.close(); ' , 5000 );
　　 -- ＞
　　＜ / script＞

5 ．2秒后载入指定网页

　　＜head＞
　　＜meta http - equiv = " refresh " content = " 2;URL=http://你的网址 " ＞
　　＜ / head＞

6 ．添加到收藏夹

　　＜script Language = " Javascript " ＞
　　 function bookmarkit()
　　{
　　window.external.addFavorite( ' http://你的网址 ' , ' 你的网站名称 ' )
　　}
　　 if (document.all)document.write( ' ＜a href="#" onClick="bookmarkit()"＞加入收藏夹＜/a＞ ' )
　　＜ / script＞

7 ．让超链接不显示下划线

　　＜style type = " text/css " ＞
　　＜ !-
　　a:link{text - decoration:none}
　　a:hover{text - decoration:none}
　　a:visited{text - decoration:none}
　　 - ＞
　　＜ / style＞

8 ．禁止鼠标右键的动作

　　＜script Language = " Javascript " ＞
　　 function click() { if (event.button == 2 || event.button == 3 )
　　{
　　alert( ' 禁止鼠标右键 ' );
　　}
　　document.onmousedown = click // --＞
　　＜ / script＞

9 ．设置该页为首页

　　＜body bgcolor = " #FFFFFF " text = " #000000 " ＞
　　＜ !-- 网址：http: // 你的网址--＞
　　＜a class = " chlnk " style = " cursor:hand " HREF
　　onClick = " this.style.behavior='url(#default#homepage)';
　　this.setHomePage('你的网站名称); " ＞＜font color = " 000000 " size = " 2 " face = " 宋体 " ＞设为首页＜ / font＞＜ / a＞
　　＜ / body＞

10 ．节日倒计时

　　＜script Language = " Javascript " ＞
　　 var timedate = new Date( " December 25,2003 " );
　　 var times = " 圣诞节 " ;
　　 var now = new Date();
　　 var date = timedate.getTime() - now.getTime();
　　 var time = Math.floor(date / ( 1000 * 60 * 60 * 24 ));
　　 if (time ＞ = 0 )
　　document.write( " 现在离 " + times + " 还有: " + time + " 天 " )＜ / script＞

11 ．单击按钮打印出当前页

　　＜script Language = " Javascript " ＞
　　＜ !-- Begin
　　 if (window.print) {
　　document.write( ' ＜form＞ '
　　 + ' ＜input type=button name=print value="打印本页" '
　　 + ' onClick="javascript:window.print()"＞＜/form＞ ' );
　　}
　　 // End --＞
　　＜ / script＞

12 ．单击按钮‘另存为’当前页

　　＜input type = " button " name = " Button " value = " 保存本页 "
　　onClick = " document.all.button.ExecWB(4,1) " ＞
　　＜object id = " button "
　　width = 0
　　height = 0
　　classid = " CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 " ＞
　　＜embed width = " 0 " height = " 0 " ＞＜ / embed＞
　　＜ / object＞

13 ．显示系统当前日期

　　＜script language = Javascript＞
　　today = new Date();
　　 function date(){
　　 this .length = date.arguments.length
　　 for ( var i = 0 ;i＜ this .length;i ++ )
　　 this [i + 1 ] = date.arguments }
　　 var d = new date( " 星期日 " , " 星期一 " , " 星期二 " , " 星期三 " , " 星期四 " , " 星期五 " , " 星期六 " );
　　document.write(
　　 " ＜font color=##000000 style='font-size:9pt;font-family: 宋体'＞ " ,
　　today.getYear(), " 年 " ,today.getMonth() + 1 , " 月 " ,today.getDate(), " 日 " ,
　　d[today.getDay() + 1 ], " ＜/font＞ " );
　　＜ / script＞

14 ．不同时间段显示不同问候语

　　＜script Language = " Javascript " ＞
　　＜ !--
　　 var text = "" ; day = new Date( ); time = day.getHours( );
　　 if (( time＞ = 0 ) && (time ＜ 7 ))
　　　　text = " 夜猫子，要注意身体哦！ "
　　 if (( time ＞ = 7 ) && (time ＜ 12 ))
　　　　text = " 今天天气……哈哈哈，不去玩吗？ "
　　 if (( time ＞ = 12 ) && (time ＜ 14 ))
　　　　text = " 午休时间哦，朋友一定是不习惯午睡的吧？！ "
　　 if (( time ＞ = 14 ) && (time ＜ 18 ))
　　　　text = " 下午茶的时间到了，休息一下吧！ "
　　 if ((time ＞ = 18 ) && (time ＜ = 22 ))
　　　　text = " 您又来了，可别和MM聊太久哦！ "
　　 if ((time ＞ = 22 ) && (time ＜ 24 ))
　　　　text = " 很晚了哦，注意休息呀！ "
　　document.write(text)
　　 // ---＞
　　＜ / script＞

15 ．水中倒影效果

　　＜img id = " reflect " src = " 你自己的图片文件名 " width = " 175 " height = " 59 " ＞
　　＜script language = " Javascript " ＞
　　 function f1()
　　{
　　　　setInterval( " mdiv.filters.wave.phase+=10 " , 100 );
　　}
　　 if (document.all)
　　{
　　　　document.write( ' ＜img id=mdiv src=" ' + document.all.reflect.src + ' "
　　　　style="filter:wave(strength=3,freq=3,phase=0,lightstrength=30) blur() flipv()"＞ ' )
　　　　window.onload = f1
　　}
　　＜ / script＞

16 ．慢慢变大的窗口

　　＜script Language = " Javascript " ＞
　　＜ !--
　　 var Windowsheight = 100
　　 var Windowswidth = 100
　　 var numx = 5
　　 function openwindow(thelocation){
　　temploc = thelocation
　　 if
　　( ! (window.resizeTo && document.all) &&! (window.resizeTo && document.getElementById))
　　{
　　　　window.open(thelocation)
　　　　 return
　　}
　　windowsize = window.open( "" , "" , " scrollbars " )
　　windowsize.moveTo( 0 , 0 )
　　windowsize.resizeTo( 100 , 100 )
　　tenumxt()
　　}
　　 function tenumxt(){
　　 if (Windowsheight＞ = screen.availHeight - 3 )
　　　　numx = 0
　　windowsize.resizeBy( 5 ,numx)
　　Windowsheight += 5
　　Windowswidth += 5
　　 if (Windowswidth＞ = screen.width - 5 )
　　{
　　　　windowsize.location = temploc
　　　　Windowsheight = 100
　　　　Windowswidth = 100
　　　　numx = 5
　　　　 return
　　}
　　setTimeout( " tenumxt() " , 50 )
　　}
　　 // --＞
　　＜ / script＞
　　＜p＞＜a href = " javascript:openwindow(http://www.3ydesign.com) " ＞进入＜ / a＞

17 ．改变IE地址栏的IE图标

　　我们要先做一个16 * 16的icon（图标文件），保存为index.ico。把这个图标文件上传到根目录下并在首页＜head＞＜ / head＞之间加上如下代码：

　　＜link REL = " Shortcut Icon " href = " index.ico " ＞

allic 2008-10-20 16:35 发表评论

彻底弄懂CSS盒子模式(DIV布局快速入门)

allic — Fri, 06 Jun 2008 14:27:00 GMT

　理解CSS盒子模型

　　什么是CSS的盒子模式呢？为什么叫它是盒子？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。

CSS盒子模式这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。那么内容就是盒子里装的东西；而填充就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框就是盒子本身了；至于边界则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出嘛。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。填充只有宽度属性，可以理解为生活中盒子里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。在现实生活中，假设我们在一个广场上，把不同大小和颜色的盒子，以一定的间隙和顺序摆放好，最后从广场上空往下看，看到的图形和结构就类似我们要做的网页版面设计了，如下图。

由“盒子”堆出来的网页版面

　　现在对CSS盒子模式理解多少了，如果还不够透彻，继续往下看，我会在后面举例，并延用盒子的概念来解释它。

　转变我们的思路

　　传统的前台网页设计是这样进行的：根据要求，先考虑好主色调，要用什么类型的图片，用什么字体、颜色等等，然后再用Photoshop这类软件自由的画出来，最后再切成小图，再不自由的通过设计HTML生成页面，改用CSS排版后，我们要转变这个思想，此时我们主要考虑的是页面内容的语义和结构，因为一个强CSS控制的网页，等做好网页后，你还可以轻松的调你想要的网页风格，况且CSS排版的另外一个目的是让代码易读，区块分明，强化代码重用，所以结构很重要。如果你想说我的网页设计的很复杂，到后来能不能实现那样的效果？我要告诉你的是，如果用CSS实现不了的效果，一般用表格也是很难实现的，因为CSS的控制能力实在是太强大了，顺便说一点的是用CSS排版有一个很实用的好处是，如果你是接单做网站的，如果你用了CSS排版网页，做到后来客户有什么不满意，特别是色调的话，那么改起来就相当容易，甚至你还可以定制几种风格的CSS文件供客户选择，又或者写一个程序实现动态调用，让网站具有动态改变风格的功能。

　实现结构与表现分离

　　在真正开始布局实践之前，再来认识一件事——结构和表现相分离，这也用CSS布局的特色所在，结构与表现分离后，代码才简洁，更新才方便，这不正是我们学习CSS的目的所在吗？举个例来说P是结构化标签，有P标签的地方表示这是一个段落区块，margin是表现属性，我要让一个段落右缩进2字高，有些人会想到加空格，然后不断地加空格，但现在可以给P标签指定一个CSS样式：P {text-indent: 2em;}，这样结果body内容部分就如下，这没有外加任何表现控制的标签：

加进天涯社区有一段时间了，但一直没有时间写点东西，今天写了一篇有关CSS布局的文章，并力求通过一种通俗的语言来说明知识点，还配以实例和图片，相信对初学CSS布局的人会带来一定的帮助。
如果还要对这个段落加上字体、字号、背景、行距等修饰，直接把对应的CSS加进P样式里就行了，不用像这样来写了：

段落内容

　　这个是结构和表现混合一起写的，如果很多段落有统一结构和表现的话，再这样累加写下去代码就繁冗了。

　　再直接列一段代码加深理解结构和表现相分离：
　　用CSS排版

以下是引用片段：

　　不用CSS排版

以下是引用片段：

　　第一种方法是结构表现相分离，内容部分代码简单吧，如果还有更多的图片列表的话，那么第一种CSS布局方法就更有优势，我打个比喻你好理解：我在BODY向你介绍一个人，我只对你说他是一个人，至于他是一个什么样的人，有多高，是男是女，你去CSS那里查下就知道。这样我在BODY的工作就简单了，也就是说BODY的代码就简单了。如果BODY有一个团队人在那里，我在CSS记录一项就行了，这有点像Flash软件里的元件和实例的概念，不同的实例共享同一个元件，这样动画文件就不大了，把这种想法移到CSS网页设计中，就是代码不复杂，网页文件体积小能较快被客户端下载了。演示地址：http://www.hsptc.com/css1.html用CSS排版减小网页文件体积

　　像上面我做的那个版面，一共分为四个区块，每个区块的框架是一样的，这个框架就是用CSS写出来的，样式写一次，就可以被无数次调用了(用class调用，而不是ID)，只要改变其中的文字内容就可以生成风格统一的众多板块了，它的样式和结构代码是（请不要直接复制生成网页，把下面代码分别粘贴到网页中它们应在的位置）：

以下是引用片段：

前言

正文内容

CSS盒子模式

正文内容

转变思想

正文内容

熟悉步骤

正文内容

　熟悉工作流程

　　在真正开始工作之前我们脑海中要形成这样一种思想：表格是什么我不知道，在内容部分我不能让它再出现表现控制标签，如：font、color、height、width、align等标签不能再出现，（简单说工作前先洗脑，忘掉以前的一惯做法，去接受和使用全新的方法），我不是单纯的用DIV来实现排版的嵌套，DIV是块级元素，而像P也是块级元素，例如要分出几个文字内容块，不是一定要用DIV才叫DIV排版，不是“

文字块一

文字块二

文字块三

”，而用“

文字块一

文字块二

文字块三

”更合适。

用DIV+CSS设计思路是这样的: 1.用div来定义语义结构；2.然后用CSS来美化网页，如加入背景、线条边框、对齐属性等；3.最后在这个CSS定义的盒子内加上内容，如文字、图片等（没有表现属性的标签），下面大家跟我一起来做一个实例加深对这个步骤的理解。先看结果图：

　　
　　演示地址：http://www.hsptc.com/css2.htmlCSS排版结果图

用div来定义语义结构

　　现在我要给大家演示的是一个典型的版面分栏结构，即页头、导航栏、内容、版权（如下图），典型版面分栏结构其结构代码如下：

以下是引用片段：

　　上面我们定义了四个盒子，按照我们想要的结果是，我们要让这些盒子等宽，并从下到下整齐排列，然后在整个页面中居中对齐，为了方便控制，我们再把这四个盒子装进一个更大的盒子，这个盒子就是BODY，这样代码就变成:

以下是引用片段：

　　最外边的大盒子（装着小盒子的大盒子）我们要让它在页面居中，并重定义其宽度为760像素，同时加上边框，那么它的样式是：

以下是引用片段：
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0px auto;
height: auto;
width: 760px;
border: 1px solid #006633;
}

　　页头为了简单起见，我们这里只要让它整个区块应用一幅背景图就行了,并在其下边界设计定一定间隙，目的是让页头的图像不要和下面要做的导航栏连在一起，这样也是为了美观。其样式代码为：

以下是引用片段：
#header {
height: 100px;
width: 760px;
background-image: url(headPic.gif);
background-repeat: no-repeat;
margin:0px 0px 3px 0px;
}

　　导航栏我做成像一个个小按钮，鼠标移上去会改变按钮背景色和字体色，那么这些小小的按钮我们又可以理解为小盒子，如此一来这是一个盒子嵌套问题了，样式代码如下：

以下是引用片段：
#nav {
height: 25px;
width: 760px;
font-size: 14px;
list-style-type: none;
}
#nav li {
float:left;
}
#nav li a{
color:#000000;
text-decoration:none;
padding-top:4px;
display:block;
width:97px;
height:22px;
text-align:center;
background-color: #009966;
margin-left:2px;
}
#nav li a:hover{
background-color:#006633;
color:#FFFFFF;
}

内容部分主要放入文章内容，有标题和段落，标题加粗，为了规范化，我用H标签，段落要自动实现首行缩进2个字,同时所有内容看起来要和外层大盒子边框有一定距离，这里用填充。内容区块样式代码为：

以下是引用片段：
#content {
height:auto;
width: 740px;
line-height: 1.5em;
padding: 10px;
}
#content p {
text-indent: 2em;
}
#content h5 {
font-size: 16px;
margin: 10px;

　　版权栏，给它加个背景，与页头相映，里面文字要自动居中对齐，有多行内容时，行间距合适，这里的链接样式也可以单独指定，我这里就不做了。其样式代码如下：

以下是引用片段：
#footer {
height: 50px;
width: 740px;
line-height: 2em;
text-align: center;
background-color: #009966;
padding: 10px;
}

　　最后回到样式开头大家会看到这样的样式代码：

以下是引用片段：
* {
margin: 0px;
padding: 0px;
}

　　这是用了通配符初始化各标签边界和填充，（因为有部分标签默认会有一定的边界，如Form标签）那么接下来就不用对每个标签再加以这样的控制，这可以在一定程度上简化代码。最终完成全部样式代码是这样的：

以下是引用片段：

　　结构代码是这样的：

以下是引用片段：

首页

文章

相册

Blog

论坛

帮助

前言

第一段内容

理解CSS盒子模式

第二段内容

　　好了，此文到此结束，更多内容，如：CSS中的盒子宽度计算，浏览器兼容问题，XHTML规范化写法等请大家去参考其它资料。如果觉得此文还可以，看过之后记得跟帖，你的鼓励是我不断出新文章的动力^-^

allic 2008-06-06 22:27 发表评论

javascript遍历获取xml文档资料

allic — Tue, 31 Jul 2007 05:49:00 GMT

allic 2007-07-31 13:49 发表评论

PHP生成XML注意的事项

allic — Mon, 30 Jul 2007 10:44:00 GMT

　　今天因工作需要，要用PHP生成一个XML文件，可是到了客户端，responseXML却为空，后来用直接请求一个.XML文件却能解析，查找其中的原因．后来发现生成XML的PHP没有指定类型，应该用header()函数指定一下属性．成功生成XML的PHP脚本是
1       2 header('Expires: Mon, 26 Jul 1997 05:00:00 GMT' );
      3 header('Last-Modified: '.gmdate('D, d M Y H:i:s').'GMT' );
      4 header('Cache-Control: no-cache, must-revalidate' );
      5 header('Pragma: no-cache' );
      6 header('Content-Type: text/xml;charset=UTF-8');
      7 $block = "\n";
      8 $block .="\n";
      9 $block .="Garmin\n";
     10 $block .="\n";
     11 $block .="Forerunner 301\n";
     12 $block .="\n";
     13 $block .="\n";
     14 echo $block;
     15 ?>
~

allic 2007-07-30 18:44 发表评论

js获取浏览器尺寸信息

allic — Tue, 10 Jul 2007 01:03:00 GMT

网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth (包括边线的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)
网页正文全文宽：document.body.scrollWidth
网页正文全文高：document.body.scrollHeight
网页被卷去的高：document.body.scrollTop
网页被卷去的左：document.body.scrollLeft
网页正文部分上：window.screenTop
网页正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width
屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth

allic 2007-07-10 09:03 发表评论

js 正则表达式的使用

allic — Sun, 01 Jul 2007 13:48:00 GMT

正则表达式对象
本对象包含正则表达式模式以及表明如何应用模式的标志。

代码

语法 1 re = /pattern/[flags]
语法 2 re = new RegExp( "pattern" ,[ "flags" ])

参数
re
必选项。将要赋值为正则表达式模式的变量名。

Pattern
必选项。要使用的正则表达式模式。如果使用语法 1，用 "/" 字符分隔模式。如果用语法 2，用引号将模式引起来。

Flags
可选项。如果使用语法 2 要用引号将 flag 引起来。标志可以组合使用，可用的有：

代码

g （全文查找出现的所有 pattern）
i （忽略大小写）
m （多行查找）

示例
下面的示例创建一个包含正则表达式模式及相关标志的对象(re)，向您演示正则表达式对象的用法。在本例中，作为结果的正则表达式对象又用于 match 方法中：

代码

function MatchDemo()
{
var r, re; // 声明变量。
var s = "The rain in Spain falls mainly in the plain";
re = new RegExp("ain","g"); // 创建正则表达式对象。
r = s.match(re); // 在字符串 s 中查找匹配。
return(r);
}

exec 方法
用正则表达式模式在字符串中运行查找，并返回包含该查找结果的一个数组。
rgExp.exec(str)

参数

rgExp
必选项。包含正则表达式模式和可用标志的正则表达式对象。

str
必选项。要在其中执行查找的 String 对象或字符串文字。

说明\\
如果 exec 方法没有找到匹配，则它返回 null。如果它找到匹配，则 exec 方法返回一个数组，并且更新全局 RegExp 对象的属性，以反映匹配结果。数组的0元素包含了完整的匹配，而第1到n元素中包含的是匹配中出现的任意一个子匹配。这相当于没有设置全局标志 (g) 的 match 方法。
如果为正则表达式设置了全局标志，exec 从以 lastIndex 的值指示的位置开始查找。如果没有设置全局标志，exec 忽略 lastIndex 的值，从字符串的起始位置开始搜索。

exec 方法返回的数组有三个属性，分别是 input、index 和 lastIndex。Input 属性包含了整个被查找的字符串。Index 属性中包含了整个被查找字符串中被匹配的子字符串的位置。LastIndex 属性中包含了匹配中最后一个字符的下一个位置。

示例\\
下面的例子举例说明了 exec 方法的用法：

代码

function RegExpTest()
{
var ver = Number(ScriptEngineMajorVersion() + "." + ScriptEngineMinorVersion())
if (ver >= 5.5){ // 测试 JScript 的版本。
var src = "The rain in Spain falls mainly in the plain.";
var re = /\w+/g; // 创建正则表达式模式。
var arr;
while ((arr = re.exec(src)) != null)
document.write(arr.index + "-" + arr.lastIndex + arr + "\t");
}
else{
alert("请使用 JScript 的更新版本");
}
}

返回值：0-3The 4-8rain 9-11in 12-17Spain 18-23falls 24-30mainly 31-33in 34-37the 38-43plain

test 方法\\
返回一个 Boolean 值，它指出在被查找的字符串中是否存在模式。
rgexp.test(str)

参数\\
rgexp
必选项。包含正则表达式模式或可用标志的正则表达式对象。

str
必选项。要在其上测试查找的字符串。

说明
test 方法检查在字符串中是否存在一个模式，如果存在则返回 true，否则就返回 false。
全局 RegExp 对象的属性不由 test 方法来修改。

示例
下面的例子举例说明了 test 方法的用法：

代码

function TestDemo(re, s)
{
var s1; // 声明变量。
// 检查字符串是否存在正则表达式。
if (re.test(s)) // 测试是否存在。
s1 = " contains "; // s 包含模式。
else
s1 = " does not contain "; // s 不包含模式。
return("'" + s + "'" + s1 + "'"+ re.source + "'"); // 返回字符串。
}

函数调用：document.write (TestDemo(/ain+/ ,"The rain in Spain falls mainly in the plain."));

返回值：'The rain in Spain falls mainly in the plain.' contains 'ain+'

match 方法
使用正则表达式模式对字符串执行查找，并将包含查找的结果作为数组返回。\\
stringObj.match(rgExp)

参数\\
stringObj
必选项。对其进行查找的 String 对象或字符串文字。

rgExp
必选项。为包含正则表达式模式和可用标志的正则表达式对象。也可以是包含正则表达式模式和可用标志的变量名或字符串文字。

说明\\
如果 match 方法没有找到匹配，返回 null。如果找到匹配返回一个数组并且更新全局 RegExp 对象的属性以反映匹配结果。
match 方法返回的数组有三个属性：input、index 和 lastIndex。Input 属性包含整个的被查找字符串。Index 属性包含了在整个被查找字符串中匹配的子字符串的位置。LastIndex 属性包含了最后一次匹配中最后一个字符的下一个位置。
如果没有设置全局标志 (g)，数组的 0 元素包含整个匹配，而第 1 到 n 元素包含了匹配中曾出现过的任一个子匹配。这相当于没有设置全局标志的 exec 方法。如果设置了全局标志，元素 0 到 n 中包含所有匹配。

示例\\
下面的示例演示了match 方法的用法：

代码

function MatchDemo()
{
var r, re; // 声明变量。
var s = "The rain in Spain falls mainly in the plain";
re = /ain/i; // 创建正则表达式模式。
r = s.match(re); // 尝试匹配搜索字符串。
return(r); // 返回第一次出现 "ain" 的地方。
}

返回值：ain

本示例说明带 g 标志设置的 match 方法的用法。

代码

function MatchDemo()
{
var r, re; // 声明变量。
var s = "The rain in Spain falls mainly in the plain";
re = /ain/ig; // 创建正则表达式模式。
r = s.match(re); // 尝试去匹配搜索字符串。
return(r); // 返回的数组包含了所有 "ain"
// 出现的四个匹配。
}

返回值：ain,ain,ain,ain

上面几行代码演示了字符串文字的 match 方法的用法。

代码

var r, re = "Spain";
r = "The rain in Spain".replace(re, "Canada");
return r;

返回值：The rain in Canada

search 方法
返回与正则表达式查找内容匹配的第一个子字符串的位置。

stringObj.search(rgExp)

参数\\
stringObj
必选项。要在其上进行查找的 String 对象或字符串文字。

rgExp
必选项。包含正则表达式模式和可用标志的正则表达式对象。

说明

search 方法指明是否存在相应的匹配。如果找到一个匹配，search 方法将返回一个整数值，指明这个匹配距离字符串开始的偏移位置。如果没有找到匹配，则返回 -1。

示例\\
下面的示例演示了 search 方法的用法。

代码

function SearchDemo()
{
var r, re; // 声明变量。
var s = "The rain in Spain falls mainly in the plain.";
re = /falls/i; // 创建正则表达式模式。
r = s.search(re); // 查找字符串。
return(r); // 返回 Boolean 结果。
}

allic 2007-07-01 21:48 发表评论