DOM BOM中的主要案例
显示隐藏文本框内容
//鼠标点击时文本框默认内容消失，未点击则继续显示
首先表单需要两个新的事物 获得焦点onfocus 失去焦点onblur
<body>
<input type="text" value="手机">
<script>
var text=document.querySelector('input');
text.onfocus = function() {
if(text.value==='手机'){
text.value= '';
}
text.style.color='#333';
}
text.onblur = function() {
if(text.value=== ''){
text.value='手机';
}
text.style.color='#999';
}
</script>
</body>
2.百度换肤效果
3.表格隔行变色
鼠标经过表格中的列时，此列颜色改变，鼠标离开时，颜色恢复
下面的代码实现的是鼠标经过表格头不变色，鼠标经过表格体变色
<script>
var trs=document.querySelector('tbody').querySelectorAll('tr');
for(var i=0;i<trs.length;i++){
trs[i].onmouseover = function() {
this.className='bg';
}
trs[i].onmouseout =function() {
this.className='';
}
}
</script>
4.表单全选和全选取消按钮按钮
案例分析
让下面复选框的checked属性全部跟随上面的按钮
下面复选框需要全部选中，上面的复选框才能选中。可以为下面所有的复选框绑定点击事件，每次点击，都要查看其它的复选框是否选中，若都选中，则上面的复选框选中。
<script>
var j_cbAll=document.getElementById('j-cbAll');//此处的id为上面复选框的id
var j_tbs=document.getElementById('j-tb').getElementsByTagName('input');
//此处的id为tbody的id
j_cbAll.onclick= function() {
for(var i=0;i<j_tbs.length;i++){
j_tbs[i].checked=this.checked;
}
}
for(var i=0;i<j_tbs.length;i++){
j_tbs[i].onclick = function() {
var flag=true;
for(var i=0;i<j_tbs.length;i++){
if(!j_tbs[i].checked){
flag=false;
break;
}
}
j_cbAll.checked = flag;
}
}
</script>
4.tab栏切换（重点案例）
5.新浪的下拉菜单
鼠标经过时显示下拉菜单，鼠标离开时下拉菜单消失
首先，初始时不出现下拉菜单的，所以css中下拉菜单设置为display:none;
<script>
var nav=document.querySelector('.nav');
var lis=nav.children;
for(var i=0;i<lis.length;i++){
lis[i].onmouseover =function() {
this.children[1].style.display='block';//里面的1并不唯一，此处表示的是要出现的下拉菜单
}
lis[i].onmouseout=function() {
this.children[1].style.display='none';
}
}
</script>
jQuery版
<body>
<ul class="nav">
<li><a href="">微博</a>
<ul>
<li>私信</li>
<li>艾特我</li>
<li>00</li>
</ul>
</li>
<li><a href="">微博</a>
<ul>
<li>私信</li>
<li>艾特我</li>
<li>00</li>
</ul>
</li>
<li><a href="">微博</a>
<ul>
<li>私信</li>
<li>艾特我</li>
<li>00</li>
</ul>
</li>
</ul>
<script>
$(function(){
$(".nav>li").mouseover(function(){
$(this).children('ul').show();
});
$(".nav>li").mouseleave(function(){
$(this).children('ul').hide();
});
});
</script>
</body>
6.简单版发布留言的案例
核心思路：点击发布之后，动态创建一个li,添加到ul里面，
创建li的同时，将文本域里面的值通过li.innerHTML赋值给li
如果需要新的留言在后面显示，使用appendChild如果希望在前面显示，使用innsertBefore
<textarea name="" id="" cols="30" rows="10"></textarea>
<button>发布</button>
<ul>
</ul>
<scriPt>
var text=document.querySelector('textarea');
var btn=document.querySelector('button');
var ul=document.querySelector('ul');
btn.onclick = function() {
if(text.value==''){
alert('您没有输入内容');
return false;
}
else{
var li=document.createElement('li');
li.innerHTML=text.value;
ul.appendChild(li);
}
}
</scriPt>
删除留言进阶版
功能实现：删除已发布的留言
<body> <textarea name="" id="" cols="30" rows="10"></textarea> <ul></ul> <button>发布</button> <script> var text=document.querySelector('textarea'); var btn=document.querySelector('button'); var ul=document.querySelector('ul'); btn.onclick=function() { if(text.value==''){ alert('您未输入内容'); return false; } else{ var li=document.createElement('li'); li.innerHTML=text.value+'<a href="javascript:;">删除</a>'; //javascript防止页面跳转，和链接后面出现href后面的符号 ul.insertBefore(li,ul.children[0]); var as=document.querySelectorAll('a'); for(var i=0;i<as.length;i++){ as[i].onclick=function() { ul.removeChild(this.parentNode); } } } } </script> </body>
动态生成表格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title> <style> table{ margin: 100px auto; border:solid 1px #999; border-collapse:collapse; text-align:center; } td,th{ border:solid 1px #999; width:50px; height:25px; } thead tr{ border: 1px solid #999; background-color: #ccc; } </style> </head> <body> <table cellspacing="0"> <thead> <tr> <th>姓名</th> <th>科目</th> <th>成绩</th> <th>操作</th> </tr> </thead> <tbody> </tbody> </table> <script> //创建学生数据，对象形式存储。在这里是模拟数据,因为没有数据库 var datas = [ { name: '张三', subject: 'math', score: 100 }, { name: '李四', subject: 'math', score: 90 }, { name: '王二', subject: 'math', score: 80 }, ] //动态创建行 var tbody=document.querySelector('tbody'); for(var i=0;i<datas.length;i++){//这里的for循环管行，tr var tr=document.createElement('tr'); tbody.appendChild(tr); //行里面创建单元格（跟数据有关系的单元格，不包含最后的删除单元格） td for(var k in datas[i]){ //for循环管列，td //创建单元格 var td=document.createElement('td'); //把对象里面的属性值datas[i][k]给td td.innerHTML=datas[i][k]; tr.appendChild(td); } //创建删除的单元格 var td=document.createElement('td'); td.innerHTML='<a href="javascript:;">删除</a>'; tr.appendChild(td); } //删除行操作 var as=document.querySelectorAll('a'); for(var i=0;i<as.length;i++){ as[i].onclick=function() { //a链接的父亲是单元格，父亲的父亲才是行 tbody.removeChild(this.parentNode.parentNode); } } </script> </body> </html>
案例：设置图片一直跟随鼠标
<img src="1.jpg" alt="图片">
<script>
var pic=document.querySelector('img');
document.addEventListener('mousemove',function(e) {//document.对文档出发
//mousemove只要鼠标移动1像素，就会触发这个事情。
var x =e.pageX;
var y =e.pageY;
//千万不要忘记给left和top添加px单位！！
pic.style.left=x+'px';
pic.style.top=y+'px';
//如果想让图片位于鼠标居中位置，这里分别减去对应图片一半的大小即可
});
</script>
模拟京东按键输入内容案例
核心思路：检测用户是否按下了s键，若是，则光标自动定位到搜索框里面。
搜索获得焦点：js里面的focus()方法
<body> <input type="text"> <script> var search=document.querySelector('input');
//注意下面如果写成keydown会出现问题 document.addEventListener('keyup',function(e) { //错的地方，上面的document写成了search if(e.keyCode===83){//判断是否是s键 search.focus(); } }); </script>
模拟京东快递单号查询
案例分析
1.快递单号输入内容时，上面的大字号字体盒子（con）显示
2.表单检测用户输入，给表单添加键盘事件
3.同时把快递单号里面的值获取过来赋值给con盒子作为内容
4.如果快递单号为空，则隐藏里面的大盒子
5秒自动关闭广告简单版
五秒后图片自动隐藏
<body>
<img src="1.jpg" alt="" class="ad">
<script>
var ad=document.querySelector('.ad');
setTimeout(function(){
ad.style.display='none';
},5000);
</script>
</body>
注册时发送短信案例
1.点击发送按钮后按钮禁用，且显示还剩多少秒可以再次点击
<body>
手机号码：<input type="number"><button>发送</button>
<script>
var time=3;
var btn=document.querySelector('button');
btn.addEventListener('click',function(){
this.disabled=true;
var timer=setInterval(function(){
//如果时间到了，需要清除定时器，并让按钮恢复原来的样子
if(time==0){
clearInterval(timer);
btn.disabled=false;
//修改按钮中的内容比较特殊，用的不是value，是innerHTML
btn.innerHTML='发送';
time=3;
}
else{
btn.innerHTML='还剩下'+time+'秒';
time--;
}
}, 1000);
})
</script>
</body>
实现五秒后页面的自动跳转
<body>
<button>点击</button>
<div></div>
<script>
var btn=document.querySelector('button');
var div=document.querySelector('div');
var time=3;
btn.addEventListener('click',function(){
setInterval(function(){
if(time==0){
location.href='http://www.itcast.cn';
}
else{
div.innerHTML='剩余'+time+'秒跳转页面';
time--;
}
}, 1000);
});
</script>
</body>
获取鼠标在盒子内的坐标
在盒子内点击，得到鼠标距离盒子左右的距离
1.首先得到鼠标在页面中的坐标（e.pageX,e.pageY）;
2.得到盒子在页面中的距离（box.offsetLeft,box.offsetTop）;
3.用鼠标距离页面的距离减去盒子距离页面的距离即可
4.如果想要移动一下鼠标，就可以获取最新的鼠标坐标，使用mousemove
下图css代码未展示
<body>
<div></div>
<script>
var div=document.querySelector('div');
div.addEventListener('mousemove',function(e){
//换成click的话就是点击才会更新坐标
var x=e.pageX-this.offsetLeft;
var y=e.pageY-this.offsetTop;
this.innerHTML='x坐标为'+x+' y坐标为'+y;
})
</script>
</body>
