﻿<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/"><channel><title>BlogJava-Hellow Java World!-文章分类-javascript</title><link>http://www.blogjava.net/b47248054/category/30354.html</link><description>为人尽量保持低调。尊重别人，不要随便去打断别人的发言，认真的听别人的言语。不要老是想着把话题抢过来抓在自己手里。不能放开的人是没法获得的。</description><language>zh-cn</language><lastBuildDate>Fri, 09 Jul 2010 04:48:33 GMT</lastBuildDate><pubDate>Fri, 09 Jul 2010 04:48:33 GMT</pubDate><ttl>60</ttl><item><title>一套完整的javascript面试题--答案</title><link>http://www.blogjava.net/b47248054/articles/325537.html</link><dc:creator>sofot</dc:creator><author>sofot</author><pubDate>Thu, 08 Jul 2010 04:02:00 GMT</pubDate><guid>http://www.blogjava.net/b47248054/articles/325537.html</guid><wfw:comment>http://www.blogjava.net/b47248054/comments/325537.html</wfw:comment><comments>http://www.blogjava.net/b47248054/articles/325537.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/b47248054/comments/commentRss/325537.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/b47248054/services/trackbacks/325537.html</trackback:ping><description><![CDATA[&nbsp;&nbsp;&nbsp;&nbsp; 摘要: 一、				单选题										1				、以下哪条语句会产生运行错误：（				a				）										A.var obj = ();//				语法错误										B.var obj = [];//				创建数组										C.var obj = {};//				创建对象										D...&nbsp;&nbsp;<a href='http://www.blogjava.net/b47248054/articles/325537.html'>阅读全文</a><img src ="http://www.blogjava.net/b47248054/aggbug/325537.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/b47248054/" target="_blank">sofot</a> 2010-07-08 12:02 <a href="http://www.blogjava.net/b47248054/articles/325537.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>一套完整的javascript面试题--试题</title><link>http://www.blogjava.net/b47248054/articles/325538.html</link><dc:creator>sofot</dc:creator><author>sofot</author><pubDate>Thu, 08 Jul 2010 04:02:00 GMT</pubDate><guid>http://www.blogjava.net/b47248054/articles/325538.html</guid><wfw:comment>http://www.blogjava.net/b47248054/comments/325538.html</wfw:comment><comments>http://www.blogjava.net/b47248054/articles/325538.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/b47248054/comments/commentRss/325538.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/b47248054/services/trackbacks/325538.html</trackback:ping><description><![CDATA[
		<p style="MARGIN: 0cm 0cm 0pt 18pt; TEXT-INDENT: -18pt">
				<span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana">一、</span>
				<span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">单选题</span>
				<span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana">
						<br />1</span>
				<span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">、以下哪条语句会产生运行错误：（</span>
				<span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">）</span>
				<span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana">
						<br />A.var obj = ();//</span>
				<span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">语法错误</span>
				<span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana">
						<br />B.var obj = [];//</span>
				<span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">创建数组</span>
				<span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana">
						<br />C.var obj = {};//</span>
				<span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">创建对象</span>
				<span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana">
						<br />D.var obj = //;<br />2<span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">、以下哪个单词不属于</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana">javascript</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">保留字：（</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">）</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana"><br />A.with<br />B.parent<br />C.class<br />D.void<br /></span>3<span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">、请选择结果为真的表达式：（</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">）</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana"><br />A.null instanceof Object</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">（</span><span style="FONT-SIZE: 12pt; COLOR: blue; FONT-FAMILY: 新宋体">if</span><span style="FONT-SIZE: 12pt; FONT-FAMILY: 新宋体">(!(<span style="COLOR: blue">null</span><span style="COLOR: blue">instanceof</span> Object))</span><span style="FONT-SIZE: 12pt; FONT-FAMILY: 新宋体">是真的</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">）</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana"><br />B.null === undefined<br />C.null == undefined<br />D.NaN == NaN<br /></span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体"><br />二、不定项选择题</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana"><br />4</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">、请选择对</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana">javascript</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">理解有误的：</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana">()<br />A.JScript</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">是</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana">javascript</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">的简称</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana"><br />B.javascript</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">是网景公司开发的一种</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana">Java</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">脚本语言，其目的是为了简化</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana">Java</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">的开发难度</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana"><br />C.FireFox</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">和</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana">IE</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">存在大量兼容性问题的主要原因在于他们对</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana">javascript</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">的支持不同上</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana"><br />D.AJAX</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">技术一定要使用</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana">javascript</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">技术</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana"><br />5</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">、</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana">foo</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">对象有</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana">att</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">属性，那么获取</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana">att</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">属性的值，以下哪些做法是可以的：（）</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana"><br />A.foo.att<br />B.foo(“att”)<br />C.foo[“att”]<br />D.foo{“att”}<br />E.foo[“a”+”t”+”t”]<br />6</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">、在不指定特殊属性的情况下，哪几种</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana">HTML</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">标签可以手动输入文本：（</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">）</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana"><br />A.&lt;TEXTAREA&gt;&lt;/TEXTAREA&gt;<br />B.&lt;INPUT type=”text”/&gt;<br />C.&lt;INPUT type=”hidden”/&gt;<br />D.&lt;DIV&gt;&lt;/DIV&gt;<br /><br />7</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">、以下哪些是</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana">javascript</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">的全局函数：（</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">）</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana"><br />A.escape<br />B.parseFloat<br />C.eval<br />D.setTimeout<br />E.alert<br />8</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">、关于</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana">IFrame</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">表述正确的有：</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana">()<br />A.</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">通过</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana">IFrame</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">，网页可以嵌入其他网页内容，并可以动态更改</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana"><br />B.</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">在相同域名下，内嵌的</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana">IFrame</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">可以获取外层网页的对象</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana"><br />C.</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">在相同域名下，外层网页脚本可以获取</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana">IFrame</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">网页内的对象</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana"><br />D.</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">可以通过脚本调整</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana">IFrame</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">的大小</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana"><br />9</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">、关于表格表述正确的有：（</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">）</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana"><br />A.</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">表格中可以包含</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana">TBODY</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">元素</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana"><br />B.</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">表格中可以包含</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana">CAPTION</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">元素</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana"><br />C.</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">表格中可以包含多个</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana">TBODY</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">元素</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana"><br />D.</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">表格中可以包含</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana">COLGROUP</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">元素</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana"><br />E.</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">表格中可以包含</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana">COL</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">元素</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana"><br />10</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">、关于</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana">IE</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">的</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana">window</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">对象表述正确的有：（</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">）</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana"><br />A.window.opener</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">属性本身就是指向</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana">window</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">对象</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana"><br />B.window.reload()</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">方法可以用来刷新当前页面</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana"><br />C.window.location=”a.html”</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">和</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana">window.location.href=”a.html”</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">的作用都是把当前页面替换成</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana">a.html</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">页面</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana"><br />D.</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">定义了全局变量</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana">g</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">；可以用</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana">window.g</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">的方式来存取该变量</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana"><br /><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">三、问答题：</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana"><br />1</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">、谈谈</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana">javascript</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">数组排序方法</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana">sort()</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">的使用，重点介绍</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana">sort()</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">参数的使用及其内部机制<br /><font face="Verdana">2</font><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">、简述</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana">DIV</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">元素和</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana">SPAN</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">元素的区别。<br /><font face="Verdana">3</font><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">、结合</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana">text</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">这段结构，谈谈</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana">innerHTML outerHTML innerText</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">之间的区别。<br /><font face="Verdana">4</font><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">、说几条</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana">XHTML</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">规范的内容（至少</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana">3</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">条）<br /><font face="Verdana">5</font><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">、对</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana">Web</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">标准化（或网站重构）知道哪些相关的知识，简述几条你知道的</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana">Web</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">标准？<br /><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">四、程序题：</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana"><br />1</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">、完成</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana">foo()</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体">函数的内容，要求能够弹出对话框提示当前选中的是第几个单选框。</span><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: Verdana"><br /></span></span></span></span></span></span></span></span>
		</p>
		<div style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee">
				<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" />
				<span style="COLOR: #0000ff">&lt;</span>
				<span style="COLOR: #800000">html</span>
				<span style="COLOR: #0000ff">&gt;</span>
				<span style="COLOR: #000000">
						<br />
						<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" />
						<br />
						<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" />
				</span>
				<span style="COLOR: #0000ff">&lt;</span>
				<span style="COLOR: #800000">head</span>
				<span style="COLOR: #0000ff">&gt;</span>
				<span style="COLOR: #000000">
						<br />
						<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" />
						<br />
						<img id="Codehighlighter1_24_70_Open_Image" onclick="this.style.display='none'; Codehighlighter1_24_70_Open_Text.style.display='none'; Codehighlighter1_24_70_Closed_Image.style.display='inline'; Codehighlighter1_24_70_Closed_Text.style.display='inline';" src="http://www.blogjava.net/images/OutliningIndicators/ExpandedBlockStart.gif" align="top" />
						<img id="Codehighlighter1_24_70_Closed_Image" style="DISPLAY: none" onclick="this.style.display='none'; Codehighlighter1_24_70_Closed_Text.style.display='none'; Codehighlighter1_24_70_Open_Image.style.display='inline'; Codehighlighter1_24_70_Open_Text.style.display='inline';" src="http://www.blogjava.net/images/OutliningIndicators/ContractedBlock.gif" align="top" />
				</span>
				<span style="COLOR: #0000ff">&lt;</span>
				<span style="COLOR: #800000">script</span>
				<span style="COLOR: #0000ff">&gt;</span>
				<span id="Codehighlighter1_24_70_Closed_Text" style="BORDER-RIGHT: #808080 1px solid; BORDER-TOP: #808080 1px solid; DISPLAY: none; BORDER-LEFT: #808080 1px solid; BORDER-BOTTOM: #808080 1px solid; BACKGROUND-COLOR: #ffffff">
						<img src="http://www.blogjava.net/images/dot.gif" />
				</span>
				<span id="Codehighlighter1_24_70_Open_Text">
						<span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">
								<br />
								<img src="http://www.blogjava.net/images/OutliningIndicators/InBlock.gif" align="top" />
								<br />
								<img src="http://www.blogjava.net/images/OutliningIndicators/InBlock.gif" align="top" /> </span>
						<span style="COLOR: #0000ff; BACKGROUND-COLOR: #f5f5f5">function</span>
						<span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5"> foo() <br /><img src="http://www.blogjava.net/images/OutliningIndicators/InBlock.gif" align="top" /><br /><img id="Codehighlighter1_45_68_Open_Image" onclick="this.style.display='none'; Codehighlighter1_45_68_Open_Text.style.display='none'; Codehighlighter1_45_68_Closed_Image.style.display='inline'; Codehighlighter1_45_68_Closed_Text.style.display='inline';" src="http://www.blogjava.net/images/OutliningIndicators/ExpandedSubBlockStart.gif" align="top" /><img id="Codehighlighter1_45_68_Closed_Image" style="DISPLAY: none" onclick="this.style.display='none'; Codehighlighter1_45_68_Closed_Text.style.display='none'; Codehighlighter1_45_68_Open_Image.style.display='inline'; Codehighlighter1_45_68_Open_Text.style.display='inline';" src="http://www.blogjava.net/images/OutliningIndicators/ContractedSubBlock.gif" align="top" /> </span>
						<span id="Codehighlighter1_45_68_Closed_Text" style="BORDER-RIGHT: #808080 1px solid; BORDER-TOP: #808080 1px solid; DISPLAY: none; BORDER-LEFT: #808080 1px solid; BORDER-BOTTOM: #808080 1px solid; BACKGROUND-COLOR: #ffffff">
								<img src="http://www.blogjava.net/images/dot.gif" />
						</span>
						<span id="Codehighlighter1_45_68_Open_Text">
								<span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">{<br /><img src="http://www.blogjava.net/images/OutliningIndicators/InBlock.gif" align="top" /><br /><img src="http://www.blogjava.net/images/OutliningIndicators/InBlock.gif" align="top" />   </span>
								<span style="COLOR: #008000; BACKGROUND-COLOR: #f5f5f5">//</span>
								<span style="COLOR: #008000; BACKGROUND-COLOR: #f5f5f5"> 在此处添加代码</span>
								<span style="COLOR: #008000; BACKGROUND-COLOR: #f5f5f5">
										<br />
										<img src="http://www.blogjava.net/images/OutliningIndicators/InBlock.gif" align="top" />
								</span>
								<span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">
										<br />
										<img src="http://www.blogjava.net/images/OutliningIndicators/InBlock.gif" align="top" />   <br /><img src="http://www.blogjava.net/images/OutliningIndicators/ExpandedSubBlockEnd.gif" align="top" /> }</span>
						</span>
						<span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">
								<br />
								<img src="http://www.blogjava.net/images/OutliningIndicators/ExpandedBlockEnd.gif" align="top" />
								<br />
								<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" />
						</span>
				</span>
				<span style="COLOR: #0000ff">&lt;/</span>
				<span style="COLOR: #800000">script</span>
				<span style="COLOR: #0000ff">&gt;</span>
				<span style="COLOR: #000000">
						<br />
						<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" />
						<br />
						<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" />
						<br />
						<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" />
						<br />
						<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" />
				</span>
				<span style="COLOR: #0000ff">&lt;/</span>
				<span style="COLOR: #800000">head</span>
				<span style="COLOR: #0000ff">&gt;</span>
				<span style="COLOR: #000000">
						<br />
						<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" />
						<br />
						<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" />
				</span>
				<span style="COLOR: #0000ff">&lt;</span>
				<span style="COLOR: #800000">body</span>
				<span style="COLOR: #0000ff">&gt;</span>
				<span style="COLOR: #000000">
						<br />
						<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" />
						<br />
						<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" />    </span>
				<span style="COLOR: #0000ff">&lt;</span>
				<span style="COLOR: #800000">form </span>
				<span style="COLOR: #ff0000">name</span>
				<span style="COLOR: #0000ff">="form1"</span>
				<span style="COLOR: #ff0000"> onsubmit</span>
				<span style="COLOR: #0000ff">="return foo();"</span>
				<span style="COLOR: #0000ff">&gt;</span>
				<span style="COLOR: #000000">
						<br />
						<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" />
						<br />
						<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" />        </span>
				<span style="COLOR: #0000ff">&lt;</span>
				<span style="COLOR: #800000">input </span>
				<span style="COLOR: #ff0000">type</span>
				<span style="COLOR: #0000ff">="radio"</span>
				<span style="COLOR: #ff0000"> name</span>
				<span style="COLOR: #0000ff">="radioGroup"</span>
				<span style="COLOR: #ff0000"> </span>
				<span style="COLOR: #0000ff">/&gt;</span>
				<span style="COLOR: #000000">
						<br />
						<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" />
						<br />
						<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" />        </span>
				<span style="COLOR: #0000ff">&lt;</span>
				<span style="COLOR: #800000">input </span>
				<span style="COLOR: #ff0000">type</span>
				<span style="COLOR: #0000ff">="radio"</span>
				<span style="COLOR: #ff0000"> name</span>
				<span style="COLOR: #0000ff">="radioGroup"</span>
				<span style="COLOR: #ff0000"> </span>
				<span style="COLOR: #0000ff">/&gt;</span>
				<span style="COLOR: #000000">
						<br />
						<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" />
						<br />
						<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" />        </span>
				<span style="COLOR: #0000ff">&lt;</span>
				<span style="COLOR: #800000">input </span>
				<span style="COLOR: #ff0000">type</span>
				<span style="COLOR: #0000ff">="radio"</span>
				<span style="COLOR: #ff0000"> name</span>
				<span style="COLOR: #0000ff">="radioGroup"</span>
				<span style="COLOR: #ff0000"> </span>
				<span style="COLOR: #0000ff">/&gt;</span>
				<span style="COLOR: #000000">
						<br />
						<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" />
						<br />
						<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" />        </span>
				<span style="COLOR: #0000ff">&lt;</span>
				<span style="COLOR: #800000">input </span>
				<span style="COLOR: #ff0000">type</span>
				<span style="COLOR: #0000ff">="radio"</span>
				<span style="COLOR: #ff0000"> name</span>
				<span style="COLOR: #0000ff">="radioGroup"</span>
				<span style="COLOR: #ff0000"> </span>
				<span style="COLOR: #0000ff">/&gt;</span>
				<span style="COLOR: #000000">
						<br />
						<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" />
						<br />
						<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" />        </span>
				<span style="COLOR: #0000ff">&lt;</span>
				<span style="COLOR: #800000">input </span>
				<span style="COLOR: #ff0000">type</span>
				<span style="COLOR: #0000ff">="radio"</span>
				<span style="COLOR: #ff0000"> name</span>
				<span style="COLOR: #0000ff">="radioGroup"</span>
				<span style="COLOR: #ff0000"> </span>
				<span style="COLOR: #0000ff">/&gt;</span>
				<span style="COLOR: #000000">
						<br />
						<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" />
						<br />
						<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" />        </span>
				<span style="COLOR: #0000ff">&lt;</span>
				<span style="COLOR: #800000">input </span>
				<span style="COLOR: #ff0000">type</span>
				<span style="COLOR: #0000ff">="radio"</span>
				<span style="COLOR: #ff0000"> name</span>
				<span style="COLOR: #0000ff">="radioGroup"</span>
				<span style="COLOR: #ff0000"> </span>
				<span style="COLOR: #0000ff">/&gt;</span>
				<span style="COLOR: #000000">
						<br />
						<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" />
						<br />
						<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" />        </span>
				<span style="COLOR: #0000ff">&lt;</span>
				<span style="COLOR: #800000">input </span>
				<span style="COLOR: #ff0000">type</span>
				<span style="COLOR: #0000ff">="submit"</span>
				<span style="COLOR: #ff0000"> </span>
				<span style="COLOR: #0000ff">/&gt;</span>
				<span style="COLOR: #000000">
						<br />
						<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" />
						<br />
						<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" />    </span>
				<span style="COLOR: #0000ff">&lt;/</span>
				<span style="COLOR: #800000">form</span>
				<span style="COLOR: #0000ff">&gt;</span>
				<span style="COLOR: #000000">
						<br />
						<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" />
						<br />
						<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" />
				</span>
				<span style="COLOR: #0000ff">&lt;/</span>
				<span style="COLOR: #800000">body</span>
				<span style="COLOR: #0000ff">&gt;</span>
				<span style="COLOR: #000000">
						<br />
						<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" />
						<br />
						<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" />
				</span>
				<span style="COLOR: #0000ff">&lt;/</span>
				<span style="COLOR: #800000">html</span>
				<span style="COLOR: #0000ff">&gt;</span>
				<span style="COLOR: #000000">
						<br />
						<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" />
				</span>
		</div>2、填充注释部分的函数体，使得foo()函数调用弹出”成功”的对话框。代码应尽量简短<br /><div style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" /><span style="COLOR: #0000ff">&lt;</span><span style="COLOR: #800000">html</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000"><br /><img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" /><br /><img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" /></span><span style="COLOR: #0000ff">&lt;</span><span style="COLOR: #800000">head</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000"><br /><img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" /><br /><img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" /> <br /><img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" /><br /><img id="Codehighlighter1_28_249_Open_Image" onclick="this.style.display='none'; Codehighlighter1_28_249_Open_Text.style.display='none'; Codehighlighter1_28_249_Closed_Image.style.display='inline'; Codehighlighter1_28_249_Closed_Text.style.display='inline';" src="http://www.blogjava.net/images/OutliningIndicators/ExpandedBlockStart.gif" align="top" /><img id="Codehighlighter1_28_249_Closed_Image" style="DISPLAY: none" onclick="this.style.display='none'; Codehighlighter1_28_249_Closed_Text.style.display='none'; Codehighlighter1_28_249_Open_Image.style.display='inline'; Codehighlighter1_28_249_Open_Text.style.display='inline';" src="http://www.blogjava.net/images/OutliningIndicators/ContractedBlock.gif" align="top" /> </span><span style="COLOR: #0000ff">&lt;</span><span style="COLOR: #800000">script</span><span style="COLOR: #0000ff">&gt;</span><span id="Codehighlighter1_28_249_Closed_Text" style="BORDER-RIGHT: #808080 1px solid; BORDER-TOP: #808080 1px solid; DISPLAY: none; BORDER-LEFT: #808080 1px solid; BORDER-BOTTOM: #808080 1px solid; BACKGROUND-COLOR: #ffffff"><img src="http://www.blogjava.net/images/dot.gif" /></span><span id="Codehighlighter1_28_249_Open_Text"><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5"><br /><img src="http://www.blogjava.net/images/OutliningIndicators/InBlock.gif" align="top" /><br /><img src="http://www.blogjava.net/images/OutliningIndicators/InBlock.gif" align="top" /></span><span style="COLOR: #0000ff; BACKGROUND-COLOR: #f5f5f5">function</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5"> foo() <br /><img src="http://www.blogjava.net/images/OutliningIndicators/InBlock.gif" align="top" /><br /><img id="Codehighlighter1_47_184_Open_Image" onclick="this.style.display='none'; Codehighlighter1_47_184_Open_Text.style.display='none'; Codehighlighter1_47_184_Closed_Image.style.display='inline'; Codehighlighter1_47_184_Closed_Text.style.display='inline';" src="http://www.blogjava.net/images/OutliningIndicators/ExpandedSubBlockStart.gif" align="top" /><img id="Codehighlighter1_47_184_Closed_Image" style="DISPLAY: none" onclick="this.style.display='none'; Codehighlighter1_47_184_Closed_Text.style.display='none'; Codehighlighter1_47_184_Open_Image.style.display='inline'; Codehighlighter1_47_184_Open_Text.style.display='inline';" src="http://www.blogjava.net/images/OutliningIndicators/ContractedSubBlock.gif" align="top" /></span><span id="Codehighlighter1_47_184_Closed_Text" style="BORDER-RIGHT: #808080 1px solid; BORDER-TOP: #808080 1px solid; DISPLAY: none; BORDER-LEFT: #808080 1px solid; BORDER-BOTTOM: #808080 1px solid; BACKGROUND-COLOR: #ffffff"><img src="http://www.blogjava.net/images/dot.gif" /></span><span id="Codehighlighter1_47_184_Open_Text"><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">{<br /><img src="http://www.blogjava.net/images/OutliningIndicators/InBlock.gif" align="top" /><br /><img src="http://www.blogjava.net/images/OutliningIndicators/InBlock.gif" align="top" />   </span><span style="COLOR: #0000ff; BACKGROUND-COLOR: #f5f5f5">var</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5"> str </span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">=</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5"> reverse('a,b,c,d,e,f,g');<br /><img src="http://www.blogjava.net/images/OutliningIndicators/InBlock.gif" align="top" /><br /><img src="http://www.blogjava.net/images/OutliningIndicators/InBlock.gif" align="top" />      alert(str);<br /><img src="http://www.blogjava.net/images/OutliningIndicators/InBlock.gif" align="top" /><br /><img src="http://www.blogjava.net/images/OutliningIndicators/InBlock.gif" align="top" />   </span><span style="COLOR: #0000ff; BACKGROUND-COLOR: #f5f5f5">if</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5"> (str </span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">==</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5"> 'g,f,e,d,c,b,a') <br /><img src="http://www.blogjava.net/images/OutliningIndicators/InBlock.gif" align="top" /><br /><img src="http://www.blogjava.net/images/OutliningIndicators/InBlock.gif" align="top" />      alert('成功');<br /><img src="http://www.blogjava.net/images/OutliningIndicators/InBlock.gif" align="top" /><br /><img src="http://www.blogjava.net/images/OutliningIndicators/InBlock.gif" align="top" />   </span><span style="COLOR: #0000ff; BACKGROUND-COLOR: #f5f5f5">else</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5"> alert('失败');<br /><img src="http://www.blogjava.net/images/OutliningIndicators/InBlock.gif" align="top" /><br /><img src="http://www.blogjava.net/images/OutliningIndicators/ExpandedSubBlockEnd.gif" align="top" />}</span></span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5"><br /><img src="http://www.blogjava.net/images/OutliningIndicators/InBlock.gif" align="top" /><br /><img src="http://www.blogjava.net/images/OutliningIndicators/InBlock.gif" align="top" /></span><span style="COLOR: #0000ff; BACKGROUND-COLOR: #f5f5f5">function</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5"> reverse(str)<br /><img src="http://www.blogjava.net/images/OutliningIndicators/InBlock.gif" align="top" /><br /><img id="Codehighlighter1_210_243_Open_Image" onclick="this.style.display='none'; Codehighlighter1_210_243_Open_Text.style.display='none'; Codehighlighter1_210_243_Closed_Image.style.display='inline'; Codehighlighter1_210_243_Closed_Text.style.display='inline';" src="http://www.blogjava.net/images/OutliningIndicators/ExpandedSubBlockStart.gif" align="top" /><img id="Codehighlighter1_210_243_Closed_Image" style="DISPLAY: none" onclick="this.style.display='none'; Codehighlighter1_210_243_Closed_Text.style.display='none'; Codehighlighter1_210_243_Open_Image.style.display='inline'; Codehighlighter1_210_243_Open_Text.style.display='inline';" src="http://www.blogjava.net/images/OutliningIndicators/ContractedSubBlock.gif" align="top" /></span><span id="Codehighlighter1_210_243_Closed_Text" style="BORDER-RIGHT: #808080 1px solid; BORDER-TOP: #808080 1px solid; DISPLAY: none; BORDER-LEFT: #808080 1px solid; BORDER-BOTTOM: #808080 1px solid; BACKGROUND-COLOR: #ffffff"><img src="http://www.blogjava.net/images/dot.gif" /></span><span id="Codehighlighter1_210_243_Open_Text"><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">{<br /><img src="http://www.blogjava.net/images/OutliningIndicators/InBlock.gif" align="top" /><br /><img src="http://www.blogjava.net/images/OutliningIndicators/InBlock.gif" align="top" />   </span><span style="COLOR: #008000; BACKGROUND-COLOR: #f5f5f5">//</span><span style="COLOR: #008000; BACKGROUND-COLOR: #f5f5f5"> 在此处加入代码，完成字符串翻转功能</span><span style="COLOR: #008000; BACKGROUND-COLOR: #f5f5f5"><br /><img src="http://www.blogjava.net/images/OutliningIndicators/InBlock.gif" align="top" /></span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5"><br /><img src="http://www.blogjava.net/images/OutliningIndicators/InBlock.gif" align="top" />    <br /><img src="http://www.blogjava.net/images/OutliningIndicators/ExpandedSubBlockEnd.gif" align="top" />}</span></span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5"><br /><img src="http://www.blogjava.net/images/OutliningIndicators/InBlock.gif" align="top" /><br /><img src="http://www.blogjava.net/images/OutliningIndicators/ExpandedBlockEnd.gif" align="top" />    </span></span><span style="COLOR: #0000ff">&lt;/</span><span style="COLOR: #800000">script</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000"><br /><img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" /><br /><img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" /></span><span style="COLOR: #0000ff">&lt;/</span><span style="COLOR: #800000">head</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000"><br /><img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" /><br /><img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" /> <br /><img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" /><br /><img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" />    </span><span style="COLOR: #0000ff">&lt;</span><span style="COLOR: #800000">body</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000"><br /><img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" /><br /><img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" />        </span><span style="COLOR: #0000ff">&lt;</span><span style="COLOR: #800000">input </span><span style="COLOR: #ff0000">type</span><span style="COLOR: #0000ff">="button"</span><span style="COLOR: #ff0000"> value</span><span style="COLOR: #0000ff">="str"</span><span style="COLOR: #ff0000"> onclick</span><span style="COLOR: #0000ff">="foo()"</span><span style="COLOR: #ff0000"> </span><span style="COLOR: #0000ff">/&gt;</span><span style="COLOR: #000000"><br /><img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" /><br /><img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" />    </span><span style="COLOR: #0000ff">&lt;/</span><span style="COLOR: #800000">body</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000"><br /><img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" /><br /><img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" /></span><span style="COLOR: #0000ff">&lt;/</span><span style="COLOR: #800000">html</span><span style="COLOR: #0000ff">&gt;</span><span style="COLOR: #000000"><br /><img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" /></span></div><img src ="http://www.blogjava.net/b47248054/aggbug/325538.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/b47248054/" target="_blank">sofot</a> 2010-07-08 12:02 <a href="http://www.blogjava.net/b47248054/articles/325538.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>Javascript正则表达式教程</title><link>http://www.blogjava.net/b47248054/articles/205560.html</link><dc:creator>sofot</dc:creator><author>sofot</author><pubDate>Tue, 03 Jun 2008 06:49:00 GMT</pubDate><guid>http://www.blogjava.net/b47248054/articles/205560.html</guid><wfw:comment>http://www.blogjava.net/b47248054/comments/205560.html</wfw:comment><comments>http://www.blogjava.net/b47248054/articles/205560.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/b47248054/comments/commentRss/205560.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/b47248054/services/trackbacks/205560.html</trackback:ping><description><![CDATA[<div class="tit">Javascript正则表达式教程</div>
