DOM
DOM基础
1. DOM简介、DOM标准、DOM节点
2. 获取元素的子节点：childNodes、兼容性问题
3. 节点类型：nodeType、文本节点、元素节点
4. children的使用
5. 获取元素父节点parentNode
6. 获取定位元素的父节点offsetParent
7. 获取首尾子元素：firstChild、firstElementChild、lastChild、lastElementChild
8. 获取兄弟节点：nextSibling、nextElemnetSibling、previousSibling、previousElementSibling
9. 元素属性操作：“.”与“[]”回顾、setAttribute、getAttribute、removeAttribute
10. 通过className获取元素、封装getByClass函数
<!-- DOM节点1 childNodes nodeType 获取子节点 children parentNode 例子：点击链接，隐藏整个li offsetParent 例子：获取元素在页面上的实际位置 --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无标题文档</title> <script type="text/javascript"> window.onload = function() { alert(document.body.childNodes[1].nodeType); } </script> </head> <body> aaafsa <span>fff</span> </body> </html> <!-- childNodes 和 nodeType （1） nodeType: 1.element 2.attr 3.text nodeName nodeValue --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无标题文档</title> <script type="text/javascript"> window.onload = function() { var oUl = document.getElementById('ul1'); var i = 0; for(i; i< oUl.childNodes.length; i++) { if(oUl.childNodes[i].nodeType == 1) { oUl.childNodes[i].style.background='red'; } } } </script> </head> <body> <ul id="ul1"> <li>asd</li> <li>asd</li> <li>asd</li> </ul> </body> </html> <!-- childNodes 和 nodeType（2） --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无标题文档</title> <script type="text/javascript"> window.onload = function() { var aA = document.getElementsByTagName('a'); var i = 0; for(i; i< aA.length; i++) { aA[i].onclick = function() { this.parentNode.style.display = 'none'; } } } </script> </head> <body> <ul> <li>aass<a href="javascript:">隐藏</a></li> <li>5453<a href="javascript:">隐藏</a></li> <li>cvxc<a href="javascript:">隐藏</a></li> <li>ertert<a href="javascript:">隐藏</a></li> </ul> </body> </html> <!-- parentNode --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无标题文档</title> <script type="text/javascript"> </script> </head> <body> <div id="div1" style="100px; height:100px; background:red; margin:100px;"> <div id="div2" onclick="alert(this.offsetParent.tagName)" style="100px; height:100px; background:yellow; position:absolute; left:100px; top:100px;"></div> </div> </body> </html> <!-- offsetParent -->
<!-- DOM节点(2) 首尾子节点 有兼容性问题 firstChild、firstElementChild lastChild 、lastElementChild 兄弟节点 有兼容性问题 nextSibling、nextElementSibling previousSibling、previousElementSibling 元素属性操作 第一种：oDiv.style.display=“block”; 第二种：oDiv.style[“display”]=“block”; 第三种：Dom方式 DOM方式操作元素属性 获取：getAttribute(名称) 设置：setAttribute(名称, 值) 删除：removeAttribute(名称) 用className选择元素 如何用className选择元素 选出所有元素 通过className条件筛选 封装成函数 --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无标题文档</title> <script type="text/javascript"> window.onload = function() { var oUl = document.getElementById('ul1'); //IE || FF var oFirst = oUl.firstElementChild || oUl.firstChild; oFirst.style.background = 'red'; } </script> </head> <body> <ul id="ul1"> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html> <!-- firstChild/firstElementChild --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无标题文档</title> <script type="text/javascript"> window.onload=function () { var oLi=document.getElementById('li1'); oLi.previousSibling.style.background = 'red'; } </script> </head> <body> <ul id="ul1"> <li></li> <li></li> <li id='li1'>111</li> <li></li> <li></li> </ul> </body> </html> <!-- Uncaught TypeError: Cannot set property 'backgroundColor' of undefined --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无标题文档</title> <script type="text/javascript"> window.onload=function () { var oUl=document.getElementById('ul1'); var aLi=oUl.getElementsByTagName('li'); var i=0; for(i; i<aLi.length; i++) { if(aLi[i].className=='box') { aLi[i].style.background='red'; } } } </script> </head> <body> <ul id="ul1"> <li></li> <li></li> <li></li> <li class='box'></li> <li></li> <li class='box'></li> <li class='box'></li> <li></li> <li></li> <li></li> </ul> </body> </html> <!-- className --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无标题文档</title> <script type="text/javascript"> function getByClass(oParent, sClass) { var aEle=oParent.getElementsByTagName('*'); var aResult=[]; for(var i=0;i<aEle.length;i++) { if(aEle[i].className==sClass) { aResult.push(aEle[i]); } } return aResult; } window.onload=function () { var oUl=document.getElementById('ul1'); var aBox=getByClass(oUl, 'box'); var i=0; for(i; i<aLi.length; i++) { } } </script> </head> <body> <ul id="ul1"> <li></li> <li></li> <li></li> <li class='box'></li> <li></li> <li class='box'></li> <li class='box'></li> <li></li> <li></li> <li></li> </ul> </body> </html> <!-- className提取元素 -->
创建DOM元素
createElement(标签名) 创建一个节点
appendChild(节点) 追加一个节点
例子：为ul插入li
插入元素
insertBefore(节点, 原有节点) 在已有元素前插入
例子：倒序插入li
删除DOM元素
removeChild(节点) 删除一个节点
例子：删除li
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> window.onload=function () { var oBtn=document.getElementById('btn1'); var oUl=document.getElementById('ul1'); oBtn.onclick=function () { var oLi=document.createElement('li'); oUl.appendChild(oLi); } } </script> </head> <body> <input type="button" id="btn1" value="创建Li"> <ul id="ul1"> <li>aaa</li> </ul> </body> </html> <!-- appendChild --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> window.onload=function () { var oBtn=document.getElementById('btn1'); var oTxt=document.getElementById('txt1'); var oUl=document.getElementById('ul1'); oBtn.onclick=function () { var oLi=document.createElement('li'); oLi.innerHTML = oTxt.value; oUl.appendChild(oLi); } } </script> </head> <body> <input type="text" id="txt1"> <input type="button" id="btn1" value="创建Li"> <ul id="ul1"> <li>aaa</li> </ul> </body> </html> <!-- appendChild,get txt from input --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> window.onload=function () { var oTxt=document.getElementById('txt1'); var oBtn=document.getElementById('btn1'); var oUl=document.getElementById('ul1'); oBtn.onclick=function () { var oLi=document.createElement('li'); var aLi=document.getElementsByTagName('li'); oLi.innerHTML=oTxt.value; oUl.insertBefore(oLi, aLi[0]); } } </script> </head> <body> <input id="txt1" type="text"/> <input id="btn1" type="text" value="创建Li"/> <ul id="ul1"> <li>aaa</li> </ul> </body> </html> <!-- insertBefore this type should be button:<input id="btn1" type="text" value="创建Li"/> --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> window.onload=function () { var oTxt=document.getElementById('txt1'); var oBtn=document.getElementById('btn1'); var oUl=document.getElementById('ul1'); oBtn.onclick=function () { var oLi=document.createElement('li'); var aLi=document.getElementsByTagName('li'); oLi.innerHTML=oTxt.value; if(aLi.length==0) { oUl.appendChild(oLi); } else { oUl.insertBefore(oLi,aLi[0]); } } } </script> </head> <body> <input id="txt1" type="text"/> <input id="btn1" type="button" value="创建Li"/> <ul id="ul1"> </ul> </body> </html> <!-- if exists appendChild else insertBefore innerHTMl is got for value --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript"> window.onload=function () { var aA=document.getElmentByTag('a'); var oUl=document.getElementById('ul1'); var i=0; for(i=0;i<aA.length;i++) { aA[i].onclick=function() { oUl.removeChild(this.parentNode); } } } </script> </head> <body> <ul id="ul1"> <li>sdfsdf <a href="javascript:;">删除</a></li> <li>3432 <a href="javascript:;">删除</a></li> <li>tttt <a href="javascript:;">删除</a></li> <li>ww <a href="javascript:;">删除</a></li> </ul> </body> </html> <!-- ancestor.removeChild(parent) -->
文档碎片
文档碎片可以提高DOM操作性能(理论上)
文档碎片原理
document.createDocumentFragment()
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> window.onload=function () { var oBtn=document.getElementById('btn1'); var oUl=document.getElementById('ul1'); oBtn.onclick=function () { var iStart=new Date().getTime(); var i=0; for(i=0;i<100000;i++) { var oLi=document.createElement('li'); oUl.appendChild(oLi); } alert(new Date().getTime()-iStart); } } </script> </head> <body> <input type="button" id="btn1" value='普通'/> <ul id="ul1"></ul> </body> </html> <!-- getIntervalTime --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> window.onload=function () { var oBtn=document.getElementById('btn1'); var oUl=document.getElementById('ul1'); oBtn.onclick=function () { var iStart=new Date().getTime(); var oFrag=document.createDocumentFragment(); var i=0; for(i=0;i<100000;i++) { var oLi=document.createElement('li'); oFrag.appendChild(oLi); } oUl.appendChild(oFrag); alert(new Date().getTime()-iStart); } } </script> </head> <body> <input type="button" id="btn1" value='普通'/> <ul id="ul1"></ul> </body> </html> <!-- createDocumentFragment -->
BOM
1. window.open() 方法及相关参数
2. 运行代码框实例
3. document.write() 方法
4. about:blank 打开新窗口及返回值
5. close()关闭当前窗口及新开窗口特性
6. window.navigator.userAgent 检测浏览器版本
7. window.location 读写地址栏
8. 可社区尺寸、滚动距离
9. 系统对话框及返回值
10. 侧边栏广告实例
11. window.onscroll 事件及处理窗口变化等细节
12. 解决滚动条闪烁问题：固定定位与滑动效果
13. 返回顶部效果实例
14. 解决定时器与事件冲突的问题
<!-- 1. window.open() 方法及相关参数 window.open in BOM window.onload is needed http://www... not www... input label not button label _self presentPage _blank newPage --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> window.onload=function() { var oBtn=document.getElementById('id1'); oBtn.onclick=function() { window.open('http://www.miaov.com','_self'); } } </script> </head> <body> <input type="button" id="id1" value="open_window"> </body> </html> <!-- 2. 运行代码框实例 --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> window.onload=function() { var oTxt=document.getElementById('txt1'); var oBtn=document.getElementById('btn1'); oBtn.onclick=function() { var oNewWin=window.open('about:blank'); document.write(oTxt.value); } } </script> </head> <body> <textarea name="" id="txt1" cols="40" rows="10"></textarea><br /> <input type="button" id="btn1" value='运行'> </body> </html> <!-- 6. window.navigator.userAgent 检测浏览器版本 7. window.location 读写地址栏 window.location window.navigator.userAgent --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> alert(window.navigator.userAgent); alert(window.location); window.location='http://www.miaov.com/'; </script> </head> <body> </body> </html>
<!-- 侧边栏布局 --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #div1 {width: 100px;height: 100px;background: red;position: fixed;right: 0;top: 50%;margin-top: -50px;} </style> </head> <body style='2000px'> <div id="div1"></div> </body> </html> <!-- 侧边栏从顶端滚下来 --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title id='title'>Document</title> <style> #div1 {width:100px;height: 100px;background: red;position: absolute;right: 0;top: 0;} </style> <script src='move.js'></script> <script> window.onresize=window.onload=window.onscroll=function() { var oDiv=document.getElementById('div1'); var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; document.getElementById('title').innerHTML=scrollTop+' cl'+document.documentElement.clientHeight+' of'+oDiv.offsetHeight; var t=(document.documentElement.clientHeight-oDiv.offsetHeight)/2 //oDiv.style.top=scroll+t+'px'; startMove(oDiv, {top:scrollTop+t}); var b=confirm('Is it rainning today?'); var str=prompt('Please enter your name', 'blue'); } </script> </head> <body style='height:2000px;'> <div id="div1"></div> </body> </html>
js
/**
* @author miaov
*/
function getStyle(obj, attr)
{
if(obj.currentStyle)
{
return obj.currentStyle[attr];
}
else
{
return getComputedStyle(obj, false)[attr];
}
}
function startMove(obj, json, fn)
{
clearInterval(obj.timer);
obj.timer=setInterval(function (){
var bStop=true; //这一次运动就结束了——所有的值都到达了
for(var attr in json)
{
//1.取当前的值
var iCur=0;
if(attr=='opacity')
{
iCur=parseInt(parseFloat(getStyle(obj, attr))*100);
}
else
{
iCur=parseInt(getStyle(obj, attr));
}
//2.算速度
var iSpeed=(json[attr]-iCur)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
//3.检测停止
if(iCur!=json[attr])
{
bStop=false;
}
if(attr=='opacity')
{
obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
obj.style.opacity=(iCur+iSpeed)/100;
}
else
{
obj.style[attr]=iCur+iSpeed+'px';
}
}
if(bStop)
{
clearInterval(obj.timer);
if(fn)
{
fn();
}
}
}, 30)
}
功能：回到顶部按钮
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #btn1 {position: fixed;bottom: 0;right: 0;} </style> <script> window.onload=function() { var oBtn=document.getElementById('btn1'); var timer=null; var bSys=true; //用户拖动了滚动条? //移动的时候发生了滚动，用户在滚动就是第二次滚动 window.onscroll=function() { if(!bSys){ clearInterval(timer); } bSys=false; } //点击回到顶部，回到顶部之后关闭定时器 oBtn.onclick=function() { timer=setInterval(function() { var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; var iSpeed=Math.floor(-scrollTop/8); if(scrollTop==0) { clearInterval(timer); } bSys=true; document.documentElement.scrollTop=document.body.scrollTop=scrollTop+iSpeed; }, 30) } } </script> </head> <body style='height:2000px;'> 1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />21<br />22<br />23<br />24<br />25<br />26<br />27<br />28<br />29<br />30<br />31<br />32<br />33<br />34<br />35<br />36<br />37<br />38<br />39<br />40<br />41<br />42<br />43<br />44<br />45<br />46<br />47<br />48<br />49<br />50<br />51<br />52<br />53<br />54<br />55<br />56<br />57<br />58<br />59<br />60<br />61<br />62<br />63<br />64<br />65<br />66<br />67<br />68<br />69<br />70<br />71<br />72<br />73<br />74<br />75<br />76<br />77<br />78<br />79<br />80<br />81<br />82<br />83<br />84<br />85<br />86<br />87<br />88<br />89<br />90<br />91<br />92<br />93<br />94<br />95<br />96<br />97<br />98<br />99<br />100<br />101<br />102<br />103<br />104<br />105<br />106<br />107<br />108<br />109<br />110<br />111<br />112<br />113<br />114<br />115<br />116<br />117<br />118<br />119<br />120<br />121<br />122<br />123<br />124<br />125<br />126<br />127<br />128<br />129<br />130<br />131<br />132<br />133<br />134<br />135<br />136<br />137<br />138<br />139<br />140<br />141<br />142<br />143<br />144<br />145<br />146<br />147<br />148<br />149<br />150<br />151<br />152<br />153<br />154<br />155<br />156<br />157<br />158<br />159<br />160<br />161<br />162<br />163<br />164<br />165<br />166<br />167<br />168<br />169<br />170<br />171<br />172<br />173<br />174<br />175<br />176<br />177<br />178<br />179<br />180<br />181<br />182<br />183<br />184<br />185<br />186<br />187<br />188<br />189<br />190<br />191<br />192<br />193<br />194<br />195<br />196<br />197<br />198<br />199<br />200<br />201<br />202<br />203<br />204<br />205<br />206<br />207<br />208<br />209<br />210<br />211<br />212<br />213<br />214<br />215<br />216<br />217<br />218<br />219<br />220<br />221<br />222<br />223<br />224<br />225<br />226<br />227<br />228<br />229<br />230<br />231<br />232<br />233<br />234<br />235<br />236<br />237<br />238<br />239<br />240<br />241<br />242<br />243<br />244<br />245<br />246<br />247<br />248<br /> <input type="button" id="btn1" value="back_to_top"> </body> </html>
事件基础
事件基础（一） 1. 什么是事件对象 2. document对象范围 3. event事件对象、clientX、clientY 4. 事件对象的兼容性问题及解决方案 5. 事件冒泡原理 6. 取消事件冒泡：cancelBubble、弹出层实例 7. 跟随鼠标的DIV实例 事件基础（二） 1. 可视区坐标 2. 滚动条所滚动的距离：scrollTop 3. 滚动条所滚动的距离——解决谷歌浏览器兼容性问题 4. 跟随鼠标的DIV实例——消除滚动条的影响 5. 一串跟随鼠标的DIV实例 ——思考题：在鼠标不移动时，也能实现鼠标跟随 6. 键盘事件：onkeydown、keyCode 7. 用键盘来控制DIV移动实例 ——思考题：如何消除不卡顿的DIV移动 8. 提交留言实例——ctrl+回车的提交方式
<!-- 1. 什么是事件对象 用来获取事件的详细信息：鼠标位置、键盘按键 例子：获取鼠标位置：clientX document的本质：document.childNodes[0].tagName怎么理解？ FF:ev IE:event 获取鼠标位置：clientX arguments.callee 在哪一个函数中运行，它就代表哪个函数 (function(n){ if(n > 1) return n* arguments.calle(n-1); return n; })(10); --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <script> document.onclick=function(ev) { var oEvent=ev||event; alert(oEvent.clientX+', '+oEvent.clientY); } </script> <body> </body> </html> <!-- 事件冒泡 事件捕获 --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div style='300px;height:300px;background:red;' onclick='alert(this.style.background)'> <div style='200px;height:200px;background:green;' onclick='alert(this.style.background)'> <div style='100px;height:100px;background:#ccc;' onclick='alert(this.style.background)'></div> </div> </div> </body> </html> <!-- offset --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #div1 { 100px;height: 100px;background: red;border: 1px solid black;padding: 10px;margin: 20px;position: absolute;left: 100px;top: 100px;} </style> <script> window.onload=function() { var oDiv=document.getElementById('div1'); alert(oDiv.offsetLeft);//m20+l100=120 } </script> </head> <body> <div id="div1"></div> </body> </html> <!-- keycode --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> document.onkeydown=function(ev) { var oEvent=ev||event; alert(oEvent.keyCode); } </script> </head> <body> </body> </html> <!-- 可视区距离scrollTop --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> document.onclick=function() { /*alert(document.documentElement.scrollTop);//非chrome alert(document.body.scrollTop);//chrome*/ var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; } </script> </head> <body> </body> </html>
鼠标事件 键盘事件
<!-- 6. 取消事件冒泡：cancelBubble、弹出层实例 oEvent.cancelBubble not cancelBuble --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #div1 { 100px;height: 150px;background: #ccc;display: none;} </style> <script> window.onload=function() { var oBtn=document.getElementById('btn1'); var oDiv=document.getElementById('div1'); oBtn.onclick=function(ev) { var oEvent=ev||event; oDiv.style.display='block'; alert('btn doing') oEvent.cancelBubble=true; } document.onclick=function() { oDiv.style.display='none'; alert('page doing'); } } </script> </head> <body> <input type="button" id="btn1" value="show"> <div id="div1"></div> </body> </html> <!-- 7. 用键盘来控制DIV移动实例 left只读，字符串‘8px’ offsetLeft读写，数字28 ，js中通过style只能来操控行间元素。你要引用外部样式表中的属性，就不能通过style来取值 要想获取非行内样式可以试试下面的方法 function getStyle(obj, name) { if(obj.currentStyle) { return obj.currentStyle[name];//兼容ie版本 } else { return getComputedStyle(obj, false)[name];//兼容FF和谷歌版本 } } window.onload=function () { var oDiv=document.getElementById('div1'); alert(getStyle(oDiv, 'offsetLeft')); }; <div id="div1"> </div> --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #div1 { 100px;height: 100px;background: #ccc;position: absolute;} </style> <script> document.onkeydown=function(ev) { var oEvent=ev||event; var oDiv=document.getElementById('div1'); // alert(oEvent.keyCode);//←37 →39 if(oEvent.keyCode==37) { oDiv.style.left=oDiv.offsetLeft-10+'px'; } else if(oEvent.keyCode==39) { oDiv.style.left=oDiv.offsetLeft+10+'px'; } } </script> </head> <body> <div id="div1"></div> </body> </html>
跟随鼠标移动的div
<!--跟随鼠标移动的div oEvent.clientX --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #div1 { 100px;height: 100px;background: red;position: absolute;} </style> <script> document.onmousemove=function (ev) { var oEvent=ev||event; var oDiv=document.getElementById('div1'); oDiv.style.left=oEvent.clientX+'px'; oDiv.style.top=oEvent.clientY+'px'; } </script> </head> <body> <div id="div1"></div> </body> </html> <!--跟随鼠标移动的div2 --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #div1 { 100px;height: 100px;background: red;position: absolute;} </style> <script> document.onmousemove=function (ev) { var oEvent=ev||event; var oDiv=document.getElementById('div1'); var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft; oDiv.style.left=oEvent.clientX+scrollLeft+'px'; oDiv.style.top=oEvent.clientY+scrollTop+'px'; } </script> </head> <body> <div id="div1"></div> </body> </html> <!-- 一串 --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { 100px;height: 100px;background: red;position: absolute;} </style> <script> window.onload=function () { var aDiv=document.getElementsByTagName('div'); var i=0; document.onmousemove=function (ev) { var oEvent=ev||event; for(i=aDiv.length-1;i>0;i--) { aDiv[i].style.left=aDiv[i-1].style.left; aDiv[i].style.top=aDiv[i-1].style.top; } aDiv[0].style.left=oEvent.clientX+'px'; aDiv[0].style.top=oEvent.clientY+'px'; } } </script> </head> <body> <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div> </body> </html>
ctrl+enter提交
<!-- 8. 提交留言实例——ctrl+回车的提交方式 --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> window.onload=function() { var oBtn=document.getElementById('btn1'); var oTxt1=document.getElementById('txt1'); var oTxt2=document.getElementById('txt2'); oBtn.onclick=function() { oTxt1.value+=oTxt2.value+' '; oTxt2.value=''; }; oTxt2.onkeydown=function (ev) { var oEvent=ev||event; if(oEvent.ctrlKey&&oEvent.keyCode==13) { oTxt1.value+=oTxt2.value+' '; oTxt2.value=''; } } } </script> </head> <body> <textarea name="" id="txt1" cols="40" rows="10"></textarea> <input type="text" id="txt2"> <input type="button" id="btn1" value="message"> </body> </html>
事件中级 1. 什么是事件的默认行为 2. 上下文菜单：oncontextmenu 3. 文本框内禁止输入内容实例 4. 自定义右键菜单实例 5. 只能输入数字的输入框实例：onkeydown、onkeyup 6. 拖拽实例：拖拽原理、三个事件、document范围、解决FF的bug 7. 限制拖拽范围的条件：document.documentElement.clientWidth
<!-- 2. 上下文菜单：oncontextmenu 取消右键，not ontextmenu --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> document.oncontextmenu=function () { return true; }; </script> </head> <body> </body> </html> <!-- 组织表单提交 --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> window.onload=function () { var oForm=document.getElementById('form1'); oForm.onsubmit=function () { return false; }; } </script> </head> <body> <form action="http://www.miaov.com/" id="form1"> <input type="submit"> </form> </body> </html> <!-- clientWidth --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> document.onclick=function () { alert(document.documentElement.clientWidth); }; </script> </head> <body> </body> </html> <!-- 5. 只能输入数字的输入框实例：onkeydown、onkeyup --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> window.onload=function () { var oTxt=document.getElementById('txt1'); oTxt.onkeydown=function (ev) { var oEvent=ev||event; //0 48 //9 57 //退格 8 if(oEvent.keyCode!=8 && (oEvent.keyCode<48 || oEvent.keyCode>57)) { return false; } } } </script> </head> <body> <input type="text" id="txt1"> </body> </html> <!-- 5. 只能输入数字的输入框实例：onkeydown、onkeyup --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> document.oncontextmenu=function (ev) { var oEvent=ev||event; var oUl=document.getElementById('ul1'); oUl.style.display='block'; oUl.style.left=oEvent.clientX+'px'; oUl.style.top=oEvent.clientY+'px'; return false; } document.onclick=function () { var oUl=document.getElementById('ul1'); oUl.style.display='none'; } </script> </head> <body> <ul id="ul1" style='position: absolute;'> <li>登陆</li> <li>回到首页</li> <li>注销</li> <li>加入VIP</li> </ul> </body> </html>
拖拽
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #div1 { 100px;height: 100px;background: red;position: absolute;} </style> <script> window.onload=function () { var oDiv=document.getElementById('div1'); var disX=0; var disY=0; oDiv.onmousedown=function (ev) { var oEvent=ev||event; disX=oEvent.clientX-oDiv.offsetLeft; disY=oEvent.clientY-oDiv.offsetTop; oDiv.onmousemove=function (ev) { var oEvent=ev||event; var l=oEvent.clientX-disX; var t=oEvent.clientY-disY; if(l<0) { l=0; } else if(l>document.documentElement.clientWidth-oDiv.offsetWidth) { l=document.documentElement.clientWidth-oDiv.offsetWidth; } if(t<0) { t=0; } else if(t>document.documentElement.clientHeight-oDiv.offsetHeight) { t=document.documentElement.clientHeight-oDiv.offsetHeight; } oDiv.style.left=l+'px'; oDiv.style.top=t+'px'; } oDiv.onmouseup=function () { oDiv.onmousemove=null; oDiv.onmouseup=null; } return false; } } </script> </head> <body> <input id='div1'> </body> </html>
cookie
1. 什么是 cookie、cookie 特性 2. js 中的 cookie：设置 document.cookie 3. cookie 不会覆盖 4. cookie 过期时间：expires、setDate 5. 封装设置 cookie 函数 6. 封装获取 cookie 函数 7. 封装删除 cookie 函数 8. cookie 接合拖拽实例 9. cookie 记录用户名实例
记录用户名
<!-- 4. cookie 过期时间：expires、setDate cookie是用'; '不是';'隔开的 setCookie、getCookie、removeCookie cookie一个一个添加，每个单独添加期限 --> <!doctype html> <html> <head> <title>无标题文档</title> <script> function setCookie(name, value, iDay) { var oDate=new Date(); oDate.setDate(oDate.getDate()+iDay); document.cookie=name+'='+value+';expires='+oDate; } function getCookie(name) { //'username=abc; password=123456;' alert(document.cookie) var arr=document.cookie.split('; '); //match for(var i=0;i<arr.length;i++) { var arr2=arr[i].split('='); if(arr2[0]==name) { return arr2[1]; } } //no match return ''; } function removeCookie(name) { setCookie(name,'1',-1); } setCookie('username', 'abc', 30); setCookie('password', '123456', 300); setCookie('aaa', '123', 300); alert(getCookie('username')); removeCookie('username'); alert(getCookie('username')); /* var oDate=new Date(); oDate.setDate(oDate.getDate()+30); document.cookie='user=tab;expires='+oDate; document.cookie='pass=123'; alert(document.cookie);*/ </script> </head> <body> </body> </html>
结合拖拽
<!-- cookie結合拖拽 --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> function setCookie(name, value, iDay) { var oDate=new Date(); oDate.setDate(oDate.getDate()+iDay); document.cookie=name+'='+value+';expires='+oDate; } function getCookie(name) { var arr=document.cookie.split('; '); //found for(var i=0;i<arr.length;i++) { var arr2=arr[i].split('='); if(arr2[0]==name) { return arr2[1]; } } //not found return ''; } function removeCookie(name) { setCookie(name, '1', -1); } window.onload=function() { var oDiv=document.getElementById('div1'); oDiv.onmousedown=function(ev) { var oEvent=ev||event; var disX=oEvent.clientX-oDiv.offsetLeft; var disY=oEvent.clientY-oDiv.offsetTop; document.onmousemove=function(ev) { oDiv.style.left=oEvent.clientX-disX+'px'; oDiv.style.top=oEvent.clientY-disY+'px'; } document.onmouseup=function() { document.onmousemove=null; document.onmouseup=null; setCookie('x', oDiv.offsetLeft, 5); setCookie('y', oDiv.offsetTop, 5); } return false; } } </script> </head> <body> <div id="div1"></div> </body> </html>