﻿<?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-☆-文章分类-javascript</title><link>http://www.blogjava.net/lizhuxin/category/33746.html</link><description>☆</description><language>zh-cn</language><lastBuildDate>Mon, 05 Jan 2009 02:43:52 GMT</lastBuildDate><pubDate>Mon, 05 Jan 2009 02:43:52 GMT</pubDate><ttl>60</ttl><item><title>javascript创建对象常用方法及简单使用</title><link>http://www.blogjava.net/lizhuxin/articles/249833.html</link><dc:creator>☆</dc:creator><author>☆</author><pubDate>Mon, 05 Jan 2009 01:53:00 GMT</pubDate><guid>http://www.blogjava.net/lizhuxin/articles/249833.html</guid><wfw:comment>http://www.blogjava.net/lizhuxin/comments/249833.html</wfw:comment><comments>http://www.blogjava.net/lizhuxin/articles/249833.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/lizhuxin/comments/commentRss/249833.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/lizhuxin/services/trackbacks/249833.html</trackback:ping><description><![CDATA[&nbsp;
<p style="text-align: left" align="left"><strong><span style="font-family: 宋体">创建你自己的对象</span></strong></p>
<p style="margin-top: 9pt; line-height: 150%; text-align: left" align="left"><span style="font-size: 9pt; line-height: 150%; font-family: 宋体">有多种不同的办法来创建对象：</span></p>
<p style="margin-top: 15pt; text-align: left" align="left"><strong><span style="font-size: 9pt; font-family: Verdana">1. </span></strong><strong><span style="font-size: 9pt; font-family: 宋体">创建对象的实例</span></strong></p>
<p style="margin-top: 9pt; line-height: 150%; text-align: left" align="left"><span style="font-size: 9pt; line-height: 150%; font-family: 宋体">下列代码创建了一个对象的实例，并向其添加了四个属性：</span></p>
<div style="border-right: #778855 1pt dotted; padding-right: 8pt; border-top: #778855 1pt dotted; padding-left: 8pt; background: whitesmoke; padding-bottom: 8pt; border-left: #778855 1pt dotted; padding-top: 8pt; border-bottom: #778855 1pt dotted">
<p style="border-right: medium none; padding-right: 0cm; border-top: medium none; margin-top: 7.5pt; padding-left: 0cm; background: whitesmoke; padding-bottom: 0cm; border-left: medium none; padding-top: 0cm; border-bottom: medium none; text-align: left; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt" align="left"><span style="font-size: 9pt; font-family: 'Courier New'">personObj=new Object()</span></p>
<p style="border-right: medium none; padding-right: 0cm; border-top: medium none; margin-top: 7.5pt; padding-left: 0cm; background: whitesmoke; padding-bottom: 0cm; border-left: medium none; padding-top: 0cm; border-bottom: medium none; text-align: left; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt" align="left"><span style="font-size: 9pt; font-family: 'Courier New'">personObj.firstname="John"</span></p>
<p style="border-right: medium none; padding-right: 0cm; border-top: medium none; margin-top: 7.5pt; padding-left: 0cm; background: whitesmoke; padding-bottom: 0cm; border-left: medium none; padding-top: 0cm; border-bottom: medium none; text-align: left; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt" align="left"><span style="font-size: 9pt; font-family: 'Courier New'">personObj.lastname="Doe"</span></p>
<p style="border-right: medium none; padding-right: 0cm; border-top: medium none; margin-top: 7.5pt; padding-left: 0cm; background: whitesmoke; padding-bottom: 0cm; border-left: medium none; padding-top: 0cm; border-bottom: medium none; text-align: left; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt" align="left"><span style="font-size: 9pt; font-family: 'Courier New'">personObj.age=50</span></p>
<p style="border-right: medium none; padding-right: 0cm; border-top: medium none; margin-top: 7.5pt; padding-left: 0cm; background: whitesmoke; padding-bottom: 0cm; border-left: medium none; padding-top: 0cm; border-bottom: medium none; text-align: left; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt" align="left"><span style="font-size: 9pt; font-family: 'Courier New'">personObj.eyecolor="blue"</span></p>
</div>
<p style="margin-top: 9pt; line-height: 150%; text-align: left" align="left"><span style="font-size: 9pt; line-height: 150%; font-family: 宋体">向</span><span style="font-size: 9pt; line-height: 150%; font-family: Verdana"> personObj </span><span style="font-size: 9pt; line-height: 150%; font-family: 宋体">添加方法也很简单。下列代码向</span><span style="font-size: 9pt; line-height: 150%; font-family: Verdana"> personObj </span><span style="font-size: 9pt; line-height: 150%; font-family: 宋体">添加了名为</span><span style="font-size: 9pt; line-height: 150%; font-family: Verdana"> eat() </span><span style="font-size: 9pt; line-height: 150%; font-family: 宋体">的方法：</span></p>
<div style="border-right: #778855 1pt dotted; padding-right: 8pt; border-top: #778855 1pt dotted; padding-left: 8pt; background: whitesmoke; padding-bottom: 8pt; border-left: #778855 1pt dotted; padding-top: 8pt; border-bottom: #778855 1pt dotted">
<p style="border-right: medium none; padding-right: 0cm; border-top: medium none; margin-top: 7.5pt; padding-left: 0cm; background: whitesmoke; padding-bottom: 0cm; border-left: medium none; padding-top: 0cm; border-bottom: medium none; text-align: left; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt" align="left"><span style="font-size: 9pt; font-family: 'Courier New'">personObj.eat=eat</span></p>
</div>
<p style="margin-top: 15pt; text-align: left" align="left"><strong><span style="font-size: 9pt; font-family: Verdana">2. </span></strong><strong><span style="font-size: 9pt; font-family: 宋体">创建对象的模版</span></strong></p>
<p style="margin-top: 9pt; line-height: 150%; text-align: left" align="left"><span style="font-size: 9pt; line-height: 150%; font-family: 宋体">模版定义了对象的结构。</span></p>
<div style="border-right: #778855 1pt dotted; padding-right: 8pt; border-top: #778855 1pt dotted; padding-left: 8pt; background: whitesmoke; padding-bottom: 8pt; border-left: #778855 1pt dotted; padding-top: 8pt; border-bottom: #778855 1pt dotted">
<p style="border-right: medium none; padding-right: 0cm; border-top: medium none; margin-top: 7.5pt; padding-left: 0cm; background: whitesmoke; padding-bottom: 0cm; border-left: medium none; padding-top: 0cm; border-bottom: medium none; text-align: left; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt" align="left"><span style="font-size: 9pt; font-family: 'Courier New'">function person(firstname,lastname,age,eyecolor)</span></p>
<p style="border-right: medium none; padding-right: 0cm; border-top: medium none; margin-top: 7.5pt; padding-left: 0cm; background: whitesmoke; padding-bottom: 0cm; border-left: medium none; padding-top: 0cm; border-bottom: medium none; text-align: left; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt" align="left"><span style="font-size: 9pt; font-family: 'Courier New'">{</span></p>
<p style="border-right: medium none; padding-right: 0cm; border-top: medium none; margin-top: 7.5pt; padding-left: 0cm; background: whitesmoke; padding-bottom: 0cm; border-left: medium none; padding-top: 0cm; border-bottom: medium none; text-align: left; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt" align="left"><span style="font-size: 9pt; font-family: 'Courier New'">this.firstname=firstname</span></p>
<p style="border-right: medium none; padding-right: 0cm; border-top: medium none; margin-top: 7.5pt; padding-left: 0cm; background: whitesmoke; padding-bottom: 0cm; border-left: medium none; padding-top: 0cm; border-bottom: medium none; text-align: left; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt" align="left"><span style="font-size: 9pt; font-family: 'Courier New'">this.lastname=lastname</span></p>
<p style="border-right: medium none; padding-right: 0cm; border-top: medium none; margin-top: 7.5pt; padding-left: 0cm; background: whitesmoke; padding-bottom: 0cm; border-left: medium none; padding-top: 0cm; border-bottom: medium none; text-align: left; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt" align="left"><span style="font-size: 9pt; font-family: 'Courier New'">this.age=age</span></p>
<p style="border-right: medium none; padding-right: 0cm; border-top: medium none; margin-top: 7.5pt; padding-left: 0cm; background: whitesmoke; padding-bottom: 0cm; border-left: medium none; padding-top: 0cm; border-bottom: medium none; text-align: left; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt" align="left"><span style="font-size: 9pt; font-family: 'Courier New'">this.eyecolor=eyecolor</span></p>
<p style="border-right: medium none; padding-right: 0cm; border-top: medium none; margin-top: 7.5pt; padding-left: 0cm; background: whitesmoke; padding-bottom: 0cm; border-left: medium none; padding-top: 0cm; border-bottom: medium none; text-align: left; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt" align="left"><span style="font-size: 9pt; font-family: 'Courier New'">}</span></p>
</div>
<p style="margin-top: 9pt; line-height: 150%; text-align: left" align="left"><strong><span style="font-size: 9pt; color: #dd0000; line-height: 150%; font-family: 宋体">注意：</span></strong><span style="font-size: 9pt; line-height: 150%; font-family: 宋体">模版仅仅是一个函数。你需要在函数内部向</span><span style="font-size: 9pt; line-height: 150%; font-family: Verdana"> this.propertiName </span><span style="font-size: 9pt; line-height: 150%; font-family: 宋体">分配内容。</span></p>
<p style="margin-top: 9pt; line-height: 150%; text-align: left" align="left"><span style="font-size: 9pt; line-height: 150%; font-family: 宋体">一旦拥有模版，你就可以创建新的实例，就像这样：</span></p>
<div style="border-right: #778855 1pt dotted; padding-right: 8pt; border-top: #778855 1pt dotted; padding-left: 8pt; background: whitesmoke; padding-bottom: 8pt; border-left: #778855 1pt dotted; padding-top: 8pt; border-bottom: #778855 1pt dotted">
<p style="border-right: medium none; padding-right: 0cm; border-top: medium none; margin-top: 7.5pt; padding-left: 0cm; background: whitesmoke; padding-bottom: 0cm; border-left: medium none; padding-top: 0cm; border-bottom: medium none; text-align: left; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt" align="left"><span style="font-size: 9pt; font-family: 'Courier New'">myFather=new person("John","Doe",50,"blue")</span></p>
<p style="border-right: medium none; padding-right: 0cm; border-top: medium none; margin-top: 7.5pt; padding-left: 0cm; background: whitesmoke; padding-bottom: 0cm; border-left: medium none; padding-top: 0cm; border-bottom: medium none; text-align: left; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt" align="left"><span style="font-size: 9pt; font-family: 'Courier New'">myMother=new person("Sally","Rally",48,"green")</span></p>
</div>
<p style="margin-top: 9pt; line-height: 150%; text-align: left" align="left"><span style="font-size: 9pt; line-height: 150%; font-family: 宋体">同样可以向</span><span style="font-size: 9pt; line-height: 150%; font-family: Verdana"> person </span><span style="font-size: 9pt; line-height: 150%; font-family: 宋体">对象添加某些方法。并且同样需要在模版内进行操作：</span></p>
<div style="border-right: #778855 1pt dotted; padding-right: 8pt; border-top: #778855 1pt dotted; padding-left: 8pt; background: whitesmoke; padding-bottom: 8pt; border-left: #778855 1pt dotted; padding-top: 8pt; border-bottom: #778855 1pt dotted">
<p style="border-right: medium none; padding-right: 0cm; border-top: medium none; margin-top: 7.5pt; padding-left: 0cm; background: whitesmoke; padding-bottom: 0cm; border-left: medium none; padding-top: 0cm; border-bottom: medium none; text-align: left; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt" align="left"><span style="font-size: 9pt; font-family: 'Courier New'">function person(firstname,lastname,age,eyecolor)</span></p>
<p style="border-right: medium none; padding-right: 0cm; border-top: medium none; margin-top: 7.5pt; padding-left: 0cm; background: whitesmoke; padding-bottom: 0cm; border-left: medium none; padding-top: 0cm; border-bottom: medium none; text-align: left; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt" align="left"><span style="font-size: 9pt; font-family: 'Courier New'">{</span></p>
<p style="border-right: medium none; padding-right: 0cm; border-top: medium none; margin-top: 7.5pt; padding-left: 0cm; background: whitesmoke; padding-bottom: 0cm; border-left: medium none; padding-top: 0cm; border-bottom: medium none; text-align: left; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt" align="left"><span style="font-size: 9pt; font-family: 'Courier New'">this.firstname=firstname</span></p>
<p style="border-right: medium none; padding-right: 0cm; border-top: medium none; margin-top: 7.5pt; padding-left: 0cm; background: whitesmoke; padding-bottom: 0cm; border-left: medium none; padding-top: 0cm; border-bottom: medium none; text-align: left; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt" align="left"><span style="font-size: 9pt; font-family: 'Courier New'">this.lastname=lastname</span></p>
<p style="border-right: medium none; padding-right: 0cm; border-top: medium none; margin-top: 7.5pt; padding-left: 0cm; background: whitesmoke; padding-bottom: 0cm; border-left: medium none; padding-top: 0cm; border-bottom: medium none; text-align: left; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt" align="left"><span style="font-size: 9pt; font-family: 'Courier New'">this.age=age</span></p>
<p style="border-right: medium none; padding-right: 0cm; border-top: medium none; margin-top: 7.5pt; padding-left: 0cm; background: whitesmoke; padding-bottom: 0cm; border-left: medium none; padding-top: 0cm; border-bottom: medium none; text-align: left; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt" align="left"><span style="font-size: 9pt; font-family: 'Courier New'">this.eyecolor=eyecolor</span></p>
<p style="border-right: medium none; padding-right: 0cm; border-top: medium none; margin-top: 7.5pt; padding-left: 0cm; background: whitesmoke; padding-bottom: 0cm; border-left: medium none; padding-top: 0cm; border-bottom: medium none; text-align: left; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt" align="left"><span style="font-size: 9pt; font-family: 'Courier New'">this.newlastname=newlastname</span></p>
<p style="border-right: medium none; padding-right: 0cm; border-top: medium none; margin-top: 7.5pt; padding-left: 0cm; background: whitesmoke; padding-bottom: 0cm; border-left: medium none; padding-top: 0cm; border-bottom: medium none; text-align: left; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt" align="left"><span style="font-size: 9pt; font-family: 'Courier New'">}</span></p>
</div>
<p style="margin-top: 9pt; line-height: 150%; text-align: left" align="left"><strong><span style="font-size: 9pt; color: #dd0000; line-height: 150%; font-family: 宋体">注意：</span></strong><span style="font-size: 9pt; line-height: 150%; font-family: 宋体">方法只是依附于对象的函数而已。然后，我们需要编写</span><span style="font-size: 9pt; line-height: 150%; font-family: Verdana"> newlastname() </span><span style="font-size: 9pt; line-height: 150%; font-family: 宋体">函数：</span></p>
<div style="border-right: #778855 1pt dotted; padding-right: 8pt; border-top: #778855 1pt dotted; padding-left: 8pt; background: whitesmoke; padding-bottom: 8pt; border-left: #778855 1pt dotted; padding-top: 8pt; border-bottom: #778855 1pt dotted">
<p style="border-right: medium none; padding-right: 0cm; border-top: medium none; margin-top: 7.5pt; padding-left: 0cm; background: whitesmoke; padding-bottom: 0cm; border-left: medium none; padding-top: 0cm; border-bottom: medium none; text-align: left; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt" align="left"><span style="font-size: 9pt; font-family: 'Courier New'">function newlastname(new_lastname)</span></p>
<p style="border-right: medium none; padding-right: 0cm; border-top: medium none; margin-top: 7.5pt; padding-left: 0cm; background: whitesmoke; padding-bottom: 0cm; border-left: medium none; padding-top: 0cm; border-bottom: medium none; text-align: left; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt" align="left"><span style="font-size: 9pt; font-family: 'Courier New'">{</span></p>
<p style="border-right: medium none; padding-right: 0cm; border-top: medium none; margin-top: 7.5pt; padding-left: 0cm; background: whitesmoke; padding-bottom: 0cm; border-left: medium none; padding-top: 0cm; border-bottom: medium none; text-align: left; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt" align="left"><span style="font-size: 9pt; font-family: 'Courier New'">this.lastname=new_lastname</span></p>
<p style="border-right: medium none; padding-right: 0cm; border-top: medium none; margin-top: 7.5pt; padding-left: 0cm; background: whitesmoke; padding-bottom: 0cm; border-left: medium none; padding-top: 0cm; border-bottom: medium none; text-align: left; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt" align="left"><span style="font-size: 9pt; font-family: 'Courier New'">}</span></p>
</div>
<p><span style="font-family: 宋体">实例</span>1:</p>
<p>&lt;html&gt;</p>
<p>&lt;body&gt;</p>
<p>&lt;script type="text/javascript"&gt;</p>
<p>personObj=new Object()</p>
<p>personObj.firstname="John"</p>
<p>personObj.lastname="Adams"</p>
<p>personObj.age=35</p>
<p>personObj.eyecolor="black"</p>
<p>alert(personObj.firstname + " <span style="font-family: 宋体">的年龄是</span> " + personObj.age + " <span style="font-family: 宋体">岁。</span>")</p>
<p>&lt;/script&gt;</p>
<p>&lt;/body&gt;</p>
<p>&lt;/html&gt;</p>
<p><span style="font-family: 宋体">实例</span>2<span style="font-family: 宋体">：</span></p>
<p>&lt;html&gt;</p>
<p>&lt;body&gt;</p>
<p>&lt;script type="text/javascript"&gt;</p>
<p>function person(name,age,sex)</p>
<p>{</p>
<p>this.name=name;</p>
<p>this.age=age;</p>
<p>this.sex=sex;</p>
<p>this.setName=newName;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; /**<span style="font-family: 宋体">修改用户姓名</span>*/</p>
<p style="margin-left: 21pt">function newName(newName)</p>
<p style="margin-left: 21pt">{</p>
<p style="margin-left: 21pt">&nbsp;newName='<span style="font-family: 宋体">李鹏</span>';</p>
<p style="margin-left: 21pt">&nbsp;this.name=newName;</p>
<p style="margin-left: 21pt">}</p>
<p>}</p>
<p>myFather=new person("John",35,"<span style="font-family: 宋体">男</span>")</p>
<p>alert("<span style="font-family: 宋体">初始姓名：</span>"+myFather.name);</p>
<p>myFather.setName('aa');</p>
<p>alert("<span style="font-family: 宋体">修改后的姓名：</span>"+myFather.name);</p>
<p>&lt;/script&gt;</p>
<p>&lt;/body&gt;</p>
<p>&lt;/html&gt;</p>
<img src ="http://www.blogjava.net/lizhuxin/aggbug/249833.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/lizhuxin/" target="_blank">☆</a> 2009-01-05 09:53 <a href="http://www.blogjava.net/lizhuxin/articles/249833.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>javascript之数字类型正则匹配表达式</title><link>http://www.blogjava.net/lizhuxin/articles/245926.html</link><dc:creator>☆</dc:creator><author>☆</author><pubDate>Fri, 12 Dec 2008 05:10:00 GMT</pubDate><guid>http://www.blogjava.net/lizhuxin/articles/245926.html</guid><wfw:comment>http://www.blogjava.net/lizhuxin/comments/245926.html</wfw:comment><comments>http://www.blogjava.net/lizhuxin/articles/245926.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/lizhuxin/comments/commentRss/245926.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/lizhuxin/services/trackbacks/245926.html</trackback:ping><description><![CDATA[<p>使用方法：<br />
例：<br />
/**正整数匹配表达式*/<br />
var pattern=/^[0-9]*[1-9][0-9]*$/;<br />
var flag = pattern.test(a);<br />
如果a是正整数，flag的boolean值为true，如果a不是正整数，flag的boolean值为false。<br />
<br />
<br />
<br />
/**浮点数匹配表达式*/<br />
var pattern = /^([-]){0,1}([0-9]){1,}([.]){0,1}([0-9]){0,}$/;</p>
<p>/**浮点数匹配表达式且只保留两位小数*/<br />
var pattern=/^-?\d+[\.\d]?\d{0,2}$/;</p>
<p>/**正浮点数匹配表达式*/<br />
var pattern=/^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$/;</p>
<p>/**正浮点数且保留两位小数匹配表达式*/<br />
var pattern=/^(([1-9]\d*(\.\d?[0-9])?)|(0\.[1-9][0-9])|(0\.[0][1-9]))$/;</p>
<p>/**负浮点数匹配表达式*/<br />
var pattern=/^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/;</p>
<p>/**负浮点数且保留两位小数匹配表达式*/<br />
var pattern=/^-(([1-9]\d*(\.\d?[0-9])?)|(0\.[1-9][0-9])|(0\.[0][1-9]))$/;</p>
<p>/**负浮点数+0 匹配表达式*/<br />
var pattern=/^((-\d+(\.\d+)?)|(0+(\.0+)?))$/;</p>
<p>/**负浮点数+0 并且保留两位小数匹配表达式*/<br />
var pattern=/^((-\d+[\.\d]?\d{0,2})|(0+(\.0+)?))$/;</p>
<p>正浮点+0匹配表达式<br />
var pattern = /^\d+(\.\d+)?$/;</p>
<p>/**正浮点+0匹配表达式且只保留两位小数*/<br />
var pattern=/^\d+[\.\d]?\d{0,2}$/;</p>
<p>/**整数匹配表达式*/<br />
var pattern=/^-?\d+$/;</p>
<p>/**正整数匹配表达式*/<br />
var pattern=/^[0-9]*[1-9][0-9]*$/;</p>
<p>/**负整数匹配表达式*/<br />
var pattern=/^-[0-9]*[1-9][0-9]*$/;</p>
<p>/**正整数+0 的匹配表达式*/<br />
var pattern=/^\d+$/;</p>
<p>/**负整数+0 的匹配表达式*/<br />
var pattern=/^((-\d+)|(0+))$/;</p>
<p>/**全是数字匹配表达式*/<br />
var pattern=/^[0-9]{1,20}$/<br />
</p>
 <img src ="http://www.blogjava.net/lizhuxin/aggbug/245926.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/lizhuxin/" target="_blank">☆</a> 2008-12-12 13:10 <a href="http://www.blogjava.net/lizhuxin/articles/245926.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>javascript常用方法</title><link>http://www.blogjava.net/lizhuxin/articles/222322.html</link><dc:creator>☆</dc:creator><author>☆</author><pubDate>Fri, 15 Aug 2008 10:31:00 GMT</pubDate><guid>http://www.blogjava.net/lizhuxin/articles/222322.html</guid><wfw:comment>http://www.blogjava.net/lizhuxin/comments/222322.html</wfw:comment><comments>http://www.blogjava.net/lizhuxin/articles/222322.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/lizhuxin/comments/commentRss/222322.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/lizhuxin/services/trackbacks/222322.html</trackback:ping><description><![CDATA[&nbsp;&nbsp;&nbsp;&nbsp; 摘要: &nbsp;                                    abs 方法                                    返回一个数的绝对值。                                                    acos 方法                 ...&nbsp;&nbsp;<a href='http://www.blogjava.net/lizhuxin/articles/222322.html'>阅读全文</a><img src ="http://www.blogjava.net/lizhuxin/aggbug/222322.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/lizhuxin/" target="_blank">☆</a> 2008-08-15 18:31 <a href="http://www.blogjava.net/lizhuxin/articles/222322.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>javascript总结</title><link>http://www.blogjava.net/lizhuxin/articles/222321.html</link><dc:creator>☆</dc:creator><author>☆</author><pubDate>Fri, 15 Aug 2008 10:30:00 GMT</pubDate><guid>http://www.blogjava.net/lizhuxin/articles/222321.html</guid><wfw:comment>http://www.blogjava.net/lizhuxin/comments/222321.html</wfw:comment><comments>http://www.blogjava.net/lizhuxin/articles/222321.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/lizhuxin/comments/commentRss/222321.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/lizhuxin/services/trackbacks/222321.html</trackback:ping><description><![CDATA[<p>1 创建脚本块</p>