<table style="table-layout: fixed">
    <tbody>
        <tr>
            <td>
            <div id="blog_text" class="cnt">
            <p>一，概述</p>
            <p>1，正则表达式，可以说是任何一种编程语言都提供的机制，它主要是提供了对字符串的处理能力。<br />
            2，正则表达式在页面处理中的使用场景：<br />
            1）表单验证。验证某些域符合某种规则，例如邮件输入框必须输入的是邮件、联系电话输入框输入的必须是数字等等<br />
            2）处理DOM模型。例如通过表达式定位DOM中的一个对象或一系列对象，一个例子就是定位id属性中含有某个特殊字符的div对象。<br />
            3）纯编程逻辑。直接用于编程的逻辑之中。<br />
            3，说明：本部分所举的正则表达式的代码片断，都是经过测试的，但有一点需要注意，对于换行的字符串的定义，我们在表述时使用的是类似如下的形式：<br />
            var str=&#8220;It&#8217;s is<br />
            a beautiful city&#8221;；<br />
            这种形式直接写在JS代码中是错误的，那如何获取具有换行的字符串呢？简单的办法：在textarea中输入文本并换行，然后将该值赋给JS变量即可。例如：<br />
            var str=document.forms[0].mytextarea.value;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
            <p>二，语法与使用</p>
            <p>1，定义正则表达式</p>
            <p>1）定义正则表达式有两种形式，一种是普通方式，一种是构造函数方式。<br />
            2）普通方式：var reg=/表达式/附加参数<br />
            表达式：一个字符串，代表了某种规则，其中可以使用某些特殊字符，来代表特殊的规则，后面会详细说明。<br />
            附加参数：用来扩展表达式的含义，目前主要有三个参数：<br />
            g：代表可以进行全局匹配。<br />
            i：代表不区分大小写匹配。<br />
            m：代表可以进行多行匹配。<br />
            上面三个参数，可以任意组合，代表复合含义，当然也可以不加参数。<br />
            例子：<br />
            var reg=/a*b/;<br />
            var reg=/abc+f/g;<br />
            3）构造函数方式：var reg=new RegExp(&#8220;表达式&#8221;,&#8221;附加参数&#8221;);<br />
            其中&#8220;表达式&#8221;与&#8220;附加参数&#8221;的含义与上面那种定义方式中的含义相同。<br />
            例子：<br />
            var reg=new RegExp(&#8220;a*b&#8221;);<br />
            var reg=new RegExp(&#8220;abc+f&#8221;,&#8221;g&#8221;);<br />
            4）普通方式与构造函数方式的区别<br />
            普通方式中的表达式必须是一个常量字符串，而构造函数中的表达式可以是常量字符串，也可以是一个js变量，例如根据用户的输入来作为表达式参数等等：<br />
            var reg=new RegExp(document.forms[0].exprfiled.value,&#8221;g&#8221;);</p>
            <p>2，表达式模式</p>
            <p>1）表达式模式，是指表达式的表达方式与样式， 即 var reg=/表达式/附加参数 中的&#8220;表达式&#8221;怎样去描述？<br />
            2）从规范上讲，表达式模式分为简单模式和复合模式。<br />
            3）简单模式：是指通过普通字符的组合来表达的模式，例如<br />
            var reg=/abc0d/;<br />
            可见简单模式只能表示具体的匹配。<br />
            4）复合模式：是指含有通配符来表达的模式，例如：<br />
            var reg=/a+b?\w/;<br />
            其中的+、?和\w都属于通配符，代表着特殊的含义。因此复合模式可以表达更为抽象化的逻辑。<br />
            下面我们着重说一下复合模式中各个通配符的含义及其使用。<br />
            5)复合模式中特殊字符的讲解：</p>
            <p>1&gt;\：在许多编程语言里面被用作转义符，一般来说<br />
            \符号后面如果跟的是普通字符c，那么\c就代表特殊的含义，例如n本来代表字符n，但\n就代表换行。<br />
            \符号后面如果跟的是特殊字符c，那么\c就代表普通字符c，例如\一般用作转义符，但\\则调表普通字符\。<br />
            Javascript的正则表达式中\的用法与上面相同，只是不同的编程语言，特殊字符表可能不太一样罢了。</p>
            <p>2&gt;^：匹配输入字符串的起始端，如果是多行匹配，即表达式的附加参数中含有m，则也在一个换行符后匹配。<br />
            例子：/^B/匹配 &#8220;Bab Bc &#8221;中的第一个B<br />
            例子2：/^B/gm匹配<br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &#8220;Badd B<br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; cdaf<br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; B dsfB&#8221;<br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 中的第一行第一个B，第三行中的第一个B<br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br />
            3&gt;$：匹配输入字符创的尾端，如果是多行匹配，即表达式的附加参数中含有m，则也在一个换行符前匹配。<br />
            与^的用法相反。<br />
            例子：/t$/匹配&#8220;bat&#8221;中的t，但是不匹配&#8220;hate&#8221;中的t<br />
            例子2：/t$/匹配<br />
            &#8220;tag at<br />
            bat&#8221;<br />
            中第一行的最后一个t和第二行的t。</p>
            <p>4&gt;*：匹配前一个字符0次或多次。<br />
            例子：/ab*/匹配&#8220;dddabbbbc&#8221;中的&#8220;abbbb&#8221;，也匹配&#8220;ddda&#8221;中的&#8220;a&#8221;</p>
            <p>5&gt;+：匹配前一个字符1次或多次。<br />
            例子：/ab+/匹配&#8220;dddabbbbc&#8221;中的&#8220;abbbb&#8221;，但不匹配&#8220;ddda&#8221;<br />
            与后面的{1,}（原型：{n,}）的用法类似</p>
            <p>6&gt;?：?的用法比较特殊，一般来说它用来对前一个字符做0次或1次匹配，但是它有另外两种特殊的用法：<br />
            如果紧跟在*、+、?和{ }之后，则表示原始匹配的最小次数匹配，例如：<br />
            /ba*/本来匹配&#8220;bbbaaaa&#8221;中的&#8220;baaaa&#8221;，但是/ba*?/则匹配&#8220;bbbaaaa&#8221;中的&#8220;b&#8221;（因为*表示0次或多次匹配，而加?应该表示最少次数匹配，即0次匹配）。<br />
            同理：/ba+?/则匹配&#8220;baaaa&#8221;中的&#8220;ba&#8221;。<br />
            作为语法结构符号，使用于前置断言中，即后面要说到的x(?=y)和x(?!=y)</p>
            <p>7&gt;.：小数点中的&#8220;.&#8221;号，匹配任何一个单独的字符，但是换行符除外。<br />
            标准中总共有哪些字符？请参考：字符集<br />
            例如：/a.b/匹配&#8220;acbaa&#8221;中的&#8220;acb&#8221;，但是不匹配&#8220;abbb&#8221;。</p>
            <p>8&gt;(x)：表示匹配x(并非特指字符x或者特指一个字符，x表示一个字符串)，而且匹配会被记住，在语法中这种()被称为&#8220;capturing parentheses &#8221;，即捕捉用的小括号。<br />
            匹配会被记住，是因为在表达式提供的函数中，有些函数返回一个数组，该数组会保存所匹配的所有字符串，例如exec()函数。<br />
            另外还要注意()中的x被记住的前提是匹配x。<br />
            例子1：<br />
            var regx=/a(b)c/;<br />
            var rs=regx.exec(&#8220;abcddd&#8221;);<br />
            从上面可以看出,/a(b)c/匹配&#8220;abcddd&#8221;中的&#8220;abc&#8221;，因为()的原因，b也会记录下来，因此rs返回的数字内容为：<br />
            {abc,b}<br />
            例子2：<br />
            var regx=/a(b)c/;<br />
            var rs=regx.exec(&#8220;acbcddd&#8221;);<br />
            rs返回null，因为/a(b)c/不匹配&#8220;acbcddd&#8221;，所以()中的b不会被记录下来（尽管字符串中含有b）<br />
            <br />
            9&gt;(?:x)：匹配x，但不会记住x，这种格式中的()被称为&#8220;non-capturing parentheses &#8221;，即非捕捉用的小括号。<br />
            例子：<br />
            var regx=/a(?:b)c/;<br />
            var rs=regx.exec(&#8220;abcddd&#8221;);<br />
            从上面可以看出,/a(?:b)c/匹配&#8220;abcddd&#8221;中的&#8220;abc&#8221;，因为(?:)的原因，b不会记录下来，因此rs返回的数字内容为：<br />
            {abc}</p>
            <p>10&gt;X(?=y)：匹配x，仅当后面紧跟着y时。如果符合匹配，则只有x会被记住，y不会被记住。<br />
            例子：<br />
            var regx=/user(?=name)/;<br />
            var rs=regx.exec(&#8220;The username is Mary&#8221;);<br />
            结果：匹配成功，而且rs的值为{user}</p>
            <p>11&gt;X(?!y)：匹配x，仅当后面不紧跟着y时。如果符合匹配，则只有x会被记住，y不会被记住。<br />
            例子：<br />
            var regx=/user(?!name)/;<br />
            var rs=regx.exec(&#8220;The user name is Mary&#8221;);<br />
            结果：匹配成功，而且rs的值为{user}<br />
            例子2：<br />
            var regx=/\d+(?!\.)/;<br />
            var rs=regx.exec(&#8220;54.235&#8221;);<br />
            结果：匹配成果，rs的值为{5}，不匹配54是因为54后面跟着&#8220;.&#8221;号，当然235也匹配，但是由于exec方法的行为，235不会被返回</p>
            <p>12&gt;x|y：匹配x或y。注意如果x和y都匹配上了，那么只记住x。<br />
            例子：<br />
            var regx=/beijing|shanghai/;<br />
            var rs=regx.exec(&#8220;I love beijing and shanghai&#8221;);<br />
            结果：匹配成功，rs的值为{beijing}，虽然shanghai也匹配，但不会被记住。</p>
            <p>13&gt;{n}：匹配前一个字符的n次出现。<br />
            n必须是一个非负数，当然如果是一个负数或小数也不会报语法错误。<br />
            例子：<br />
            var regx=/ab{2}c/;<br />
            var rs=regx.exec(&#8220;abbcd&#8221;);<br />
            结果：匹配成功，rs的值为：{abbc}。</p>
            <p>14&gt;{n,}：匹配前一个字符的至少n次出现。<br />
            例子：<br />
            var regx=/ab{2,}c/;<br />
            var rs=regx.exec(&#8220;abbcdabbbc&#8221;);<br />
            结果：匹配成功，rs的值为：{abbc}。注意为什么abbbc也符合条件为什么没有被记住，这与exec方法的行为有关，后面会统一讲解。</p>
            <p>15&gt;{n,m}：匹配前一个字符的至少n次最多m次的出现。<br />
            只要n与m为数字，而且m&gt;=n就不会报语法错误。<br />
            例子：<br />
            var regx=/ab{2,5}c/;<br />
            var rs=regx.exec(&#8220;abbbcd&#8221;);<br />
            结果：匹配成功，rs的值为：{abbbc}。<br />
            例子2：<br />
            var regx=/ab{2,2}c/;<br />
            var rs=regx.exec(&#8220;abbcd&#8221;);<br />
            结果：匹配成功，rs的值为：{abbc}。<br />
            例子3：<br />
            var regx=/ab(2,5)/;<br />
            var rs=regx.exec(&#8220;abbbbbbbbbb&#8221;);<br />
            结果：匹配成功，rs的值为：{abbbbb}，这说明，如果前一个字符出现多于m次，则只匹配m次。另外：<br />
            var regx=/ab(2,5)c/;<br />
            var rs=regx.exec(&#8220;abbbbbbbbbbc&#8221;);<br />
            结果：匹配失败，rs的值为：null，为什么匹配失败，因为b多于5个则b(2,5)会匹配前5个b，，而表达式/ab(2,5)c/中b后面是c，但字符串中5个b之后还是b所以会报错。</p>
            <p>16&gt;[xyz]：xyz表示一个字符串，该模式表示匹配[]中的一个字符，形式上[xyz]等同于[x-z]。<br />
            例子：<br />
            var regx=/a[bc]d/;<br />
            var rs=regx.exec(&#8220;abddgg&#8221;);<br />
            结果：匹配成功，rs的值为：{abd}<br />
            例子2：<br />
            var regx=/a[bc]d/;<br />
            var rs=regx.exec(&#8220;abcd&#8221;);<br />
            结果：匹配失败，rs的值为：null，之所以失败，是因为[bc]表示匹配b或c中的一个，但不会同时匹配。</p>
            <p>17&gt;[^xyz]：该模式表示匹配非[]中的一个字符，形式上[^xyz]等同于[^x-z]。<br />
            例子：<br />
            var regx=/a[^bc]d/;<br />
            var rs=regx.exec(&#8220;afddgg&#8221;);<br />
            结果：匹配成功，rs的值为：{afd}<br />
            例子2：<br />
            var regx=/a[^bc]d/;<br />
            var rs=regx.exec(&#8220;abd&#8221;);<br />
            结果：匹配失败，rs的值为：。</p>
            <p>18&gt;[\b]：匹配退格键。</p>
            <p>19&gt;\b：匹配一个词的边界符，例如空格和换行符等等，当然匹配换行符时，表达式应该附加参数m。<br />
            例子：<br />
            var regx=/\bc./;<br />
            var rs=regx.exec(&#8220;Beijing is a beautiful city&#8221;);<br />
            结果：匹配成功，rs的值为：{ci}，注意c前边的空格不会匹配到结果中，即{ ci}是不正确的。</p>
            <p>20&gt;\B：代表一个非单词边界。<br />
            例子：<br />
            var regx=/\Bi./;<br />
            var rs=regx.exec(&#8220;Beijing is a beautiful city&#8221;);<br />
            结果：匹配成功，rs的值为：{ij}，即匹配了Beijing中的ij。</p>
            <p>21&gt;\cX，匹配一个控制字符。例如， \cM 匹配一个 Control-M 或 <br />
            回车符。 x 的值必须为 A-Z 或 a-z 之一。否则，将 c 视为一 <br />
            个原义的 &#8217;c&#8217; 字符。（实际的例子还需补充）</p>
            <p>21&gt;\d：匹配一个数字字符，等同于[0-9]。<br />
            例子：<br />
            var regx=/user\d/;<br />
            var rs=regx.exec(&#8220;user1&#8221;);<br />
            结果：匹配成功，rs的值为：{user1}</p>
            <p>22&gt;\D：匹配一个非数字字符，等同于[^0-9]。<br />
            例子：<br />
            var regx=/user\D/;<br />
            var rs=regx.exec(&#8220;userA&#8221;);<br />
            结果：匹配成功，rs的值为：{userA}</p>
            <p>23&gt;\f：匹配一个换页符。</p>
            <p>24&gt;\n：匹配一个换行符。因为是换行符，所以在表达式中要加入m参数。<br />
            例子：<br />
            var regx=/a\nbc/m;<br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var str=&#8220;a<br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; bc&#8221;;<br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var rs=regx.exec(str);<br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 结果：匹配成功，rs的值为：{ }，如果表达式为/a\n\rbc/，则不会被匹配，因此在一般的编辑器中一个&#8221;Enter&#8221;键代表着&#8220;回车换行&#8221;，而非&#8220;换行回车&#8221;，至少在textarea域中是这样的。&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br />
            25&gt;\r：匹配一个回车符</p>
            <p>26&gt;\s：匹配一个空格符，等同于[ \f\n\r\t\v\u00A0\u2028\u2029].<br />
            例子：<br />
            var regx=/\si/;<br />
            var rs=regx.exec(&#8220;Beijing is a city&#8221;);<br />
            结果：匹配成功，rs的值为：{ i}</p>
            <p>27&gt;\S：匹配一个非空格符，等同于[ ^\f\n\r\t\v\u00A0\u2028\u2029].<br />
            例子：<br />
            var regx=/\Si/;<br />
            var rs=regx.exec(&#8220;Beijing is a city&#8221;);<br />
            结果：匹配成功，rs的值为：{ei}</p>
            <p>28&gt;\t：匹配一个tab<br />
            例子：<br />
            var regx=/a\tb/;<br />
            var rs=regx.exec(&#8220;a bc&#8221;);<br />
            结果：匹配成功，rs的值为： {a&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; bc}</p>
            <p>29&gt;\v：匹配一个竖向的tab</p>
            <p>30&gt;\w：匹配一个数字、_或字母表字符，即[A-Za-z0-9_ ]。<br />
            例子：<br />
            var regx=/\w/;<br />
            var rs=regx.exec(&#8220;$25.23&#8221;);<br />
            结果：匹配成功，rs的值为：{2}</p>
            <p>31&gt;\W：匹配一个非数字、_或字母表字符，即[^A-Za-z0-9_ ]。<br />
            例子：<br />
            var regx=/\w/;<br />
            var rs=regx.exec(&#8220;$25.23&#8221;);<br />
            结果：匹配成功，rs的值为：{$}</p>
            <p>32&gt;\n：注意不是\n，这里n是一个正整数，表示匹配第n个()中的字符。<br />
            例子：<br />
            var regx=/user([,-])group\1role/;<br />
            var rs=regx.exec(&#8220;user-group-role&#8221;);<br />
            结果：匹配成功，rs的值为：{user-group-role,-}，同样对user,group,role的匹配也是成功的，但像user-group,role等就不对了。</p>
            <p>33&gt;\0：匹配一个NUL字符。</p>
            <p>34&gt;\xhh：匹配一个由两位16进制数字所表达的字符。</p>
            <p>35&gt;\uhhhh：匹配一个由四位16进制数字所表达的字符。</p>
            <p><br />
            3，表达式操作</p>
            <p>1）表达式操作，在这里是指和表达式相关的方法，我们将介绍六个方法。<br />
            2）表达式对象（RegExp）方法：</p>
            <p>1&gt;exec(str)，返回str中与表达式相匹配的第一个字符串，而且以数组的形式表现，当然如果表达式中含有捕捉用的小括号，则返回的数组中也可能含有()中的匹配字符串，例如：<br />
            var regx=/\d+/;<br />
            var rs=regx.exec(&#8220;3432ddf53&#8221;);<br />
            返回的rs值为：{3432}<br />
            var regx2=new RegExp(&#8220;ab(\d+)c&#8221;);<br />
            var rs2=regx2.exec(&#8220;ab234c44&#8221;);<br />
            返回的rs值为：{ab234c,234}<br />
            另外，如果有多个合适的匹配，则第一次执行exec返回一个第一个匹配，此时继续执行exec，则依次返回第二个第三个匹配。例如：<br />
            var regx=/user\d/g;<br />
            var rs=regx.exec(&#8220;ddduser1dsfuser2dd&#8221;);<br />
            var rs1=regx.exec(&#8220;ddduser1dsfuser2dd&#8221;);<br />
            则rs的值为{user1}，rs的值为{rs2}，当然注意regx中的g参数是必须的，否则无论exec执行多少次，都返回第一个匹配。后面还有相关内容涉及到对此想象的解释。</p>
            <p>2&gt;test(str)，判断字符串str是否匹配表达式，返回一个布尔值。例如：<br />
            var regx=/user\d+/g;<br />
            var flag=regx.test(&#8220;user12dd&#8221;);<br />
            flag的值为true。</p>
            <p>3）String对象方法</p>
            <p>1&gt;match(expr)，返回与expr相匹配的一个字符串数组，如果没有加参数g，则返回第一个匹配，加入参数g则返回所有的匹配<br />
            例子：<br />
            var regx=/user\d/g;<br />
            var str=&#8220;user13userddduser345&#8221;;<br />
            var rs=str.match(regx);<br />
            rs的值为：{user1,user3}</p>
            <p>2&gt;search(expr)，返回字符串中与expr相匹配的第一个匹配的index值。<br />
            例子：<br />
            var regx=/user\d/g;<br />
            var str=&#8220;user13userddduser345&#8221;;<br />
            var rs=str.search(regx);<br />
            rs的值为：0</p>
            <p>3&gt;replace(expr,str)，将字符串中匹配expr的部分替换为str。另外在replace方法中，str中可以含有一种变量符号$，格式为$n，代表匹配中被记住的第n的匹配字符串（注意小括号可以记忆匹配）。<br />
            例子：<br />
            var regx=/user\d/g;<br />
            var str=&#8220;user13userddduser345&#8221;;<br />
            var rs=str.replace(regx,&#8221;00&#8221;);<br />
            rs的值为：003userddd0045<br />
            例子2：<br />
            var regx=/u(se)r\d/g;<br />
            var str=&#8220;user13userddduser345&#8221;;<br />
            var rs=str.replace(regx,&#8221;$1&#8221;);<br />
            rs的值为：se3userdddse45<br />
            对于replace(expr,str)方法还要特别注意一点，如果expr是一个表达式对象则会进行全局替换（此时表达式必须附加参数g，否则也只是替换第一个匹配），如果expr是一个字符串对象，则只会替换第一个匹配的部分，例如：<br />
            var regx=&#8220;user&#8221;<br />
            var str=&#8220;user13userddduser345&#8221;;<br />
            var rs=str.replace(regx,&#8221;00&#8221;);<br />
            rs的值为： 0013userddduser345</p>
            <p>4&gt;split(expr)，将字符串以匹配expr的部分做分割，返回一个数组，而且表达式是否附加参数g都没有关系，结果是一样的。<br />
            例子：<br />
            var regx=/user\d/g;<br />
            var str=&#8220;user13userddduser345&#8221;;<br />
            var rs=str.split(regx);<br />
            rs的值为：{3userddd,45}</p>
            <p>4，表达式相关属性</p>
            <p>1）表达式相关属性，是指和表达式相关的属性，如下面的形式：<br />
            var regx=/myexpr/;<br />
            var rs=regx.exec(str);<br />
            其中，和表达式自身regx相关的属性有两个，和表达式匹配结果rs相关的属性有三个，下面将逐一介绍。<br />
            2）和表达式自身相关的两个属性：</p>
            <p>1&gt;lastIndex，返回开始下一个匹配的位置，注意必须是全局匹配（表达式中带有g参数）时，lastIndex才会有不断返回下一个匹配值，否则该值为总是返回第一个下一个匹配位置，例如：<br />
            var regx=/user\d/;<br />
            var rs=regx.exec(&#8220;sdsfuser1dfsfuser2&#8221;);<br />
            var lastIndex1=regx.lastIndex;<br />
            rs=regx.exec(&#8220;sdsfuser1dfsfuser2&#8221;);<br />
            var lastIndex2=regx.lastIndex;<br />
            rs=regx.exec(&#8220;sdsfuser1dfsfuser2&#8221;);<br />
            var lastIndex3=regx.lastIndex; <br />
            上面lastIndex1为9，第二个lastIndex2也为9，第三个也是9；如果regx=/user\d/g，则第一个为9，第二个为18，第三个为0。</p>
            <p>2&gt;source，返回表达式字符串自身。例如：<br />
            var regx=/user\d/;<br />
            var rs=regx.exec(&#8220;sdsfuser1dfsfuser2&#8221;);<br />
            var source=regx.source;<br />
            source的值为user\d<br />
            3）和匹配结果相关的三个属性：</p>
            <p>1&gt;index，返回当前匹配的位置。例如：<br />
            var regx=/user\d/;<br />
            var rs=regx.exec(&#8220;sdsfuser1dfsfuser2&#8221;);<br />
            var index1=rs.index;<br />
            rs=regx.exec(&#8220;sdsfuser1dfsfuser2&#8221;);<br />
            var index2=rs.index; <br />
            rs=regx.exec(&#8220;sdsfuser1dfsfuser2&#8221;);<br />
            var index3=rs.index; <br />
            index1为4，index2为4，index3为4，如果表达式加入参数g，则index1为4，index2为13，index3会报错（index为空或不是对象）。</p>
            <p>2&gt;input，用于匹配的字符串。例如：<br />
            var regx=/user\d/;<br />
            var rs=regx.exec(&#8220;sdsfuser1dfsfuser2&#8221;);<br />
            var input=rs.input;<br />
            input的值为sdsfuser1dfsfuser2。</p>
            <p>3&gt;[0]，返回匹配结果中的第一个匹配值，对于match而言可能返回一个多值的数字，则除了[0]外，还可以取[1]、[2]等等。例如：<br />
            var regx=/user\d/;<br />
            var rs=regx.exec(&#8220;sdsfuser1dfsfuser2&#8221;);<br />
            var value1=rs[0];<br />
            rs=regx.exec(&#8220;sdsfuser1dfsfuser2&#8221;);<br />
            var value2=rs[0]; <br />
            value1的值为user1,value2的值为user2</p>
            <p>5，实际应用</p>
            <p>1）实际应用一<br />
            描述：有一表单，其中有一个&#8220;用户名&#8221;input域<br />
            要求：汉字，而且不能少于2个汉字，不能多于4个汉字。<br />
            实现：<br />
            &lt;script&gt;<br />
            function checkForm(obj){<br />
            &nbsp;&nbsp;&nbsp;&nbsp; var username=obj.username.value;<br />
            &nbsp;&nbsp;&nbsp;&nbsp; var regx=/^[\u4e00-\u9fa5]{2,4}$/g<br />
            &nbsp;&nbsp;&nbsp;&nbsp; if(!regx.test(username)){<br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; alert(&#8220;Invalid username!&#8221;);<br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return false; <br />
            &nbsp;&nbsp;&nbsp;&nbsp; }<br />
            &nbsp;&nbsp;&nbsp;&nbsp; return true;<br />
            }<br />
            &lt;/script&gt;<br />
            &lt;form name=&#8220;myForm&#8221;onSubmit=&#8220;return checkForm(this)&#8221;&gt;<br />
            &nbsp;&nbsp;&nbsp; &lt;input type=&#8220;text&#8221; name=&#8220;username&#8221;/&gt;<br />
            &nbsp;&nbsp;&nbsp; &lt;input type=&#8220;submit&#8221; vlaue=&#8220;submit&#8221;/&gt;<br />
            &lt;/form&gt;<br />
            2）实际应用二<br />
            描述：给定一个含有html标记的字符串，要求将其中的html标记去掉。<br />
            实现：<br />
            &lt;script&gt;<br />
            function toPlainText(htmlStr){<br />
            &nbsp;&nbsp;&nbsp;&nbsp; var regx=/&lt;[^&gt;]*&gt;|&lt;\/[^&gt;]*&gt;/gm;<br />
            &nbsp;&nbsp;&nbsp;&nbsp; var str=htmlStr.replace(regx,"");<br />
            &nbsp;&nbsp;&nbsp;&nbsp; return str;<br />
            }<br />
            &lt;/script&gt;<br />
            &lt;form name=&#8220;myForm&#8221;&gt;<br />
            &nbsp;&nbsp;&nbsp; &lt;textarea id=&#8220;htmlInput&#8221;&gt;&lt;/textarea&gt;<br />
            &nbsp;&nbsp;&nbsp; &lt;input type=&#8220;button&#8221; value=&#8220;submit&#8221; onclick=&#8220;toPlainText(document.getElementById(&#8216;htmlInput&#8217;).value&#8221;/&gt;<br />
            &lt;/form&gt;</p>
            <p>三，小结</p>
            <p>1，Javascript正则表达式，我想在一般的程序员之中，使用者应该不是很多，因为我们处理的页面一般都不是很复杂，而复杂的逻辑一般我们都在后台处理完成了。但是目前趋势已经出现了扭转，富客户端已经被越来越多的人接受，而Javascript就是其中的关键技术，对于复杂的客户端逻辑而言，正则表达式的作用也是很关键的，同时它也是Javascript高手必须要掌握的重要技术之一。</p>
            <p>2，为了能够便于大家对前面讲述的内容有一个更为综合和深刻的认识，我将前面的一些关键点和容易犯糊涂的地方再系统总结一下，这部分很关键！<br />
            总结1：附件参数g的用法<br />
            表达式加上参数g之后，表明可以进行全局匹配，注意这里&#8220;可以&#8221;的含义。我们详细叙述：<br />
            1）对于表达式对象的exec方法，不加入g，则只返回第一个匹配，无论执行多少次均是如此，如果加入g，则第一次执行也返回第一个匹配，再执行返回第二个匹配，依次类推。例如<br />
            var regx=/user\d/;<br />
            var str=&#8220;user18dsdfuser2dsfsd&#8221;;<br />
            var rs=regx.exec(str);//此时rs的值为{user1}<br />
            var rs2=regx.exec(str);//此时rs的值依然为{user1}<br />
            如果regx=/user\d/g；则rs的值为{user1}，rs2的值为{user2}<br />
            通过这个例子说明：对于exec方法，表达式加入了g，并不是说执行exec方法就可以返回所有的匹配，而是说加入了g之后，我可以通过某种方式得到所有的匹配，这里的&#8220;方式&#8221;对于exec而言，就是依次执行这个方法即可。<br />
            2）对于表达式对象的test方法，加入g于不加上g没有什么区别。<br />
            3）对于String对象的match方法，不加入g，也只是返回第一个匹配，一直执行match方法也总是返回第一个匹配，加入g，则一次返回所有的匹配（注意这与表达式对象的exec方法不同，对于exec而言，表达式即使加上了g，也不会一次返回所有的匹配）。例如：<br />
            var regx=/user\d/;<br />
            var str=&#8220;user1sdfsffuser2dfsdf&#8221;;<br />
            var rs=str.match(regx);//此时rs的值为{user1}<br />
            var rs2=str.match(regx);//此时rs的值依然为{user1}<br />
            如果regx=/user\d/g，则rs的值为{user1,user2}，rs2的值也为{user1,user2}<br />
            4）对于String对象的replace方法，表达式不加入g，则只替换第一个匹配，如果加入g，则替换所有匹配。（开头的三道测试题能很好的说明这一点）<br />
            5）对于String对象的split方法，加上g与不加g是一样的，即：<br />
            var sep=/user\d/;<br />
            var array=&#8220;user1dfsfuser2dfsf&#8221;.split(sep);<br />
            则array的值为{dfsf, dfsf}<br />
            此时sep=/user\d/g，返回值是一样的。<br />
            6）对于String对象的search方法，加不加g也是一样的。<br />
            总结2：附加参数m的用法<br />
            附加参数m，表明可以进行多行匹配，但是这个只有当使用^和$模式时才会起作用，在其他的模式中，加不加入m都可以进行多行匹配（其实说多行的字符串也是一个普通字符串），我们举例说明这一点<br />
            1）使用^的例子<br />
            var regx=/^b./g;<br />
            var str=&#8220;bd76 dfsdf<br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; sdfsdfs dffs<br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; b76dsf sdfsdf&#8221;;<br />
            var rs=str.match(regx);<br />
            此时加入g和不加入g，都只返回第一个匹配{bd}，如果regx=/^b./gm，则返回所有的匹配{bd,b7}，注意如果regx=/^b./m，则也只返回第一个匹配。所以，加入m表明可以进行多行匹配，加入g表明可以进行全局匹配，综合到一起就是可以进行多行全局匹配<br />
            2）使用其他模式的例子，例如<br />
            var regx=/user\d/;<br />
            var str=&#8220;sdfsfsdfsdf<br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; sdfsuser3 dffs<br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; b76dsf user6&#8221;;<br />
            var rs=str.match(regx);<br />
            此时不加参数g，则返回{user3}，加入参数g返回{user3,user6}，加不加入m对此没有影响。<br />
            3）因此对于m我们要清楚它的使用，记住它只对^和$模式起作用，在这两种模式中，m的作用为：如果不加入m，则只能在第一行进行匹配，如果加入m则可以在所有的行进行匹配。我们再看一个^的例子<br />
            var regx=/^b./;<br />
            var str=&#8220;ret76 dfsdf<br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; bjfsdfs dffs<br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; b76dsf sdfsdf&#8221;;<br />
            var rs=str.match(regx);<br />
            此时rs的值为null，如果加入g，rs的值仍然为null，如果加入m，则rs的值为{bj}（也就是说，在第一行没有找到匹配，因为有参数m，所以可以继续去下面的行去找是否有匹配），如果m和g都加上，则返回{bj,b7}（只加m不加g说明，可以去多行进行匹配，但是找到一个匹配后就返回，加入g表明将多行中所有的匹配返回，当然对于match方法是如此，对于exec呢，则需要执行多次才能依次返回）<br />
            总结3：在HTML的textarea输入域中，按一个Enter键，对应的控制字符为&#8220;\r\n&#8221;，即&#8220;回车换行&#8221;，而不是&#8220;\n\r&#8221;，即&#8220;换行回车&#8221;，我们看一个前面我们举过的例子：<br />
            var regx=/a\r\nbc/;<br />
            var str=&#8220;a<br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; bc&#8221;;<br />
            var rs=regx.exec(str);<br />
            结果：匹配成功，rs的值为：{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }，如果表达式为/a\n\rbc/，则不会被匹配，因此在一般的编辑器中一个&#8221;Enter&#8221;键代表着&#8220;回车换行&#8221;，而非&#8220;换行回车&#8221;，至少在textarea域中是这样的。</p>
            <p>四，应用案例</p>
            <p>1，正则表达式使用场景：<br />
            1）登录场景，检查用户输入的用户名，要求：<br />
            字符长度在6到18之间<br />
            字符必须为字母、数字或者下划线的组合<br />
            2）购物场景，对于商品列表的描述（标签、条形码、单价）等有些用户可能会提出下面需求：<br />
            希望可以对商品列表的某一列描述进行字号的自定义，而且下次登录仍然保持用户的修改<br />
            2，下面看一下在上述两个场景中，正则表达式的使用方式和具体实现。</p>
            <p>1）登录场景部分正则表达式实现<br />
            <a href="http://wxunion.photo.hexun.com/26572976_d.html" target="_blank"><img style="border-left-color: #808080; border-bottom-color: #808080; border-top-color: #808080; border-right-color: #808080" border="1" hspace="0" alt="查看更多精彩图片" src="http://photo9.hexun.com/p/2007/0930/132864/b_F8732D184F104231E77201F93680D3A1.jpg" width="500" height="190" /></a></p>
            <p>2）购物场景部分正则表达式实现<br />
            1&gt;需求分析：用户希望可以对商品列表的某一列描述进行字号的自定义，而且下次登录仍然保持用户的修改</p>
            <p><a href="http://wxunion.photo.hexun.com/26573199_d.html" target="_blank"><img style="border-left-color: #808080; border-bottom-color: #808080; border-top-color: #808080; border-right-color: #808080" border="1" hspace="0" alt="查看更多精彩图片" src="http://photo9.hexun.com/p/2007/0930/132865/b_11B3570A3CB94EC6C44F588D21E6F0E4.jpg" width="500" height="275" /></a></p>
            <p>2&gt;程序设计</p>
            <p>&nbsp;</p>
            <p><a href="http://wxunion.photo.hexun.com/26573334_d.html" target="_blank"><img border="0" alt="查看更多精彩图片" src="http://photo9.hexun.com/p/2007/0930/132866/b_FFDCC763D2185C4864BE3D203F4B7073.jpg" /></a></p>
            <p>类图：<br />
            <a href="http://wxunion.photo.hexun.com/26573340_d.html" target="_blank"><img style="border-left-color: #808080; border-bottom-color: #808080; border-top-color: #808080; border-right-color: #808080" border="1" hspace="0" alt="查看更多精彩图片" src="http://photo9.hexun.com/p/2007/0930/132866/b_7DA5AC842608E3B2B3BA3EC515665059.jpg" width="500" height="245" /></a><br />
            <br />
            3&gt;代码实现<br />
            PageSetting类<br />
            <br />
            <br />
            <br />
            //验证email格式是否合法<br />
            function checkEmail(email)<br />
            {<br />
            &nbsp;&nbsp; var reEmail=/^[_\.0-9a-z-]+@([0-9a-z][0-9a-z-]+\.)+[a-z]{2,5}/;<br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (!(email.match(reEmail)&amp;&amp;email!=""))<br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {<br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return false;<br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; else {<br />
            &nbsp;&nbsp;&nbsp; return true;<br />
            &nbsp;&nbsp;<br />
            &nbsp;&nbsp; }<br />
            }</p>
            </div>
            </td>
        </tr>
    </tbody>
</table>
<img src ="http://www.blogjava.net/b47248054/aggbug/205560.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/b47248054/" target="_blank">sofot</a> 2008-06-03 14:49 <a href="http://www.blogjava.net/b47248054/articles/205560.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>奥运倒计时</title><link>http://www.blogjava.net/b47248054/articles/200688.html</link><dc:creator>sofot</dc:creator><author>sofot</author><pubDate>Thu, 15 May 2008 09:33:00 GMT</pubDate><guid>http://www.blogjava.net/b47248054/articles/200688.html</guid><wfw:comment>http://www.blogjava.net/b47248054/comments/200688.html</wfw:comment><comments>http://www.blogjava.net/b47248054/articles/200688.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/b47248054/comments/commentRss/200688.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/b47248054/services/trackbacks/200688.html</trackback:ping><description><![CDATA[&nbsp;&nbsp;&nbsp;&nbsp; 摘要: 服务器时间倒计时//格式化输出服务器时间function&nbsp;getSeverTime(){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;xmlHttp&nbsp;=&nbsp;false;//获取服务器时间try&nbsp;{xmlHttp&nbsp;=&nbsp;new&nbsp;Acti...&nbsp;&nbsp;<a href='http://www.blogjava.net/b47248054/articles/200688.html'>阅读全文</a><img src ="http://www.blogjava.net/b47248054/aggbug/200688.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/b47248054/" target="_blank">sofot</a> 2008-05-15 17:33 <a href="http://www.blogjava.net/b47248054/articles/200688.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>javascript+java截取图像，图像处理</title><link>http://www.blogjava.net/b47248054/articles/200685.html</link><dc:creator>sofot</dc:creator><author>sofot</author><pubDate>Thu, 15 May 2008 09:15:00 GMT</pubDate><guid>http://www.blogjava.net/b47248054/articles/200685.html</guid><wfw:comment>http://www.blogjava.net/b47248054/comments/200685.html</wfw:comment><comments>http://www.blogjava.net/b47248054/articles/200685.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/b47248054/comments/commentRss/200685.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/b47248054/services/trackbacks/200685.html</trackback:ping><description><![CDATA[&nbsp;&nbsp;&nbsp;&nbsp; 摘要: 很多网站都希望用户上传的头像不变形，同时又不希望由公司编辑来进行头像的处理；下面这个程序会让你眼前一亮；javascript+java实现用户上传头像并且可按照规定头像长宽比例截图；文件1：index.htm&nbsp; (上传文件页面）&lt;!DOCTYPE&nbsp;html&nbsp;PUBLIC&nbsp;"-//W3C//DTD&nbsp;XHTML&nbsp;1.0&nb...&nbsp;&nbsp;<a href='http://www.blogjava.net/b47248054/articles/200685.html'>阅读全文</a><img src ="http://www.blogjava.net/b47248054/aggbug/200685.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/b47248054/" target="_blank">sofot</a> 2008-05-15 17:15 <a href="http://www.blogjava.net/b47248054/articles/200685.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>DIV+CSS布局中的IE与FF兼容问题!</title><link>http://www.blogjava.net/b47248054/articles/190229.html</link><dc:creator>sofot</dc:creator><author>sofot</author><pubDate>Tue, 01 Apr 2008 15:22:00 GMT</pubDate><guid>http://www.blogjava.net/b47248054/articles/190229.html</guid><wfw:comment>http://www.blogjava.net/b47248054/comments/190229.html</wfw:comment><comments>http://www.blogjava.net/b47248054/articles/190229.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/b47248054/comments/commentRss/190229.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/b47248054/services/trackbacks/190229.html</trackback:ping><description><![CDATA[<p><font style="font-size: 16px" color="#ff0000"><strong>在ff测试div+css的过程中发现不少问题，主要原因是代码的不规范书写。</strong></font></p>
<p><font face="宋体"><strong>1、居中问题<br />
</strong>div里的内容，ie默认为居中，而ff默认为左对齐。<br />
使ff内容居中的方法是增加代码margin:auto;</font></p>
<p>&nbsp;</p>
<p><font face="宋体"><strong>2、高度问题</strong><br />
设有两横行div排列，上面的div设置高度(height)，如果div里的实际内容大于所设高度，在ff中会出现两个div重叠的现象；但在ie中， 下面的div会自动给上面的div让出空间。所以为避免出现层的重叠，高度一定要控制恰当，或者干脆不写高度，让他自动调节。<br />
或者设置：overflow:hidden</font></p>
<p>&nbsp;</p>
<p><font face="宋体"><strong>3、clear:both;<br />
</strong>拿footer为例，有时候如果上面使用 了float控制的n列的布局，那么在用ff浏览时footer很有可能不老实，到处乱动——因为他还在受到浮动（float）的控制。如果想让它老老实 实呆在页面下方，在footer的div中写入clear:both;就可以达到效果了！</font></p>
<p>&nbsp;</p>
<p><font face="宋体"><strong>4、浮动ie产生的双倍距离</strong><br />
</p>
<div style="border-right: #cccccc 1px solid; padding-right: 5px; border-top: #cccccc 1px solid; padding-left: 4px; font-size: 13px; padding-bottom: 4px; border-left: #cccccc 1px solid; width: 98%; word-break: break-all; padding-top: 4px; border-bottom: #cccccc 1px solid; background-color: #eeeeee"><img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top"  alt="" /><span style="color: #000000">#box{<br />
<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top"  alt="" />float:left;<br />
<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top"  alt="" />width:100px;<br />
<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top"  alt="" />margin:0&nbsp;0&nbsp;0&nbsp;100px;&nbsp;//这种情况之下IE会产生200px的距离<br />
<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top"  alt="" />display:inline;&nbsp;//使浮动忽略<br />
<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top"  alt="" />}</span></div>
<p></font><font face="宋体"><br />
<strong>5、重点讲解：display:block,inline两个元素 display(显示)</strong><br />
display:block; //可以为内嵌元素模拟为块元素<br />
display:inline; //实现同一行排列的的效果<br />
diplay:table; //for ff,模拟table的效果</font></p>
<p><font face="宋体">Display:block元素的特点是：<br />
总是在新行上开始；<br />
高度，行高以及顶和底边距都可控制；<br />
宽度缺省是它的容器的100%，除非设定一个宽度<br />
&lt;div&gt;, &lt;p&gt;, &lt;h1&gt;, &lt;form&gt;, &lt;ul&gt; 和 &lt;li&gt;是块元素的例子。</font></p>
<p><font face="宋体">display:inline就是将元素显示为行内元素.<br />
inline元素的特点是：<br />
和其他元素都在一行上；<br />
高，行高及顶和底边距不可改变；<br />
宽度就是它的文字或图片的宽度，不可改变。<br />
&lt;span&gt;, &lt;a&gt;, &lt;label&gt;, &lt;input&gt;, &lt;img&gt;, &lt;strong&gt; 和&lt;em&gt;是inline元素的例子。</font></p>
<p><font face="宋体">例子：</p>
<div style="border-right: #cccccc 1px solid; padding-right: 5px; border-top: #cccccc 1px solid; padding-left: 4px; font-size: 13px; padding-bottom: 4px; border-left: #cccccc 1px solid; width: 98%; word-break: break-all; padding-top: 4px; border-bottom: #cccccc 1px solid; background-color: #eeeeee"><img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top"  alt="" /><span style="color: #0000ff">&lt;</span><span style="color: #800000">html&nbsp;</span><span style="color: #ff0000">xmlns</span><span style="color: #0000ff">="http://www.w3.org/1999/xhtml"</span><span style="color: #0000ff">&gt;</span><span style="color: #000000"><br />
<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top"  alt="" /></span><span style="color: #0000ff">&lt;</span><span style="color: #800000">head</span><span style="color: #0000ff">&gt;</span><span style="color: #000000"><br />
<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top"  alt="" /></span><span style="color: #0000ff">&lt;</span><span style="color: #800000">meta&nbsp;</span><span style="color: #ff0000">http-equiv</span><span style="color: #0000ff">="Content-Type"</span><span style="color: #ff0000">&nbsp;content</span><span style="color: #0000ff">="text/html;&nbsp;charset=gb2312"</span><span style="color: #ff0000">&nbsp;</span><span style="color: #0000ff">/&gt;</span><span style="color: #000000"><br />
<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top"  alt="" /></span><span style="color: #0000ff">&lt;</span><span style="color: #800000">title</span><span style="color: #0000ff">&gt;</span><span style="color: #000000">无标题文档</span><span style="color: #0000ff">&lt;/</span><span style="color: #800000">title</span><span style="color: #0000ff">&gt;</span><span style="color: #000000"><br />
<img id="Codehighlighter1_166_579_Open_Image" onclick="this.style.display='none'; Codehighlighter1_166_579_Open_Text.style.display='none'; Codehighlighter1_166_579_Closed_Image.style.display='inline'; Codehighlighter1_166_579_Closed_Text.style.display='inline';" src="http://www.blogjava.net/images/OutliningIndicators/ExpandedBlockStart.gif" align="top"  alt="" /><img id="Codehighlighter1_166_579_Closed_Image" style="display: none" onclick="this.style.display='none'; Codehighlighter1_166_579_Closed_Text.style.display='none'; Codehighlighter1_166_579_Open_Image.style.display='inline'; Codehighlighter1_166_579_Open_Text.style.display='inline';" src="http://www.blogjava.net/images/OutliningIndicators/ContractedBlock.gif" align="top"  alt="" /></span><span style="color: #0000ff">&lt;</span><span style="color: #800000">style&nbsp;</span><span style="color: #ff0000">type</span><span style="color: #0000ff">="text/css"</span><span style="color: #0000ff">&gt;</span><span id="Codehighlighter1_166_579_Closed_Text" style="border-right: #808080 1px solid; border-top: #808080 1px solid; display: none; border-left: #808080 1px solid; border-bottom: #808080 1px solid; background-color: #ffffff"><img src="http://www.blogjava.net/Images/dot.gif"  alt="" /></span><span id="Codehighlighter1_166_579_Open_Text"><span style="color: #800000; background-color: #f5f5f5"><br />
<img id="Codehighlighter1_174_244_Open_Image" onclick="this.style.display='none'; Codehighlighter1_174_244_Open_Text.style.display='none'; Codehighlighter1_174_244_Closed_Image.style.display='inline'; Codehighlighter1_174_244_Closed_Text.style.display='inline';" src="http://www.blogjava.net/images/OutliningIndicators/ExpandedSubBlockStart.gif" align="top"  alt="" /><img id="Codehighlighter1_174_244_Closed_Image" style="display: none" onclick="this.style.display='none'; Codehighlighter1_174_244_Closed_Text.style.display='none'; Codehighlighter1_174_244_Open_Image.style.display='inline'; Codehighlighter1_174_244_Open_Text.style.display='inline';" src="http://www.blogjava.net/images/OutliningIndicators/ContractedSubBlock.gif" align="top"  alt="" />#inline</span><span id="Codehighlighter1_174_244_Closed_Text" style="border-right: #808080 1px solid; border-top: #808080 1px solid; display: none; border-left: #808080 1px solid; border-bottom: #808080 1px solid; background-color: #ffffff">{<img src="http://www.blogjava.net/Images/dot.gif"  alt="" />}</span><span id="Codehighlighter1_174_244_Open_Text"><span style="color: #000000; background-color: #f5f5f5">{</span><span style="color: #ff0000; background-color: #f5f5f5">width</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5">400px</span><span style="color: #000000; background-color: #f5f5f5">;</span><span style="color: #ff0000; background-color: #f5f5f5">&nbsp;height</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5">40px</span><span style="color: #000000; background-color: #f5f5f5">;</span><span style="color: #ff0000; background-color: #f5f5f5">background</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5">#99CCCC</span><span style="color: #000000; background-color: #f5f5f5">;</span><span style="color: #ff0000; background-color: #f5f5f5">padding</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5">15px&nbsp;0px&nbsp;0px&nbsp;15px</span><span style="color: #000000; background-color: #f5f5f5">}</span></span><span style="color: #800000; background-color: #f5f5f5"><br />
<img id="Codehighlighter1_256_286_Open_Image" onclick="this.style.display='none'; Codehighlighter1_256_286_Open_Text.style.display='none'; Codehighlighter1_256_286_Closed_Image.style.display='inline'; Codehighlighter1_256_286_Closed_Text.style.display='inline';" src="http://www.blogjava.net/images/OutliningIndicators/ExpandedSubBlockStart.gif" align="top"  alt="" /><img id="Codehighlighter1_256_286_Closed_Image" style="display: none" onclick="this.style.display='none'; Codehighlighter1_256_286_Closed_Text.style.display='none'; Codehighlighter1_256_286_Open_Image.style.display='inline'; Codehighlighter1_256_286_Open_Text.style.display='inline';" src="http://www.blogjava.net/images/OutliningIndicators/ContractedSubBlock.gif" align="top"  alt="" />#inline&nbsp;ul</span><span id="Codehighlighter1_256_286_Closed_Text" style="border-right: #808080 1px solid; border-top: #808080 1px solid; display: none; border-left: #808080 1px solid; border-bottom: #808080 1px solid; background-color: #ffffff">{<img src="http://www.blogjava.net/Images/dot.gif"  alt="" />}</span><span id="Codehighlighter1_256_286_Open_Text"><span style="color: #000000; background-color: #f5f5f5">{</span><span style="color: #ff0000; background-color: #f5f5f5">&nbsp;margin</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5">0px</span><span style="color: #000000; background-color: #f5f5f5">;</span><span style="color: #ff0000; background-color: #f5f5f5">&nbsp;list-style</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5">none</span><span style="color: #000000; background-color: #f5f5f5">;</span><span style="color: #000000; background-color: #f5f5f5">}</span></span><span style="color: #800000; background-color: #f5f5f5"><br />
<img id="Codehighlighter1_301_348_Open_Image" onclick="this.style.display='none'; Codehighlighter1_301_348_Open_Text.style.display='none'; Codehighlighter1_301_348_Closed_Image.style.display='inline'; Codehighlighter1_301_348_Closed_Text.style.display='inline';" src="http://www.blogjava.net/images/OutliningIndicators/ExpandedSubBlockStart.gif" align="top"  alt="" /><img id="Codehighlighter1_301_348_Closed_Image" style="display: none" onclick="this.style.display='none'; Codehighlighter1_301_348_Closed_Text.style.display='none'; Codehighlighter1_301_348_Open_Image.style.display='inline'; Codehighlighter1_301_348_Open_Text.style.display='inline';" src="http://www.blogjava.net/images/OutliningIndicators/ContractedSubBlock.gif" align="top"  alt="" />#inline&nbsp;ul&nbsp;li</span><span id="Codehighlighter1_301_348_Closed_Text" style="border-right: #808080 1px solid; border-top: #808080 1px solid; display: none; border-left: #808080 1px solid; border-bottom: #808080 1px solid; background-color: #ffffff">{<img src="http://www.blogjava.net/Images/dot.gif"  alt="" />}</span><span id="Codehighlighter1_301_348_Open_Text"><span style="color: #000000; background-color: #f5f5f5">{</span><span style="color: #ff0000; background-color: #f5f5f5">display</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5">inline</span><span style="color: #000000; background-color: #f5f5f5">;</span><span style="color: #ff0000; background-color: #f5f5f5">&nbsp;font-size</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5">12px</span><span style="color: #000000; background-color: #f5f5f5">;</span><span style="color: #ff0000; background-color: #f5f5f5">margin-left</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5">5px</span><span style="color: #000000; background-color: #f5f5f5">}</span></span><span style="color: #800000; background-color: #f5f5f5"><br />
<img id="Codehighlighter1_356_426_Open_Image" onclick="this.style.display='none'; Codehighlighter1_356_426_Open_Text.style.display='none'; Codehighlighter1_356_426_Closed_Image.style.display='inline'; Codehighlighter1_356_426_Closed_Text.style.display='inline';" src="http://www.blogjava.net/images/OutliningIndicators/ExpandedSubBlockStart.gif" align="top"  alt="" /><img id="Codehighlighter1_356_426_Closed_Image" style="display: none" onclick="this.style.display='none'; Codehighlighter1_356_426_Closed_Text.style.display='none'; Codehighlighter1_356_426_Open_Image.style.display='inline'; Codehighlighter1_356_426_Open_Text.style.display='inline';" src="http://www.blogjava.net/images/OutliningIndicators/ContractedSubBlock.gif" align="top"  alt="" />#block</span><span id="Codehighlighter1_356_426_Closed_Text" style="border-right: #808080 1px solid; border-top: #808080 1px solid; display: none; border-left: #808080 1px solid; border-bottom: #808080 1px solid; background-color: #ffffff">{<img src="http://www.blogjava.net/Images/dot.gif"  alt="" />}</span><span id="Codehighlighter1_356_426_Open_Text"><span style="color: #000000; background-color: #f5f5f5">{</span><span style="color: #ff0000; background-color: #f5f5f5">width</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5">400px</span><span style="color: #000000; background-color: #f5f5f5">;</span><span style="color: #ff0000; background-color: #f5f5f5">&nbsp;height</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5">40px</span><span style="color: #000000; background-color: #f5f5f5">;</span><span style="color: #ff0000; background-color: #f5f5f5">background</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5">#FFCC99</span><span style="color: #000000; background-color: #f5f5f5">;</span><span style="color: #ff0000; background-color: #f5f5f5">padding</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5">15px&nbsp;0px&nbsp;0px&nbsp;15px</span><span style="color: #000000; background-color: #f5f5f5">}</span></span><span style="color: #800000; background-color: #f5f5f5"><br />
<img id="Codehighlighter1_437_467_Open_Image" onclick="this.style.display='none'; Codehighlighter1_437_467_Open_Text.style.display='none'; Codehighlighter1_437_467_Closed_Image.style.display='inline'; Codehighlighter1_437_467_Closed_Text.style.display='inline';" src="http://www.blogjava.net/images/OutliningIndicators/ExpandedSubBlockStart.gif" align="top"  alt="" /><img id="Codehighlighter1_437_467_Closed_Image" style="display: none" onclick="this.style.display='none'; Codehighlighter1_437_467_Closed_Text.style.display='none'; Codehighlighter1_437_467_Open_Image.style.display='inline'; Codehighlighter1_437_467_Open_Text.style.display='inline';" src="http://www.blogjava.net/images/OutliningIndicators/ContractedSubBlock.gif" align="top"  alt="" />#block&nbsp;ul</span><span id="Codehighlighter1_437_467_Closed_Text" style="border-right: #808080 1px solid; border-top: #808080 1px solid; display: none; border-left: #808080 1px solid; border-bottom: #808080 1px solid; background-color: #ffffff">{<img src="http://www.blogjava.net/Images/dot.gif"  alt="" />}</span><span id="Codehighlighter1_437_467_Open_Text"><span style="color: #000000; background-color: #f5f5f5">{</span><span style="color: #ff0000; background-color: #f5f5f5">&nbsp;margin</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5">0px</span><span style="color: #000000; background-color: #f5f5f5">;</span><span style="color: #ff0000; background-color: #f5f5f5">&nbsp;list-style</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5">none</span><span style="color: #000000; background-color: #f5f5f5">;</span><span style="color: #000000; background-color: #f5f5f5">}</span></span><span style="color: #800000; background-color: #f5f5f5"><br />
<img id="Codehighlighter1_481_523_Open_Image" onclick="this.style.display='none'; Codehighlighter1_481_523_Open_Text.style.display='none'; Codehighlighter1_481_523_Closed_Image.style.display='inline'; Codehighlighter1_481_523_Closed_Text.style.display='inline';" src="http://www.blogjava.net/images/OutliningIndicators/ExpandedSubBlockStart.gif" align="top"  alt="" /><img id="Codehighlighter1_481_523_Closed_Image" style="display: none" onclick="this.style.display='none'; Codehighlighter1_481_523_Closed_Text.style.display='none'; Codehighlighter1_481_523_Open_Image.style.display='inline'; Codehighlighter1_481_523_Open_Text.style.display='inline';" src="http://www.blogjava.net/images/OutliningIndicators/ContractedSubBlock.gif" align="top"  alt="" />#block&nbsp;ul&nbsp;li</span><span id="Codehighlighter1_481_523_Closed_Text" style="border-right: #808080 1px solid; border-top: #808080 1px solid; display: none; border-left: #808080 1px solid; border-bottom: #808080 1px solid; background-color: #ffffff">{<img src="http://www.blogjava.net/Images/dot.gif"  alt="" />}</span><span id="Codehighlighter1_481_523_Open_Text"><span style="color: #000000; background-color: #f5f5f5">{</span><span style="color: #ff0000; background-color: #f5f5f5">display</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5">block</span><span style="color: #000000; background-color: #f5f5f5">;</span><span style="color: #ff0000; background-color: #f5f5f5">&nbsp;font-size</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5">12px</span><span style="color: #000000; background-color: #f5f5f5">;</span><span style="color: #ff0000; background-color: #f5f5f5">height</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5">20px</span><span style="color: #000000; background-color: #f5f5f5">}</span></span><span style="color: #800000; background-color: #f5f5f5"><br />
<img id="Codehighlighter1_536_578_Open_Image" onclick="this.style.display='none'; Codehighlighter1_536_578_Open_Text.style.display='none'; Codehighlighter1_536_578_Closed_Image.style.display='inline'; Codehighlighter1_536_578_Closed_Text.style.display='inline';" src="http://www.blogjava.net/images/OutliningIndicators/ExpandedSubBlockStart.gif" align="top"  alt="" /><img id="Codehighlighter1_536_578_Closed_Image" style="display: none" onclick="this.style.display='none'; Codehighlighter1_536_578_Closed_Text.style.display='none'; Codehighlighter1_536_578_Open_Image.style.display='inline'; Codehighlighter1_536_578_Open_Text.style.display='inline';" src="http://www.blogjava.net/images/OutliningIndicators/ContractedSubBlock.gif" align="top"  alt="" />#div_inline</span><span id="Codehighlighter1_536_578_Closed_Text" style="border-right: #808080 1px solid; border-top: #808080 1px solid; display: none; border-left: #808080 1px solid; border-bottom: #808080 1px solid; background-color: #ffffff">{<img src="http://www.blogjava.net/Images/dot.gif"  alt="" />}</span><span id="Codehighlighter1_536_578_Open_Text"><span style="color: #000000; background-color: #f5f5f5">{</span><span style="color: #ff0000; background-color: #f5f5f5">&nbsp;width</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5">800px</span><span style="color: #000000; background-color: #f5f5f5">;</span><span style="color: #ff0000; background-color: #f5f5f5">display</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5">inline</span><span style="color: #000000; background-color: #f5f5f5">;</span><span style="color: #ff0000; background-color: #f5f5f5">height</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5">120px</span><span style="color: #000000; background-color: #f5f5f5">;</span><span style="color: #000000; background-color: #f5f5f5">}</span></span><span style="color: #800000; background-color: #f5f5f5"><br />
<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top"  alt="" /></span></span><span style="color: #0000ff">&lt;/</span><span style="color: #800000">style</span><span style="color: #0000ff">&gt;</span><span style="color: #000000"><br />
<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top"  alt="" /></span><span style="color: #0000ff">&lt;/</span><span style="color: #800000">head</span><span style="color: #0000ff">&gt;</span><span style="color: #000000"><br />
<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top"  alt="" /></span><span style="color: #0000ff">&lt;</span><span style="color: #800000">body</span><span style="color: #0000ff">&gt;</span><span style="color: #000000"><br />
<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top"  alt="" /></span><span style="color: #0000ff">&lt;</span><span style="color: #800000">div&nbsp;</span><span style="color: #ff0000">id</span><span style="color: #0000ff">="inline"</span><span style="color: #0000ff">&gt;</span><span style="color: #000000"><br />
<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top"  alt="" /></span><span style="color: #0000ff">&lt;</span><span style="color: #800000">ul</span><span style="color: #0000ff">&gt;</span><span style="color: #000000"><br />
<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top"  alt="" /></span><span style="color: #0000ff">&lt;</span><span style="color: #800000">li</span><span style="color: #0000ff">&gt;</span><span style="color: #000000">天天招生网<br />
<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top"  alt="" /></span><span style="color: #0000ff">&lt;</span><span style="color: #800000">li</span><span style="color: #0000ff">&gt;</span><span style="color: #000000">心血管网<br />
<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top"  alt="" /></span><span style="color: #0000ff">&lt;</span><span style="color: #800000">li</span><span style="color: #0000ff">&gt;</span><span style="color: #000000">高血压网<br />
<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top"  alt="" /></span><span style="color: #0000ff">&lt;</span><span style="color: #800000">li</span><span style="color: #0000ff">&gt;</span><span style="color: #000000">先心病网<br />
<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top"  alt="" /></span><span style="color: #0000ff">&lt;/</span><span style="color: #800000">ul</span><span style="color: #0000ff">&gt;</span><span style="color: #000000"><br />
<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top"  alt="" /></span><span style="color: #0000ff">&lt;/</span><span style="color: #800000">div</span><span style="color: #0000ff">&gt;</span><span style="color: #000000"><br />
<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top"  alt="" /></span><span style="color: #0000ff">&lt;</span><span style="color: #800000">p</span><span style="color: #0000ff">&gt;</span><span style="color: #000000"><br />
<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top"  alt="" /></span><span style="color: #0000ff">&lt;</span><span style="color: #800000">div&nbsp;</span><span style="color: #ff0000">id</span><span style="color: #0000ff">="block"</span><span style="color: #0000ff">&gt;</span><span style="color: #000000"><br />
<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top"  alt="" /></span><span style="color: #0000ff">&lt;</span><span style="color: #800000">ul</span><span style="color: #0000ff">&gt;</span><span style="color: #000000"><br />
<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top"  alt="" /></span><span style="color: #0000ff">&lt;</span><span style="color: #800000">li</span><span style="color: #0000ff">&gt;</span><span style="color: #000000">天天招生网</span><span style="color: #0000ff">&lt;/</span><span style="color: #800000">li</span><span style="color: #0000ff">&gt;</span><span style="color: #000000"><br />
<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top"  alt="" /></span><span style="color: #0000ff">&lt;</span><span style="color: #800000">li</span><span style="color: #0000ff">&gt;</span><span style="color: #000000">心血管网</span><span style="color: #0000ff">&lt;/</span><span style="color: #800000">li</span><span style="color: #0000ff">&gt;</span><span style="color: #000000"><br />
<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top"  alt="" /></span><span style="color: #0000ff">&lt;</span><span style="color: #800000">li</span><span style="color: #0000ff">&gt;</span><span style="color: #000000">高血压网</span><span style="color: #0000ff">&lt;/</span><span style="color: #800000">li</span><span style="color: #0000ff">&gt;</span><span style="color: #000000"><br />
<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top"  alt="" /></span><span style="color: #0000ff">&lt;</span><span style="color: #800000">li</span><span style="color: #0000ff">&gt;</span><span style="color: #000000">先心病网</span><span style="color: #0000ff">&lt;/</span><span style="color: #800000">li</span><span style="color: #0000ff">&gt;</span><span style="color: #000000"><br />
<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top"  alt="" /></span><span style="color: #0000ff">&lt;/</span><span style="color: #800000">ul</span><span style="color: #0000ff">&gt;</span><span style="color: #000000"><br />
<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top"  alt="" /></span><span style="color: #0000ff">&lt;/</span><span style="color: #800000">div</span><span style="color: #0000ff">&gt;</span><span style="color: #000000"><br />
<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top"  alt="" /></span><span style="color: #0000ff">&lt;/</span><span style="color: #800000">p</span><span style="color: #0000ff">&gt;</span><span style="color: #000000"><br />
<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top"  alt="" /></span><span style="color: #0000ff">&lt;/</span><span style="color: #800000">body</span><span style="color: #0000ff">&gt;&lt;/</span><span style="color: #800000">html</span><span style="color: #0000ff">&gt;</span></div>
<p></font><font face="宋体"><br />
<strong>6、IE与FF宽度和高度的问题</strong><br />
min -width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。整体最窄770px，最宽1024px，也就 是说窗口小于770xp就出底部滚动条，如果大于1024px自动屏幕居中。IE不认得min-这个定义，但实际上它把正常的width和height当 作有min的情况来使。这样，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根 本等于没有设置宽度和高度。<br />
CSS这样设计：</p>
<div style="border-right: #cccccc 1px solid; padding-right: 5px; border-top: #cccccc 1px solid; padding-left: 4px; font-size: 13px; padding-bottom: 4px; border-left: #cccccc 1px solid; width: 98%; word-break: break-all; padding-top: 4px; border-bottom: #cccccc 1px solid; background-color: #eeeeee"><img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top"  alt="" /><span style="color: #000000">#container{<br />
<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top"  alt="" />min-width:&nbsp;600px;<br />
<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top"  alt="" />width:expression(document.body.clientWidth&nbsp;</span><span style="color: #0000ff">&lt;</span><span style="color: #800000">&nbsp;600</span><span style="color: #ff0000">?&nbsp;"600px":&nbsp;"auto"&nbsp;);<br />
<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top"  alt="" />}</span></div>
<p></font><font face="宋体">第一个min-width是正常的；但第2行的width使用了Javascrīpt，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascrīpt的判断来实现最小宽度。</font></p>
<p><font face="宋体">同样的办法也可以为IE实现最大宽度：</font><font face="宋体"></p>
<div style="border-right: #cccccc 1px solid; padding-right: 5px; border-top: #cccccc 1px solid; padding-left: 4px; font-size: 13px; padding-bottom: 4px; border-left: #cccccc 1px solid; width: 98%; word-break: break-all; padding-top: 4px; border-bottom: #cccccc 1px solid; background-color: #eeeeee"><img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top"  alt="" /><span style="color: #000000">#container<br />
<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top"  alt="" />{<br />
<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top"  alt="" />min-width:&nbsp;600px;<br />
<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top"  alt="" />max-width:&nbsp;1200px;<br />
<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top"  alt="" />width:expression(document.body.clientWidth&nbsp;</span><span style="color: #0000ff">&lt;</span><span style="color: #800000">&nbsp;600</span><span style="color: #ff0000">?&nbsp;"600px"&nbsp;:&nbsp;document.body.clientWidth&nbsp;</span><span style="color: #0000ff">&gt;</span><span style="color: #000000">&nbsp;1200?&nbsp;&#8221;1200px&#8220;&nbsp;:&nbsp;&#8221;auto";<br />
<img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top"  alt="" />}</span></div>
<p><br />
7、FF: 支持 !important, IE 则忽略,<br />
可用 !important （例：height:30px!important; height:26px;）为 FF 特别设置样式<br />
div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行<br />
cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以<br />
FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行（背景图片需要设置 float: left ）。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格<br />
在FF和IE中的BOX模型解释不一致导致相差2px解决方法：<br />
div{margin:30px!important;margin:28px;}</font></p>
<p>注意这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：</p>
<p>div css xhtml xml Example Source Code Example Source Code [www.52css.com]<br />
div{maring:30px;margin:28px}</p>
<p>重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;</p>
<br />
在Firefox/Mozilla 浏览器中，对象的实际宽度= (margin-left) + (border-left-width) + (padding- left) + width + (padding-right) + (border-right-width) + (margin-right)；而在IE/Opera浏览器中，对象的实际宽度 = (margin-left) + width + (margin-right)。
<img src ="http://www.blogjava.net/b47248054/aggbug/190229.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/b47248054/" target="_blank">sofot</a> 2008-04-01 23:22 <a href="http://www.blogjava.net/b47248054/articles/190229.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>FireFox与IE开发上的一些区别(转)</title><link>http://www.blogjava.net/b47248054/articles/188504.html</link><dc:creator>sofot</dc:creator><author>sofot</author><pubDate>Tue, 25 Mar 2008 07:56:00 GMT</pubDate><guid>http://www.blogjava.net/b47248054/articles/188504.html</guid><wfw:comment>http://www.blogjava.net/b47248054/comments/188504.html</wfw:comment><comments>http://www.blogjava.net/b47248054/articles/188504.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/b47248054/comments/commentRss/188504.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/b47248054/services/trackbacks/188504.html</trackback:ping><description><![CDATA[&nbsp;文章原出处:http://blog.csdn.net/Wgf2006/archive/2007/12/20/1956538.aspx<br />
<strong>&nbsp;&nbsp; 1.&nbsp; window.event</strong><br />
<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; * IE：有window.event对象<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; * FF：没有window.event对象。可以通过给函数的参数传递event对象。如onmousemove=doMouseMove(event)<br />
<br />
<span style="font-weight: bold">&nbsp;&nbsp; 2. 鼠标当前坐标</span><br />
<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; * IE：event.x和event.y。<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; * FF：event.pageX和event.pageY。<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; * 通用：两者都有event.clientX和event.clientY属性。<br />
<br style="font-weight: bold" />
<span style="font-weight: bold">&nbsp;&nbsp; 3. 鼠标当前坐标(加上滚动条滚过的距离)</span><br />
<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; * IE：event.offsetX和event.offsetY。<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; * FF：event.layerX和event.layerY。<br />
<br />
<span style="font-weight: bold">&nbsp;&nbsp; 4. 标签的x和y的坐标位置：style.posLeft 和 style.posTop</span><br />
<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; * IE：有。<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; * FF：没有。<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; * 通用：object.offsetLeft 和 object.offsetTop。<br />
<br />
<span style="font-weight: bold">&nbsp;&nbsp; 5. 窗体的高度和宽度</span><br />
<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; * IE：document.body.offsetWidth和document.body.offsetHeight。注意：此时页面一定要有body标签。<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; * FF：window.innerWidth和window.innerHegiht，以及document.documentElement.clientWidth和document.documentElement.clientHeight。<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; * 通用：document.body.clientWidth和document.body.clientHeight。<br />
<br />
<span style="font-weight: bold">&nbsp;&nbsp; 6. 添加事件</span><br />
<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; * IE：element.attachEvent("onclick", func);。<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; * FF：element.addEventListener("click", func, true)。<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; * 通用：element.onclick=func。虽然都可以使用onclick事件，但是onclick和上面两种方法的效果是不一样的，onclick 只有执行一个过程，而attachEvent和addEventListener执行的是一个过程列表，也就是多个过程。例如： element.attachEvent("onclick", func1);element.attachEvent("onclick", func2)这样func1和func2都会被执行。<br />
<br />
<span style="font-weight: bold">&nbsp;&nbsp; 7. 标签的自定义属性</span><br />
<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; * IE：如果给标签div1定义了一个属性value，可以div1.value和div1["value"]取得该值。<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; * FF：不能用div1.value和div1["value"]取。<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; * 通用：div1.getAttribute("value")。<br />
<br />
<span style="font-weight: bold">&nbsp;&nbsp; 8. 父节点、子节点和删除节点</span><br />
<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; * IE：parentElement、parement.children，element.romoveNode(true)。<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; * FF：parentNode、parentNode.childNodes，node.parentNode.removeChild(node)。<br />
<br />
<span style="font-weight: bold">&nbsp;&nbsp; 9. 画图</span><br />
<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; * IE：VML。<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; * FF：SVG。<br />
<br />
<span style="font-weight: bold">&nbsp; 10. CSS：透明</span><br />
<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; * IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; * FF：opacity:0.6。<br />
<br style="font-weight: bold" />
<span style="font-weight: bold">&nbsp; 11. CSS：圆角</span><br />
<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; * IE：不支持圆角。<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; * 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;。<br />
<br />
<span style="font-weight: bold">&nbsp; 12. CSS：双线凹凸边框</span><br />
<br />
<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; * IE：border:2px outset;。<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; * 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;。<br />
<br />
<span style="font-weight: bold">&nbsp; 13. 其它（待整理）</span><br />
　　FireFox: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行<br />
<br />
　　FireFox: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中<br />
<br />
　　FireFox: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width<br />
<br />
　　FireFox: 支持 !important, IE 则忽略, 可用 !important 为　FireFox 特别设置样式<br />
<br />
　　div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行<br />
<br />
　　cursor: pointer 可以同时在 IE　FireFox 中显示游标手指状， hand 仅 IE 可以<br />
<br />
　　FireFox: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格<br />
<br />
　　XHTML+CSS兼容性解决方案小集<br />
　　使用XHTML＋CSS构架好处不少，但也确实存在一些问题，不论是因为使用不熟练还是思路不清晰，我就先把一些我遇到的问题写在下面:<br />
　　1.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：<br />
　　div{margin:30px!important;margin:28px;}注意这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：<br />
　　div{maring:30px;margin:28px}重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;<br />
[url=http://bbs.itokit.com/][color=white]http://bbs.itokit.com/[/color][/url][color=white]&nbsp; 专业的web开发交流论坛[/color]<br />
　　2.IE5 和IE6的BOX解释不一致IE5下div{width:300px;margin:0 10px 0 10px;}div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px，而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时可以做如下修改<br />
　　div{width:300px!important;width　/**/:340px;margin:0　10px　0　10px}<br />
<br />
　　3.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义<br />
　　ul{margin:0;padding:0;}就能解决大部分问题<br />
<br />
　　4.关于脚本，在xhtml1.1中不支持language属性，只需要把代码改为<br />
　　&lt;script　type=&#8221;text/javascript&#8221;&gt;<br />
　　FireFox: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行<br />
　　IE怎么不行? .div{width:100px;margin:0 auto;}一样居中<br />
　　FireFox: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width<br />
　　这个是ie对css盒模型解释有问题造成的,只能迁就它网页教学网<br />
　　FireFox: 支持 !important, IE 则忽略, 可用 !important 为　FireFox 特别设置样式<br />
　　IE7 一样兼容 !important 了<br />
　　cursor: pointer 可以同时在 IE　FireFox 中显示游标手指状， hand 仅 IE 可以<br />
　　pointer是标准的写法,hand是ie6之前版本自行定义的<br />
<br />
　　补充:<br />
　　ie6有margin双倍外补丁bug,需要做css .hack<br />
　　firefox更符合标准,在浮动和清除浮动上需要特别注意,而ie容错性比较好<br />
　　ie中height小于一定值(可能是18px)时,可能会在页面上体现不出来,需要overflow:hidden;而firefox可以完全体现height;<br />
　　装好ie6 ie7 ff2大致写个一两个页面就知道大概的不同了,其实不难<br />
　　屏蔽IE浏览器（也就是IE下不显示）<br />
　　*:lang(zh) select {font:12px　!important;} /*FF的专用*/<br />
　　select:empty {font:12px　!important;} /*safari可见*/<br />
　　这里select是选择符，根据情况更换。第二句是MAC上safari浏览器独有的。<br />
<br />
　　仅IE7识别<br />
　　*+html　{&#8230;}<br />
　　当面临需要只针对IE7做样式的时候就可以采用这个HACK。<br />
　　IE6及IE6以下识别<br />
　　* html　{&#8230;}<br />
　　这个地方要特别注意很多地主都写了是IE6的HACK其实IE5.x同样可以识别这个HACK。其它浏览器不识别。<br />
　　html/**/ &gt;body　select {&#8230;&#8230;}网页教学网<br />
　　这句与上一句的作用相同。<br />
　　仅IE6不识别<br />
　　select { display /*IE6不识别*/:none;}<br />
　　这里主要是通过CSS注释分开一个属性与值，流释在冒号前。<br />
　　仅IE6与IE5不识别<br />
　　select/**/ { display /*IE6,IE5不识别*/:none;}<br />
　　这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。<br />
　　仅IE5不识别<br />
　　select/*IE5不识别*/ { display:none;}<br />
　　这一句是在上一句中去掉了属性区的注释。只有IE5不识别<br />
　　盒模型解决方法<br />
　　selct {width:IE5.x宽度; voice-family :""}""; voice-family:inherit; width:正确宽度;}<br />
　　盒模型的清除方法不是通过!important来处理的。这点要明确。<br />
　　清除浮动<br />
　　select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}<br />
　　在Firefox中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时用这个清除浮动的HACK来对父级做一次定义，那么就可以解决这个问题 。<br />
<br />
　　截字省略号<br />
　　select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }<br />
　　这个是在越出长度后会自行的截掉多出部分的文字，并以省略号结尾，很好的一个技术。只是目前Firefox并不支持。
<img src ="http://www.blogjava.net/b47248054/aggbug/188504.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/b47248054/" target="_blank">sofot</a> 2008-03-25 15:56 <a href="http://www.blogjava.net/b47248054/articles/188504.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item></channel></rss>