---------------------- Windows Phone 7手机开发、.Net培训、期待与您交流！ ----------------------
Dom：
Document Object Model（文档对像模型）
CSS+JavaScript+Dom=DHTML
Dom具有对Html文件和XML文件元素的访问控制能力，简单点说利用Dom可以对某个html或xml文件添加，修改，删除元素．更改其现有的结构或内容．
Dom就是讲怎样通过javascript来操作界面上的控件，只有通过Dom，JS才能全部发挥出来
Dom就是HTML页面的模型，将每个标签作为一个对象，javascript通过调用Dom中的属性、方法就可以对网页中的文本框、层等元素进行编程控制。
比如通过操作文本框的Dom对象就可以读取文本框中的值、设置文本框中的值
可以把javascript跟Dom的关系 理解为C#跟.Net Framwork的关系一样，就是一个是编程语言，一个是框架
Dom也像WinForm一样，通过属性、事件、方法进行编程
HTML Dom中最常用的查找元素的几个方法
引用当前整个网页文档：document（document.title 标题属性）
快速在网页中查找某一元素：getElementById
查找一组标签，具有相同名称的标签元素：getElementsByTagName
根据标签的Id属性值或name属性来查找多个元素：getElementsByName
Dom中创建，添加，删除，修改，替换，复制，网页中的标签和文本内容的方法
创建一段文本内容：createTextNode
向网页中添加元素：appendChild
删除元素的Dom方法是：removeChild
修改网页中标签元素的属性：setAttribute
替换已存在的标签或元素：replaceChild
复制克隆已存在的标签或元素：cloneNode
获取和修改元素内的html标签与文本内容：innerHTML
获取或修改元素的文本内容，仅支持IE：innerText
获取或修改元素的文本内容，支持火狐：textContent
HTML Dom中还专门提供了一组接口用来操作网页中的表格Table元素
deleteRow删除表格中一行
insertCell方法可以为表格某行中增加一列
deleteCell删除行中的一列
createCaption方法可以为表格创建一个标题（*）
createThead方法可以为表格创建一个Thead（*）
createTFoot方法可以为表格创建一个TFoot（*）
引用表格中所有行的属性为：rows
引用表格中某行的所有列：cells
移动表格中的行，只支持IE：moveRow
动态设置事件
可以再代码中动态设置响应事件，就想.Net委托的+=一样，比如我要双击的时候才触发
<script type="text/javascript">
function f1() {
alert("我是f1");
}
function f2() {
alert("我是f2");
}
</script>
<input type="button" onclick="document.ondblclick=f1" value="按钮">点击button1，文本双击的事件就会被关联，双击文本就会触发f1
注意：f1不要加括号 不同于onclick="f1()"，此时需要加（）
window对象
window对象代表当前浏览器的窗口，使用window对象的属性、方法的时候可以省略window，比如window.alert('a')可以省略成alert('a');
alert方法：弹出对话框
创建confirm方法：显示确定、取消对话框，如果按了【确定】，就返回true，否则返回false
function confirmDemo(){
if(confirm("是否继续？")){
alert("确定");
}
else{
alert("取消");
}
}
<input type="button" onclick="confirmDemo()" value="确认取消提示框" />
navigate 链接另一个网址
<input type="button" onclick="navigate('HTMLPage1.htm')" value="navigate链接另一个网址" />
注意：navigate不支持火狐浏览器
setInterval 定时执行
每隔一段时间执行指定的代码，第一个参数为代码的字符串，第二个参数为建个时间（单位毫秒），返回值为定时器的标识
页面动态显示时间：
document.write("<span id=time></span>");
setInterval("time.innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());", 1000)
注意执行的代码是字符串的格式，也可以写一个匿名函数
走马灯：
<head>
<title>你现在在哪里呢？</title>
<script type="text/javascript">
function leftscroll() {
var title = document.title;
var firststr = title.charAt(0);
var leftstr = title.substring(1, title.length);
document.title = leftstr + firststr;
}
var interval = setInterval("leftscroll()", 500);
</script>
</head>
<body>
</body>
</html>
clearInterval 取消setInterval的定时执行
相当于Timer中的Enabled=False。因为setInterval可以设定多个定时，所以clearInterval要制定清除那个定时器的标识，即setInterval的返回值
var interval=setInterval("alert('hello')",2000);
<input type="button" onclick="clearInterval(interval)" />
如果直接写在onclick事件中，那么每点击一次，就会new一个新的setInterval
<input type="button" value="setInterval" onclick="setInterval('alert(hello)',1000)">
如果在clearInterval里边直接写setInterval('alert(hello)',1000) ，它只是停止你当前的setInterval，你new的别的还会照常走，所以，要给setInterval定义一个返回值，将返回
在clearInterval里边
<input type="button" value="setInterval" onclick="TimerId = setInterval('alert(hello)',1000)">
<input type="button" value="clearInterval" onclick="clearInterval(TimerId)">
setTimeout 也是定时执行，但不像setInterval那样是重复的执行，只执行一次
clearTimeout也是清除定时，用法跟setInterval一样
showModalDialog()弹出模态对话框 第一个参数为弹出模态窗口的页面地址
showModelessDialog()弹出非模态窗口，参数等和showModadDialog一样
注意：showModalDialog必须在onClick等用户手动触发的事件中才会执行，否则可能会被最新版的浏览器当成广告弹窗而拦截
<input type="button value="模态对话框" onclick="showModalDialog('HTMLPage1.htm')" />
<input type="button" value="非模态对话框" onclick="showModelessDialog('HTMLPage2.htm')" />
body、document对象的事件
（1）onload：网页加载完毕时触发，浏览器是一边下载文档、一边解析执行，可能会出现JavaScript执行时需要操作某个元素，这个元素还没有加载，如果这样就要把操作
代码放到onload事件中，或者可以吧JavaScript放到元素之后
就比如我把JS脚本放在网页最前边，需要改里边空间的属性，此时空间还没加载出来，页面就会报错，这时就应该讲代码放到onload事件中，页面加载时就会加载对应性
元素的onload事件是元素自己加载完毕时触发，body 的onload是全部加载完毕时触发
（2）onunload：网页关闭（或者离开）后触发
写在body里边在页面加载的时候就将其加载
<body onunload="alert('你要走了...')">
（3）onbeforeunload：在网页准备关闭（或者离开）后触发。
在时间中为"window.event.returnValue"赋值（要显示的警告信息），这样窗口离开（比如前进、后退、关闭）就会弹出确认信息
<body onbeforeunload="window.event.returnValue='这的要放弃发帖退出吗？'">
其他事件
onclick（单击）、ondblclick（双击）、onkeydown（按键按下）、onkeypress（点击按键）、onkeyup（按键释放）、onmousedown（鼠标按下）onmousemove（
标移动）、onnouseout（鼠标离开元素范围）、onmouseover（鼠标移动到元素范围）、onmouseup（鼠标按键释放）等。
window对象的属性
window.location
location.href：重定向，和navigate方法效果一样
location.reload()：刷新页面
<input type="button" value="href" onclick="location.href('走马灯.htm')" />
<input type="button" value="Refresh" onclick="location.reload(window.htm)" /> //window.htm为自身页面
window.event (是非常重要的属性)
用来获得发生事件时的信息，事件不局限与window对象的事件，所有元素的事件都可以通过event属性取到相关信息，类似于winform中的e（EventArg）
altkey属性：bool类型，表示发生事件时alt键是否被按下，类似的好友ctrlkey，shiftkey，
<input type="button" value="event" onclick="if(window.event.altKey){alert('alt')}else{alert('...')}" />
clientX,clientY 发生事件时鼠标在客户区的坐标
window.event.clientX、window.event.clientY window.event用法都类似
screenX,screenY 发生事件时鼠标在屏幕上的坐标
offsetX,offsetY 发生事件时鼠标在事件源的坐标（比如要知道点击按钮时鼠标在按钮的那个位置）
returnValue属性：如果将returnValue设置为false，就会取消默认事件的处理
srcElement：获得事件源的对象 window.event.srcElement取的引发事件的控件
keyCode：发生事件时的按键值
buton：发生事件时鼠标按键，1为左键，2为右键，3为同时按下
(*)screen对象，屏幕的信息 用到的不多
alert("分辨率："+screen.width+"*"+screen.height);
if(screen.width<1024||screen.height<768)
{ alert("分辨率太低！"); }
clipboardData对象，对粘贴板的操作
clear("Text") 清空粘贴板，getData("Text") 读取粘贴板的值，返回值为粘贴板中的内容，setData("Text",val) 设置粘贴板中的值。setData("Text",val) 复制
几乎所以的元素都有oncopy（复制）、onpaste（粘贴）事件。
当赋值的时候body的oncopy事件被触发，直接return false就是阻止复制
<input type="text" oncopy="alert('请勿复制！');return false;" />
<input type="text" onpaste="alert('请勿粘贴！');return false;" />
在网站中复制文章的时候，为了防止拷贝不加出处，就需要 自动在复制的内容后添加版权声明。
function modify() {
var txt = clipboardData.getData("Text");
txt = txt + "本文来自哪，转载请注明来源。" + location.href;
clipboardData.setData("Text",txt);
}
<input type="text" oncopy="setTimeout('modify()',100)" />
用户复制动作发生0.1秒以后再去改粘贴板中的内容，100为0.1秒 写10,100 200随便多少都行不能直接在oncopy中执行对粘贴板的操作，因此设定定时器，0.1秒后行
这样就不再oncopy的执行调用栈上了。
history操作历史记录
window.history.back() 后退 window.history.forward() 前进 也可以用 window.history.go(-1) window.history.go(1) 来实现页面的前进后退效果
如：在第一个页面链接指向第二个页面，然后第二个页面再返回到第一个页面
第一个页面：
<a href="HistoryBack.htm">进入第二页</a>
第二个页面：
<a href="javascript:history.back()">后退</a>
<input type="button" value="后退" onclick="history.back()" />
document属性
document的方法：
1.write：想文档中写入内容。 writeln 在write之后添加一个回车（）相当于C#的Console.Write()和Console.WriteLine()
<script type="text/javascript">
document.write("<a href='History.htm'>百度</a>")
</script>
<input type="button" value="你好" onclick="document.write('你好！')" />
在onclick等事件中写的代码会冲掉页面的内容，只有在页面加载的过程中才会与原有的内容融合在一起
2.getElementById（非常有用）根据元素的id获得对象，网页中的id不能重复。也可以直接通过元素的id来引用元素，但是有有效范围之类的问题，所以不建议通过id操
元素，而是通过getElementById
3.getElementsByName，根据元素的name获得对象，因为页面中的元素的name可以重复（多个radiobutton的name都一样），所以getElementByName返回值是对象
组
4.（*）getElementsByTagName 获得指定标签名的元素数组，比如getElementByTagName("p")可以获得所有的<p>标签
<html>
<head>
<title></title>
<script type="text/javascript">
document.write("<a href='History.htm'>百度</a>")
//为制定id的元素赋值
function getEle() {
var text = document.getElementById("txt");
alert(text.value);
}
//为所有同name属性的标签赋值
function btnclick() {
var radios = document.getElementsByName("gender");
for (var i = 0; i < radios.length; i++) {
var radio = radios[i];
alert(radio.value);
}
}
//为所有的标签元素赋值
function all() {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
input.value = "hello";
}
}
</script>
</head>
<body>
<input type="button" value="你好" onclick="document.write('你好！')" />
<input type="text" id="txt" />
<input type="button" value="按钮" onclick="getEle()">
<input type="radio" value="男" name="gender" />男
<input type="radio" value="女" name="gender" />女
<input type="radio" value="保密" name="gender" />保密
<input type="button" value="click" onclick="btnclick()" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="button" value="hello" onclick="all()">
</body>
</html>
DOM的动态创建
可以调用document的createElement方法来创建具有制定标签的DOM对象，然后通过调用元素的appendChild方法将新创建元素添加到相应的元素下
function btnClick() {
var divMain = document.getElementById("divMain");
var input = document.createElement("input"); //创建一个标签名为input的元素（这是还没有添加任何元素上，所以没有显示）
input.value = "被创建的";
input.type = "button";
divMain.appendChild(input); //将创建的input添加到div层中
}
<input id="create" type="button" value="动态创建" onclick="btnClick()"/>
<div id="divMain"></div>
createElement的两种方法，注意innerText的问题
var input=document.createElement("<input type='buton' value='hello' />")>
用此方法能快速创建元素，并且赋值但是注意设置的inner部分不会被设置
innerText、innerHTML 一个修改文本可以使用HTML语言，一个不可以 注意：火狐浏览器不支持innerText
几乎所有的DOM元素都有innerText、innerHTML属性（注意大小写）
<a href="http://www.baidu.com" id="link1">百嘟嘟嘟嘟嘟嘟<font color="red">度</font>百科</a>
<input type="button" value="innerText" onclick="alert(document.getElementById('link1').innerText)">
<input type="button" value="innerHTML" onclick="alert(document.getElementById('link1').innerHTML)">
<input type="button" value="修改innerText" onclick="document.getElementById('link1').innerText='百度'" />
<input type="button" value="修改innerHTML" onclick="document.getElementById('link1').innerHTML='<font color=Black>百度</font>'" />
用innerHTML也可以替代createElement， 不过只能创建一次，相当于将标签中的内容替换
function btnClick(){
var divMain = document.getElementById("divMain");
divMain.innerHTML="<input type='button' value='HTML创建' />";
}
<div id="divMain"></div>
<input type="button" value="替换create" onclick="btnClick()" />
innerHTML创建动态超链接
function clicka() {
var divHTML = document.getElementById("divHTML");
var a = document.createElement("a");
a.href = "http://www.baidu.com";
a.innerText = "百度";
divHTML.appendChild(a);
<div id="divHTML"></div>
<input id="new" type="button" value="超链接" onclick="clicka()" />
动态创建表格同时支持IE跟火狐的两种方法 ，如果表格里边没有tbody标签，火狐浏览器是不支持appendChild方法的
Dom动态创建的代码是看不到的，可以用DebugBar 里边看。
在标准DOM中添加元素一般用appendChild(),但在JS中添加失效，原因是IE6，IE7不支持table.appendChild("tr")
解决方法： 在动态添加比个中加一个<tbody></tbody>标签，然后再往表格中添加的时候加tBodies[0]
<html>
<head>
<title></title>
<script type="text/javascript">
function LoadData() {
var data = { "百度": "http://www.baiduc.com", "新浪": "http://www.sina.com", "传智": "http://www.itcast.com" };
var link = document.getElementById("links");
for (var key in data) {
var value = data[key];
var tr = document.createElement("tr"); //先创建一行的对象在内存中，之后再将其加载进来
var td1 = document.createElement("td");
td1.innerText = key;
tr.appendChild(td1);
var td2 = document.createElement("td");
td2.innerHTML = "<a href='" + value + "'>" + value + "</a>";
tr.appendChild(td2);
link.tBodies[0].appendChild(tr);
}
}
function LoadData2() {
var data = { "百度": "http://www.baiduc.com", "新浪": "http://www.sina.com", "传智": "http://www.itcast.com" };
var links2 = document.getElementById("links2");
for (var key in data) {
var value = data[key];
var tr = links2.insertRow(-1); //先插入一格，然后再对其进行赋值
var td1 = tr.insertCell(-1);
td1.innerText = key;//（火狐不知处innerText）
var td2 = tr.insertCell(-1);
td2.innerHTML = "<a href='" + value + "'>" + value + "</a>";
}
}
</script>
</head>
<body>
<table id="links"><tbody></tbody></table>
<input type="button" value="表格连接" onclick="LoadData()" />
<table id="links2"></table>
<input type="button" value="表格连接2" onclick="LoadData2()" />
</body>
</html>
事件冒泡
如果元素A嵌套在元素B中，那么A被点击不仅A的onclick事件会被触发，B的onclick事件也会被触发。触发的顺序是“由内而外”的，
比如： 在页面上添加一个table、table里边有tr、tr里有td、td里边放一个p，然后每个都添加onclick事件，p的事件触发，网上美一级的事件都会被触发
<body onclick="alert('body click')">
<table onclick="alert('table click')">
<tr onclick="alert('tr click')">
<td onclick="alert('td click')">
<p onclick="alert('p click')">p的事件冒泡</p>
</td>
</tr>
</talbe>
</body>
其他事件
this
this表示发生事件的控件。只有在事件响应函数才能使用this获得发生事件的控件，在事件响应函数调用的函数中不能使用，如果要使用可以将this传递给函数或者使用
this和event.srcElement的语义是不一样的，this就是表示当前监听的事件对象，event.srcElement是引发事件的对象
<input type="button" value="event点击" onclick="alert(event.srcElement.value)" />
<input type="button" value="this点击" onclick="alert(this.value)" />
<!--this只能在事件响应函数中才能获得，不能写在js中-->
如果非要写在js脚本中，那么在调用方法的时候讲this传过去就行了。 而用window.event.srcElement就可以写在js脚本中
通过Dom修改CSS样式
修改元素的样式不是设置class属性，而是修改className属性。 Dom中有少数属性是与JS不一样的。
<style type="text/css">
.Day
{
background-color:Yellow;
}
.Night
{
background-color:Blue;
}
</style>
<body>
<div id="divTest" class="Day">
<font color="Red">你好吗？</font>
</div>
<input type="button" value="关灯" onclick="document.getElementById('divTest').className='Night';" />
通过Dom修改CSS样式2 style.属性名
在JS中 （-） 是有特殊含义的，单独修改样式的属性要使用"style"属性名。
注意：在CSS中属性名和在JavaScript中操作的时候属性名可能不一样，主要集中在那些属性名中含有 - 的属性，因为JavaScript中 - 不能做属性、类名的。
所以CSS中背景颜色是background-color，而JavaScript中则是style.background；
元素的样式名为class，而JavaScript中是className；
font-size -> style.fontSize； margin-top -> style.marginTop
单独修改控件的样式
<input type="button" value="AAA" onclick="this.style.color='red'" /> //this.style.color='red'修改字体的颜色 this.style.background='red'修改背景颜色
onfocus获得焦点事件 onblur失去焦点事件（Dom练习中有用到）
通过程序控制层的显示和隐藏 修改style.display
display没有值就是显示，为none为不显示
<html>
<head>
<title></title>
<script type="text/javascript">
function ShowDiv(cb) {
var div1 = document.getElementById("div1");
if (cb.checked) {
div1.style.display = '';//display没有值就是显示，为none为不显示
}
else {
div1.style.display = 'none';
}
}
</script>
</head>
<body>
<input type="checkbox" id="cbShow" onclick="ShowDiv(this)" /><label for="cbShow">显示高级选项</label>
<div id="div1" style="display:none">高级选项</div>
</body>
</html>
IE中body的事件范围（火狐也差不多）
IE中如果在body上添加onclick、onmousemove等事件相应，那个如果页面没有满，则body中最后一个元素一下（横向不限制）的部分就无法响应事件，必须使用代码
document上监听那些事件
比如：document.onmousemove = 函数名;
<head>
<title></title>
<script type="text/javascript">
function f() {
alert("hello");
}
document.onclick = f;
</script>
</head>
<body>
<!--如果在body里边加onclick事件，它就会只在开始地一行响应事件，而下边不会，所以，要下载document.onclick里边监听整个文档-->
</body>
元素的位置、大小单位
通过Dom读取元素的top、left、width、height等取到的值不是数字，而是"XXpx"这样的字符串
为这些属性设置的时候IE可以是80,90 而在火狐下必须是"80px"、"90%"这样的字符串，所以考虑到兼容性，最好用字符串格式
<head>
<title></title>
<script type="text/javascript">
function AddWidth() {
var addwidth = document.getElementById("div1").style.width;
addwidth = parseInt(addwidth, 10);
addwidth += 50;
addwidth += "px";
document.getElementById("div1").style.width = addwidth;
}
</script>
</head>
<body>
<div id="div1" style="width:50px;height:50px;border-style:solid;border-color:Yellow;border-width:1px">123123123</div>
<input type="button" value="自动加宽" onclick="AddWidth()" />
</body>
层的操作
position元素的样式值：static（无定位，显示在默认位置）、absolute（绝对定位）、fixed（相对于窗口的固定定位，位置不会随着浏览器的滚动而变化，IE6不支持）
relative（相对元素默认位置的定位）
如果要通过代码修改元素的坐标则一般使用adsolute，然后修改元素的top（上边缘距离）、left（左边缘距离）两个样式值
<input type="button" value="按钮" style="position:absolute;top:200px;left:200px" />
注意：在层中英文字母连续单词不会再中间自动换行
类似论坛登录对话框（img图片自己找一个放进去就OK）
<head>
<title></title>
<script type="text/javascript">
function showLogin() {
var login = document.getElementById("loginDiv");
login.style.display = '';
}
function hideLogin() {
var login = document.getElementById("loginDiv");
login.style.display = 'none';
}
</script>
</head>
<body>
<a href="javascript:showLogin()">登陆</a>
<div style="position:absolute; top:200px;left:500px;border:solid 1px Yellow; display:none" id="loginDiv">
<img src="img/close.JPG"style="float:right" onclick="hideLogin()" />
<table>
<tr>
<td><label for="username">登录名：</label></td>
<td><input type="text" id="username" /></td>
</tr>
<tr>
<td><label for="password">密码：</label></td>
<td><input type="text" id="password" /></td>
</tr>
</table>
</div>
</body>
form对象（编程操作表单）
form对象是表单的Dom对象
方法：submit()提交表单，但是不会触发onsubmit事件
普通按钮是没有submit效果的，如果submit也想有submit的效果，可以给表单设置一个id，然后根据form的id获得submit方法
<input type="button" value="普通按钮" onclick="document.getElementById('id').submit()" />
触发一个按钮的onclick事件,注意：触发按钮事件不是onclick事件，而是调用它的click()方法
<input type="button" value="按钮1" onclick="你干嘛要点击我" />
<input type="button" value="触发按钮1" onclick="documeng.getElementById("btn1").click()" />
触发submit按钮效果（一般用于鼠标离开焦点或者内容更改之后自动提交）
<input type="text" value="触发按钮1" onblur="documeng.getElementById("form1").submit()" />
再点击submit后form的onsubmit事件被触发，在onsubmit中可以进行数据校验，数据有问题，返回false即可取消提交
<form name="form1" action="a.aspx" method="get" onsubmit="if(document.getElementById('txtname').value.length<=0){alert('姓名不能为空');return false;}">
注意：submit按钮 如果直接在form的onsubmit事件中返回false，那么表单不会提交
但是在普通按钮中调用form的submit方法是不受影响的，即使在form的onsubmit事件中返回false，它照样还是可以提交
不同浏览器的差异
不同的浏览器对DOM支持的方法也不一样
获取网页中那个元素触发了事件：在IE中使用srcElement；在火狐中使用target
使用Dom获取和更改文本标签元素内文本：在IE中使用innerText；在火狐中使用textContent
动态为网页或者元素绑定事件：在IE中绑定事件的方法时attachEvent；在火狐中绑定事件的方法是：addEventListener
......
不同浏览器中对CSS的支持也不一样，所有就会有IE显示正常，火狐下就全乱了。
解决的方法就是使用JQuery
JQuery之类的框架进行了封装，将不同的浏览器的差异帮开发人员处理了，开发人员只要调用JQuery的方法。
JQuery会帮助在不同浏览器中进行翻译。用JQuery就可以解决不同浏览器上Dom的不同。
但是对于CSS，那就只能对不同的浏览器做不同的样式，所以，做网页一般都在各个浏览器中测试一下（比较有代表的IETester(IE不同的版本支持都不同)、火狐、谷歌）
弹出对话框的处理
给对话框传递参数，使用showModalDialog的第二个参数传递参数，在对话框中用window.dialogArguments获得传递的参数值；对话框中给window.parent.returnValue设定返
回值，这样在父窗口中就可以通过showModalDialog返回值读取设置的返回值了。
JS中的正则表达式
javascript中创建正则表达式类的方法：
var regex=new RegExp("\\d{3}") 或者var regex =^d{5}/.../ ...为正则表达式
/表达式/是javascript中专门为简化正则表达式编写而提供的语法，写在//中的正则表达式就不用管转义符了。
RegExp对象的方法：
test(str)判断字符串str是否匹配正则表达式，相当于C#中的IsMatch
var regex=/.+@.+/;
alert(regex.test("123@s.com")); 符合正则表达式，返回true
alert(retex.test("123.123.123")); 不符合，返回false
exec(str)进行搜索匹配，返回值为匹配结果
compile 编译表达式，提高运行速度
string的正则表达式方法
String队形中提供了一些与正则表达式相关的方法，相当于对于RegExp类的包装，简化调用：
match(regexp),相当于exec（进行匹配组）
var s="aaa@live.com";
var regex=/(.+)@(.+)/ (匹配组则需要将匹配的内容用括号括起来 RegExp.$1就表示匹配出来的第一组)
alert(RegExp.$1); 取的第一组
alert(RegExp.$2); 取的第二组
文本框的一些基本功能
回车实现Tab跳转。 需要相应文本框的onKeyDown事件
<body onKeyDown="if(window.event.KeyCode==13){window.event.KeyCode=9;}"> （不知道是我本的问题还是什么原因，onkeydown事件就是无法触发，不过代码绝对对着呢）
注意：只有少数的键才能被替换，大部分是不行的，有权限问题
禁用输入法。ime-mode:disabled
<input type="text" style="ime-mode:disabled" />
只能输入数字，及关联的一些字符
function number() {
var k = window.event.keyCode;
if ((k == 9) || (k == 13) || (k == 46) || (k == 8) || (k == 189) || (k == 109) || (k == 110) || (k = 190) || (k >= 48 && k <= 57) || (k >= 96 && k <= 105) || (k >= 37 && k <= 40)) {
}
else {
return false;
}
onkeyDown="return numonKeyDown()"调用。
区分事件响应函数和事件响应函数调用的函数，不能写成onkeyDown="numonKeyDown()"
禁止粘贴
onpaste="return false" 这种方法太绝对，就是不允许粘贴
还可以在onpaste中通过clipboardData.getData('Text')取到粘贴板中的值，然后遍历每个字符，看是否是合法的值，如果全部是合法的值才能允许粘贴，只要有一个非法制
禁止粘贴
<html>
<head>
<title></title>
<script type="text/javascript">
function isNum(k) {
return ((k == 9) || (k == 13) || (k == 46) || (k == 8) || (k == 189) || (k == 109) || (k == 110) || (k = 190) || (k >= 48 && k <= 57) || (k >= 96 && k <= 105) || (k >= 37 && k <= 40));
}
function numKeyDown() {
var k = window.event.keyCode;
return isNum(k);
}
function numPaste() {
var text = clipboardData.getData("Text");
for (var i = 0; i < text.length; i++) {
var asc = text.charCodeAt(i);
if (!isNum(asc)) {
return false;
}
}
}
</script>
</head>
<body>
<input type="text" onpaste="return numPaste()" style="ime-mode:disabled" onkeydown="return numKeyDown()" />
</body>
</html>
keyCode小键盘和主键盘区的有些键值是不一样的 ascii码则一样
说明：
8：退格键
46：delete键
37-40：方向键
48-57：小键盘区的数字
96-105：主键盘区的数字
110、190：小键盘区和主键盘区的小数点
---------------------- Windows Phone 7手机开发、.Net培训、期待与您交流！ ----------------------