<p>1: &lt;script language=&#8221;JavaScript&#8221;&gt;<br />
2: JavaScript code goes here<br />
3: &lt;/script&gt; </p>
<p>&nbsp;</p>
<p>2 隐藏脚本代码</p>
<p>1: &lt;script language=&#8221;JavaScript&#8221;&gt;<br />
2: &lt;!--<br />
3: document.write(&#8220;Hello&#8221;);<br />
4: // --&gt;<br />
5: &lt;/script&gt; </p>
<p><br />
在不支持JavaScript的浏览器中将不执行相关代码</p>
<p>3 浏览器不支持的时候显示</p>
<p>1: &lt;noscript&gt;<br />
2: Hello to the non-JavaScript browser.<br />
3: &lt;/noscript&gt; </p>
<p>&nbsp;</p>
<p>4 链接外部脚本文件</p>
<p>1: &lt;script language=&#8221;JavaScript&#8221; src="/&#8221;filename.js"&#8221;&gt;&lt;/script&gt; </p>
<p><br />
5 注释脚本</p>
<p>1: // This is a comment<br />
2: document.write(&#8220;Hello&#8221;); // This is a comment<br />
3: /*<br />
4: All of this<br />
5: is a comment<br />
6: */ </p>
<p>&nbsp;</p>
<p>6 输出到浏览器</p>
<p>1: document.write(&#8220;&lt;strong&gt;Hello&lt;/strong&gt;&#8221;); </p>
<p>&nbsp;</p>
<p>7 定义变量</p>
<p>1: var myVariable = &#8220;some value&#8221;; </p>
<p>&nbsp;</p>
<p>8 字符串相加</p>
<p>1: var myString = &#8220;String1&#8221; + &#8220;String2&#8221;; </p>
<p>&nbsp;</p>
<p>9 字符串搜索</p>
<p>1: &lt;script language=&#8221;JavaScript&#8221;&gt;<br />
2: &lt;!--<br />
3: var myVariable = &#8220;Hello there&#8221;;<br />
4: var therePlace = myVariable.search(&#8220;there&#8221;);<br />
5: document.write(therePlace);<br />
6: // --&gt;<br />
7: &lt;/script&gt; </p>
<p>&nbsp;</p>
<p>10 字符串替换</p>
<p>1: thisVar.replace(&#8220;Monday&#8221;,&#8221;Friday&#8221;); </p>
<p><br />
11 格式化字串</p>
<p>1: &lt;script language=&#8221;JavaScript&#8221;&gt;<br />
2: &lt;!--<br />
3: var myVariable = &#8220;Hello there&#8221;;<br />
4: document.write(myVariable.big() + &#8220;&lt;br&gt;&#8221;);<br />
5: document.write(myVariable.blink() + &#8220;&lt;br&gt;&#8221;);<br />
6: document.write(myVariable.bold() + &#8220;&lt;br&gt;&#8221;);<br />
7: document.write(myVariable.fixed() + &#8220;&lt;br&gt;&#8221;);<br />
8: document.write(myVariable.fontcolor(&#8220;red&#8221;) + &#8220;&lt;br&gt;&#8221;);<br />
9: document.write(myVariable.fontsize(&#8220;18pt&#8221;) + &#8220;&lt;br&gt;&#8221;);<br />
10: document.write(myVariable.italics() + &#8220;&lt;br&gt;&#8221;);<br />
11: document.write(myVariable.small() + &#8220;&lt;br&gt;&#8221;);<br />
12: document.write(myVariable.strike() + &#8220;&lt;br&gt;&#8221;);<br />
13: document.write(myVariable.sub() + &#8220;&lt;br&gt;&#8221;);<br />
14: document.write(myVariable.sup() + &#8220;&lt;br&gt;&#8221;);<br />
15: document.write(myVariable.toLowerCase() + &#8220;&lt;br&gt;&#8221;);<br />
16: document.write(myVariable.toUpperCase() + &#8220;&lt;br&gt;&#8221;);<br />
17: <br />
18: var firstString = &#8220;My String&#8221;;<br />
19: var finalString = firstString.bold().toLowerCase().fontcolor(&#8220;red&#8221;);<br />
20: // --&gt;<br />
21: &lt;/script&gt; </p>
<p>&nbsp;</p>
<p>12 创建数组</p>
<p>1: &lt;script language=&#8221;JavaScript&#8221;&gt;<br />
2: &lt;!--<br />
3: var myArray = new Array(5);<br />
4: myArray[0] = &#8220;First Entry&#8221;;<br />
5: myArray[1] = &#8220;Second Entry&#8221;;<br />
6: myArray[2] = &#8220;Third Entry&#8221;;<br />
7: myArray[3] = &#8220;Fourth Entry&#8221;;<br />
8: myArray[4] = &#8220;Fifth Entry&#8221;;<br />
9: var anotherArray = new Array(&#8220;First Entry&#8221;,&#8221;Second Entry&#8221;,&#8221;Third Entry&#8221;,&#8221;Fourth Entry&#8221;,&#8221;Fifth Entry&#8221;);<br />
10: // --&gt;<br />
11: &lt;/script&gt; </p>
<p>&nbsp;</p>
<p>13 数组排序</p>
<p>1: &lt;script language=&#8221;JavaScript&#8221;&gt;<br />
2: &lt;!--<br />
3: var myArray = new Array(5);<br />
4: myArray[0] = &#8220;z&#8221;;<br />
5: myArray[1] = &#8220;c&#8221;;<br />
6: myArray[2] = &#8220;d&#8221;;<br />
7: myArray[3] = &#8220;a&#8221;;<br />
8: myArray[4] = &#8220;q&#8221;;<br />
9: document.write(myArray.sort());<br />
10: // --&gt;<br />
11: &lt;/script&gt; </p>
<p>&nbsp;</p>
<p>14 分割字符串</p>
<p>1: &lt;script language=&#8221;JavaScript&#8221;&gt;<br />
2: &lt;!--<br />
3: var myVariable = &#8220;a,b,c,d&#8221;;<br />
4: var stringArray = myVariable.split(&#8220;,&#8221;);<br />
5: document.write(stringArray[0]);<br />
6: document.write(stringArray[1]);<br />
7: document.write(stringArray[2]);<br />
8: document.write(stringArray[3]);<br />
9: // --&gt;<br />
10: &lt;/script&gt; </p>
<p>&nbsp;</p>
<p>15 弹出警告信息</p>
<p>1: &lt;script language=&#8221;JavaScript&#8221;&gt;<br />
2: &lt;!--<br />
3: window.alert(&#8220;Hello&#8221;);<br />
4: // --&gt;<br />
5: &lt;/script&gt; </p>
<p>&nbsp;</p>
<p>16 弹出确认框</p>
<p>1: &lt;script language=&#8221;JavaScript&#8221;&gt;<br />
2: &lt;!--<br />
3: var result = window.confirm(&#8220;Click OK to continue&#8221;);<br />
4: // --&gt;<br />
5: &lt;/script&gt; </p>
<p>&nbsp;</p>
<p>17 定义函数</p>
<p>1: &lt;script language=&#8221;JavaScript&#8221;&gt;<br />
2: &lt;!--<br />
3: function multiple(number1,number2) { <br />
4: var result = number1 * number2;<br />
5: return result;<br />
6: }<br />
7: // --&gt;<br />
8: &lt;/script&gt; </p>
<p>&nbsp;</p>
<p>18 调用JS函数</p>
<p>1: &lt;a href=&#8221;#&#8221; onClick=&#8221;functionName()&#8221;&gt;Link text&lt;/a&gt;<br />
2: &lt;a href="/&#8221;javascript:functionName"()&#8221;&gt;Link text&lt;/a&gt; </p>
<p>&nbsp;</p>
<p>19 在页面加载完成后执行函数</p>
<p>1: &lt;body onLoad=&#8221;functionName();&#8221;&gt;<br />
2: Body of the page<br />
3: &lt;/body&gt; </p>
<p><br />
20 条件判断</p>
<p>1: &lt;script&gt;<br />
2: &lt;!--<br />
3: var userChoice = window.confirm(&#8220;Choose OK or Cancel&#8221;);<br />
4: var result = (userChoice == true) ? &#8220;OK&#8221; : &#8220;Cancel&#8221;;<br />
5: document.write(result);<br />
6: // --&gt;<br />
7: &lt;/script&gt; </p>
<p>&nbsp;</p>
<p>21 指定次数循环</p>
<p>1: &lt;script&gt;<br />
2: &lt;!--<br />
3: var myArray = new Array(3);<br />
4: myArray[0] = &#8220;Item 0&#8221;;<br />
5: myArray[1] = &#8220;Item 1&#8221;;<br />
6: myArray[2] = &#8220;Item 2&#8221;;<br />
7: for (i = 0; i &lt; myArray.length; i++) { <br />
8: document.write(myArray[i] + &#8220;&lt;br&gt;&#8221;);<br />
9: }<br />
10: // --&gt;<br />
11: &lt;/script&gt; </p>
<p>&nbsp;</p>
<p>22 设定将来执行</p>
<p>1: &lt;script&gt;<br />
2: &lt;!--<br />
3: function hello() { <br />
4: window.alert(&#8220;Hello&#8221;);<br />
5: }<br />
6: window.setTimeout(&#8220;hello()&#8221;,5000);<br />
7: // --&gt;<br />
8: &lt;/script&gt; </p>
<p>&nbsp;</p>
<p>23 定时执行函数</p>
<p>1: &lt;script&gt;<br />
2: &lt;!--<br />
3: function hello() { <br />
4: window.alert(&#8220;Hello&#8221;);<br />
5: window.setTimeout(&#8220;hello()&#8221;,5000);<br />
6: }<br />
7: window.setTimeout(&#8220;hello()&#8221;,5000);<br />
8: // --&gt;<br />
9: &lt;/script&gt; </p>
<p>&nbsp;</p>
<p>24 取消定时执行</p>
<p>1: &lt;script&gt;<br />
2: &lt;!--<br />
3: function hello() { <br />
4: window.alert(&#8220;Hello&#8221;);<br />
5: }<br />
6: var myTimeout = window.setTimeout(&#8220;hello()&#8221;,5000);<br />
7: window.clearTimeout(myTimeout);<br />
8: // --&gt;<br />
9: &lt;/script&gt; </p>
<p>&nbsp;</p>
<p>25 在页面卸载时候执行函数</p>
<p>1: &lt;body onUnload=&#8221;functionName();&#8221;&gt;<br />
2: Body of the page<br />
3: &lt;/body&gt; </p>
<p>JavaScript就这么回事2：浏览器输出 </p>
<p><br />
26 访问document对象</p>
<p>1: &lt;script language=&#8221;JavaScript&#8221;&gt;<br />
2: var myURL = document.URL;<br />
3: window.alert(myURL);<br />
4: &lt;/script&gt; </p>
<p>&nbsp;</p>
<p>27 动态输出HTML</p>
<p>1: &lt;script language=&#8221;JavaScript&#8221;&gt;<br />
2: document.write(&#8220;&lt;p&gt;Here&#8217;s some information about this document:&lt;/p&gt;&#8221;);<br />
3: document.write(&#8220;&lt;ul&gt;&#8221;);<br />
4: document.write(&#8220;&lt;li&gt;Referring Document: &#8220; + document.referrer + &#8220;&lt;/li&gt;&#8221;);<br />
5: document.write(&#8220;&lt;li&gt;Domain: &#8220; + document.domain + &#8220;&lt;/li&gt;&#8221;);<br />
6: document.write(&#8220;&lt;li&gt;URL: &#8220; + document.URL + &#8220;&lt;/li&gt;&#8221;);<br />
7: document.write(&#8220;&lt;/ul&gt;&#8221;);<br />
8: &lt;/script&gt; </p>
<p><br />
28 输出换行</p>
<p>1: document.writeln(&#8220;&lt;strong&gt;a&lt;/strong&gt;&#8221;);<br />
2: document.writeln(&#8220;b&#8221;); </p>
<p>&nbsp;</p>
<p>29 输出日期</p>
<p>1: &lt;script language=&#8221;JavaScript&#8221;&gt;<br />
2: var thisDate = new Date();<br />
3: document.write(thisDate.toString());<br />
4: &lt;/script&gt; </p>
<p>&nbsp;</p>
<p>30 指定日期的时区</p>
<p>1: &lt;script language=&#8221;JavaScript&#8221;&gt;<br />
2: var myOffset = -2;<br />
3: var currentDate = new Date();<br />
4: var userOffset = currentDate.getTimezoneOffset()/60;<br />
5: var timeZoneDifference = userOffset - myOffset;<br />
6: currentDate.setHours(currentDate.getHours() + timeZoneDifference);<br />
7: document.write(&#8220;The time and date in Central Europe is: &#8220; + currentDate.toLocaleString());<br />
8: &lt;/script&gt; </p>
<p><br />
31 设置日期输出格式</p>
<p>1: &lt;script language=&#8221;JavaScript&#8221;&gt;<br />
2: var thisDate = new Date();<br />
3: var thisTimeString = thisDate.getHours() + &#8220;:&#8221; + thisDate.getMinutes();<br />
4: var thisDateString = thisDate.getFullYear() + &#8220;/&#8221; + thisDate.getMonth() + &#8220;/&#8221; + thisDate.getDate();<br />
5: document.write(thisTimeString + &#8220; on &#8220; + thisDateString);<br />
6: &lt;/script&gt; </p>
<p><br />
32 读取URL参数</p>
<p>1: &lt;script language=&#8221;JavaScript&#8221;&gt;<br />
2: var urlParts = document.URL.split(&#8220;?&#8221;);<br />
3: var parameterParts = urlParts[1].split(&#8220;&amp;&#8221;);<br />
4: for (i = 0; i &lt; parameterParts.length; i++) { <br />
5: var pairParts = parameterParts[i].split(&#8220;=&#8221;);<br />
6: var pairName = pairParts[0];<br />
7: var pairValue = pairParts[1];<br />
8: document.write(pairName + &#8220; ：&#8220; +pairValue );<br />
9: }<br />
10: &lt;/script&gt; </p>
<p>你还以为HTML是无状态的么？</p>
<p>33 打开一个新的document对象</p>
<p>1: &lt;script language=&#8221;JavaScript&#8221;&gt;<br />
2: function newDocument() { <br />
3: document.open();<br />
4: document.write(&#8220;&lt;p&gt;This is a New Document.&lt;/p&gt;&#8221;);<br />
5: document.close();<br />
6: }<br />
7: &lt;/script&gt; </p>
<p>&nbsp;</p>
<p>34 页面跳转</p>
<p>1: &lt;script language=&#8221;JavaScript&#8221;&gt;<br />
2: window.location = &#8220;http://www.liu21st.com/&#8221;;<br />
3: &lt;/script&gt; </p>
<p>&nbsp;</p>
<p>35 添加网页加载进度窗口</p>
<p>1: &lt;html&gt;<br />
2: &lt;head&gt;<br />
3: &lt;script language='javaScript'&gt;<br />
4: var placeHolder = window.open('holder.html','placeholder','width=200,height=200');<br />
5: &lt;/script&gt;<br />
6: &lt;title&gt;The Main Page&lt;/title&gt;<br />
7: &lt;/head&gt;<br />
8: &lt;body onLoad='placeHolder.close()'&gt;<br />
9: &lt;p&gt;This is the main page&lt;/p&gt;<br />
10: &lt;/body&gt;<br />
11: &lt;/html&gt; </p>
<p>&nbsp;</p>
<p>JavaScript就这么回事3：图像 </p>
<p>&nbsp;</p>
<p>36 读取图像属性</p>
<p>1: &lt;img src="/&#8221;image1.jpg"&#8221; name=&#8221;myImage&#8221;&gt;<br />
2: &lt;a href=&#8221;# &#8221; onClick=&#8221;window.alert(document.myImage.width)&#8221;&gt;Width&lt;/a&gt;<br />
3: </p>
<p><br />
37 动态加载图像</p>
<p>1: &lt;script language=&#8221;JavaScript&#8221;&gt;<br />
2: myImage = new Image;<br />
3: myImage.src = &#8220;Tellers1.jpg&#8221;;<br />
4: &lt;/script&gt; </p>
<p><br />
38 简单的图像替换</p>
<p>1: &lt;script language=&#8221;JavaScript&#8221;&gt;<br />
2: rollImage = new Image;<br />
3: rollImage.src = &#8220;rollImage1.jpg&#8221;;<br />
4: defaultImage = new Image;<br />
5: defaultImage.src = &#8220;image1.jpg&#8221;;<br />
6: &lt;/script&gt;<br />
7: &lt;a href="/&#8221;myUrl"&#8221; onMouseOver=&#8221;document.myImage.src = rollImage.src;&#8221;<br />
8: onMouseOut=&#8221;document.myImage.src = defaultImage.src;&#8221;&gt;<br />
9: &lt;img src="/&#8221;image1.jpg"&#8221; name=&#8221;myImage&#8221; width=100 height=100 border=0&gt; </p>
<p><br />
39 随机显示图像</p>
<p>1: &lt;script language=&#8221;JavaScript&#8221;&gt;<br />
2: var imageList = new Array;<br />
3: imageList[0] = &#8220;image1.jpg&#8221;;<br />
4: imageList[1] = &#8220;image2.jpg&#8221;;<br />
5: imageList[2] = &#8220;image3.jpg&#8221;;<br />
6: imageList[3] = &#8220;image4.jpg&#8221;;<br />
7: var imageChoice = Math.floor(Math.random() * imageList.length);<br />
8: document.write(&#8216;&lt;img src=&#8221;&#8217; + imageList[imageChoice] + &#8216;&#8220;&gt;&#8217;);<br />
9: &lt;/script&gt; </p>
<p><br />
40 函数实现的图像替换</p>
<p>1: &lt;script language=&#8221;JavaScript&#8221;&gt;<br />
2: var source = 0;<br />
3: var replacement = 1;<br />
4: function createRollOver(originalImage,replacementImage) { <br />
5: var imageArray = new Array;<br />
6: imageArray[source] = new Image;<br />
7: imageArray[source].src = originalImage;<br />
8: imageArray[replacement] = new Image;<br />
9: imageArray[replacement].src = replacementImage;<br />
10: return imageArray;<br />
11: }<br />
12: var rollImage1 = createRollOver(&#8220;image1.jpg&#8221;,&#8221;rollImage1.jpg&#8221;);<br />
13: &lt;/script&gt;<br />
14: &lt;a href=&#8221;#&#8221; onMouseOver=&#8221;document.myImage1.src = rollImage1[replacement].src;&#8221;<br />
15: onMouseOut=&#8221;document.myImage1.src = rollImage1[source].src;&#8221;&gt;<br />
16: &lt;img src="/&#8221;image1.jpg"&#8221; width=100 name=&#8221;myImage1&#8221; border=0&gt;<br />
17: &lt;/a&gt; </p>
<p><br />
41 创建幻灯片</p>
<p>1: &lt;script language=&#8221;JavaScript&#8221;&gt;<br />
2: var imageList = new Array;<br />
3: imageList[0] = new Image;<br />
4: imageList[0].src = &#8220;image1.jpg&#8221;;<br />
5: imageList[1] = new Image;<br />
6: imageList[1].src = &#8220;image2.jpg&#8221;;<br />
7: imageList[2] = new Image;<br />
8: imageList[2].src = &#8220;image3.jpg&#8221;;<br />
9: imageList[3] = new Image;<br />
10: imageList[3].src = &#8220;image4.jpg&#8221;;<br />
11: function slideShow(imageNumber) { <br />
12: document.slideShow.src = imageList[imageNumber].src;<br />
13: imageNumber += 1;<br />
14: if (imageNumber &lt; imageList.length) { <br />
15: window.setTimeout(&#8220;slideShow(&#8220; + imageNumber + &#8220;)&#8221;,3000);<br />
16: }<br />
17: }<br />
18: &lt;/script&gt;<br />
19: &lt;/head&gt;<br />
20: &lt;body onLoad=&#8221;slideShow(0)&#8221;&gt;<br />
21: &lt;img src="/&#8221;image1.jpg"&#8221; width=100 name=&#8221;slideShow&#8221;&gt; </p>
<p><br />
42 随机广告图片</p>
<p>1: &lt;script language=&#8221;JavaScript&#8221;&gt;<br />
2: var imageList = new Array;<br />
3: imageList[0] = &#8220;image1.jpg&#8221;;<br />
4: imageList[1] = &#8220;image2.jpg&#8221;;<br />
5: imageList[2] = &#8220;image3.jpg&#8221;;<br />
6: imageList[3] = &#8220;image4.jpg&#8221;;<br />
7: var urlList = new Array;<br />
8: urlList[0] = &#8220;http://some.host/&#8221;;<br />
9: urlList[1] = &#8220;http://another.host/&#8221;;<br />
10: urlList[2] = &#8220;http://somewhere.else/&#8221;;<br />
11: urlList[3] = &#8220;http://right.here/&#8221;;<br />
12: var imageChoice = Math.floor(Math.random() * imageList.length);<br />
13: document.write(&#8216;&lt;a href=&#8221;&#8217; + urlList[imageChoice] + &#8216;&#8220;&gt;&lt;img src=&#8221;&#8217; + imageList[imageChoice] + &#8216;&#8220;&gt;&lt;/a&gt;&#8217;);<br />
14: &lt;/script&gt; </p>
<p>JavaScript就这么回事4：表单 </p>
<p><br />
还是先继续写完JS就这么回事系列吧～<br />
43 表单构成</p>
<p>1: &lt;form method=&#8221;post&#8221; action=&#8221;target.html&#8221; name=&#8221;thisForm&#8221;&gt;<br />
2: &lt;input type=&#8221;text&#8221; name=&#8221;myText&#8221;&gt;<br />
3: &lt;select name=&#8221;mySelect&#8221;&gt;<br />
4: &lt;option value=&#8221;1&#8221;&gt;First Choice&lt;/option&gt;<br />
5: &lt;option value=&#8221;2&#8221;&gt;Second Choice&lt;/option&gt;<br />
6: &lt;/select&gt;<br />
7: &lt;br&gt;<br />
8: &lt;input type=&#8221;submit&#8221; value=&#8221;Submit Me&#8221;&gt;<br />
9: &lt;/form&gt; </p>
<p><br />
44 访问表单中的文本框内容</p>
<p>1: &lt;form name=&#8221;myForm&#8221;&gt;<br />
2: &lt;input type=&#8221;text&#8221; name=&#8221;myText&#8221;&gt;<br />
3: &lt;/form&gt;<br />
4: &lt;a href='#' onClick='window.alert(document.myForm.myText.value);'&gt;Check Text Field&lt;/a&gt; </p>
<p><br />
45 动态复制文本框内容</p>
<p>1: &lt;form name=&#8221;myForm&#8221;&gt;<br />
2: Enter some Text: &lt;input type=&#8221;text&#8221; name=&#8221;myText&#8221;&gt;&lt;br&gt;<br />
3: Copy Text: &lt;input type=&#8221;text&#8221; name=&#8221;copyText&#8221;&gt;<br />
4: &lt;/form&gt;<br />
5: &lt;a href=&#8221;#&#8221; onClick=&#8221;document.myForm.copyText.value =<br />
6: document.myForm.myText.value;&#8221;&gt;Copy Text Field&lt;/a&gt; </p>
<p><br />
46 侦测文本框的变化</p>
<p>1: &lt;form name=&#8221;myForm&#8221;&gt;<br />
2: Enter some Text: &lt;input type=&#8221;text&#8221; name=&#8221;myText&#8221; onChange=&#8221;alert(this.value);&#8221;&gt;<br />
3: &lt;/form&gt; </p>
<p><br />
47 访问选中的Select</p>
<p>1: &lt;form name=&#8221;myForm&#8221;&gt;<br />
2: &lt;select name=&#8221;mySelect&#8221;&gt;<br />
3: &lt;option value=&#8221;First Choice&#8221;&gt;1&lt;/option&gt;<br />
4: &lt;option value=&#8221;Second Choice&#8221;&gt;2&lt;/option&gt;<br />
5: &lt;option value=&#8221;Third Choice&#8221;&gt;3&lt;/option&gt;<br />
6: &lt;/select&gt;<br />
7: &lt;/form&gt;<br />
8: &lt;a href='#' onClick='alert(document.myForm.mySelect.value);'&gt;Check Selection List&lt;/a&gt; </p>
<p><br />
48 动态增加Select项</p>
<p>1: &lt;form name=&#8221;myForm&#8221;&gt;<br />
2: &lt;select name=&#8221;mySelect&#8221;&gt;<br />
3: &lt;option value=&#8221;First Choice&#8221;&gt;1&lt;/option&gt;<br />
4: &lt;option value=&#8221;Second Choice&#8221;&gt;2&lt;/option&gt;<br />
5: &lt;/select&gt;<br />
6: &lt;/form&gt;<br />
7: &lt;script language=&#8221;JavaScript&#8221;&gt;<br />
8: document.myForm.mySelect.length++;<br />
9: document.myForm.mySelect.options[document.myForm.mySelect.length - 1].text = &#8220;3&#8221;;<br />
10: document.myForm.mySelect.options[document.myForm.mySelect.length - 1].value = &#8220;Third Choice&#8221;;<br />
11: &lt;/script&gt; </p>
<p><br />
49 验证表单字段</p>
<p>1: &lt;script language=&#8221;JavaScript&#8221;&gt;<br />
2: function checkField(field) { <br />
3: if (field.value == &#8220;&#8221;) { <br />
4: window.alert(&#8220;You must enter a value in the field&#8221;);<br />
5: field.focus();<br />
6: }<br />
7: }<br />
8: &lt;/script&gt;<br />
9: &lt;form name=&#8221;myForm&#8221; action=&#8221;target.html&#8221;&gt;<br />
10: Text Field: &lt;input type=&#8221;text&#8221; name=&#8221;myField&#8221;onBlur=&#8221;checkField(this)&#8221;&gt;<br />
11: &lt;br&gt;&lt;input type=&#8221;submit&#8221;&gt;<br />
12: &lt;/form&gt; </p>
<p><br />
50 验证Select项</p>
<p>1: function checkList(selection) { <br />
2: if (selection.length == 0) { <br />
3: window.alert(&#8220;You must make a selection from the list.&#8221;);<br />
4: return false;<br />
5: }<br />
6: return true;<br />
7: } </p>
<p><br />
51 动态改变表单的action</p>
<p>1: &lt;form name=&#8221;myForm&#8221; action=&#8221;login.html&#8221;&gt;<br />
2: Username: &lt;input type=&#8221;text&#8221; name=&#8221;username&#8221;&gt;&lt;br&gt;<br />
3: Password: &lt;input type=&#8221;password&#8221; name=&#8221;password&#8221;&gt;&lt;br&gt;<br />
4: &lt;input type=&#8221;button&#8221; value=&#8221;Login&#8221; onClick=&#8221;this.form.submit();&#8221;&gt;<br />
5: &lt;input type=&#8221;button&#8221; value=&#8221;Register&#8221; onClick=&#8221;this.form.action = &#8216;register.html&#8217;; this.form.submit();&#8221;&gt;<br />
6: &lt;input type=&#8221;button&#8221; value=&#8221;Retrieve Password&#8221; onClick=&#8221;this.form.action = &#8216;password.html&#8217;; this.form.submit();&#8221;&gt;<br />
7: &lt;/form&gt; </p>
<p><br />
52 使用图像按钮</p>
<p>1: &lt;form name=&#8221;myForm&#8221; action=&#8221;login.html&#8221;&gt;<br />
2: Username: &lt;input type=&#8221;text&#8221; name=&#8221;username&#8221;&gt;&lt;br&gt;<br />
3: Password: &lt;input type=&#8221;password&#8221;name=&#8221;password&#8221;&gt;&lt;br&gt;<br />
4: &lt;input type=&#8221;image&#8221; src="/&#8221;login.gif"&#8221; value=&#8221;Login&#8221;&gt;<br />
5: &lt;/form&gt;<br />
6: </p>
<p><br />
53 表单数据的加密</p>
<p>1: &lt;SCRIPT LANGUAGE='JavaScript'&gt;<br />
2: &lt;!--<br />
3: function encrypt(item) { <br />
4: var newItem = '';<br />
5: for (i=0; i &lt; item.length; i++) { <br />
6: newItem += item.charCodeAt(i) + '.';<br />
7: }<br />
8: return newItem;<br />
9: }<br />
10: function encryptForm(myForm) { <br />
11: for (i=0; i &lt; myForm.elements.length; i++) { <br />
12: myForm.elements[i].value = encrypt(myForm.elements[i].value);<br />
13: }<br />
14: }<br />
15: <br />
16: //--&gt;<br />
17: &lt;/SCRIPT&gt;<br />
18: &lt;form name='myForm' onSubmit='encryptForm(this); window.alert(this.myField.value);'&gt;<br />
19: Enter Some Text: &lt;input type=text name=myField&gt;&lt;input type=submit&gt;<br />
20: &lt;/form&gt; </p>
<p>&nbsp;</p>
<p><br />
JavaScript就这么回事5：窗口和框架 </p>
<p><br />
54 改变浏览器状态栏文字提示</p>
<p>1: &lt;script language=&#8221;JavaScript&#8221;&gt;<br />
2: window.status = &#8220;A new status message&#8221;;<br />
3: &lt;/script&gt; </p>
<p><br />
55 弹出确认提示框</p>
<p>1: &lt;script language=&#8221;JavaScript&#8221;&gt;<br />
2: var userChoice = window.confirm(&#8220;Click OK or Cancel&#8221;);<br />
3: if (userChoice) { <br />
4: document.write(&#8220;You chose OK&#8221;);<br />
5: } else { <br />
6: document.write(&#8220;You chose Cancel&#8221;);<br />
7: }<br />
8: &lt;/script&gt; </p>
<p><br />
56 提示输入</p>
<p>1: &lt;script language=&#8221;JavaScript&#8221;&gt;<br />
2: var userName = window.prompt(&#8220;Please Enter Your Name&#8221;,&#8221;Enter Your Name Here&#8221;);<br />
3: document.write(&#8220;Your Name is &#8220; + userName);<br />
4: &lt;/script&gt; </p>
<p><br />
57 打开一个新窗口</p>
<p>1: //打开一个名称为myNewWindow的浏览器新窗口<br />
2: &lt;script language=&#8221;JavaScript&#8221;&gt;<br />
3: window.open(&#8220;http://www.liu21st.com/&#8221;,&#8221;myNewWindow&#8221;);<br />
4: &lt;/script&gt; </p>
<p><br />
58 设置新窗口的大小</p>
<p>1: &lt;script language=&#8221;JavaScript&#8221;&gt;<br />
2: window.open(&#8220;http://www.liu21st.com/&#8221;,&#8221;myNewWindow&#8221;,'height=300,width=300');<br />
3: &lt;/script&gt; </p>
<p><br />
59 设置新窗口的位置</p>
<p>1: &lt;script language=&#8221;JavaScript&#8221;&gt;<br />
2: window.open(&#8220;http://www.liu21st.com/&#8221;,&#8221;myNewWindow&#8221;,'height=300,width=300,left=200,screenX=200,top=100,screenY=100');<br />
3: &lt;/script&gt; </p>
<p><br />
60 是否显示工具栏和滚动栏</p>
<p>1: &lt;script language=&#8221;JavaScript&#8221;&gt;<br />
2: window.open(&#8220;http: </p>
<p><br />
61 是否可以缩放新窗口的大小</p>
<p>1: &lt;script language=&#8221;JavaScript&#8221;&gt;<br />
2: window.open('http://www.liu21st.com/' , 'myNewWindow', 'resizable=yes' );&lt;/script&gt; </p>
<p><br />
62 加载一个新的文档到当前窗口</p>
<p>1: &lt;a href='#' onClick='document.location = '125a.html';' &gt;Open New Document&lt;/a&gt; </p>
<p><br />
63 设置页面的滚动位置</p>
<p>1: &lt;script language=&#8221;JavaScript&#8221;&gt;<br />
2: if (document.all) { //如果是IE浏览器则使用scrollTop属性<br />
3: document.body.scrollTop = 200;<br />
4: } else { //如果是NetScape浏览器则使用pageYOffset属性<br />
5: window.pageYOffset = 200;<br />
6: }&lt;/script&gt; </p>
<p><br />
64 在IE中打开全屏窗口</p>
<p>1: &lt;a href='#' onClick=&#8221;window.open('http://www.juxta.com/','newWindow','fullScreen=yes');&#8221;&gt;Open a full-screen window&lt;/a&gt; </p>
<p><br />
65 新窗口和父窗口的操作</p>
<p>1: &lt;script language=&#8221;JavaScript&#8221;&gt;<br />
2: //定义新窗口<br />
3: var newWindow = window.open(&#8220;128a.html&#8221;,&#8221;newWindow&#8221;);<br />
4: newWindow.close(); //在父窗口中关闭打开的新窗口<br />
5: &lt;/script&gt;<br />
6: 在新窗口中关闭父窗口<br />
7: window.opener.close() </p>
<p><br />
66 往新窗口中写内容</p>
<p>1: &lt;script language=&#8221;JavaScript&#8221;&gt;<br />
2: var newWindow = window.open(&#8220;&#8221;,&#8221;newWindow&#8221;);<br />
3: newWindow.document.open();<br />
4: newWindow.document.write(&#8220;This is a new window&#8221;);<br />
5: newWIndow.document.close();<br />
6: &lt;/script&gt; </p>
<p><br />
67 加载页面到框架页面</p>
<p>1: &lt;frameset cols=&#8221;50%,*&#8221;&gt;<br />
2: &lt;frame name=&#8221;frame1&#8221; src="/&#8221;135a.html"&#8221;&gt;<br />
3: &lt;frame name=&#8221;frame2&#8221; src="/&#8221;about:blank"&#8221;&gt;<br />
4: &lt;/frameset&gt;<br />
5: 在frame1中加载frame2中的页面<br />
6: parent.frame2.document.location = &#8220;135b.html&#8221;; </p>
<p><br />
68 在框架页面之间共享脚本<br />
如果在frame1中html文件中有个脚本</p>
<p>1: function doAlert() { <br />
2: window.alert(&#8220;Frame 1 is loaded&#8221;);<br />
3: } </p>
<p>那么在frame2中可以如此调用该方法</p>
<p>1: &lt;body onLoad=&#8221;parent.frame1.doAlert();&#8221;&gt;<br />
2: This is frame 2.<br />
3: &lt;/body&gt; </p>
<p><br />
69 数据公用<br />
可以在框架页面定义数据项，使得该数据可以被多个框架中的页面公用</p>
<p>1: &lt;script language=&#8221;JavaScript&#8221;&gt;<br />
2: var persistentVariable = &#8220;This is a persistent value&#8221;;<br />
3: &lt;/script&gt;<br />
4: &lt;frameset cols=&#8221;50%,*&#8221;&gt;<br />
5: &lt;frame name=&#8221;frame1&#8221; src="/&#8221;138a.html"&#8221;&gt;<br />
6: &lt;frame name=&#8221;frame2&#8221; src="/&#8221;138b.html"&#8221;&gt;<br />
7: &lt;/frameset&gt; </p>
<p><br />
这样在frame1和frame2中都可以使用变量persistentVariable <br />
70 框架代码库<br />
根据以上的一些思路，我们可以使用一个隐藏的框架页面来作为整个框架集的代码库</p>
<p>1: &lt;frameset cols=&#8221;0,50%,*&#8221;&gt;<br />
2: &lt;frame name=&#8221;codeFrame&#8221; src="/&#8221;140code.html"&#8221;&gt;<br />
3: &lt;frame name=&#8221;frame1&#8221; src="/&#8221;140a.html"&#8221;&gt;<br />
4: &lt;frame name=&#8221;frame2&#8221; src="/&#8221;140b.html"&#8221;&gt;<br />
5: &lt;/frameset&gt; </p>
<p>文章来源: 动态网站制作(www.knowsky.com) 出处：http://www.knsowsky.com/340465.html</p>
<img src ="http://www.blogjava.net/lizhuxin/aggbug/222321.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/lizhuxin/" target="_blank">☆</a> 2008-08-15 18:30 <a href="http://www.blogjava.net/lizhuxin/articles/222321.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>IE浏览器和firefox浏览器的javascript的区别</title><link>http://www.blogjava.net/lizhuxin/articles/221953.html</link><dc:creator>☆</dc:creator><author>☆</author><pubDate>Thu, 14 Aug 2008 04:34:00 GMT</pubDate><guid>http://www.blogjava.net/lizhuxin/articles/221953.html</guid><wfw:comment>http://www.blogjava.net/lizhuxin/comments/221953.html</wfw:comment><comments>http://www.blogjava.net/lizhuxin/articles/221953.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/lizhuxin/comments/commentRss/221953.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/lizhuxin/services/trackbacks/221953.html</trackback:ping><description><![CDATA[IE浏览器和firefox浏览器的javascript的区别：<br />
<br />
<p>Ie和firefox的Js区别 <br />
1. 对象问题 <br />
1.1 Form对象 <br />
现有问题：<br />
现有代码这获得form对象通过document.forms("formName")，这样使用在IE 能接受，MF 不能。<br />
解决方法：<br />
改用 作为下标运算。改为document.forms["formName"]<br />
备注<br />
上述的改用 作为下标运算中的formName是id而name</p>
<p>1.2 HTML对象 <br />
现有问题：<br />
在 IE 中，HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在 MF 中不能。<br />
document.all("itemName")或者document.all("itemId")<br />
解决方法：<br />
使用对象ID作为对象变量名<br />
document.getElementById("itemId")<br />
备注<br />
document.all是IE自定义的方法，所以请大家尽量不使用。<br />
还有一种方式，在IE和MF都可以使用<br />
var f = document.forms["formName "];<br />
var o = f. itemId;</p>
<p>1.3 DIV对象 <br />
现有问题：<br />
在 IE 中，DIV对象可以使用ID作为对象变量名直接使用。在 MF 中不能。<br />
DivId.style.display = "none"<br />
解决方法：<br />
document.getElementById("DivId").style.display = "none"<br />
备注<br />
获得对象的方法不管是不是DIV对象，都使用getElementById方法。参见1.2</p>
<p><br />
1.4 关于frame <br />
现有问题<br />
在 IE中 可以用window.testFrame取得该frame，mf中不行<br />
解决方法<br />
在frame的使用方面MF和IE的最主要的区别是：<br />
如果在frame标签中书写了以下属性：</p>
<p>那么IE可以通过id或者name访问这个frame对应的window对象<br />
而mf只可以通过name来访问这个frame对应的window对象<br />
例如如果上述frame标签写在最上层的window里面的htm里面，那么可以这样访问<br />
IE： window.top.frameId或者window.top.frameName来访问这个window对象<br />
MF：只能这样window.top.frameName来访问这个window对象<br />
另外，在mf和ie中都可以使用window.top.document.getElementById("frameId")来访问frame标签<br />
并且可以通过window.top.document.getElementById("testFrame").src = 'xx.htm'来切换frame的内容<br />
也都可以通过window.top.frameName.location = 'xx.htm'来切换frame的内容</p>
<p>1.5 窗口 <br />
现有问题<br />
IE中可以通过showModalDialog和showModelessDialog打开模态和非模态窗口，但是MF不支持。<br />
解决办法<br />
直接使用window.open(pageURL,name,parameters)方式打开新窗口。<br />
如果需要传递参数，可以使用frame或者iframe。</p>
<p>2. 总结 <br />
2.1 在JS中定义各种对象变量名时，尽量使用id，避免使用name。 <br />
在 IE 中，HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在 MF 中不能，所以在平常使用时请尽量使用id，避免只使用name，而不使用id。</p>
<p>2.2 变量名与某 HTML 对象 id 相同的问题 <br />
现有问题<br />
在 MF 中，因为对象 id 不作为 HTML 对象的名称，所以可以使用与 HTML 对象 id 相同的变量名，IE 中不能。<br />
解决方法<br />
在声明变量时，一律加上 var ，以避免歧义，这样在 IE 中亦可正常运行。<br />
此外，最好不要取与 HTML 对象 id 相同的变量名，以减少错误。</p>
<p><br />
1. document.all<br />
&nbsp;&nbsp; Firefox可以兼容document.all， 但会生成一条警告。可以用getElementById("*") 或者 getElementByTagName("*)来代替<br />
&nbsp;&nbsp; 不过对于document.all.length等属性，则完全不兼容。<br />
2. parentElement<br />
&nbsp;&nbsp; 这个也不兼容。比方说， obj.parentElement.name 则应改成 obj.parentNode.attributes.getNamedItem("name").nodeValue （不知道如何写得更简洁些）<br />
3. event<br />
&nbsp;&nbsp; W3C不支持windows.event<br />
&nbsp;&nbsp; 比方说: <br />
在IE里面<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="menu" id="menu" onclick="onMenuClick(); "&gt;.....&lt;/div&gt;<br />
&nbsp;&nbsp; function onMenuClick()<br />
&nbsp;&nbsp; {<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; collapseMenu(event.srcElement);<br />
&nbsp;&nbsp; } <br />
工作正常。不过在Firefox中，则改成：</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="menu" id="menu" onclick="onMenuClick(event); "&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; function onMenuClick(evt)<br />
&nbsp;&nbsp; {<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if(evt == null)<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; evt = window.event; // For IE<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var srcElement = evt.srcElement? evt.srcElement : evt.target; // IE使用srcElement, 而Firefox使用target<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; collapseMenu(srcElement);<br />
}</p>
<p><br />
IE和FIREFOX在解析CSS方面的区别 <br />
对高度的解析 <br />
IE：将根据内容的高度变化，包括未定义高度的图片内容，即使定义了高度，当内容超过高度时，将使用实际高度 </p>
<p>Firefox：没有定义高度时，如果内容中包括了图片内容，MF的高度解析是根据印刷标准，这样就会造成和实际内容高度不符合的情况；当定义了高度，但是内容超过高度时，内容会超出定义的高度，但是区域使用的样式不会变化，造成样式错位。 </p>
<p>结论：大家在可以确定内容高度的情况下最好定义高度，如果真的没有办法定义高度，最好不用使用边框样式，否则样式肯定会出现混乱！ </p>
<p>img对象alt和title的解析 <br />
alt：当照片不存在或者load错误时的提示； </p>
<p>title：照片的tip说明。 </p>
<p>在IE中如果没有定义title，alt也可以作为img的tip使用，但是在MF中，两者完全按照标准中的定义使用 </p>
<p>结论：大家在定义img对象时，最后将alt和title对象都写全，保证在各种浏览器中都能正常使用 </p>
<p>其他的细节差别 </p>
<p>当你在写css的时候，特别是用float: left（或right）排列一窜图片时，会发现在firefox里面正常而IE里面有问题。无论你用margin:0,还是border: 0来约束，都无济于事。 </p>
<p>其实这里还有另外一个问题，就是IE对于空格的处理，firefox是忽略的而IE对于块与块之间的空格是处理的。也就是说一个div结束后要紧接着一个div写，中间不要有回车或者空格。不然也许会有问题，比如3px的偏差，而且这个原因很难发现。 </p>
<p>非常不走运的是我又碰到了这样的问题，多个img标签连着，然后定义的float: left，希望这些图片可以连起来。但是结果在firefox里面正常而IE里面显示的每个img都相隔了3px。我把标签之间的空格都删除都没有作用。 </p>
<p>后来的解决方法是在img外面套li，并且对li定义margin: 0，这样就解决了IE和firefox的显示偏差。IE对于一些模型的解释会产生很多错误问题，只有多多尝试才能发现原因。 </p>
<p>这只是一些简单的区别,在做布局和CSS设计时候可以综合考虑,但最为有效与简单的解决兼容问题还是用TABLE表格,表格在兼容性方面有着不错的表现. </p>
<p>另外在模版的JS设计的时候也需要考虑两者对代码的兼容,以下是对IE与FIREFOX中JS的一些测试: </p>
<p>以下以 IE 代替 Internet Explorer，以 MF 代替 Mozilla Firefox </p>
<p>1. document.form.item 问题<br />
(1)现有问题：<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 现有代码中存在许多 document.formName.item("itemName") 这样的语句，不能<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 在 MF 下运行<br />
(2)解决方法：<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 改用 document.formName.elements["elementName"]<br />
(3)其它<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 参见 2 </p>
<p>2. 集合类对象问题<br />
(1)现有问题：<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 现有代码中许多集合类对象取用时使用 ()，IE 能接受，MF 不能。<br />
(2)解决方法：<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 改用 [] 作为下标运算。如：document.forms("formName") 改为<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; document.forms["formName"]。<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 又如：document.getElementsByName("inputName")(1) 改为<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; document.getElementsByName("inputName")[1]<br />
(3)其它 </p>
<p>3. window.event<br />
(1)现有问题：<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 使用 window.event 无法在 MF 上运行<br />
(2)解决方法：<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; MF 的 event 只能在事件发生的现场使用，此问题暂无法解决。可以这样变通：<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 原代码(可在IE中运行)：<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="button" name="someButton" value="提交"<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; onclick="javascript:gotoSubmit()"/&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ...<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;script language="javascript"&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; function gotoSubmit() {<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ...<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; alert(window.event); // use window.event<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ...<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/script&gt; </p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 新代码(可在IE和MF中运行)：<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="button" name="someButton" value="提交"<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; onclick="javascript:gotoSubmit(event)"/&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ...<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;script language="javascript"&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; function gotoSubmit(evt) {<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; evt = evt ? evt : (window.event ? window.event : null);<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ...<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; alert(evt);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // use evt<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ...<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/script&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 此外，如果新代码中第一行不改，与老代码一样的话(即 gotoSubmit 调用没有给<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 参数)，则仍然只能在IE中运行，但不会出错。所以，这种方案 tpl 部分仍与老<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 代码兼容。 </p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ///////////////////////////////////////////////////////////////////////<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // 以下来自网友 llihua&nbsp;&nbsp;&nbsp; <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //事件处理函数<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; function a(evt) { //FireFox<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; evt = evt? evt: window.event; //IE<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var srcElem = (evt.target)? evt.target: evt.srcElement;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //事件处理...<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }</p>
<p>在连接事件处理函数的时候，可以用Inline HTML方式，也可以用Event<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; property方式定义。<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 1、使用Inline HTML方式，如：<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="radio" name="radio" value="1"<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; onclick="javascript:a(event)"&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 注意：<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; (1)javascript不能省；<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; (2)实参要使用event，形参使用什么都可以(如evt、event等)；<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 2、使用Event property方式绑定事件处理函数，如：<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; document.form2.radio[0].onclick = a;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // 以上来自网友 llihua&nbsp;&nbsp;&nbsp; <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; /////////////////////////////////////////////////////////////////////// </p>
<p>4. HTML 对象的 id 作为对象名的问题<br />
(1)现有问题<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 在 IE 中，HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; MF 中不能。<br />
(2)解决方法<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 用 getElementById("idName") 代替 idName 作为对象变量使用。 </p>
<p>5. 用idName字符串取得对象的问题<br />
(1)现有问题<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 在IE中，利用 eval(idName) 可以取得 id 为 idName 的 HTML 对象，在MF 中不<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 能。<br />
(2)解决方法<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 用 getElementById(idName) 代替 eval(idName)。 </p>
<p>6. 变量名与某 HTML 对象 id 相同的问题<br />
(1)现有问题<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 在 MF 中，因为对象 id 不作为 HTML 对象的名称，所以可以使用与 HTML 对象<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; id 相同的变量名，IE 中不能。<br />
(2)解决方法<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 在声明变量时，一律加上 var ，以避免歧义，这样在 IE 中亦可正常运行。<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 此外，最好不要取与 HTML 对象 id 相同的变量名，以减少错误。<br />
(3)其它<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 参见 问题4 </p>
<p>7. event.x 与 event.y 问题<br />
(1)现有问题<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 在IE 中，event 对象有 x, y 属性，MF中没有。<br />
(2)解决方法<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 在MF中，与event.x 等效的是 event.pageX。但event.pageX IE中没有。<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 故采用 event.clientX 代替 event.x。在IE 中也有这个变量。<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; event.clientX 与 event.pageX 有微妙的差别（当整个页面有滚动条的时候），<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 不过大多数时候是等效的。 </p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 如果要完全一样，可以稍麻烦些：<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; mX = event.x ? event.x : event.pageX;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 然后用 mX 代替 event.x<br />
(3)其它<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; event.layerX 在 IE 与 MF 中都有，具体意义有无差别尚未试验。 </p>
<p><br />
8. 关于frame<br />
(1)现有问题<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 在 IE中 可以用window.testFrame取得该frame，mf中不行<br />
(2)解决方法<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 在frame的使用方面mf和ie的最主要的区别是：<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 如果在frame标签中书写了以下属性：<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;frame src="xx.htm" id="frameId" name="frameName" /&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 那么ie可以通过id或者name访问这个frame对应的window对象<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 而mf只可以通过name来访问这个frame对应的window对象<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 例如如果上述frame标签写在最上层的window里面的htm里面，那么可以这样访问<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ie： window.top.frameId或者window.top.frameName来访问这个window对象<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; mf： 只能这样window.top.frameName来访问这个window对象 </p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 另外，在mf和ie中都可以使用<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; window.top.document.getElementById("frameId")<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 来访问<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; frame标签<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 并且可以通过<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; window.top.document.getElementById("testFrame").src = 'xx.htm'<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 来切换frame的内容<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 也都可以通过window.top.frameName.location = 'xx.htm'来切换frame的内容<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 关于frame和window的描述可以参见bbs的&#8216;window与frame&#8217;文章<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 以及/test/js/test_frame/目录下面的测试<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ----adun 2004.12.09修改 </p>
<p>9. 在mf中，自己定义的属性必须getAttribute()取得<br />
10.在mf中没有&nbsp;&nbsp; parentElement parement.children&nbsp;&nbsp; 而用<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; parentNode parentNode.childNodes<br />
childNodes的下标的含义在IE和MF中不同，MF使用DOM规范，childNodes中会插入空白<br />
文本节点。<br />
&nbsp;&nbsp; 一般可以通过node.getElementsByTagName()来回避这个问题。<br />
当html中节点缺失时，IE和MF对parentNode的解释不同，例如<br />
&lt;form&gt;<br />
&lt;table&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input/&gt;<br />
&lt;/table&gt;<br />
&lt;/form&gt;<br />
MF中input.parentNode的值为form, 而IE中input.parentNode的值为空节点 </p>
<p>MF中节点没有removeNode方法，必须使用如下方法<br />
node.parentNode.removeChild(node) </p>
<p>11.const 问题<br />
&nbsp;&nbsp; (1)现有问题:<br />
&nbsp;&nbsp;&nbsp; 在 IE 中不能使用 const 关键字。如 const constVar = 32;<br />
&nbsp;&nbsp;&nbsp; 在IE中这是语法错误。<br />
&nbsp;&nbsp; (2)解决方法:<br />
&nbsp;&nbsp;&nbsp; 不使用 const ，以 var 代替。 </p>
<p>12. body 对象<br />
MF的body在body标签没有被浏览器完全读入之前就存在，而IE则必须在body完全被读入<br />
之后才存在 </p>
<p>13. url encoding<br />
在js中如果书写url就直接写&amp;不要写&amp;例如<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var url = 'xx.jsp?objectName=xx&amp;objectEvent=xxx';<br />
frm.action = url那么很有可能url不会被正常显示以至于参数没有正确的传到服务器<br />
一般会服务器报错参数没有找到<br />
当然如果是在tpl中例外，因为tpl中符合xml规范，要求&amp;书写为&amp;<br />
一般MF无法识别js中的&amp; </p>
<p><br />
14. nodeName 和 tagName 问题<br />
&nbsp;&nbsp; (1)现有问题：<br />
&nbsp;&nbsp;&nbsp; 在MF中，所有节点均有 nodeName 值，但 textNode 没有 tagName 值。在 IE 中，<br />
&nbsp;&nbsp;&nbsp; nodeName 的使用好象<br />
&nbsp;&nbsp;&nbsp; 有问题（具体情况没有测试，但我的IE已经死了好几次）。<br />
&nbsp;&nbsp; (2)解决方法：<br />
&nbsp;&nbsp;&nbsp; 使用 tagName，但应检测其是否为空。 </p>
<p>15. 元素属性<br />
IE下 input.type属性为只读，但是MF下可以修改 </p>
<p><br />
16. document.getElementsByName() 和 document.all[name] 的问题<br />
&nbsp;&nbsp; (1)现有问题：<br />
&nbsp;&nbsp;&nbsp; 在 IE 中，getElementsByName()、document.all[name] 均不能用来取得 div 元素<br />
&nbsp;&nbsp;&nbsp; （是否还有其它不能取的元素还不知道）。 </p>
<p>17. DOM 数据岛的问题<br />
&nbsp;&nbsp; (1)现有问题<br />
&nbsp;&nbsp;&nbsp; 在IE中, &lt;xml&gt;标签具有特殊意义, 可以内含XML DOM, 并能实现与HTML组件的数据<br />
&nbsp;&nbsp;&nbsp; 绑定. 在MF中,&lt;xml&gt;则仅仅是一个未知的标记而已.<br />
&nbsp;&nbsp;&nbsp; 另外, 对 IE 来说, &lt;xml&gt;实际意味着这里是一个ActiveX对象, 但它却挂在HTML本<br />
&nbsp;&nbsp;&nbsp; 身的DOM树下作为一个节点, 因而会对DOM树的遍历造成严重影响.<br />
&nbsp;&nbsp; (2)解决方法<br />
&nbsp;&nbsp;&nbsp; IE的数据绑定机制是可以用JS来模拟的, 但是太麻烦, 建议不使用数据绑定机制或者<br />
&nbsp;&nbsp;&nbsp; 寻找实现这种模拟的库来做. 我们只讨论如何实现DOM的兼容.<br />
&nbsp;&nbsp;&nbsp; 在MF中无论已知的HTML标记还是其它符合XML规范的标记, 都是用统一的DOM树来处理<br />
&nbsp;&nbsp;&nbsp; 的, 因此, MF事实上完全可以使用DOM数据岛, 但与IE小小的不同在于: 在IE中&lt;xml&gt;<br />
&nbsp;&nbsp;&nbsp; 是个 DOM document, 而在MF只是 DOM node. 这个差别通常不足为患.<br />
&nbsp;&nbsp;&nbsp; 但是有一个小小的细节, 为了兼容HTML相当随意的语法, MF无法识别简写的空标记.<br />
&nbsp;&nbsp;&nbsp; 如: &lt;xml id="xx"&gt;&lt;book&gt;&lt;title&gt;xxxx&lt;/title&gt;&lt;content/&gt;&lt;index/&gt;&lt;/book&gt;&lt;/xml&gt;,<br />
&nbsp;&nbsp;&nbsp; 这其中&lt;content/&gt;和&lt;index/&gt;是简写形式的, 会使MF无法识别, 应当写成:<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;content&gt;&lt;/content&gt;&lt;index&gt;&lt;/index&gt;<br />
&nbsp;&nbsp;&nbsp; 不过, 我怀疑如果用XHTML, 可能就没有这种问题. 但我还没有试过.<br />
&nbsp;&nbsp;&nbsp; 对于IE中&lt;xml&gt;干扰HTML的DOM结构问题, 我现在的方法是处理完毕后把它从HTML的<br />
&nbsp;&nbsp;&nbsp; DOM中删除. 不知道还有没有更好的解. <br />
</p>
<img src ="http://www.blogjava.net/lizhuxin/aggbug/221953.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/lizhuxin/" target="_blank">☆</a> 2008-08-14 12:34 <a href="http://www.blogjava.net/lizhuxin/articles/221953.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>javascript基础知识</title><link>http://www.blogjava.net/lizhuxin/articles/221952.html</link><dc:creator>☆</dc:creator><author>☆</author><pubDate>Thu, 14 Aug 2008 04:33:00 GMT</pubDate><guid>http://www.blogjava.net/lizhuxin/articles/221952.html</guid><wfw:comment>http://www.blogjava.net/lizhuxin/comments/221952.html</wfw:comment><comments>http://www.blogjava.net/lizhuxin/articles/221952.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/lizhuxin/comments/commentRss/221952.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/lizhuxin/services/trackbacks/221952.html</trackback:ping><description><![CDATA[<p>javascript基础知识：</p>
<p><br />
可以使用下述两种方法得到窗体对象<br />
1) 使用窗体标记的名称（name）值。<br />
例如：var myForm1=document.form1;<br />
2) 通过窗体数组<br />
例如：var myForm1=document.forms[0];<br />
或&nbsp;&nbsp;&nbsp; var myForml=document.forms["form1"];</p>
<p>在JAVASCRIPT中引用窗体元素对象可以用以下两种方法<br />
通过元素名称的方法<br />
document.窗体对象名称.元素名称<br />
通过窗体的元素数组的方法<br />
document.窗体对象名称.elements["i"]<br />
i为对象名称及name属性。</p>
<p>列表选项<br />
1) 添加列表选项。首先新建一个选项对象，然后　　　将该对象赋值给列表选项数组中。语法如下：<br />
new&nbsp; Option（[选项的文字内容[，选项的值[，是否选上]]]]）<br />
例：var newOption=new Option(&#8220;重庆&#8221;,&#8221;3&#8221;）；<br />
&nbsp;myList.options[1]=newOption;<br />
2) 删除列表选项。只要将列表选项数组中指定的选项赋值为null就可以了。<br />
例:myList.option[1]=null;</p>
<p>&nbsp;DHTML对象模型方法为javascript提供了另外一种得到网页对象的方法，这种方法简洁、明了，使用时可以不用具体了解文档对象模型的结构层次，而直接得到网页中的所需元素对象，这样javscript就可以方便地改变网页的内容及网页的表现方式。其特点如下：<br />
（1）网页中的每一对标记就是一个元素对象。例如，&lt;p&gt;&lt;/p&gt;、&lt;div&gt;&lt;/div&gt;、，&lt;input&gt;等。<br />
（2）为了得到网页中的对象，在标记中赋值一个唯一的id。例如，&lt;p id=&#8220;block1&#8221;&gt;&lt;/p&gt;、&lt;div id=&#8220;titleBar&#8221;&gt;&lt;/div&gt;等。<br />
（3）通过document.gerElementByID的方法得到所需的对象。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<img src ="http://www.blogjava.net/lizhuxin/aggbug/221952.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/lizhuxin/" target="_blank">☆</a> 2008-08-14 12:33 <a href="http://www.blogjava.net/lizhuxin/articles/221952.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>dojo日历的使用：</title><link>http://www.blogjava.net/lizhuxin/articles/221949.html</link><dc:creator>☆</dc:creator><author>☆</author><pubDate>Thu, 14 Aug 2008 04:30:00 GMT</pubDate><guid>http://www.blogjava.net/lizhuxin/articles/221949.html</guid><wfw:comment>http://www.blogjava.net/lizhuxin/comments/221949.html</wfw:comment><comments>http://www.blogjava.net/lizhuxin/articles/221949.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/lizhuxin/comments/commentRss/221949.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/lizhuxin/services/trackbacks/221949.html</trackback:ping><description><![CDATA[dojo日历的使用：<br />
<br />
&nbsp;
<table cellpadding="0" border="0">
    <tbody>
        <tr>
            <td style="padding-right: 0.75pt; padding-left: 0.75pt; padding-bottom: 0.75pt; padding-top: 0.75pt">
            <p style="text-align: left" align="left"><span style="font-size: 12pt; font-family: 宋体">DropdownDatePicker</span><span style="font-size: 12pt; font-family: 宋体">和DatePicker这是两个封装良好的日历组件，用来给用户提供方便的日历选择方式。</span></p>
            <p style="text-align: left" align="left"><span style="font-size: 12pt; font-family: 宋体">以较为复杂的DropdownDatePicker为例，首先在页面中require进来这个组件：<br />
            &lt;script type="text/javascript"&gt;<br />
            &lt;!--<br />
            dojo.require("dojo.widget.DropdownDatePicker");<br />
            //--&gt;<br />
            &lt;/script&gt;<br />
            然后在页面中加入：<br />
            &lt;div inputName="startDate" dojoType="dropdowndatepicker" dateFormat="%Y-%m-%d" weekStartsOn="1" adjustWeeks="true"/&gt;<br />
            或<br />
            &lt;div inputName="endDate" dojoType="dropdowndatepicker" dateFormat="%Y-%m-%d" weekStartsOn="1" adjustWeeks="true"/&gt;<br />
            Dojo就会自动生成两个日历组件，一个用来选择开始日期，一个用来选择结束日期。</span></p>
            <p style="text-align: left" align="left"><span style="font-size: 12pt; font-family: 宋体">其 中的属性dojoType指明widget的类型（全部小写就可以了）。inputName就是生成的input字段的name，提交时候作为表单的一个 参数。dateFormat是日期的格式。weekStartsOn是日历中显示的一周以哪一天开始，这里是以周一开始（0-6，0代表周日）。 adjustWeeks指明是否需要根据每个月的实际天数来调整日历中每月显示的天数（如果不调整，每个月除了自己的天数，还会多出一些相邻月份的天数， 总的天数固定为42天）。<br />
            如果需要给日期设置一个初始值，可以添加value属性，例如value="2006-10-25"。</span></p>
            <p style="text-align: left" align="left"><span style="font-size: 12pt; font-family: 宋体">以下的例子将组件的setDate事件（就是组件的setDate方法被调用）与外部某个回调函数关联起来：<br />
            html这样声明：<br />
            &lt;div id="foo" inputName="startDate" dojoType="dropdowndatepicker" dateFormat="%Y-%m-%d" weekStartsOn="1" adjustWeeks="true"/&gt;</span></p>
            <p style="text-align: left" align="left"><span style="font-size: 12pt; font-family: 宋体">Javas cript</span><span style="font-size: 12pt; font-family: 宋体">这样写：<br />
            &lt;script type="text/javas cript"&gt;<br />
            &lt;!--<br />
            function test(rfcDate){<br />
            alert(rfcDate);<br />
            }<br />
            dojo.event.connect( dojo.widget.byId("foo").datePicker, "setDate", test);<br />
            //--&gt;<br />
            &lt;/script&gt;<br />
            当选择了日期，要将日期设置到input字段中时，会调用test回调函数。</span></p>
            <p style="text-align: left" align="left"><span style="font-size: 12pt; font-family: 宋体">DatePicker</span><span style="font-size: 12pt; font-family: 宋体">组件的用法类似，DropdownDatePicker实际上是对DatePicker组件所做的一个封装，更适合使用在表单输入的环境中。</span></p>
            </td>
        </tr>
    </tbody>
</table>
<br />
<br />
<br />
<p>在页面引入<br />
&lt;script type="text/javascript" src="struts/dojo/dojo.js"&gt;&lt;/script&gt;<br />
&lt;script type="text/javascript" src="struts/simple/dojoRequire.js"&gt;&lt;/script&gt;</p>
<p>增加页面<br />
&lt;td&gt;<br />
&nbsp;&lt;script type="text/javascript"&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; dojo.require("dojo.widget.DatePicker");<br />
&nbsp;&lt;/script&gt;<br />
&lt;div dojoType="dropdowndatepicker" inputName="startTime" dateFormat="%Y年%m月%d日"&nbsp; containerToggle="explode" saveFormat="rfc" &gt;&lt;/div&gt;<br />
&lt;/td&gt;</p>
<p>修改页面:<br />
&nbsp;&lt;td&gt;<br />
&lt;script type="text/javascript"&gt;<br />
dojo.require("dojo.widget.DatePicker");<br />
&lt;/script&gt;<br />
&lt;div dojoType="dropdowndatepicker" inputName="startTime" dateFormat="%Y年%m月%d日"&nbsp; containerToggle="explode" saveFormat="rfc" <br />
value='&lt;bsst:col colType="date" colFormat="yyyy-MM-dd" colName="START_TIME"/&gt;' &gt;&lt;/div&gt;<br />
&lt;/td&gt;</p>
<img src ="http://www.blogjava.net/lizhuxin/aggbug/221949.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/lizhuxin/" target="_blank">☆</a> 2008-08-14 12:30 <a href="http://www.blogjava.net/lizhuxin/articles/221949.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>javascript元素隐藏</title><link>http://www.blogjava.net/lizhuxin/articles/221951.html</link><dc:creator>☆</dc:creator><author>☆</author><pubDate>Thu, 14 Aug 2008 04:30:00 GMT</pubDate><guid>http://www.blogjava.net/lizhuxin/articles/221951.html</guid><wfw:comment>http://www.blogjava.net/lizhuxin/comments/221951.html</wfw:comment><comments>http://www.blogjava.net/lizhuxin/articles/221951.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/lizhuxin/comments/commentRss/221951.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/lizhuxin/services/trackbacks/221951.html</trackback:ping><description><![CDATA[javascript元素隐藏：<br />
<br />
<p>1．DIV和SPAN的区别：<br />
&nbsp;SPAN 和 DIV 的区别在于，DIV(division)是一个块级元素，可以包含<br />
段落、标题、表格，乃至诸如章节、摘要和备注等。而SPAN 是行内元<br />
素，SPAN 的前后是不会换行的，它没有结构的意义，纯粹是应用样式，<br />
当其他行内元素都不合适时，可以使用SPAN。<br />
例如：<br />
&lt;html&gt;<br />
&lt;head&gt;<br />
&lt;title&gt;无标题文档&lt;/title&gt;<br />
&lt;/head&gt;<br />
&lt;body&gt;<br />
&lt;div&gt;div&lt;/div&gt;<br />
&lt;span&gt;span&lt;/span&gt;<br />
&lt;/body&gt;<br />
&lt;/html&gt;</p>
<p><br />
display和visibility的用法:<br />
&nbsp;display属性和visibility属性的用法比较相似；如果设置display的<br />
属性为block，或设置visibility的属性为visible,都可以显示元素对象<br />
内容。反之，如果设置display属性值为none,或设置visibility的属性值<br />
为hidden。都将隐藏元素对象内容。它们之间的区别在于，当使用<br />
display属性进行隐藏的时候，被隐藏的元素对象将不占位置。其他元素<br />
将紧接着顺序显示。当使用visibility属性进行隐藏元素对象的操作时，<br />
只是隐藏了当前对象的内容，当仍保留其区域。<br />
&nbsp;如果使用display的none属性隐藏，则只能用display的block属性来恢<br />
复。同理：如果使用visibility的hidden属性隐藏，则也只能用<br />
visibility的visible来恢复。</p>
<p>&nbsp;</p>
<p>&lt;html&gt;&lt;head&gt;&lt;title&gt;无标题文档&lt;/title&gt;&lt;/head&gt;&lt;script&gt;<br />
function display(){<br />
&nbsp;var type1 = document.getElementById("type1");<br />
&nbsp;&nbsp;if(type1.checked){<br />
&nbsp;&nbsp;document.getElementById("length").style.display = "none";<br />
&nbsp;&nbsp;document.getElementById("width").style.display = "block";<br />
&nbsp;&nbsp;document.getElementById("color").style.display = "block";<br />
&nbsp;}<br />
}<br />
function show(){&nbsp;&nbsp;<br />
&nbsp;&nbsp;document.getElementById("length").style.display = "block";<br />
&nbsp;&nbsp;document.getElementById("width").style.display = "block";<br />
&nbsp;&nbsp;document.getElementById("color").style.display = "block";&nbsp;<br />
}<br />
&lt;/script&gt;&lt;body&gt;<br />
&lt;input type="radio" name="type" id="type1" onclick="display()"/&gt;隐藏&#8220;长度&#8221;<br />
&lt;input type="submit" name="submit" onclick="show()" value="重置"/&gt;<br />
&lt;div id="length"&gt;长度&lt;input type="text"/&gt;&lt;/div&gt;<br />
&lt;div id="width"&gt;宽度&lt;input type="text"/&gt;&lt;/div&gt;<br />
&lt;div id="color"&gt;颜色&lt;input type="text"/&gt;&lt;/div&gt;<br />
&lt;/body&gt;&lt;/html&gt;</p>
<p>&nbsp;</p>
<img src ="http://www.blogjava.net/lizhuxin/aggbug/221951.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/lizhuxin/" target="_blank">☆</a> 2008-08-14 12:30 <a href="http://www.blogjava.net/lizhuxin/articles/221951.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>javascript事件响应</title><link>http://www.blogjava.net/lizhuxin/articles/221948.html</link><dc:creator>☆</dc:creator><author>☆</author><pubDate>Thu, 14 Aug 2008 04:28:00 GMT</pubDate><guid>http://www.blogjava.net/lizhuxin/articles/221948.html</guid><wfw:comment>http://www.blogjava.net/lizhuxin/comments/221948.html</wfw:comment><comments>http://www.blogjava.net/lizhuxin/articles/221948.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/lizhuxin/comments/commentRss/221948.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/lizhuxin/services/trackbacks/221948.html</trackback:ping><description><![CDATA[javascript事件响应：<br />
<br />
&nbsp;
<p>（１）单击事件onClick</p>
<p>当用户单击鼠标按钮时，产生onClick事件。同时onClick指定的事件处理程序或代码将被调用执行。通常在下列基本对象中产生：</p>
<p>button（按钮对象） <br />
checkbox（复选框）或（检查列表框） <br />
radio （单选钮） <br />
reset buttons（重要按钮） <br />
submit buttons（提交按钮） <br />
例：可通过下列按钮激活change()文件：</p>
<p>&lt;Form&gt;</p>
<p>&lt;Input type="button" Value=&#8220; &#8221; onClick="change()"&gt;</p>
<p>&lt;/Form&gt;</p>
<p>在onClick等号后，可以使用自己编写的函数作为事件处理程序，也可以使用JavaScript中内部的函数。还可以直接使用JavaScript的代码等。例：</p>
<p>&lt;Input type="button" value=" " onclick=alert("这是一个例子");</p>
<p>（２）onChange改变事件</p>
<p>当利用text或texturea元素输入字符值改变时发该事件，同时当在select表格项中一个选项状态改变后也会引发该事件。</p>
<p>例： &lt;Form&gt;</p>
<p>&lt;Input type="text" name="Test" value="Test" onCharge="check('this.test)"&gt;</p>
<p>&lt;/Form&gt;</p>
<p>（３）选中事件onSelect</p>
<p>当Text或Textarea对象中的文字被加亮后，引发该事件。</p>
<p>（４）获得焦点事件onFocus</p>
<p>当用户单击Text或textarea以及select对象时，产生该事件。此时该对象成为前台对象。</p>
<p>（５）失去焦点onBlur</p>
<p>当text对象或textarea对象以及select对象不再拥有焦点、而退到后台时，引发该文件，他与onFocas事件是一个对应的关系。</p>
<p>（６）载入文件onLoad</p>
<p>当文档载入时，产生该事件。onLoad一个作用就是在首次载入一个文档时检测cookie的值，并用一个变量为其赋值，使它可以被源代码使用。</p>
<p>（７）卸载文件onUnload</p>
<p>当Web页面退出时引发onUnload事件，并可更新Cookie的状态。</p>
<img src ="http://www.blogjava.net/lizhuxin/aggbug/221948.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/lizhuxin/" target="_blank">☆</a> 2008-08-14 12:28 <a href="http://www.blogjava.net/lizhuxin/articles/221948.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item></channel></rss>