JavaScript Dom
1、通过id获取页面上的元素
document.getElementById(); //通过这个方法就可以获取到页面上的元素
------------------------------------------------------
使用document.getElementById()方法的时候，如果使用了未定义的id会报错（有可能代码里确实有这个id，但是HTML代码是从上到下执行的，而在执行 document.getElementById()方法的时候还没有执行到创建id的代码），所以为了避免这种错误，document.getElementById()方法要么用在最后，要么为window.onload注册一个事件处理程序。当执行该事件的时候，页面已经加载完了，在事件中使用document.getElementById()方法就不会报错了。
window.onload=function(){
};
2、为元素对象注册事件
在<body></body>标签中创建一个按钮
<input id="btn1" type="button" name="name" value="button"/>
在<script></script>标签中给btn1动态注册事件，实现js代码与html网页代码相分离。
//动态注册事件的方式实现js代码与html网页代码相分离 window.onload=function(){ document.getElementById('btn1').onclick=function(){ alert('按钮被点了');
alert(new Date().toLocaleTimeString());//打印当前时间 }; }
window.onload=function(){ document.getElementById('btn1').onclick=fn; //这样写表示把fn函数赋值给onclick事件，点按钮的时候才执行fn document.getElementById('btn1').onclick=fn();//这样写没有意义，表示将fn的返回值赋值给onclick事件，执行这段代码的时候立即就执行fn（并没有点按钮也执行） }; function fn(){ alert(new Date().toLocaleTimeString()); }
3、window对象的函数
window.alert()；//弹出警告框，使用的时候一般省略掉'window.'直接alert()。
window.confirm();//确认提示框，使用的时候一般省略掉'window.'直接confirm()。
<html>
<head>
<title></title>
<script type="text/javascript">
window.onload=function(){
document.getElementById('btn1').onclick=function(){
if(confirm('您确认要点吗？')){
alert('点击成功');
}
else{
alert('点击失败');
}
};
};
</script>
</head>
<body>
<input type="button" name="name" value="button" id="btn1"/>
</body>
</html>
window.location.href='http://www.baidu.com'; //使页面跳转到百度，使用时可以省略掉'window.'。这里localtion是一个对象，之所以直接写成window.location='http://www.baidu.com'; 也能成功跳转是因为浏览器容错比较强，写的话最好还是按正确的写。
<html>
<head>
<title></title>
<script type="text/javascript">
window.onload=function(){
document.getElementById('btn1').onclick=function(){
location.href='http://www.baidu.com';
};
};
</script>
</head>
<body>
<input type="button" name="name" value="跳转到百度" id="btn1"/>
</body>
</html>
window.navigate('http://www.baidu.com'); //同样也是使页面跳转到百度，使用时可以省略掉'window.'，但是这个只有IE浏览器支持，其他浏览器都不支持
window.setInterval()和window.clearInterval()
<html>
<head>
<title></title>
<script type="text/javascript">
window.onload=function(){
var intervalId;
document.getElementById('btn1').onclick=function(){
//启动一个计时器
intervalId= setInterval(function(){
//每隔一秒执行一次这里面的代码
//让文本框中数字累加
//1、首先获取文本框对象
//var txtObj=document.getElementById('txt1');
<!-- //2、接着获取文本框中的值 -->
<!-- var v=txtObj.value; -->
<!-- //3、然后加一 -->
<!-- v=parseInt(v)+1; -->
<!-- //4、最后将新值赋值给文本框 -->
<!-- txtObj.value=v; -->
//上面1，2，3，4步可以简写为
document.getElementById('txt1').value++;//当使用一元运算符的时候，默认会先将字符串转成数字然后再++。这里要先++。
},1000);
};
document.getElementById('btn2').onclick=function(){
clearInterval(intervalId);
};
};
</script>
</head>
<body>
<input type="text" name="name" id="txt1" value="0"/>
<input type="button" name="name" value="开始" id="btn1"/>
<input type="button" name="name" value="停止" id="btn2"/>
</body>
</html>
让title的文字向左向右滚
<html>
<head>
<title>好好学习，天天向上</title>
<script type="text/javascript">
var direction='left';
window.onload=function(){
//启动一个计时器
setInterval(function(){
var titleText,firstChar,others;
titleText=document.title;
if(direction=='left'){
firstChar=titleText.charAt(0);
others=titleText.substring(1);
document.title=others+firstChar;
}else{
firstChar=titleText.charAt(titleText.length-1);
others=titleText.substring(0,titleText.length-1);
document.title=firstChar+others;
}
},1000);
//为向左向右注册单击事件
document.getElementById('btn1').onclick=function(){
direction='left';
};
document.getElementById('btn2').onclick=function(){
direction='right';
};
};
</script>
</head>
<body>
<input type="button" name="name" value="向左" id="btn1"/>
<input type="button" name="name" value="向右" id="btn2"/>
</body>
</html>
window.setTimeout(function(){},2000);
<html>
<head>
<title></title>
<script type="text/javascript">
window.onload=function(){
var timeOutId;
document.getElementById('btn1').onclick=function(){
<!-- //每隔2秒弹一个 -->
<!-- setInterval(function(){ -->
<!-- alert('hello'); -->
<!-- },2000); -->
//2秒钟后，弹一个
//只弹出一次
timeOutId=setTimeout(function(){
alert('hello');
},5000);
};
document.getElementById('btn2').onclick=function(){
clearTimeout(timeOutId);
};
};
</script>
</head>
<body>
<input type="button" name="name" value="start" id="btn1"/>
<input type="button" name="name" value="stop" id="btn2"/>
</body>
</html>
window.onload=function(){}; //当页面加载完毕后
window.onunload=function(){}; //当页面卸载完毕后
window.onbeforeunload=function(){};//当页面卸载前
<html>
<head>
<script type="text/javascript">
window.onbeforeunload=function(){
alert('页面即将卸载！');
};
window.onload=function(){
alert('页面加载完毕！');
};
window.onunload=function(){
alert('页面卸载完毕后！');
};
</script>
</head>
<body>
</body>
</html>
4、window对象得属性
给按钮注册一个单击事件，当点击按钮跳转到百度页面window.location.href='';
<html>
<head>
<script type="text/javascript">
window.onload=function(){
document.getElementById('btn1').onclick=function(){
window.location.href='http://www.baidu.com';
};
};
</script>
</head>
<body>
<input type="button" name="name" value="button" id="btn1"/>
</body>
</html>
给按钮注册一个单击事件，当点击按钮弹出当前请求得网址
<html>
<head>
<script type="text/javascript">
window.onload=function(){
document.getElementById('btn1').onclick=function(){
alert(window.location.href);
};
};
</script>
</head>
<body>
<input type="button" name="name" value="button" id="btn1"/>
</body>
</html>
当点击按钮刷新当前页面window.location.reload();
<html>
<head>
<script type="text/javascript">
window.onload=function(){
document.getElementById('btn1').onclick=function(){
window.location.reload();
};
};
</script>
</head>
<body>
<input type="button" name="name" value="button" id="btn1"/>
</body>
</html>
window.event.ctlKey ==true; 按下control键（在IE8及更早的IE浏览器下，必须通过window.event方式来获取事件对象。火狐浏览器底下不行，火狐浏览器只能在事件处理程序中加一个参数，这个参数就是事件对象）
<html>
<head>
<style type="text/css">
#div1{
background-color:blue;
width:100px;
height:100px;
}
</style>
<script type="text/javascript">
window.onload=function(){
document.getElementById('div1').onclick=function(){
if(window.event.ctrlKey){
alert("鼠标点击的同时按下了control键");
}else if(window.event.altKey){
alert("鼠标点击的同时按下了alt键");
}else if(window.event.shiftKey){
alert("鼠标点击的同时按下了shift键");
}else{
alert("普通点击");
}
};
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
给事件处理程序添加一个参数，这个参数就是事件对象。这种方式IE9及以上浏览器，火狐浏览器都支持
<html>
<head>
<style type="text/css">
#div1{
background-color:blue;
width:100px;
height:100px;
}
</style>
<script type="text/javascript">
window.onload=function(){
document.getElementById('div1').onclick=function(evt){
if(evt.ctrlKey){
alert("鼠标点击的同时按下了control键");
}else if(evt.altKey){
alert("鼠标点击的同时按下了alt键");
}else if(evt.shiftKey){
alert("鼠标点击的同时按下了shift键");
}else{
alert("普通点击");
}
};
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
如果要想所有浏览器都兼容可以：var e=window.event||evt; 声明一个变量，如果是IE8，window.event返回true,或运算第一个为真就直接返回第一个e=window.event;如果是火狐window.event为false,evt为真，或运算第一个为false继续判断第二个，第二个为true，返回第二个e=evt
<html>
<head>
<style type="text/css">
#div1{
background-color:blue;
width:100px;
height:100px;
}
</style>
<script type="text/javascript">
window.onload=function(){
document.getElementById('div1').onclick=function(evt){
var e=window.event||evt;
if(e.ctrlKey){
alert("鼠标点击的同时按下了control键");
}else if(e.altKey){
alert("鼠标点击的同时按下了alt键");
}else if(e.shiftKey){
alert("鼠标点击的同时按下了shift键");
}else{
alert("普通点击");
}
};
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
this与window.event.srcElement都表示当前事件（如果都是针对一个事件来看，this与srcElement表示的是一样的）
事件冒泡中的this与srcElement表示的就不同，在这里如果时用this的话当点击最内层的元素时会依此将包含其的父元素的id都打印出来，而如果用srcElement的话始终表示最初引发的事件对象(事件冒泡依然继续)
事件冒泡中的this表示的是当前事件对象，而srcElement表示的是最初引发的事件对象。
<html>
<head>
<title>事件冒泡</title>
<style type="text/css">
#div1{
background-color:blue;
width:100px;
height:100px;
}
#p1{
background-color:red;
width:50px;
height:50px;
}
#sp1{
background-color:green;
width:25px;
height:25px;
}
</style>
<script type="text/javascript">
window.onload=function(){
document.body.onclick=function(){
//alert(this.id);
alert(window.event.srcElement.id);
};
document.getElementById('div1').onclick=function(){
//alert(this.id);
alert(window.event.srcElement.id);
};
document.getElementById('sp1').onclick=function(){
//alert(this.id);
alert(window.event.srcElement.id);
};
document.getElementById('p1').onclick=function(){
//alert(this.id);
alert(window.event.srcElement.id);
};
};
</script>
</head>
<body id="bod1">
<div id="div1">
<p id="p1">
<span id="sp1">好好学习</span>
</p>
</div>
</body>
</html>
阻止事件冒泡，e.calcleBubble=true;阻止。e.cancleBubble=false;允许。前面是兼容所有浏览器的写法，火狐浏览器下还可以用e.stopPropagation();来阻止
<html>
<head>
<style type="text/css">
#div1{
background-color:blue;
width:100px;
height:100px;
}
#p1{
background-color:red;
width:50px;
height:50px;
}
#sp1{
background-color:green;
width:25px;
height:25px;
}
</style>
<script type="text/javascript">
window.onload=function(){
document.body.onclick=function(){
alert(this.id);
};
document.getElementById('div1').onclick=function(evt){
alert(this.id);
//兼容模式阻止事件冒泡
var e=window.event||evt
e.cancelBubble=true;
};
document.getElementById('sp1').onclick=function(evt){
alert(this.id);
//兼容模式阻止事件冒泡
var e=window.event||evt
e.cancelBubble=true;
};
document.getElementById('p1').onclick=function(evt){
alert(this.id);
//兼容模式阻止事件冒泡
var e=window.event||evt
e.cancelBubble=true;
};
};
</script>
</head>
<body id="bod1">
<div id="div1">
<p id="p1">
<span id="sp1">好好学习</span>
</p>
</div>
</body>
</html>
获取最初引发事件对象的兼容写法，在IE下要用srcElement,火狐浏览器的话得用target
<html>
<head>
<title>事件冒泡</title>
<style type="text/css">
#div1{
background-color:blue;
width:100px;
height:100px;
}
#p1{
background-color:red;
width:50px;
height:50px;
}
#sp1{
background-color:green;
width:25px;
height:25px;
}
</style>
<script type="text/javascript">
window.onload=function(){
document.body.onclick=function(evt){
var e=window.event||evt;
var srcTarget=e.srcElement||e.target;
alert(srcTarget.id);
};
document.getElementById('div1').onclick=function(evt){
var e=window.event||evt;
var srcTarget=e.srcElement||e.target;
alert(srcTarget.id);
};
document.getElementById('sp1').onclick=function(evt){
var e=window.event||evt;
var srcTarget=e.srcElement||e.target;
alert(srcTarget.id);
};
document.getElementById('p1').onclick=function(evt){
var e=window.event||evt;
var srcTarget=e.srcElement||e.target;
alert(srcTarget.id);
};
};
</script>
</head>
<body id="bod1">
<div id="div1">
<p id="p1">
<span id="sp1">好好学习</span>
</p>
</div>
</body>
</html>
clipboardData对象（剪贴板），只兼容IE
clipboardData.setData("Text",var);//设置剪贴板中的值，即复制
clipboardData.getData("Text");//读取剪贴板中的值，即粘贴
clipboardData.clearData("Text");//清空剪贴板
oncopy事件：复制
onpaste事件：粘贴
oncut事件：剪贴
window.history属性
<html>
<head>
<title>js dom.history.html</title>
<script type="text/javascript">
window.onload=function(){
document.getElementById('btn1').onclick=function(){
window.history.forward();
};
document.getElementById('btn2').onclick=function(){
window.history.back();
};
};
</script>
</head>
<body>
<input type="button" name="name" id="btn1" value="前进"/>
<input type="button" name="name" id="btn2" value="后退"/>
<a href="1.html">1.html</a>
</body>
</html>
<html>
<head>
<title>1.html</title>
<script type="text/javascript">
window.onload=function(){
document.getElementById('btn1').onclick=function(){
window.history.forward();
};
document.getElementById('btn2').onclick=function(){
window.history.back();
};
};
</script>
</head>
<body>
<input type="button" name="name" id="btn1" value="前进"/>
<input type="button" name="name" id="btn2" value="后退"/>
<a href="js dom.history.html">js dom.history.html</a>
</body>
</html>
window.document属性
document.write()和document.witeln() 应该和页面加载一起使用，如果页面加载完毕再使用会覆盖原来的页面
通过document.write()可以实现动态向页面中创建内容（包含文本或者各种标签）
write和writeln的区别在于，writeln输出完会在源代码中进行换行，而write不会进行任何换行，是紧挨着输出
在一个网页中引用其他网页的内容时可以用document.write();
document.getElementsByTagName('标签类型')；//根据标签类型来获取页面上的标签，返回的是一个标签集合，可以用遍历的方式来操作集合中的每个标签（这里要用for循环来遍历，如果时for in 循环的话会将集合的length属性也遍历出来，这里我们只需要集合中的所有标签元素，所以用for）
document.getElementsByName('name值');//根据标签的name属性获取页面上的标签，返回的是一个标签集合
document.getElementById('标签的id').getElementsByTagName('标签类型');//获取特定id的标签下的某类标签的集合
倒计时协议：
<html>
<head>
<title></title>
<script type="text/javascript">
window.onload=function(){
var s=9;
var intervalId=setInterval(function(){
var obj=document.getElementById('btn1');
if(s>0){
obj.value='请仔细阅读协议（'+s+'）';
s--;
}else{
obj.value='同意！';
obj.disabled=false;
clearInterval(intervalId);
}
},1000);
};
</script>
</head>
<body>
<input type="button" disabled="disabled" id="btn1" name="name" value="请仔细阅读协议（10）"
</body>
</html>
动态添加表格
<html>
<head>
<script type="text/javascript">
var dict={'百度':'http://www.baidu.com','谷歌':'http://www.gogle.com'};
window.onload=function(){
document.getElementById('btn1').onclick=function(){
var tableElement=document.createElement('table');
tableElement.border='1';
for(var key in dict){
var trElement=document.createElement('tr');
var td1Element=document.createElement('td');
td1Element.innerHTML=key;
var td2Element=document.createElement('td');
td2Element.innerHTML='<a href="'+dict[key]+'">'+key+'</a>';
trElement.appendChild(td1Element);
trElement.appendChild(td2Element);
tableElement.appendChild(trElement);
}
document.body.appendChild(tableElement);
};
};
</script>
</head>
<body>
<input type="button" id="btn1" name="name" value="动态添加表格"/>
</body>
</html>
动态创建DOM元素，删除子元素（在这里直接给父对象的innerHTML='',也可以起到删除子对象的效果，但是不能删除子对象的事件，所以推荐使用下面这种removeChild的方式，删除对象的同时将其对应的事件也一起删除了）
<html>
<head>
<title>动态创建DOM（document.createElement）</title>
<style type="text/css">
#div1{
width:450px;
height:450px;
border:1px solid blue;
}
</style>
<script type="text/javascript">
window.onload=function(){
document.getElementById('btn1').onclick=function(){
//1、动态创建一个超链接
var aLink=document.createElement('a');
aLink.href='http://www.baidu.com';
aLink.title='百度一下你就知道';
aLink.target='_blank';
aLink.innerText='百度';
document.getElementById('div1').appendChild(aLink);
document.getElementById('div1').insertBefore(aLink,document.getElementById('div1').firstChild);
//2、动态创建一个文本框
var tInput=document.createElement('input');
tInput.type='text';
document.getElementById('div1').appendChild(tInput);
document.getElementById('div1').insertBefore(tInput,document.getElementById('div1').firstChild);
};
//删除子元素
document.getElementById('btn2').onclick=function(){
var divObj=document.getElementById('div1');
while(divObj.firstChild){
divObj.removeChild(divObj.firstChild);
}
};
};
</script>
</head>
<body>
<input type="button" id="btn1" name="name" value="动态创建一个元素"/>
<input type="button" id="btn2" name="name" value="清空层中内容"/>
<div id="div1">
sdadasdsadasdasdasd
</div>
</body>
</html>
动态循环创建表格insertRow，insertCell
<html>
<head>
<script type="text/javascript">
window.onload=function(){
document.getElementById('btn1').onclick=function(){
var dict={
'百度':'http://www.baidu.com',
'谷歌':'http://www.gogle.com'
};
//动态创建表格
var tableElement=document.createElement('table');
tableElement.border='1';
//循环为表格创建行
for(var key in dict){
//每次遍历一条数据就动态创建一行
var currentRow=tableElement.insertRow(-1);//-1表示向最后追加一行
//向刚刚插入的行中插入列
var td1=currentRow.insertCell(-1);//向当前行中追加一个列
td1.innerHTML=key;
currentRow.insertCell(-1).innerHTML='<a href="'+dict[key]+'">'+key+'</a>';
}
document.body.appendChild(tableElement);
};
};
</script>
</head>
<body>
<input type="button" id="btn1" value="创建表格" name="name"/>
</body>
</html>
<html>
<head>
<script type="text/javascript">
window.onload=function(){
document.getElementById('btn1').onclick=function(){
//1、采集用户输入数据
var user_name=document.getElementById('txtNickName').value;
var content=document.getElementById('txtContent').value;
//2、动态创建行对象
var tableElement=document.getElementById('tbComments');
var currentRow=tableElement.insertRow(-1);
currentRow.insertCell(-1).innerHTML=user_name;
currentRow.insertCell(-1).innerHTML=content;
<!-- var trLine=document.createElement('tr'); -->
<!-- var td1=document.createElement('td'); -->
<!-- td1.innerHTML=user_name; -->
<!-- var td2=document.createElement('td'); -->
<!-- tf2.innerHTML=content; -->
<!-- trLine.appendChild(td1); -->
<!-- trLine.appendChild(td2); -->
<!-- document.getElementById('tbComments').appendChild(trLine); -->
};
};
</script>
</head>
<body>
<table id="tbComments" border="1">
<tr>
<td>
猫猫：
</td>
<td>
沙发耶！
</td>
</tr>
</table>
昵称：<input type="text" id="txtNickName"/><br/>
<textarea id="txtContent" ></textarea><br/>
<input type="button" value="评论" id="btn1"/>
</body>
</html>
什么样的代码需要放到onload里面？当代码需要访问页面上的DOM元素时，必须要等页面加载完毕才能运行，这种代码需要放到onload里面。如果不需要访问页面的DOM元素就没必要放到onload里面了。
当文本框失去焦点的时候判断文本框内是否有文字，有则背景为白色，无则背景为红色
<html>
<head>
<script type="text/javascript">
window.onload=function(){
var inputs=document.getElementsByTagName('input');
for(var i=0;i<inputs.length;i++){
if(inputs[i].type=='text'){
inputs[i].onblur=function(){
if(this.value.length==0){
this.style.backgroundColor='red';
}else{
this.style.backgroundColor='white';
}
};
}
}
};
</script>
</head>
<body>
<input type="text"/><input type="text"/><input type="text"/><input type="text"/>
</body>
</html>
用js做的评分
<html>
<head>
<style type="text/css">
td{
font-size:50;
color:green;
cursor:pointer;
}
</style>
<script type="text/javascript">
window.onload=function(){
//1、获取所有的td
var tdElements=document.getElementById('tb1').getElementsByTagName('td');
//2、为每个td注册一个onmouseover和onmouseout事件
for(var i=0;i<tdElements.length;i++){
tdElements[i].setAttribute('score',(i+1)*10);
//为每个td注册一个onmouseover事件
tdElements[i].onmouseover=function(){
for(var c=0;c<tdElements.length;c++){
tdElements[c].innerHTML='★';
if(tdElements[c]==this){
break;
}
}
};
//为每个td注册一个onmouseout事件
tdElements[i].onmouseout=function(){
//标记td为isclicked的td
var tdIndex=-1;
for(var c=0;c<tdElements.length;c++){
tdElements[c].innerHTML='☆';
if(tdElements[c].getAttribute('isclicked')){
tdIndex=c;
}
}
//找到当前具有isclicked属性的td，将0到这个td的每一个都变成实心
for(var x=0;x<=tdIndex;x++){
tdElements[x].innerHTML='★';
}
};
//为每个td注册一个单击事件
tdElements[i].onclick=function(){
//清除所有的td的isclicked属性
for(var c=0;c<tdElements.length;c++){
tdElements[c].removeAttribute('isclicked');
}
//设置当前被点击的td的状态
this.setAttribute('isclicked','isclicked');
alert(this.getAttribute('score'));
};
}
};
</script>
</head>
<body>
<table id="tb1" boreder="0" cellpadding="0" cellspacing="0">
<tr>
<td>☆</td>
<td>☆</td>
<td>☆</td>
<td>☆</td>
<td>☆</td>
<td>☆</td>
</tr>
</table>
</body>
</html>
选中的超链接变红色其余超链接变白色并且页面不跳转（主要就是this的用法），不跳转就是在标签的单击事件后面加上return false
<html>
<head>
<script type="text/javascript">
window.onload=function(){
//选取页面下所有超链接标签
var alinks=document.getElementsByTagName('a');
//为每个标签注册一个单击事件
for(var i=0;i<alinks.length;i++){
alinks[i].onclick=function(){
//设置所有其他标签背景变白色
for(var j=0;j<alinks.length;j++){
if(j!=i){
alinks[j].style.backgroundColor='white';
}
}
//设置被点击的超链接背景变红色
this.style.backgroundColor='red';
return false;
};
}
};
</script>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.baidu.com">百度</a>
</body>
</html>
点击表格某行某行变色，其余变白色
<html>
<head>
<script type="text/javascript">
window.onload=function(){
//获取所有的行
var trs=document.getElementById('tb').getElementsByTagName('tr');
//为每个行注册单击事件
for(var i=0;i<trs.length;i++){
trs[i].onclick=function(){
for(var c=0;c<trs.length;c++){
trs[c].style.backgroundColor='white';
}
this.style.backgroundColor='red';
};
}
};
</script>
</head>
<body>
<table id="tb" border="1" cellpadding="2" cellspacing="2">
<tr>
<td>AAA</td>
<td>AAA</td>
<td>AAA</td>
<td>AAA</td>
<td>AAA</td>
</tr>
<tr>
<td>AAA</td>
<td>AAA</td>
<td>AAA</td>
<td>AAA</td>
<td>AAA</td>
</tr>
<tr>
<td>AAA</td>
<td>AAA</td>
<td>AAA</td>
<td>AAA</td>
<td>AAA</td>
</tr>
<tr>
<td>AAA</td>
<td>AAA</td>
<td>AAA</td>
<td>AAA</td>
<td>AAA</td>
</tr>
</table>
</body>
</html>
通过js操作类样式
<html>
<head>
<script type="text/javascript">
window.onload=function(){
document.getElementById('bt1').onclick=function(){
document.getElementById('div1').className='class1';
};
document.getElementById('bt2').onclick=function(){
document.getElementById('div1').className+=' class2';
};
document.getElementById('bt3').onclick=function(){
document.getElementById('div1').className+=' class3';
};
};
</script>
<style type="text/css">
.class1{
width:500px;
height:500px;
border:1px solid blue;
}
.class2{
background-color:yellow;
}
.class3{
font-family:宋体;
font-size:50px;
}
</style>
</head>
<body>
<input id="bt1" type="button" value="加边框"/>
<input id="bt2" type="button" value="变黄色"/>
<input id="bt3" type="button" value="变字体"/>
<div id="div1">
好好学习，天天向上
</div>
</body>
</html>
动态显示或隐藏层
<html>
<head>
<script type="text/javascript">
window.onload=function(){
var btnElement=document.getElementById('btn1');
btnElement.onclick=function(){
if(this.value=='动态隐藏层'){
var intervalId=setInterval(function(){
//获取要操作的层对象
var divObj=document.getElementById('div1');
//获取现在层的高度
//只有通过style属性设置的层的高度才能通过style属性获取层的高度，如果不是通过style属性设置的层的高度，那么就无法通过style属性获取层的高度
var h=divObj.offsetHeight;
h-=5;
//把新的高度赋值给层
if(h<0){
h=0;
divObj.style.height=0+'px';
btnElement.value='动态显示层';
divObj.style.display='none';
clearInterval(intervalId);
}else{
divObj.style.height=h+'px';
}
},200);
}else{
//btnElement.value='动态隐藏层';
document.getElementById('div1').style.display='';
var intervalId=setInterval(function(){
//获取要操作的层对象
var divObj=document.getElementById('div1');
//获取现在层的高度
//只有通过style属性设置的层的高度才能通过style属性获取层的高度，如果不是通过style属性设置的层的高度，那么就无法通过style属性获取层的高度
var h=divObj.offsetHeight;
h+=5;
//把新的高度赋值给层
if(h>210){
h=210;
divObj.style.height=210+'px';
btnElement.value='动态隐藏层';
divObj.style.display='';
clearInterval(intervalId);
}else{
divObj.style.height=h+'px';
}
},200);
}
};
};
</script>
<style type="text/css">
#div1{
width:200px;
height:210px;
border:1px solid blue;
background-color:red;
overflow:hidden;
}
</style>
</head>
<body>
<input type="button" id="btn1" value="动态隐藏层"/>
<div id="div1">
</div>
</body>
</html>
判断checkbox选中与否，并打印选中的内容
<html>
<head>
<script type="text/javascript">
window.onload=function(){
//获取所有的checkbox
var chks=document.getElementById('div1').getElementsByTagName('input');
//遍历每个checkbox
for(var i=0;i<chks.length;i++){
chks[i].onclick=function(){
var chksAll=document.getElementById('div1').getElementsByTagName('input');
var chkChecked=[];
//循环获取所有被选中的
for(var j=0;j<chksAll.length;j++){
if(chksAll[j].checked){
chkChecked[chkChecked.length]=chksAll[j].value;
}
}
//获取个数，并且显示值
document.getElementById('pmsg').innerHTML='共选中'+chkChecked.length+'项，分别是：'+chkChecked.toString();
};
}
};
</script>
</head>
<body>
<div id="div1">
<input type="checkbox" name="name" value="Sam"/>Sam
<input type="checkbox" name="name" value="Amy"/>Amy
<input type="checkbox" name="name" value="Tom"/>Tom
<input type="checkbox" name="name" value="Mary"/>Mary
</div>
<p id="pmsg">
共选中0项，分别是：
</p>
</body>
</html>
如果要给整个页面注册事件，不要给body注册，要给document注册才可以
点击按钮弹出一个登陆层
<html>
<head>
<title>登陆</title>
<style type="text/css">
#div1{
width:250px;
height:100px;
background-color:yellow;
//position:absolute;
display:none;
}
</style>
<script type="text/javascript">
window.onload=function(){
document.getElementById('a1').onclick=function(){
var tbElement=document.getElementById('div1');
tbElement.style.display='block';
tbElement.style.margin=document.body.clientHeight/2+' '+document.body.clientWidth/2+' auto';
};
document.getElementById('btn1').onclick=function(){
document.getElementById('div1').style.display='none';
};
};
</script>
</head>
<body>
<a id="a1" href="#">登陆</a>
<div id="div1" style='display:none'>
<table id="tb1" cellpadding="2" cellspacing="2">
<tr>
<td>账号：</td>
<td><input type="text"/></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password"/></td>
</tr>
</table>
<input type="button" name="name" value="关闭" id="btn1"/>
</div>
</body>
</html>
动态获取元素高度时的问题
元素对象：element
1、element.offsetHeight：用这种方式获取元素的高的时候，获取的时经过计算的，包括了border,margin,padding等的高度
2、element.currentStyle.height:IE下获取高度（这里拿到的只是CSS中设置的高度，不包含其他的）
3、window.getComputedStyle(element，null).height:火狐浏览器下获取高度(拿到实际在css中设置的高度)
利用js操作表单元素
<html>
<head>
<script type="text/javascript">
window.onload=function(){
//为层注册一个单击事件
document.getElementById('div1').onclick=function(){
//document.getElementById('btnSearch').click();
document.getElementById('form1').submit();
};
document.getElementById('form1').onsubmit=function(){
//再表单提交事件中验证用户是否输入了，输入了就提交否知不提交
var txt=document.getElementById('txt1');
if(txt.value.length==0){
alert('请输入内容！');
return false;
}
};
};
</script>
<style type="text/css">
#div1{
width:146px;
height:300px;
background-color:red;
}
</style>
</head>
<body>
<form action="http://www.baidu.com/s" method="get" id="form1">
<input type="text" name="wd" id="txt1" value=""/>
<input type="submit" value="百度一下，你就知道" id="btnSearch"/>
<div id="div1">
</div>
</form>
</body>
</html>
正则表达式使用
<html>
<head>
<script type="text/javascript">
window.onload=function(){
document.getElementById('btn').onclick=function(){
var post_code=document.getElementById('txt1').value;
//验证是否是合法的邮编
//2.1创建一个正则表达式（正则表达式要写到一对斜杠里面）
var reg_postcode=/^[0-9]{6}$/;
//2.2通过调用正则表达式对象的test方法来测试是否匹配
var isok=reg_postcode.test(post_code);
alert(isok);
};
};
</script>
</head>
<body>
<input type="text" value="" id="txt1" name="name"/>
<input type="button" name="name" value="测试是否是合法的邮政编码" id="btn" />
</body>
</html>
验证是是否是合法的邮编或邮箱
<html>
<head>
<script type="text/javascript">
window.onload=function(){
document.getElementById('btn').onclick=function(){
var post_code=document.getElementById('txt1').value;
//验证是否是合法的邮编
//2.1创建一个正则表达式（正则表达式要写到一对斜杠里面）
var reg_postcode=/^[0-9]{6}$/;
//2.2通过调用正则表达式对象的test方法来测试是否匹配
var isok=reg_postcode.test(post_code);
alert(isok);
};
document.getElementById('btn1').onclick=function(){
var user_email=document.getElementById('txt1').value;
var reg_emai=/^\w+@\w+(\.\w+)+$/;
alert(reg_emai.test(user_email));
};
};
</script>
</head>
<body>
<input type="text" value="" id="txt1" name="name"/>
<input type="button" name="name" value="测试是否是合法的邮政编码" id="btn" />
<input type="button" name="name" value="测试是否是合法的邮箱" id="btn1" />
</body>
</html>
利用js操作正则去掉字符串首尾的空格
<html>
<head>
<script type="text/javascript">
var msg=' abcdefg ';
//msg=msg.replace(/^\s+/,'').replace(/\s+$/,'');
alert('==='+msg+'===');
</script>
</head>
<body>
</body>
</html>
模拟密码安全等级判断
<html>
<head>
<script type="text/javascript">
window.onload=function(){
//为文本框注册一个键盘按下然后弹起的事件
document.getElementById('txtPassword').onkeyup=function(){
var tds=document.getElementById('tb1').getElementsByTagName('td');
for(var i=0;i<tds.length;i++){
tds[i].style.backgroundColor='white';
}
var pwd=this.value;
//根据密码，校验强度
if(pwd.length>0){
var pwdLevel= getPasswordLevel(pwd);
//根据密码强度设置强弱
switch(pwdLevel){
case 0:
case 1:
case 2:
tds[0].style.backgroundColor='red';
break;
case 3:
case 4:
tds[0].style.backgroundColor='yellow';
tds[1].style.backgroundColor='yellow';
break;
case 5:
tds[0].style.backgroundColor='green';
tds[1].style.backgroundColor='green';
tds[2].style.backgroundColor='green';
break;
default:break;
}
}
};
};
function getPasswordLevel(user_pwd){
var lvl=0;
//1、如果密码中包含数字则强度+1
if(user_pwd.match(/\d+/)){
lvl++;
}
//2、如果密码中包含小写字母强度+1
if(user_pwd.match(/[a-z]+/)){
lvl++;
}
//3、如果密码中包含大写字母强度+1
if(user_pwd.match(/[A-Z]+/)){
lvl++;
}
//4、如果密码中包含特殊符号强度+1
if(user_pwd.match(/^[0-9a-zA-Z]+/)){
lvl++;
}
//5、如果密码长度超过6位强度+1
if(user_pwd.length>6){
lvl++;
}
return lvl;
}
</script>
<style type="text/css">
td{
font:12px 宋体;
width:78px;
}
</style>
</head>
<body>
<p>请输入密码：
<input type="text" name="name" value="" id="txtPassword"/></p>
<table id="tb1" border="1" cellpadding"0" cellspacing="0">
<tr>
<td>
弱
</td>
<td>
中
</td>
<td>
强
</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>apply和call</title>
<script type="text/javascript">
var user_name="大天狗";
function showName(){
alert(this.user_name);
}
showName();
<!-- function Person(){ -->
<!-- this.user_name="茨木童子" -->
<!-- } -->
<!-- var p=new Person(); -->
<!-- p.show=showName; -->
<!-- p.show(); -->
var p={user_name:'茨木'}; //创建了一个p对象
showName.apply(p); //用p对象替换了window对象，所以这里弹出来的是p对象的user_name的值
showName.call(p);//这里apply和call作用是一样的，区别就在于如果函数有参数apply要用数组传进去，而call是以逗号分开的
</script>
</head>
<body>
</body>
</html>
<html>
<head>
<title>写递归的时候用arguments.callee()来表示递归函数自身</title>
<script type="text/javascript">
var index=0;
function myFunction(){
index++;
alert(index);
if(index<5){
//myFunction(); //如果是普通函数递归，这样写和callee的写法相同
arguments.callee();//这个就代表函数自身
}
}
//myFunction();
//如果函数是个匿名函数
var p1=function(){
index++;
alert(index);
if(index<5){
//p1();// 如果匿名只赋值给p1对象的话是没问题的，但是如果把匿名函数赋值给了p2对象就不行了，就得用callee的方式来表示函数本身。
arguments.callee();//这个就代表函数自身，把匿名
}
}
p1();
var p2=p1;
p2();
</script>
</head>
<body>
</body>
</html>
通过js实现人员在表格中的新增与删除
<html>
<head>
<style type="text/css">
#tbody1 td{
text-align:center;
}
</style>
<script type="text/javascript">
function deleteCurrentRow(current){
//先拿到当前点的这一行，current代表的就是button按钮，它的父节点就是th,th的父节点就是tr。
var tr=current.parentNode.parentNode;
//然后再从tbody中把这一行删除出去
document.getElementById('tbody1').removeChild(tr);
}
window.onload=function(){
//给新增按钮注册一个单击事件
document.getElementById('btn1').onclick=function(){
//获取要添加的数据
var txName=document.getElementById('txtName').value;
var txAge=document.getElementById('txtAge').value;
//在tbody中新增一行
var currentRow= document.getElementById('tbody1').insertRow(-1);
//在新增的行中添加三列
currentRow.insertCell(-1).innerHTML=txName;
currentRow.insertCell(-1).innerHTML=txAge;
//通过下面这种方式创建的按钮不能直接获得其对象，只能通过这种方式创建onclick事件，这里的这个this就指的是button。
currentRow.insertCell(-1).innerHTML='<input onclick="deleteCurrentRow(this);" type="button" value="删除" name="name"/>';
};
};
</script>
</head>
<body>
<fieldset style="width:300px;">
<legend>新增人员信息</legend>
<P>
姓名：<input type="text" id="txtName"/>
</P>
<P>
年龄：<input type="text" id="txtAge"/>
</P>
<P>
<input type="button" name="name" id="btn1" value="新增"/>
</P>
</fieldset>
<legend style="width:300px;text-align:center;">人员信息表</legend>
<table border="1" cellpadding="0" cellspacing="0" style="width:300px;">
<thead>
<tr>
<th>
姓名
</th>
<th>
年龄
</th>
<th>
删除
</th>
</tr>
</thead>
<tbody id="tbody1">
</tbody>
</table>
</body>
</html>
