HTML&JS&DOM笔记总纲
1.HTML简介 { HTML(HyperText?Markup?Language)就是描述网页长什么样子、有什么内容的一个文本。 } 2.HTML的基本格式 { <html> <head> <title>我的第一个网页</title> </head> <body bgcolor="red" background="bg.jpg"> Hello world </body> </html> } 3.HTML里的标签 { <html> (1)H标签，HTML定义了<h1></h1>到<h6></h6>六个h标签，分别表示不同大小的字体。其中<H1>最大字体。 (2)BR标签，只是回车正常用在需要回车的地方的后面打上<br> 不需要</br> (3)P标签，<p>是分段。<p>前后会有比较大的空白，而<br>则没有。 (4)位置标签 <center>传智播客</center>居中显示 <left></left>靠左 <right></right>靠右 (5)B标签，<b>和</b>表示标签之间的字加粗显示。 (6)I标签，<i>和</i>表示标签之间的字为斜体显示。 (7)Font标签 ,<font></font>是字体标签，在里面可以设置color,size,face等属性 <font color="red" size="30">我是Font标签</font> (8)特殊字符HTML中<、>是有特殊含义的、空格是不会被显示的，所以需要特殊符号，相当于C#中的'\n'转义符。 <（小于号，less than）； >（大于号，greater than）； （空格，no-break space） (9)HR标签 ，在HTML中 <hr> 为分隔符（水平线），可以设置width,color,size,align 等属性 <hr width="300px" color="red" size="10px" align="left"> (10)Pre标签，预格式化，在<pre>和</pre> 之间的内容，全部按照你在设计时的格式显示出去 </html> (11)关于HTML注释<!-- 这期间可以添加注释 --> } 4.URL、超链接 { (1)URL：URL表示资源在网络中的地址，比如 http://127.0.0.1/a.htm、ftp://192.168.88.128/b.zip。 (2)超级链接：<a href="http://www.rupeng.com">如鹏网</a>。 中还可以嵌套图片，这样就是点击图UR片打开连接 <a href="http://www.rupeng.com"><img src="http://www.rupeng.com/forum/templates/uchome/images/logo.gif"/></a> } 5.路径 { (1)绝对路径 绝对路径就是物理路径， 在herf里面写上全路径 <a herf="C:\Users\Avraber\Desktop\20120718\123.htm"></a> (2)相对路径 相对URL表示相对于当前文档的资源，“/”表示网站根目录，“../”表示父目录，“http://www.cnblogs.com/”表示父目录的父目录，“./”或者不写任何斜线表示相对于当前路径的目录。在文件夹里就写 ./123/test.xml 站内引用最好用相对URL，这样域名改变了、目录改变了都不受影响。 <a href="a.htm"><img src="a.jpg"/></a> <img src="../images/csharp1.jpg" /> <img src="http://images.cnblogs.com/csharp1.jpg" /> 将<a>的target属性设定为"_blank"就可以在新窗口中打开超链接。国情：国内的网站很多都是默认在新窗口中打开。 <a target="_blank"></a> (3)锚记 用name属性为<a> 起名字：<a name="Last">这里是最后</a>。这样可以通过<a href="#Last">转到平台</a>来跳转到超链接的部分。 案例：去往评论、回到正文 } 6.图片 { (1)<img src="a.jpg"/>注意图片是链接的，不是插入的，所以如果Src指向的文件不存在了，就看不了了 关于图片的几个属性 (2)Alt属性：alt属性为图片无法显示时的显示文本，鼠标方式去也会有悬浮提示“点击查看大图”； (3)border属性：border属性指定边框，border="0"不显示边框； (4)width、height属性：最好指定width、height，哪怕是原始尺寸大小，因为如果不指定大小，图片会不占位置，图片下载后才调整大小，会造成页面很乱。如果指定了width、height哪怕图片没有加载完成，也会先把位置占上。 } 7.列表 { (1)无序列表 列表的格式为<ul> <li>内容1</li> <li>内容2</li> <li>内容3</li> <li>内容4</li> </ul> 可以再列表里面设置属性来控制前面显示的内容 Type = disc, circle, square (2) 有序列表<ol> <li>内容1</li> <li>内容2</li> <li>内容3</li> <li>内容4</li> </ol> 可以再列表里面设置属性来控制前面显示的内容 Type= 1,a,A,I,i } 8.表格 { 表格：<table></table>为表格，在内部通过<tr>创建行，<tr>内部通过<td> 创建单元格。 可以将table的border属性设为0来隐藏表格线。 <table> <td> <tr> </tr> <tr> </tr> </td> </table> (1)填充间距 cellpadding内容和表格边线之间的距离 cellspacing单元格之间的间距 (2)<tr>的属性： align，水平对齐，可选值left、right、center； valign，垂直对齐，可选值top、middle、bottom。 (3)<td>也有align和valign。 <tr align="right"><td>tom</td><td align="left">20</td><td>男</td></tr>子标签默认继承父标签的属性，如果自己单独指定了属性，则会覆盖父标签的属性。 (4) 可以使用rowspan(合并行）、colspan(合并列）进行单元格的合并 <BODY> <table border="1px" bordercolor="red" cellspacing="0px" cellpadding="5px" width="500px" height="200px"> <!--table row--> <tr> <!--单元格--> <th colspan="2">姓名</th> <th>年龄</th> <th>成绩</th> </tr> <tr> <!--单元格--> <td valign="bottom" rowspan="3">刘备</td> <td>男</td> <td>20</td> <td>100</td> </tr> <tr> <!--单元格--> <td>男</td> <td>20</td> <td>100</td> </tr> <tr> <!--单元格--> <td>男</td> <td>20</td> <td>100</td> </tr> </table> </BODY> } 9.表单 { (1)<form>标签为表单标签。如果要把数据提交到服务器，则需要将<input>、<textarea>、<select>等表单元素放到form中。 <form action="url" method=GET, POST > ... ... <input type=submit> <input type=reset> </form> (2)Input 是主要的表单元素，type的可选值：
(2.1)text（文本框） size属性为宽度，value为值，maxlength为可以输入的最大长度，readonly只读。disabled为不可填写 <input type="text" readonly/>
(2.2)password（密码框） size属性为宽度，value为值，maxlength为可以输入的最大长度，readonly只读。disabled为不可填写 <input type="password" />
(2.3)radio（单选按钮） 相同name属性的为一只有组，不同radio设定不同的value值，这样通过取指定name的值就可以知道谁被选中了，不用单独的判断。 checked为默认选中，value为真实值，用来查询 <input type="radio" name="sex" value="male" checked="checked">男 <input type="radio" name="sex" value="female" >女 <input type="radio" name="sex" value="unknow">未知
(2.4)checkbox（复选框） checked属性表示是否被选中，可以设定不同的name和value ,可以设定 <td>爱好：</td> <td> <input type="checkbox" value="cf" checked="checked">吃饭 <input type="checkbox" value="sj" checked="checked">睡觉 <input type="checkbox" value="ddd" checked="checked">打豆豆 </td>
(2.5) file（文件选择框） 使用file，则form的enctype必须设置为multipart/form-data、method属性为POST（*） <input type="file">
(2.6)submit（提交按钮）,button（普通按钮）,reset（重置按钮）,image（图片按钮）
<input type="button" value="注册" > 普通按钮 <input type="submit" value="注册"> 可以转到设定的action="url"页面 <input type="reset" value="重置"> 重置页面为默认页面 <input type="image" src="btn.JPG"> 图像按钮，也是普通按钮，不过样子是一个图像
(2.7）hidden（隐藏字段） 隐藏字段，内容不可见 <input type=hidden name=add value=hoge@hoge.jp>
（3）关于Label的用法，设定id属性的值 ，然后通过<label for="值"> 文字</label> 来使用
但是单击修饰文本的时候input并不会得到焦点，而用label则可以，for属性指定要修饰的控件的id，<label for="txt1" >asdfad</label>
(3.1) 设定快捷键，例子中设定快捷键f来快速切换到密码框，CTRL+F <tr> <td><label for="txtPwd" accesskey="f">密码：</label></td> <td> <input id="txtPwd" type="password" > </td> </tr> (3.2)点击文字则选中复选（单选）框 <input id="chk1" type="checkbox" value="sj" checked="checked"><label for="chk1" accesskey="s">睡觉</label>
(4).<select>标签
用来创建类似于WinForm中的ComboBox或者ListBox (4.1)如果size属性大于1就是ListBox（size的值为显示出来的列表数量）， <select name=*> 否则就是ComboBox。 <select size=**> <select multiple>或者<select multiple="multiple">（推荐），那么就是可以多选的ListBox。 <select size=** multiple> 注意，是用 Ctrl 键配合鼠标实现多选。
(4.2)select中的项是<option>， <option>北京</option>还可以设定项的值<option value="1">北京</option>。
(4.3)将一个option设置为选中：<option selected>333</option>或者<option selected="selected">333</option> (推荐)就可以将这个项设定为默认选择项
(4.4)如何实现“不选择”，添加一个<option value="-1">--不选择--<option>，然后编程判断select选中的值如果是-1就认为是不选择。 select分组选项，可以使用optgroup对数据进行分组，分组本身不会被选择，无论对于下拉列表还是列表框都适用。备注
(5)<textarea>多行文本（也是表单元素） <textarea>文本</textarea>，cols、rows属性表示行数和列数。 <textarea rows="15" cols="30">asdfasfd</textarea>
注意<textarea>1231</textarea>之间的是多行文本里面显示的内容，加了空格或者转行也会显示空格 } 10.meta标签 { <meta>有指定name和指定http-equiv两种用法，<meta name="名字" content="值" />、<meta http-equiv="名字" content="值" />两种用法。前者是给搜索引擎看的，后面的实现功能 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />指定网页编码 <meta http-equiv="Refresh" content="3" /> 三秒钟后刷新此网页。 <meta http-equiv="Refresh" content="3;url=http://www.rupeng.com" /> 三秒钟后重定向到新网页。发帖成功后提示“发帖成功，即将转向帖子查看页面”。 <meta http-equiv="Cache-Control" content="no-cache" /> 禁止浏览器缓存页面。 } 11.DIV和Span { (1) 层：<div></div>将内容放到层中，就以将这些内容当成一个整体进行处理，比如整体隐藏、整体移动等。div非常强大和常用。类似于WinForm的Panel。 (2)span：div是将内容放到一个矩形的区块中，会影响布局，而span只是把一段内容定义成一个整体进行操作，但不影响布局、显示。 } 12.CSS样式 { CSS（层叠样式表）是用来美化页面用的，可以对页面元素进行更精细的设置，样式主要描述元素的字体颜色、背景颜色、边框等。CSS主要有元素内联、页面嵌入和外部引用三种使用方式。CSS是描述元素的皮肤！ (1)元素内联（行内样式），直接将样式写入元素的style属性中，<input type="text" readonly="readonly" style="background-color: #FF00FF" />，适用于样式没有可复用性的场合。 (2) 页面嵌入：在head中加入 <style type="text/css"> input{border-color:Yellow;color:Red;} </style> 表示页面中所有input都是采用指定的样式。适合于样式复用，减小页面体积 (3) 外部引用，将css内容写入css后缀的文件 textarea{background:yellow} 然后在页面中引用，在head中加入 <link type="text/css" rel="Stylesheet" href="s1.css" /> 适合于多个页面共享css。 可以以拖页面的方式来快速引用 } 13.样式属性 { (1)css计量单位：css中表示宽度、距离时有多种计量单位：px（像素）、30%（百分比）、em（相对单位）等。width:20px。 (2) background-color:Red;背景颜色；color：文本颜色 background-image:url(images/bg.jpg)背景图片 background-repeat : repeat | no-repeat | repeat-x | repeat-y 参数： repeat : 背景图像在纵向和横向上平铺 no-repeat : 背景图像不平铺 repeat-x : 背景图像在横向上平铺 repeat-y : 背景图像在纵向平铺
background-position：设置或检索对象的背景图像位置 (3) text-decoration : 检索或设置对象中的文本的装饰。 none || underline || blink || overline || line-through 参数： none : 无装饰 blink : 闪烁 underline : 下划线 line-through : 贯穿线 overline : 上划线 复合样式 background border (4) border:solid 1px red border-style:solid;边框风格，实线solid（默认是没有），还有dotted(点)等值；border-color：边框颜色；border-width：边框宽度(默认是0)。例子：style="border-color:Red;border-width:1px;border-style:dotted;" (5) display：元素是否显示，可选值none（不显示,不占地儿）、block （显示为块级元素，此元素前后会带有换行符。）、inline（显示为内联元素，元素前后没有换行符 ）等。 (6) cursor，鼠标在元素上时显示的光标图标，可选值：cursor（默认光标）、pointer（超链接上的手）、text（输入Bean）、wait（忙沙漏）、help（帮助）等。还可以通过cursor:url(dinosau2.ani)使用ani、cur格式的自定义光标图片。 (7) LI不显示圆点：LIST-STYLE-TYPE: none;一般设在li或者ul上 } 14.盒子模型 { 在CSS中，如DIV DIV边框与页面之间有边距，为 margin
而DIV里面的元素与DIV边框的间距为padding
border则为边框 div { width:200px; height:200px; background-color:Red; margin-bottom:10px; padding:10px 50px; filter:alpha(opacity=50);设置或检索对象所应用的滤镜效果。这里设置不透明度为50%，只支持IE 要使用该属性，对象必须具有height，width，position三个属性中的一个。
opacity:0.5; 在其他游览器设置该属性，能达到不透明度为50%的效果 } } 15.样式选择器 { (1)标签选择器，对于指定的标签采用统一的样式 如争对input标签 input {border-color:Yellow;color:Red;} (2)class选择器，以定义一个命名的样式，然后在用到它的时候设定元素的class属性为样式的名称，还可以同时设定多个class，名称之间加空格 .warning{background:Yellow;} .highlight{font-size:xx-large;cursor:help;} <table><tr><td class="highlight">aaa</td><td class="warning">bb</td><td class="highlight warning">ccc</td></tr></table>
当多个类样式中 有冲突依然是就近原则
(3)标签+class选择器 class选择器也可以针对不同的标签，实现同样的样式名对于不同的标签有不同的样式，只要在样式名前加标签名即可。 input.accountno{text-align:right;color:Red;} label.accountno{font-style:italic;} <input class="accountno" type="text" value="111111111111111" /> <lab el class="accountno">333333333333333333</label> (4) id选择器 为指定id的元素设定样式，id前加# #username { font-size:xx-large; } <input id="username" type="text" value="aaaaaaaaaaaa" />
id选择器要指定一个内容时需要嵌套，如 #1 #2 #3 则针对#1里面的#2里面的#3进行设定 (5) style、class可以同时组合使用 <input id="username" class="accountno" style="font-size:xx-large" type="text" value="aaaaaaaaaaaa" /> (6) 更多选择器(*) * { 这里设定的内容可以应用于全局 } * { margin:0px; padding:0px; } 去除全局的边框之间距离，元素和边框的距离 (7) 包含选择器： P strong{ background-color:Yellow} 表示P标签内的strong标签内的内容使用的样式 <strong>fadsfasdfads</strong> <p><strong>adfasfd</strong></p> (8) 组合选择器，同时为多个标签设定一个样式 H1,H2,input{background-color:Green} <h1>nihao</h1> <input type="text" value="test" /> (9) 伪选择器 伪选择器：为标签的不同状态设定不同的样式： A:visited：超链接点击过的样式；A:active：选中超链接时的样式；A:link：超链接未被访问时的状态；A:hover：鼠标移到超链接时的状态。 A:visited {TEXT-DECORATION: none} A:active {TEXT-DECORATION: none} A:link {TEXT-DECORATION: none} A:hover {TEXT-DECORATION: underline}
使用时有顺序之分，遵守 LoVe HAte
说明：TEXT-DECORATION: none表示超链接不显示下划线。 } 16细边框表格 { 设置了表格的border=“1px” 因为表格边线有重叠，所以表格的边线显示比较粗。 可以使用css去重重叠 (1) 使用css 先给Table加上1px的border- bottom,border- right 再给td加上1px的border- left,border- top (2) border-collapse:collapse; 设置或检索表格的行和单元格的边是合并在一起还是按照标准的HTML样式分开。 这里的属性为相邻边被合并
使用ul和li制作横向和纵向菜单 见代码 布局最重要的一个属性就是float } 17.网页布局 { (1)框架布局 Frameset 框架页里不能有body <frameset rows="30%,70%" > <frame src="top.htm" noresize/> <frameset cols="20%,80%"> <frame src="left.htm" noresize/> <frame src="main.htm" noresize/> </frameset> </frameset> iframe <iframe src="iframe.htm" name="0" width="0" height="0"></iframe> (2)表格布局
(3)DIV+CSS布局 网页布局就是“这块内容显示在左边，那两块内容并排显示，那块内容漂浮在页面上”。 不要使用table进行布局，因为：table可能会在所有tr、td加载完成以后才显示，所以加载完成之前界面是一片空白；用table布局会将布局方式写在html中，违反了“语义性”原则；用table会影响搜索引擎的抓取，不利于SEO。因此Table用来表达真实表格状数据的东西，布局用Div(层)+Css来做,Div用来圈定元素，CSS用来定义元素的位置。 Div+CSS就是将要布局的内容用<div>切成块，然后使用css描述每个块的大小、位置等。
详见代码 } 18文档流 { 文档流：将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。 (1)position:absolute;绝对定位, 即完全脱离文档流相对于position属性非static值的最近父级元素进行偏移,窗口移动相对屏幕的话会移动
absolute不占原来的位置，后面的DIV会把这个位置顶替掉 position:absolute; z 轴 ，值越大，在屏幕最前，必须脱离文档流 z-index:100; 这时，脱离文档流的这个DIV显示在最前面
(2)position:relative;相对定位, 这个属性值保持对象所在文档流中的位置，相对于元素在文档流中位置进行偏移. 但保留原占位.可以设置top, left, right, bottom定位
relative占原来的位置，
(3)position:fixed;固定定位,即完全脱离文档流, 相对于视区进行偏移.
，比如常见的右下角广告小窗口 position:fixed; bottom:0px; right:0px; position:static; 默认值 文档流 } 19.JavaScript概念 { (1)JavaScript是一种脚本语言。 脚本，一条条的文字命令。执行时由系统的一个解释器，将其一条条的翻译成机器可识别的指令，然后执行。常见的脚本：批处理脚本、T-SQL脚本、VBScript等。 (.net生成的exe文件用记事本打开看不懂。它是整体预编译然后再执行的) (2)JavaScript代码放到<script>标签中，script可以放到<head>、<body>等任意位置，而且可以有不止一个<script>标签。默认值就是当前时间。JS是大小写敏感的。
放到<head>中的<script>在body加载之前就已经运行了。写在body中的<script>是随着页面的加载而一个个执行的。
(3)JavaScript是弱类型语言（声明变量都用var），不存在int n=10;string s=“a”;的情况，所有变量都用var。因为是“动态类型”，所以下面这段代码是合法的：var n=10;n=“a”; (4) Js的注释，与C#、Java的相同（//单行注释、/* 多行注释 */）。 (5)JavaScript中也有事件的概念，当按钮被点击的时候也可以执行JavaScript： <input type="button" onclick="alert(99)" value="久久"/> 只有超链接的href中的JavaScript中才需要加“”javascript:”，因为它不是事件，而是把“”javascript:”看成像“http:”、“ftp:”、“thunder:/ } 20.JavaScript语法 { (1)变量声明：JS中所有的变量声明都用var 而在C#中var是类型推断，必须定义变量时赋值。
变量使用前可以不用var声明，这样的变量会变认为是“全局变量”（不推荐）
JavaScript中即可以使用双引号声明字符串，也可以使用单引号声明字符串。主要是为了方便和html集成，避免转义符的麻烦。
alert(typeof(str))
(2)JavaScript中的null与undefined (2.1)undefined,表示一个未知状态 声明了但是没有初始化的该变量，变量的值是一个未知状态(undefined)。?（访问不存在的属性或对象window.xxx）
方法没有明确返回值时，返回值是一个undefined.
当对未声明的变量应用typeof运算符时，显示为undefined（*） (2.2) ull表示尚未存在的对象,null是一个有特殊意义的值。可以为变量赋值为null，此时变量的值为“已知状态”(不是undefined)，即null。（用来初始化变量，清除变量内容，释放内存）
(2.3) 始化变量，清除变量内容，释放内存） undefined==null //结果为true,但含义不同。 undefined===null //false(*),先判断类型是否一致，然后判断值。
(2.4) == 判断变量的值是否相等 === 全等 ！== 值相等并且类型相同
(3)JS中的判断变量是否可用 JavaScript中判断已声明变量、参数是否初始化(可用)的方法：
假设已有变量x： if (typeof(x) !=‘undefined’ && x!=null)
{ alert("可用"); } 可以简化写成 if(x) { alert(‘变量可用！’); } else { alert(‘变量不可用！’); } //null、undefined、’’、0都认为是false 当x声明但没有赋值，或x为null， undefined ，空字符串，或x为0时，都表示不可用！// if(x),返回false
推荐用最后一种方法。但如果x有可能没有声明，则只能用typeof判断（否则会报错）。
经常会遇到的一个场景：if语句的小括号中直接写一个变量。各种值与Boolean之间的关系。
(4)函数的声明 (4.1)JavaScript中声明函数的方式： function add(i1, i2) { return i1 + i2; } 不需要声明返回值类型、参数类型。函数定义以function开头。 var r = add(1, 2); alert(r);
调用方法时，不带（）时是直接输出整个方法的。 (4.2)JavaScript中不像C#中那样要求所有路径都有返回值，没有返回值就是undefined。
(5)arguments对象 (5.1)JavaScript中没有方法重载。 假如几个方法的方法名相同，则执行的事最后一个方法，不管在哪里调用的这个方法名字的方法，因为JS会先检查所有的方法。 (5.2)动态为方法传递参数，类似于.net中的params关键字作用 <script type="text/javascript"> function myFunc() { for (var i = 0; i < arguments.length; i++) { document.write(arguments[i]); document.write('<br/>'); } } myFunc('张三', 18, '李四', 19); </script>
(5)匿名函数 相当于 c#中的委托 var f1 = function(i1, i2) { return i1 + i2; } alert(f1(1,2)); } 21.JS面向对象 { (1)在JS中，函数就是对象，对象就是函数。 方法直接调用为函数，用new调用为对象。 JavaScript中没有类的语法，是用函数闭包（closure）模拟出来的。 (2)定义一个对象 function Person() { } (3)使用一个对象 var p=new Person(); p.Name=‘张三’;//动态语言，所以可以直接写。 p.Age=30; p.SayHello=function() { alert(‘Hi~’); } alert(p.Name); alert(p[‘Age’]);//另外一种动态访问属性的方式。
(4)使用对象的另一种方法，类似C#的构造方法 JavaScript同样支持this关键字 构建一个带参数的Person对象。通过this关键字为对象的属性赋值。 function Person(name, age) { this.name = name; this.age = age; this.showInfo = function() { alert('大家好，我叫' + this.Name + '，今年' + this.Age + '岁了。'); }} var zjl = new Person('周杰伦', 20); zjl.showInfo(); function Person(name,age)可以看做是声明构造函数，Name、Age这些属性也是使用者动态添加了。 new 相当于创建了函数的一个实例。 } 22.String对象 { (1) length属性：获取字符串的字符个数。（无论中文字符还是英文字符都算1个字符。） var s = "11 22 33 99 3"; alert(str.length); (2) charAt(index)方法：获取指定索引位置的字符。（索引从0开始） (3) indexOf(‘字符串’,startIndex 或者lastIndexOf)方法：获取指定字符串第一次出现的位置。startIndex表示从第几个开始搜索。 (4) split(‘分隔符’,limit);根据分隔符将一个字符串返回为一个数组。 (5) substr(startIndex,len)从startIndex开始，截取len个字符。 (6) substring(startIndex,stopIndex)从startIndex开始，截取到stopIndex位置（不包括stopIndex所在的字符）。 (7) toUpperCase()转换大写 toLowerCase();转换小写 } 23.JS中的正则表达式 { (1) JavaScript中创建正则表达式类的方法： var regex = new RegExp("\\d{5}") 或者 var regex = /\d{5}/ (2) RegExp对象的方法： （1）test(str)判断字符串str是否匹配正则表达式，相当于IsMatch var regex = /.+@.+/; alert(regex.test("a@b.com")); alert(regex.test("ab.com")); （2）exec(str)进行搜索匹配，返回值为匹配结果，没找到返回null(*) var reg = /.+@.+/; var a = reg.exec("123abc.com"); alert(a); (3) .string的正则表达式方法 String对象中提供了一些与正则表达式相关的方法，相当于对于RegExp类的包装，简化调用： match(regexp)，相当于调用exec var s = "aaa@163.com"; var regex = /(.+)@(.+)/; var match = s.match(regex); alert(RegExp.$1 + "，服务器：" + RegExp.$2); (4) g 全局匹配 var str = "北京 北京 北京"; alert(str.replace(/北京/g, "邯郸")); i 忽略大小写 gi 全局 忽略大小写 var s = "AAAAbbaa"; alert(s.match(/a+/gi)); } 24.Array对象 { (1) JavaScript中的Array对象就是数组，首先是一个动态数组，而且是一个像C#中数组、ArrayList、Hashtable等的超强综合体。 var names = new Array(); names[0] = "tom"; names[1] = "jerry"; names[2] = "lily"; for (var i = 0; i < names.length; i++) { alert(names[i]); } (2) 简化赋值var arr = [‘China’, 2008, true, ‘Hello’]; 无需预先制定大小，动态。
(3) JS中的Array是一个宝贝，不仅是一个数组，还是一个Dictionary，还是一个Stack。 var pinyins = new Array(); pinyins["人"] = "ren"; pinyins["口"] = "kou"; pinyins["手"] = "shou"; alert(pinyins["人"]); alert(pinyins.人); 像Hashtable、Dictionary那样用，而且像它们一样效率高。
(4)对于数组风格的Array来说，可以使用join方法拼接为字符串 var arr = ["tom","jim","lily"]; alert(arr.join(",")); JS中join是array的方法，不像.Net中是string的方法 } 25.Json对象 { (1) 对象是一个无序的“‘名称/值’对”集合。 一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’ 对”之间使用“,”（逗号）分隔。 (2) 定义个简单的Json var json = { "name": "张三", "age": 18, "sex": "男" };
for (var key in json) { alert(key + "==" + json[key]); }
(3) 数组是值（value）的有序集合。一个数组以“[”（左中括号）开始，“]”（右中括号）结束。值之间使用“,”（逗号）分隔。
值（value）可以是双引号括起来的字符串（string）、数值(number)、true、false、?null、对象（object）或者数组（array）。这些结构可以嵌套。 } 26.遍历 { for循环可以像C#中的foreach一样用 for循环还可以获得一个对象所有的成员，类似于.Net中的反射 for (var e in document) { alert(e); } 有了它没有文档也可以进行开发。 } 27.扩展方法 { 通过类对象的prototype设置扩展方法，下面为String对象增加quote（两边加字符）方法 String.prototype.quote = function(quotestr) { if (!quotestr) { quotestr = "\""; } return quotestr + this + quotestr; }; alert("abc".quote()); alert("abc".quote("|")); 扩展方法的声明要在使用扩展方法之前执行。JS的函数没有专门的函数默认值的语法，但是可以不给参数传值，不传值的参数值 } 28.DOM { DOM就是Html页面的模型，将每个标签都做为一个对象，JavaScript通过调用DOM中的属性、方法就可以对网页中的文本框、层等元素进行编程控制。比如通过操作文本框的DOM对象，就可以读取文本框中的值、设置文本框中的值。 DOM也像WinForm一样，通过事件、属性、方法进行编程。
//节点 node ：元素(标签) 文字 属性 注释 //元素 element : 标签 } 29.DOM事件 { (1)DOM简介 { <body onmousedown=“alert(‘别点我！’);”>//注意body的范围。 有时事件的响应代码比较多，就要放到一个函数中： <script type="text/javascript"> function userMouseDown() { alert('网页被你点坏了>_<~~,赔吧！'); alert('逗你玩呢~~'); } </script> <input type="button" value="按钮" onmousedown=“userMouseDown();" /> onmousedown=“userMouseDown();”中， 注意： userMouseDown后的括号不能丢（不能写成onmousedown=“userMouseDown” ），带()表示调用函数，直接写函数名表示设置事件的处理函数为userMouseDown。 } (2)window对象(Dom中的一个顶级对象。) { window对象代表当前浏览器窗口。 使用window对象的属性、方法的时候可以省略window。 能不写window就不要写，这样可以减少js文件的字节数。 (2.1) window.alert(‘大家好！’);//弹出警告对话框 (2.2) window.confirm(‘确定要删除吗？’);//确定、取消对话框，返回true或false; (2.3) window.navigate(url);//将网页重新导航到url,只支持IE、Opera11.6,建议使用window.location.href=‘url’;//支持大多数浏览器 <input type="button" value="导航" onclick=" window.navigate('http://www.baidu.com');" /> (2.4) window.setInterval(code,delay)//每隔一段时间执行指定的代码（类似于winForm中的Timer控件。） 第一个参数：指定的代码字符串 第二个参数：时间间隔（毫秒数） var intervalId=setInterval(“alert(‘hello’);”,1000); (2.5) window.clearInterval(intervalId);//停止计时器 clearInterval()取消setInterval的定时执行，相当于Timer中的Enabled=False。因为setInterval可以设定多个定时，所以clearInterval要指定清除那个定时器的标识，即setInterval的返回值。 (2.6) setTimeout也是定时执行，但是不像setInterval那样是重复的定时执行，只执行一次，clearTimeout也是清除定时。很好区分：Interval：间隔；timeout：超时。 var timeoutId = setTimeout("alert('hello')", 2000); (2.7) window.location对象： window.location.href=‘’;//重新导航到新页面,可以取值，也可以赋值。 window.location.reload();//刷新当前页 } } 30.body对象的事件 { (3.1)onload（页面加载后触发） 网页加载完毕时触发，浏览器是一边下载文档、一边解析执行，可能会出现JavaScript执行时需要操作某个元素，这个元素还没有加载，如果这样就要把操作的代码放到body的onload事件中，或者可以把JavaScript放到元素之后。元素的onload事件是元素自己加载完毕时触发，body onload才是全部加载完成。 使用： <body onload="test()">
window.控件Id（不建议使用） document.getElementById(“控件Id”);(推荐) } 31.其他事件 { 除了属性之外，当然还有通用的HTML元素的事件：onclick（单击）、ondblclick（双击）、onkeydown（按键按下）、onkeypress（点击按键）、onkeyup（按键释放）、onmousedown（鼠标按下）、onmousemove（鼠标移动）、onmouseout（鼠标离开元素范围）、onmouseover（鼠标移动到元素范围）、onmouseup（鼠标按键释放）、oncontextmenu（在浏览器中单击鼠标右键显示”右键菜单”时触发）等。 } 32Window.enen { (1) window.event是IE下非常重要的属性，用来获得发生事件时的信息，事件不局限于window对象的事件，所有元素的事件都可以通过event属性取到相关信息。类似于winForm中的e(EventArgs)。 window.event. altKey属性，bool类型，表示事件发生时是否按下了alt键。类似的还有ctrlKey,shiftKey。演示： if (event.altKey && event.ctrlKey) { location.href = "04-跑马灯.htm"; } (2)window.event的属性： //鼠标在文档中的位置 //document.title = event.clientX + "==" + event.clientY; clientX、clientY 发生事件时鼠标在客户区的坐标；screenX、screenY //鼠标在屏幕中的位置 //document.title = event.screenX + "==" + event.screenY; 发生事件时鼠标在屏幕上的坐标；offsetX、offsetY
//相对于当前元素的偏移位置 //document.title = event.offsetX + "==" + event.offsetY; 发生事件时鼠标相对于事件源（比如点击按钮时触发onclick）的坐标。 (3) (window.event.returnValue)returnValue属性，如果将returnValue设置为false，就会取消默认行为的处理。在超链接的onclick里面禁止访问href的页面。在表单校验的时候禁止提交表单到服务器，防止错误数据提交给服务器、防止页面刷新。(onsubmit="window.event.returnValue=false;") 例子： function turn(right) { alert("111"); if (!right) { //取消a标签的默认行为 window.event.returnValue = false; } <a href="http://www.cnbeta.com" onclick="turn(0)">cnbeta</a> function check() { if (document.getElementById("txt").value == "") { alert("请输入用户名"); //取消submit的默认行为 window.event.returnValue = false; } } <input type="submit" onclick="check()" /> (4)window.event的属性： srcElement：获得事件源对象。几个按钮共享一个事件响应函数用。****_click(object sender,EventArgs e) button，发生事件时鼠标按键，IE:1为左键，2为右键，s4中滑轮 除IE浏览器外，其他浏览器在绑定事件处理函数时，有一个默认的参数即event对象。 （*）screen对象，获取屏幕的信息： alert("分辨率：" + screen.width + "*" + screen.height); if (screen.width < 1024 || screen.height < 768) { alert("分辨率太低！"); } } } 33.clipboardData对象 { (1)setData("Text",val)，设置粘贴板中的值。 function share() { var txt = t.value; //设置粘贴板 window.clipboardData.setData("text", txt); } (2)getData(“Text”)读取粘贴板的值，返回值为粘贴板中的内容； function copy() { //获取粘贴板中的内容 var txt = clipboardData.getData("text"); t1.value = txt; } (3)clearData(“Text”)清空粘贴板；
(4)禁止复制和剪切！ <input type="text" value="" oncopy="alert('禁止复制');event.returnValue=false" oncut="event.returnValue=false"/> (5)history操作历史记录。 window.history.back()后退；window.history.forward()前进。 window.history.go(-1)后退、window.history.go(1)前进 } 34.document对象 { document的方法： (1)write();向文档中写入内容。 writeln()，和write差不多，只不过最后添加一个回车。在onclick等事件中写的代码会冲掉页面中的内容，只有在页面加载过程中write才会与原有内容融合在一起。writeln()是在源代码里面换行。与<br/>不一样。 (2)getElementById(), （非常常用），根据元素的Id获得对象，网页中id不能重复。也可以直接通过元素的id来引用元素，但是有有效范围、form1.textbox1之类的问题（当元素放在form中的时候（在html页面中需要通过form.元素id）），因此不建议直接通过id操作元素，而是通过getElementById。 (3)getElementsByName()，根据元素的name获得对象，由于页面中元素的name可以重复，比如多个RadioButton的name一样，因此getElementsByName返回值是对象数组。 (4)getElementsByTagName()，获得指定标签名称的元素数组，比如getElementsByTagName(“p”)可以获得所有的<p>标签。*表示所有标签。 function bodyload() { var inputs = document.getElementsByTagName("input"); for (var i = 0; i < inputs.length; i++) { //判断是不是文本框 if (inputs[i].type == "text") { inputs[i].value = i + 1; } } } } 35.事件冒泡 { 事件冒泡：如果元素A嵌套在元素B中，那么A被点击不仅A的onclick事件会被触发，B的onclick也会被触发。触发的顺序是“由内而外” 验证：在页面上添加一个table、table里有tr、tr里有td，td里放一个p，在p、td、tr、table中添加onclick事件响应， <table onclick="alert('table onclick');"> <tr onclick="alert('tr onclick');"> <td onclick="alert('td onclick');"><p onclick="alert('p onclick');">aaaa</p></td> <td>bbb</td> </tr> </table>
取消事件冒泡： window.event.cancelBubble = true;//IE下的写法。 } 36.onload { 1.二者效果完全一样,都是在页面内容都加载完毕后才触发。 2.由于网页中没有window所以在body中写onload 3.建议使用window.onload//使用js脚本的方式高效 4.其实应该是document.onload，但是所有浏览器都实现到了window对象上。 window.onload=function(){ } } 37.this { 事件中的this。除了可以使用event.srcElement在事件响应函数中，this表示发生事件的控件。只有在事件响应函数才能使用this获得发生事件的控件，在事件响应函数调用的函数中不能使用（这里的this表示window对象），如果要使用则要将this传递给函数或者使用event.srcElement。(*)this和event.srcElement的语义是不一样的，this就是表示当前监听事件的这个对象，event.srcElement是引发事件的对象：事件冒泡。 <body onclick=“//这个叫做事件响应函数，在这里写this表示发生事件的控件。在这里调用另外一个函数F1,则F1中不能使用this表示发生事件的控件”> } 38.动态创建DOM { document.write只能在页面加载过程中才能动态创建。 可以调用document的createElement方法来创建具有指定标签的DOM对象，然后通过调用某个元素的appendChild();方法将新创建元素添加到相应的元素下。//父元素对象.removeChild(子元素对象);删除元素。 function showIt() { var divMain = document.getElementById("divMain"); var btn = document.createElement("input"); btn.type = "button"; btn.value = "我是动态的！"; divMain.appendChild(btn); } <div id="divMain"></div> <input type="button" value="ok" onclick="showit()" /> } 39.innerText和innerHTML { 用innerHTML也可以替代createElement，属于简单、粗放型、后果自负的创建。 function createlink() { var divMain = document.getElementById("divMain"); divMain.innerHTML = "<a href='http://www.rupeng.com'>如鹏网</a>";}
innerText只能设置纯文本，即便写了html代码，也会对html代码进行编码， innerHTML可以设置html代码和纯文本。 } 40.控制层的显示 { (1) 默认的时候，假如不设定div1.style.display，alterc出来是为空 (2) div1.style.display = 'none' 设置层的隐藏 (3) div.style.display = "block"; 设置层的显示
没有设置.style.display= "" ，会以id选择器设置的display为准 } 41.几个特殊事件 { (1)onchange事件 文本改变时，并没有触发事件 只有当失去焦点的时候，才会触发事件。 (2)click()。 就是用代码来触发点击按钮的动作 var btn = document.getElementById("btn"); //相当于点击了一下按钮 btn.click(); (3)focus() 获得焦点的事件，如打开页面焦点自动在登陆框 var txt = document.getElementById("txtPwd"); txt.focus(); (4)blur(); 失去焦点的事件 (5)submit() 提交表单事件，和blur()配合使用可以验证用户名是否已经存在 if (this.value != "") { //表单自动提交 var form = document.getElementById("f1"); //表单自动提交 form.submit(); } (6)onsubmit() 用于判断表单信息是否正确，否则在该事件里return false onsubmit 只有点击提交按钮的时候才触发 表单的submit()方法，不会触发该事件 (7)onkeydown onkeydown 键盘落下，字符还没有录入到文本框 (8)onkeyup onkeyup 键盘弹起 字符已经到文本框 (9)event.keyCode 对应的按键码 } 42.设置元素位置，大小 { 通过dom读取元素的top、left、width、height等取到的值不是数字，而是“10px”这样的字符串；为这些属性设值的时候IE可以是80、90这样的数字，FF、Chrome必须是“80px”、“90%”等这样的字符串形式，为了兼容统一用字符串形式。left/top需要设置position
易错：不要写成div1.style.width=80px，而是div1.style.width=‘80px’;
如果要修改元素的大小（宽度加1），则首先要取出元素的宽度，然后用parseInt将宽度转换为数字（parseInt可以将“20px”这样数字开头的包含其他内容的字符串解析为20，parseInt(‘22px’,10)，也就是解析尽可能多的部分）；然后加上一个值，再加上px赋值回去。
//!!!!!别忘了 px div.style.width = width + 20 + "px"; div.style.height = height + 20 + "px"; } 43.setAttribute { 创建元素属性及赋值，可以创建自定义的属性 label.setAttribute(“for”, “username”); var index = parseInt(this.getAttribute("index")); } 44透明度的设置 { (1)获得IE里面的透明度的数值 var num = div.style.filter.replace("alpha(opacity=","").replace(")",""); (2)设置IE里面的透明度的数值 num = parseInt( num) - 10; div.style.filter = "alpha(opacity=" + num + ")"; (3)chrome设置透明度 d1.style.opacity = "0.5"; } 45.鼠标的坐标位置 { 例子：跟着鼠标走的图片 var img = document.getElementById("i1"); img.style.position = "absolute"; //图片脱离文档流 // !!!!!!!!!!别忘了px img.style.left = event.clientX - 10 + "px"; img.style.top = event.clientY - 10 + "px"; } 46.文档居中 { //document.documentElement 根节点 整个文档的高度和宽度 var x = (document.documentElement.clientWidth - div.clientWidth) / 2; var y = (document.documentElement.clientHeight - div.clientHeight) / 2;
div.style.left = x + "px"; div.style.top = y + "px"; } 47.返回一个空值，childNodes，children { href="javascript:void(0)" childNodes //元素 文本 注释 ie中会忽略空白行，chome不会 children //元素 } 48.
![http://www.rupeng.com/forum/templates/uchome/images/logo.gif"/></a](http://www.rupeng.com/forum/templates/uchome/images/logo.gif"/></a){kind=link}