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>